設定画面のヘッダーを一斉変更

components/atom/SheetHeaderItem.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from "react";
+import { View, Text, TouchableOpacity, TextStyle } from "react-native";
+
+type Props = {
+  LeftItem?: SideItemProps;
+  RightItem?: SideItemProps;
+  title: string;
+};
+
+const textStyle: TextStyle = {
+  fontSize: 20,
+  fontWeight: "bold",
+  color: "white",
+  padding: 10,
+  textAlignVertical: "center",
+};
+export const SheetHeaderItem: FC<Props> = (props) => {
+  const { LeftItem, RightItem, title } = props;
+  return (
+    <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
+      <View style={{ flex: 1 }}>
+        {LeftItem ? <SideItem {...LeftItem} position="left" /> : <></>}
+      </View>
+      <Text style={{ textAlign: "center",...textStyle }}>{title}</Text>
+      <View style={{ flex: 1 }}>
+        {RightItem ? <SideItem {...RightItem} position="right" /> : <></>}
+      </View>
+    </View>
+  );
+};
+
+type SideItemProps = {
+  onPress: () => void;
+  title: string;
+  position: "left" | "right";
+};
+const SideItem: FC<SideItemProps> = ({ onPress, title, position }) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={{ flexDirection: "column", flex: 1 }}
+    >
+      <View style={{ flex: 1 }} />
+      <Text style={{ textAlign: position, ...textStyle }}>{title}</Text>
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};