スイッチボックスをコンポーネント分離整理

components/発車時刻表/LED_Vision_Component/SwitchBox.js

@@ -0,0 +1,25 @@
+import { Text } from "react-native";
+import { Switch } from "react-native-elements";
+import { AS } from "../../../storageControl";
+export const SwitchBox = (props) => {
+  const { value, setValue, setKey, title } = props;
+  const textStyle = {
+    alignItems: "center",
+    alignContent: "center",
+    textAlign: "center",
+    textAlignVertical: "center",
+    color: "white",
+  };
+  return (
+    <>
+      <Text style={textStyle}>{title}</Text>
+      <Switch
+        value={value}
+        onValueChange={(v) => {
+          AS.setItem(setKey, v.toString());
+          setValue(v);
+        }}
+      />
+    </>
+  );
+};

components/発車時刻表/LED_vidion.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
-import { Switch } from "react-native-elements";
 import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import LottieView from "lottie-react-native";
 import { Ionicons } from "@expo/vector-icons";
@@ -14,6 +13,7 @@ import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
 import { useAreaInfo } from "../../stateBox/useAreaInfo";
 import { SheetManager } from "react-native-actions-sheet";
 import { AS } from "../../storageControl";
+import { SwitchBox } from "./LED_Vision_Component/SwitchBox";
 
 /**
  *
@@ -86,15 +86,7 @@ export default function LED_vision(props) {
       }
     });
     setStationDiagram(returnData);
-    if (
-      station.some((s) => {
-        return areaStationID.includes(s.StationNumber);
-      })
-    ) {
-      setIsInfoArea(true);
-    } else {
-      setIsInfoArea(false);
-    }
+    setIsInfoArea(station.some((s) => areaStationID.includes(s.StationNumber)));
   }, [trainDiagram, station]);
 
   const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);
@@ -217,14 +209,16 @@ export default function LED_vision(props) {
       <Header getCurrentTrain={getCurrentTrain} />
       {selectedTrain.map((d) => (
         <EachData
-          d={d}
-          trainIDSwitch={trainIDSwitch}
-          trainDescriptionSwitch={trainDescriptionSwitch}
+          {...{
+            d,
+            trainIDSwitch,
+            trainDescriptionSwitch,
+            customTrainDataDetector,
+            navigate,
+            originalStationList,
+            openStationACFromEachTrainInfo,
+          }}
           station={station[0]}
-          customTrainDataDetector={customTrainDataDetector}
-          navigate={navigate}
-          originalStationList={originalStationList}
-          openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
         />
       ))}
       {areaString != "" && isInfoArea && (
@@ -300,56 +294,44 @@ const Footer = (props) => {
     setFinalSwitch,
   } = props;
 
-  const textStyle = {
-    alignItems: "center",
-    alignContent: "center",
-    textAlign: "center",
-    textAlignVertical: "center",
-    color: "white",
-  };
 
   return (
     <View style={{ flexDirection: "row", padding: 10, alignItems: "center" }}>
-      <Text style={textStyle}>種別名 / 列番</Text>
-      <Switch
+      <SwitchBox
         value={trainIDSwitch}
-        onValueChange={(value) => {
-          AS.setItem("LEDSettings/trainIDSwitch", value.toString());
-          setTrainIDSwitch(value);
-        }}
+        setValue={setTrainIDSwitch}
+        setKey="LEDSettings/trainIDSwitch"
+        title="種別名 / 列番"
       />
       <View style={{ flex: 1 }} />
-      <Text style={textStyle}>列車情報</Text>
-      <Switch
+      <SwitchBox
         value={trainDescriptionSwitch}
-        onValueChange={(value) => {
-          AS.setItem("LEDSettings/trainDescriptionSwitch", value.toString());
-          setTrainDescriptionSwitch(value);
-        }}
+        setValue={setTrainDescriptionSwitch}
+        setKey="LEDSettings/trainDescriptionSwitch"
+        title="列車情報"
       />
       <View style={{ flex: 1 }} />
-      <Text style={textStyle}>当駅止表示</Text>
-      <Switch
+      <SwitchBox
         value={finalSwitch}
-        onValueChange={(value) => {
-          AS.setItem("LEDSettings/finalSwitch", value.toString());
-          setFinalSwitch(value);
-        }}
+        setValue={setFinalSwitch}
+        setKey="LEDSettings/finalSwitch"
+        title="当駅止表示"
       />
     </View>
   );
 };
 
-const EachData = ({
-  d,
-  trainIDSwitch,
-  trainDescriptionSwitch,
-  station,
-  customTrainDataDetector,
-  navigate,
-  originalStationList,
-  openStationACFromEachTrainInfo,
-}) => {
+const EachData = (props) => {
+  const {
+    d,
+    trainIDSwitch,
+    trainDescriptionSwitch,
+    station,
+    customTrainDataDetector,
+    navigate,
+    originalStationList,
+    openStationACFromEachTrainInfo,
+  } = props;
   const { currentTrain } = useCurrentTrain();
   const openTrainInfo = (d) => {
     let TrainNumber = "";