コンポーネント整理

app.json

@@ -3,10 +3,7 @@
     "name": "JR四国運行状況",
     "slug": "jrshikoku",
     "privacy": "public",
-    "platforms": [
-      "ios",
-      "android"
-    ],
+    "platforms": ["ios", "android"],
     "plugins": [
       [
         "react-native-android-widget",
@@ -15,8 +12,8 @@
             {
               "name": "JR_shikoku_train_info",
               "label": "JR四国列車遅延速報EX",
-              "minWidth": "320dp",
-              "minHeight": "120dp",
+              "minWidth": "70dp",
+              "minHeight": "50dp",
               "description": "JR四国列車遅延速報EXのウィジェットです。30分ごとに自動更新します。タッチすると強制更新します。",
               "previewImage": "./assets/icon.png",
               "updatePeriodMillis": 1800000,
@@ -39,9 +36,7 @@
       "fallbackToCacheTimeout": 0,
       "url": "https://u.expo.dev/398abf60-57a7-11e9-970c-8f04356d08bf"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "buildNumber": "31",
       "supportsTablet": true,
@@ -57,18 +52,13 @@
         ]
       },
       "entitlements": {
-        "com.apple.developer.nfc.readersession.formats": [
-          "TAG"
-        ]
+        "com.apple.developer.nfc.readersession.formats": ["TAG"]
       }
     },
     "android": {
       "package": "jrshikokuinfo.xprocess.hrkn",
       "versionCode": 20,
-      "permissions": [
-        "ACCESS_FINE_LOCATION",
-        "NFC"
-      ],
+      "permissions": ["ACCESS_FINE_LOCATION", "NFC"],
       "googleServicesFile": "./google-services.json",
       "config": {
         "googleMaps": {

components/AndroidWidget/TraInfoEXWidget.jsx

@@ -5,7 +5,7 @@ import {
   ListWidget,
 } from "react-native-android-widget";
 
-export function HelloWidget({ time, delayString }) {
+export function TraInfoEXWidget({ time, delayString }) {
   return (
     <FlexWidget
       style={{

components/AndroidWidget/widget-task-handler.jsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { HelloWidget } from "./HelloWidget";
+import { TraInfoEXWidget } from "./TraInfoEXWidget";
 import dayjs from "dayjs";
 import { ToastAndroid } from "react-native";
 
 const nameToWidget = {
   // Hello will be the **name** with which we will reference our widget.
-  JR_shikoku_train_info: HelloWidget,
+  JR_shikoku_train_info: TraInfoEXWidget,
 };
 
 export async function widgetTaskHandler(props) {
@@ -30,25 +30,16 @@ export async function widgetTaskHandler(props) {
   switch (props.widgetAction) {
     case "WIDGET_ADDED":
     case "WIDGET_UPDATE":
-    // Not needed for now
     case "WIDGET_CLICK":
-    // Not needed for now
     case "WIDGET_RESIZED":
       // Not needed for now
       props.renderWidget(<Widget time={time} delayString={delayString} />);
 
       break;
 
-      break;
-
-      break;
-
     case "WIDGET_DELETED":
       // Not needed for now
       break;
-
-      break;
-
     default:
       break;
   }

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())}
+  />
+);