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

components/Settings/FavoriteSettings.js

@@ -4,51 +4,17 @@ import { useNavigation } from "@react-navigation/native";
 import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
 import { CheckBox } from "react-native-elements";
 import { FavoriteSettingsItem } from "./FavoliteSettings/FavoiliteSettingsItem";
+import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
 
 export const FavoriteSettings = () => {
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
   const { goBack } = useNavigation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity
-            onPress={goBack}
-            style={{
-              flexDirection: "column",
-              flex: 1,
-            }}
-          >
-            <View style={{ flex: 1 }} />
-            <Text
-              style={{
-                fontSize: 20,
-                fontWeight: "bold",
-                textAlign: "left",
-                textAlignVertical: "center",
-                color: "white",
-                padding: 10,
-              }}
-            >
-              ＜ 設定
-            </Text>
-            <View style={{ flex: 1 }} />
-          </TouchableOpacity>
-        </View>
-
-        <Text
-          style={{
-            fontSize: 20,
-            fontWeight: "bold",
-            textAlign: "center",
-            color: "white",
-            padding: 10,
-          }}
-        >
-          お気に入り設定
-        </Text>
-        <View style={{ flex: 1 }}></View>
-      </View>
+      <SheetHeaderItem
+        title="お気に入り設定"
+        LeftItem={{ title: "＜ 設定", onPress: goBack }}
+      />
       <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
         {favoriteStation.map((currentStation, index, array) => (
           <FavoriteSettingsItem