コンポーネント整理

components/settings.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useLayoutEffect } from "react";
 import { View, Text, TouchableOpacity, Linking } from "react-native";
 import * as ExpoFelicaReader from "../modules/expo-felica-reader/src";
 import * as Updates from "expo-updates";
@@ -17,11 +17,7 @@ export default function Setting(props) {
   const [usePDFView, setUsePDFView] = useState(false);
   const [trainMenu, setTrainMenu] = useState(false);
   const [trainPosition, setTrainPosition] = useState(false);
-  const testNFC = async () => {
-    const resulit = await ExpoFelicaReader.scan();
-    alert(resulit);
-  };
-  useEffect(() => {
+  useLayoutEffect(() => {
     AS.getItem("iconSwitch").then(setIconSetting);
     AS.getItem("mapSwitch").then(setMapSwitch);
     AS.getItem("stationSwitch").then(setStationMenu);
@@ -29,6 +25,22 @@ export default function Setting(props) {
     AS.getItem("trainSwitch").then(setTrainMenu);
     AS.getItem("trainPositionSwitch").then(setTrainPosition);
   }, []);
+  const testNFC = async () => {
+    const resulit = await ExpoFelicaReader.scan();
+    alert(resulit);
+  };
+  const updateAndReload = () => {
+    Promise.all([
+      AS.setItem("iconSwitch", iconSetting.toString()),
+      AS.setItem("mapSwitch", mapSwitch.toString()),
+      AS.setItem("stationSwitch", stationMenu.toString()),
+      AS.setItem("usePDFView", usePDFView.toString()),
+      AS.setItem("trainSwitch", trainMenu.toString()),
+      AS.setItem("trainPositionSwitch", trainPosition.toString()),
+    ]).then(() => {
+      Updates.reloadAsync();
+    });
+  };
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <View style={{ flex: 1, backgroundColor: "white" }}>
@@ -59,10 +71,10 @@ export default function Setting(props) {
               列車アイコンを表示する
             </Text>
             <View style={{ flex: 1 }} />
-            <Switch
-              value={iconSetting == "true" ? true : false}
-              color={iconSetting == "true" ? "red" : null}
-              onValueChange={(value) => setIconSetting(value.toString())}
+            <SimpleSwitch
+              bool={iconSetting}
+              setBool={setIconSetting}
+              color="red"
             />
           </View>
           <View style={{ flexDirection: "row", padding: 10 }}>
@@ -78,11 +90,7 @@ export default function Setting(props) {
               マップを表示する(beta)
             </Text>
             <View style={{ flex: 1 }} />
-            <Switch
-              value={mapSwitch == "true" ? true : false}
-              color={mapSwitch == "true" ? "red" : null}
-              onValueChange={(value) => setMapSwitch(value.toString())}
-            />
+            <SimpleSwitch bool={mapSwitch} setBool={setMapSwitch} color="red" />
           </View>
           <View style={{ flexDirection: "row", padding: 10 }}>
             <Text
@@ -97,10 +105,10 @@ export default function Setting(props) {
               駅メニューを表示
             </Text>
             <View style={{ flex: 1 }} />
-            <Switch
-              value={stationMenu == "true" ? true : false}
-              color={stationMenu == "true" ? "red" : null}
-              onValueChange={(value) => setStationMenu(value.toString())}
+            <SimpleSwitch
+              bool={stationMenu}
+              setBool={setStationMenu}
+              color="red"
             />
           </View>
           <View style={{ flexDirection: "row", padding: 10 }}>
@@ -116,10 +124,10 @@ export default function Setting(props) {
               時刻表PDFをアプリ外で表示
             </Text>
             <View style={{ flex: 1 }} />
-            <Switch
-              value={usePDFView == "true" ? true : false}
-              color={usePDFView == "true" ? "red" : null}
-              onValueChange={(value) => setUsePDFView(value.toString())}
+            <SimpleSwitch
+              bool={usePDFView}
+              setBool={setUsePDFView}
+              color="red"
             />
           </View>
           <View style={{ flexDirection: "row", padding: 10 }}>
@@ -135,11 +143,7 @@ export default function Setting(props) {
               列車メニュー
             </Text>
             <View style={{ flex: 1 }} />
-            <Switch
-              value={trainMenu == "true" ? true : false}
-              color={trainMenu == "true" ? "red" : null}
-              onValueChange={(value) => setTrainMenu(value.toString())}
-            />
+            <SimpleSwitch bool={trainMenu} setBool={setTrainMenu} color="red" />
           </View>
           <View style={{ flexDirection: "row", padding: 10 }}>
             <Text
@@ -154,10 +158,10 @@ export default function Setting(props) {
               →列車現在位置表示(alpha)
             </Text>
             <View style={{ flex: 1 }} />
-            <Switch
-              value={trainPosition == "true" ? true : false}
-              color={trainPosition == "true" ? "red" : null}
-              onValueChange={(value) => setTrainPosition(value.toString())}
+            <SimpleSwitch
+              bool={trainPosition}
+              setBool={setTrainPosition}
+              color="red"
             />
           </View>
           <View style={{ flexDirection: "row", padding: 10 }}>
@@ -176,7 +180,7 @@ export default function Setting(props) {
           </View>
           <TouchableOpacity
             style={{ flexDirection: "row", padding: 10 }}
-            onPress={() => testNFC()}
+            onPress={testNFC}
           >
             <Text
               style={{
@@ -224,18 +228,7 @@ export default function Setting(props) {
           borderRadius: 5,
           alignItems: "center",
         }}
-        onPress={() => {
-          Promise.all([
-            AS.setItem("iconSwitch", iconSetting.toString()),
-            AS.setItem("mapSwitch", mapSwitch.toString()),
-            AS.setItem("stationSwitch", stationMenu.toString()),
-            AS.setItem("usePDFView", usePDFView.toString()),
-            AS.setItem("trainSwitch", trainMenu.toString()),
-            AS.setItem("trainPositionSwitch", trainPosition.toString()),
-          ]).then(() => {
-            Updates.reloadAsync();
-          });
-        }}
+        onPress={updateAndReload}
       >
         <View style={{ flex: 1 }} />
         <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
@@ -246,3 +239,10 @@ export default function Setting(props) {
     </View>
   );
 }
+const SimpleSwitch = ({ bool, setBool, color }) => (
+  <Switch
+    value={bool == "true" ? true : false}
+    color={bool == "true" ? color : null}
+    onValueChange={(value) => setBool(value.toString())}
+  />
+);