Merge commit '06ba5fe1de80ea3af33315956d9bae3db43b0281' into develop

StatusbarDetect.tsx

@@ -1,10 +1,12 @@
-import React from "react";
+import React, { FC } from "react";
 import { Platform, StatusBar, View } from "react-native";
 
-export default function StatusbarDetect() {
+const StatusbarDetect: FC = () => {
   if (Platform.OS == "ios") {
     return <StatusBar barStyle="dark-content" />;
   } else if (Platform.OS == "android") {
     return <View />;
   }
-}
+};
+
+export default StatusbarDetect;

Top.js

@@ -3,7 +3,6 @@ import {
   createStackNavigator,
   TransitionPresets,
 } from "@react-navigation/stack";
-import { getStationList2 } from "./lib/getStationList2";
 import Apps from "./components/Apps";
 import TrainBase from "./components/trainbaseview";
 import HowTo from "./howto";
@@ -29,7 +28,6 @@ export const Top = ({ navigationRef }) => {
     return unsubscribe;
   }, [{ navigate, addListener }]);
 
-
   const goToTrainMenu = () => {
     if (navigationRef.current?.getCurrentRoute().name == "Apps") {
       if (mapSwitch == "true") {

components/ActionSheetComponents/EachTrainInfo/TrainDataView.js

@@ -5,7 +5,6 @@ import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientati
 import { getStationList2 } from "../../../lib/getStationList2";
 import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
 import { SheetManager } from "react-native-actions-sheet";
-import { useNavigation } from "@react-navigation/native";
 
 export const TrainDataView = ({
   currentTrainData,

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -33,6 +33,7 @@ import { openBackTrainInfo } from "../../lib/eachTrainInfoCoreLib/openBackTrainI
 import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain";
 import { useTrainMenu } from "../../stateBox/useTrainMenu";
 import { HeaderText } from "./EachTrainInfoCore/HeaderText";
+import { useStationList } from "../../stateBox/useStationList";
 
 export const EachTrainInfoCore = ({
   actionSheetRef,
@@ -43,7 +44,8 @@ export const EachTrainInfoCore = ({
 }) => {
   // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
   const { currentTrain } = useCurrentTrain();
-  const { setTrainInfo, originalStationList } = useTrainMenu();
+  const { originalStationList } = useStationList();
+  const { setTrainInfo } = useTrainMenu();
   const [currentTrainData, setCurrentTrainData] = useState();
 
   // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);

components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx

@@ -58,7 +58,7 @@ export const HeaderText: FC<Props> = ({
   }, [data.limited, trainData]);
   return (
     <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
-      <TrainIconStatus {...{ data, navigate, from }}/>
+      <TrainIconStatus {...{ data, navigate, from}}/>
       <Text style={textConfig}>{trainName}</Text>
       <View style={{ flex: 1 }} />
       <Text style={textConfig}>

components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx

@@ -72,7 +72,7 @@ export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
           onPress={() => {
             navigate("howto", {
               info: "https://www.jr-eki.com/aptrain/index.html",
-              goTo: from,
+              goTo: from == "LED" ? "menu" : from,
             });
             SheetManager.hide("EachTrainInfo");
           }}

components/AllTrainDiagramView.js

@@ -12,19 +12,13 @@ import {
 import { useAllTrainDiagram } from "../stateBox/useAllTrainDiagram";
 
 import { customTrainDataDetector } from "./custom-train-data";
-import { getStationList } from "../lib/getStationList";
 import { getTrainType } from "../lib/getTrainType";
 import { SheetManager } from "react-native-actions-sheet";
 import { useNavigation } from "@react-navigation/native";
-import { useTrainMenu } from "../stateBox/useTrainMenu";
+import { BigButton } from "./atom/BigButton";
 export default function AllTrainDiagramView() {
   const { navigate } = useNavigation();
-  const { allTrainDiagram } = useAllTrainDiagram();
+  const { keyList } = useAllTrainDiagram();
-  const [keyList, setKeyList] = useState(); // 第二要素
-  useEffect(
-    () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)),
-    []
-  );
   const [input, setInput] = useState(""); // 文字入力
   const [keyBoardVisible, setKeyBoardVisible] = useState(false);
 
@@ -50,13 +44,10 @@ export default function AllTrainDiagramView() {
         parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
       TrainNumber = timeInfo + "号";
     }
+    const type = getTrainType(train.type).data;
+    const limited = `${type}:${train.trainName}${TrainNumber}`;
     const payload = {
-      data: {
+      data: { trainNum: d, limited },
-        trainNum: d,
-        limited: `${getTrainType(train.type).data}:${
-          train.trainName
-        }${TrainNumber}`,
-      },
       navigate,
       from: "AllTrainIDList",
     };
@@ -69,11 +60,9 @@ export default function AllTrainDiagramView() {
       <FlatList
         style={{ flex: 1 }}
         data={keyList?.filter((d) => d.includes(input))}
-        renderItem={({ item }) => (
+        renderItem={({ item }) => <Item {...{ openTrainInfo, id: item }} />}
-          <Item openTrainInfo={openTrainInfo} id={item} />
-        )}
         keyExtractor={(item) => item}
-        initialNumToRender={100}
+        //initialNumToRender={100}
       />
       <KeyboardAvoidingView
         behavior="padding"
@@ -95,39 +84,22 @@ export default function AllTrainDiagramView() {
         >
           <TextInput
             placeholder="列番を入力してフィルタリングします。"
-            onFocus={() => {
+            onFocus={() => setKeyBoardVisible(true)}
-              setKeyBoardVisible(true);
-            }}
             onEndEditing={() => {}}
-            onChange={(ret) => {
+            onChange={(ret) => setInput(ret.nativeEvent.text)}
-              setInput(ret.nativeEvent.text);
-            }}
             value={input}
             style={{ flex: 1 }}
           />
         </View>
       </KeyboardAvoidingView>
-
+      <BigButton
-      <TouchableOpacity
+        onPress={() => navigate("menu")}
+        string="閉じる"
         style={{
-          padding: 10,
-          flexDirection: "row",
-          borderColor: "white",
-          borderWidth: 1,
-          margin: 10,
-          borderRadius: 5,
-          alignItems: "center",
           display:
             Platform.OS === "ios" ? "flex" : keyBoardVisible ? "none" : "flex",
         }}
-        onPress={() => navigate("menu")}
+      />
-      >
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
     </View>
   );
 }

components/Apps.js

@@ -22,6 +22,7 @@ import { NewMenu } from "./Apps/NewMenu";
 import { MapsButton } from "./Apps/MapsButton";
 import { ReloadButton } from "./Apps/ReloadButton";
 import { LandscapeBackButton } from "./Apps/LandscapeBackButton";
+import { useStationList } from "../stateBox/useStationList";
 /* 
 import StatusbarDetect from '../StatusbarDetect';
 var Status = StatusbarDetect(); */
@@ -34,13 +35,9 @@ export default function Apps() {
   const { navigate } = useNavigation();
   const { isLandscape } = useDeviceOrientationChange();
   const handleLayout = () => {};
-  const {
+  const { originalStationList } = useStationList();
-    setInjectJavaScript,
+  const { setInjectJavaScript, mapSwitch, trainInfo, setTrainInfo } =
-    mapSwitch,
+    useTrainMenu();
-    trainInfo,
-    setTrainInfo,
-    originalStationList,
-  } = useTrainMenu();
 
   const openStationACFromEachTrainInfo = async (stationName) => {
     await SheetManager.hide("EachTrainInfo");

components/Apps/WebView.jsx

@@ -12,17 +12,18 @@ import { SheetManager } from "react-native-actions-sheet";
 import { useNavigation } from "@react-navigation/native";
 import { useTrainMenu } from "../../stateBox/useTrainMenu";
 import { stationNamePair } from "../../lib/getStationList2";
+import { useStationList } from "../../stateBox/useStationList";
 export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
   const { webview, currentTrain } = useCurrentTrain();
   const { navigate } = useNavigation();
   const { favoriteStation } = useFavoriteStation();
   const { isLandscape } = useDeviceOrientationChange();
+  const { originalStationList } = useStationList();
   const {
     setSelectedLine,
     mapsStationData: stationData,
     setLoadError,
     setTrainInfo,
-    originalStationList,
     injectJavascript,
   } = useTrainMenu();
   var urlcache = "";

components/CurrentTrainListView.js

@@ -1,53 +1,15 @@
-import React, { useRef } from "react";
+import React from "react";
-import { View, Text, TouchableOpacity, Linking } from "react-native";
+import { View, Text } from "react-native";
-import MapView, { Marker } from "react-native-maps";
-import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useNavigation } from "@react-navigation/native";
+import { BigButton } from "./atom/BigButton";
 export default function CurrentTrainListView() {
   const { navigate } = useNavigation();
   const { currentTrain } = useCurrentTrain();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       {currentTrain && currentTrain.map((d) => <Text>{d.num}</Text>)}
-      <TouchableOpacity
+      <BigButton onPress={() => navigate("menu")} string="閉じる" />
-        style={{
-          padding: 10,
-          flexDirection: "row",
-          borderColor: "white",
-          borderWidth: 1,
-          margin: 10,
-          borderRadius: 5,
-          alignItems: "center",
-        }}
-        onPress={() => navigate("menu")}
-      >
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
     </View>
   );
 }
-const UsefulBox = (props) => {
-  const { icon, backgroundColor, flex, onPressButton, children } = props;
-  return (
-    <TouchableOpacity
-      style={{
-        flex: flex,
-        backgroundColor: backgroundColor,
-        padding: 10,
-        alignItems: "center",
-        margin: 2,
-      }}
-      onPress={onPressButton}
-    >
-      <MaterialCommunityIcons name={icon} color="white" size={50} />
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
-        {children}
-      </Text>
-    </TouchableOpacity>
-  );
-};

components/FavoriteList.js

@@ -7,6 +7,7 @@ import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useNavigation } from "@react-navigation/native";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
 import { FavoriteListItem } from "./atom/FavoriteListItem";
+import { BigButton } from "./atom/BigButton";
 export default function FavoriteList() {
   const { favoriteStation } = useFavoriteStation();
   const { webview } = useCurrentTrain();
@@ -78,24 +79,7 @@ export default function FavoriteList() {
       >
         お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
       </Text>
-      <TouchableOpacity
+      <BigButton onPress={() => goBack()} string="閉じる" />
-        style={{
-          padding: 10,
-          flexDirection: "row",
-          borderColor: "white",
-          borderWidth: 1,
-          margin: 10,
-          borderRadius: 5,
-          alignItems: "center",
-        }}
-        onPress={() => goBack()}
-      >
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
     </View>
   );
 }

components/TrainMenu/MapPin.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from "react";
+import { Marker } from "react-native-maps";
+type Props = {
+  index: number;
+  indexBase: number;
+  latlng: string[];
+  D: any;
+  d: string;
+  navigate: (screen: string) => void;
+  webview: any;
+};
+
+export const MapPin: FC<Props> = (props) => {
+  const { index, indexBase, latlng, D, d, navigate, webview } = props;
+  return (
+    <Marker
+      key={index + indexBase}
+      coordinate={{
+        latitude: parseFloat(latlng[0]),
+        longitude: parseFloat(latlng[1]),
+      }}
+      onPress={() => {
+        webview.current?.injectJavaScript(
+          `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');
+          document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
+        );
+        if (navigate) navigate("Apps");
+      }}
+      image={require("../../assets/reccha-small.png")}
+    ></Marker>
+  );
+};

components/TrainMenu/MapsButton.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from "react";
+import { View, TouchableOpacity, TouchableOpacityProps } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+
+type Props = {
+  onPress: () => void;
+  top: number;
+  mapSwitch: "flex" | "none";
+};
+
+export const MapsButton: FC<Props> = ({ onPress, top, mapSwitch }) => {
+  const styles: TouchableOpacityProps["style"] = {
+    position: "absolute",
+    top,
+    left: 10,
+    width: 50,
+    height: 50,
+    backgroundColor: "#0099CC",
+    borderColor: "white",
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderRadius: 50,
+    alignContent: "center",
+    alignSelf: "center",
+    alignItems: "center",
+    display: mapSwitch,
+  };
+  return (
+    <TouchableOpacity onPress={onPress} style={styles}>
+      <View style={{ flex: 1 }} />
+      <Ionicons name="close" color="white" size={30} />
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};

components/TrainMenu/UsefulBox.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from "react";
+import { Text, TouchableOpacity } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
+type Props = {
+  icon: keyof typeof MaterialCommunityIcons.glyphMap;
+  backgroundColor: string;
+  flex: number;
+  onPressButton: () => void;
+  children: string;
+};
+
+export const UsefulBox: FC<Props> = (props) => {
+  const { icon, backgroundColor, flex, onPressButton, children } = props;
+  return (
+    <TouchableOpacity
+      style={{
+        flex: flex,
+        backgroundColor: backgroundColor,
+        padding: 5,
+        alignItems: "center",
+        margin: 2,
+      }}
+      onPress={onPressButton}
+    >
+      <MaterialCommunityIcons name={icon} color="white" size={50} />
+      <Text style={{ color: "white", fontWeight: "bold", fontSize: 16 }}>
+        {children}
+      </Text>
+    </TouchableOpacity>
+  );
+};

components/atom/BigButton.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from "react";
+import {
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native";
+
+type Props = {
+  onPress: () => void;
+  string: string;
+  style?: ViewStyle;
+  tS?: TextStyle;
+  children?: any;
+};
+export const BigButton: FC<Props> = (props) => {
+  const { onPress, string, style, tS, children } = props;
+  return (
+    <TouchableOpacity
+      style={{
+        padding: 10,
+        flexDirection: "row",
+        borderColor: "white",
+        borderWidth: 1,
+        margin: 10,
+        borderRadius: 5,
+        alignItems: "center",
+        ...style,
+      }}
+      onPress={onPress}
+    >
+      <View style={{ flex: 1 }} />
+      {children}
+      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white", ...tS }}>
+        {string}
+      </Text>
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};

components/custom-train-data.ts

@@ -1,4 +1,4 @@
-export const customTrainDataDetector = (TrainNumber) => {
+export const customTrainDataDetector = (TrainNumber: string) => {
   switch (TrainNumber) {
     //しおかぜメイン
     //8000 ノーマル
@@ -627,7 +627,7 @@ export const customTrainDataDetector = (TrainNumber) => {
       break;
   }
 };
-export const getJRF = (num) => {
+export const getJRF = (num: string) => {
   switch (num) {
     case "71":
       return "東京(タ)→高松(タ)\\n";
@@ -657,7 +657,6 @@ export const getJRF = (num) => {
     case "9070":
       return "臨時貨物\\n";
     default:
-      JRF = true;
       return null;
   }
 };

components/news.js

@@ -1,44 +0,0 @@
-import React from "react";
-import { View, Text, TouchableOpacity } from "react-native";
-import { WebView } from "react-native-webview";
-import StatusbarDetect from "../StatusbarDetect";
-import { AS } from "../storageControl";
-import { news } from "../config/newsUpdate";
-import { useNavigation } from "@react-navigation/native";
-var Status = StatusbarDetect();
-export default function News() {
-  const { navigate } = useNavigation();
-  return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <WebView
-        useWebKit={true}
-        source={{
-          uri: `https://xprocess.haruk.in/${news}`,
-        }}
-        mixedContentMode={"compatibility"}
-        javaScriptEnabled={true}
-      />
-      <TouchableOpacity
-        style={{
-          padding: 10,
-          flexDirection: "row",
-          borderColor: "white",
-          borderWidth: 1,
-          margin: 10,
-          borderRadius: 5,
-          alignItems: "center",
-        }}
-        onPress={() => {
-          AS.setItem("status", news);
-          navigate("Apps");
-        }}
-      >
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          更新情報を閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
-    </View>
-  );
-}

components/news.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from "react";
+import { View } from "react-native";
+import { WebView } from "react-native-webview";
+import { AS } from "../storageControl";
+import { news } from "../config/newsUpdate";
+import { useNavigation } from "@react-navigation/native";
+import { BigButton } from "./atom/BigButton";
+const News: FC = () => {
+  const { navigate } = useNavigation();
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      <WebView
+        useWebKit={true}
+        source={{
+          uri: `https://xprocess.haruk.in/${news}`,
+        }}
+        mixedContentMode={"compatibility"}
+        javaScriptEnabled={true}
+      />
+      <BigButton
+        onPress={() => {
+          AS.setItem("status", news);
+          navigate("Apps");
+        }}
+        string="更新情報を閉じる"
+      />
+    </View>
+  );
+};
+export default News;

components/trainMenu.js

@@ -1,7 +1,6 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
-import { View, Text, TouchableOpacity, Linking, Platform } from "react-native";
+import { View, Text, TouchableOpacity, Linking } from "react-native";
 import MapView, { Marker } from "react-native-maps";
-import Constants from "expo-constants";
 import { MaterialCommunityIcons, Ionicons } from "@expo/vector-icons";
 import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useNavigation } from "@react-navigation/native";
@@ -10,6 +9,9 @@ import { stationIDPair } from "../lib/getStationList2";
 import { lineListPair } from "../lib/getStationList";
 import { SheetManager } from "react-native-actions-sheet";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
+import { MapPin } from "./TrainMenu/MapPin";
+import { UsefulBox } from "./TrainMenu/UsefulBox";
+import { MapsButton } from "./TrainMenu/MapsButton";
 export default function TrainMenu({ style }) {
   const { webview } = useCurrentTrain();
   const mapRef = useRef();
@@ -24,8 +26,8 @@ export default function TrainMenu({ style }) {
   } = useTrainMenu();
   useEffect(() => {
     const stationPinData = [];
-    Object.keys(stationData).map((d, indexBase) => {
+    Object.keys(stationData).forEach((d, indexBase) => {
-      stationData[d].map((D, index) => {
+      stationData[d].forEach((D, index) => {
         if (!D.StationMap) return null;
         if (selectedLine && selectedLine != d) return;
         const latlng = D.StationMap.replace(
@@ -44,7 +46,7 @@ export default function TrainMenu({ style }) {
     });
     setStationPin(stationPinData);
   }, [stationData, selectedLine]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     mapRef.current.fitToCoordinates(
       stationPin.map(({ latlng }) => ({
         latitude: parseFloat(latlng[0]),
@@ -207,80 +209,4 @@ export default function TrainMenu({ style }) {
       />
     </View>
   );
-}
+}
-const UsefulBox = (props) => {
-  const { icon, backgroundColor, flex, onPressButton, children } = props;
-  return (
-    <TouchableOpacity
-      style={{
-        flex: flex,
-        backgroundColor: backgroundColor,
-        padding: 5,
-        alignItems: "center",
-        margin: 2,
-      }}
-      onPress={onPressButton}
-    >
-      <MaterialCommunityIcons name={icon} color="white" size={50} />
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 16 }}>
-        {children}
-      </Text>
-    </TouchableOpacity>
-  );
-};
-
-const MapPin = ({ index, indexBase, latlng, D, d, navigate, webview }) => {
-  return (
-    <Marker
-      key={index + indexBase}
-      coordinate={{
-        latitude: parseFloat(latlng[0]),
-        longitude: parseFloat(latlng[1]),
-      }}
-      onPress={() => {
-        webview.current?.injectJavaScript(
-          `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');
-          document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
-        );
-        if (navigate) navigate("Apps");
-      }}
-      image={require("../assets/reccha-small.png")}
-    ></Marker>
-  );
-};
-
-const MapsButton = ({ onPress, top, mapSwitch }) => {
-  const styles = {
-    touch: {
-      position: "absolute",
-      top,
-      left: 10,
-      width: 50,
-      height: 50,
-      backgroundColor: "#0099CC",
-      borderColor: "white",
-      borderStyle: "solid",
-      borderWidth: 1,
-      borderRadius: 50,
-      alignContent: "center",
-      alignSelf: "center",
-      alignItems: "center",
-      display: mapSwitch,
-    },
-    text: {
-      textAlign: "center",
-      width: "auto",
-      height: "auto",
-      textAlignVertical: "center",
-      fontWeight: "bold",
-      color: "white",
-    },
-  };
-  return (
-    <TouchableOpacity onPress={onPress} style={styles.touch}>
-      <View style={{ flex: 1 }} />
-      <Ionicons name="close" color="white" size={30} />
-      <View style={{ flex: 1 }} />
-    </TouchableOpacity>
-  );
-};

components/trainbaseview.js

@@ -1,14 +1,9 @@
-import React, { Component, useRef } from "react";
+import React, { useRef } from "react";
-import {
+import { StatusBar, Platform, View } from "react-native";
-  StatusBar,
-  Platform,
-  View,
-  TouchableOpacity,
-  Text,
-} from "react-native";
 import { WebView } from "react-native-webview";
-import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
+import { BigButton } from "./atom/BigButton";
 
 export default function TrainBase({ route }) {
   const { info, from } = route.params;
@@ -38,27 +33,16 @@ export default function TrainBase({ route }) {
         onMessage={(event) => {}}
       />
       {(from == "LED" || from == "LED2" || from == "AllTrainIDList") && (
-        <TouchableOpacity
+        <BigButton
-          style={{
+          style={{ borderColor: "black" }}
-            padding: 10,
+          tS={{ color: "black" }}
-            flexDirection: "row",
+          string="閉じる"
-            borderColor: "black",
-            borderWidth: 1,
-            margin: 10,
-            borderRadius: 5,
-            alignItems: "center",
-          }}
           onPress={() =>
             navigate(from == "AllTrainIDList" ? "AllTrainIDList" : "menu")
           }
         >
-          <View style={{ flex: 1 }} />
           <MaterialCommunityIcons name="close" color="black" size={30} />
-          <Text style={{ fontSize: 25, fontWeight: "bold", color: "black" }}>
+        </BigButton>
-            閉じる
-          </Text>
-          <View style={{ flex: 1 }} />
-        </TouchableOpacity>
       )}
     </View>
   );

components/発車時刻表/EachData.tsx

@@ -0,0 +1,126 @@
+import React, { FC, useEffect, useState } from "react";
+import { TouchableOpacity } from "react-native";
+import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
+import { getTrainDelayStatus } from "../../lib/getTrainDelayStatus";
+import { getTrainType } from "../../lib/getTrainType";
+import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
+import { SheetManager } from "react-native-actions-sheet";
+import { Description } from "./LED_inside_Component/Description";
+import { DependTime } from "./LED_inside_Component/DependTime";
+import { LastStation } from "./LED_inside_Component/LastStation";
+import { StatusAndDelay } from "./LED_inside_Component/StatusAndDelay";
+import { TrainName } from "./LED_inside_Component/TrainName";
+
+type Props = {
+  d: {
+    train: string;
+    lastStation: string;
+    time: string;
+  };
+  trainIDSwitch: boolean;
+  trainDescriptionSwitch: boolean;
+  station: {
+    Station_JP: string;
+  };
+  customTrainDataDetector: (trainID: string) => {
+    trainName: string;
+    trainNumDistance?: number;
+    type: string;
+    info: string;
+  };
+  navigate: (screen: string, data?: any) => void;
+  openStationACFromEachTrainInfo: (station: string) => void;
+};
+export const EachData: FC<Props> = (props) => {
+  const {
+    d,
+    trainIDSwitch,
+    trainDescriptionSwitch,
+    station,
+    customTrainDataDetector,
+    navigate,
+    openStationACFromEachTrainInfo,
+  } = props;
+  const { currentTrain } = useCurrentTrain();
+  const openTrainInfo = (d: {
+    train: string;
+    lastStation: string;
+    time: string;
+  }) => {
+    let TrainNumber = "";
+    if (train.trainNumDistance != undefined) {
+      const timeInfo =
+        parseInt(d.train.replace("M", "").replace("D", "")) -
+        train.trainNumDistance;
+      TrainNumber = timeInfo + "号";
+    }
+    const payload = {
+      data: {
+        trainNum: d.train,
+        limited: `${getTrainType(train.type).data}:${
+          train.trainName
+        }${TrainNumber}`,
+      },
+      navigate,
+      openStationACFromEachTrainInfo,
+      from: "LED",
+    };
+    SheetManager.show("EachTrainInfo", {
+      payload,
+    });
+  };
+  const [train, setTrain] = useState(customTrainDataDetector(d.train));
+  useEffect(() => {
+    setTrain(customTrainDataDetector(d.train));
+  }, [currentTrain, d.train, trainDescriptionSwitch]);
+  // 土讃線複数存在対策
+  const currentTrainData = checkDuplicateTrainData(
+    currentTrain.filter((a) => a.num == d.train)
+  );
+  const trainDelayStatus = `${getTrainDelayStatus(
+    currentTrainData,
+    station.Station_JP
+  )}`;
+  const trainPositionText = currentTrainData?.Pos.match("～")
+    ? `現在地：${
+        currentTrainData?.Pos.replace("（下り）", "")
+          .replace("（上り）", "")
+          .split("～")[currentTrainData?.Direction == 1 ? 0 : 1]
+      }→${
+        currentTrainData?.Pos.replace("（下り）", "")
+          .replace("（上り）", "")
+          .split("～")[currentTrainData?.Direction == 1 ? 1 : 0]
+      }間を走行中`
+    : `現在地：${currentTrainData?.Pos}`;
+  return (
+    <>
+      <TouchableOpacity
+        style={{
+          alignContent: "center",
+          alignItems: "center",
+          width: "94%",
+          marginVertical: 5,
+          marginHorizontal: "3%",
+          backgroundColor: "#000",
+          flexDirection: "row",
+        }}
+        onPress={() => openTrainInfo(d)}
+      >
+        <TrainName
+          trainName={train.trainName}
+          trainNumDistance={train.trainNumDistance}
+          trainIDSwitch={trainIDSwitch}
+          trainID={d.train}
+          type={train.type}
+        />
+        <LastStation lastStation={d.lastStation} />
+        <DependTime time={d.time} />
+        <StatusAndDelay trainDelayStatus={trainDelayStatus} />
+      </TouchableOpacity>
+      {trainDescriptionSwitch && <Description info={`${trainPositionText}`} />}
+      {trainDescriptionSwitch && !!train.info && (
+        <Description info={train.info} />
+      )}
+    </>
+  );
+};

components/発車時刻表/LED_inside_Component/DependTime.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from "react";
+import { Text, TextStyle, View } from "react-native";
+const descriptionStyle: TextStyle = {
+  fontSize: parseInt("16%"),
+  fontWeight: "bold",
+};
+type Props = {
+  time: string;
+};
+export const DependTime: FC<Props> = ({ time }) => (
+  <View style={{ flex: 3 }}>
+    <Text style={{ ...descriptionStyle, color: "white" }}>{time}</Text>
+  </View>
+);

components/発車時刻表/LED_inside_Component/Description.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from "react";
+import { Text, TextStyle, View, TouchableOpacity } from "react-native";
+
+const descriptionStyle: TextStyle = {
+  fontSize: parseInt("16%"),
+  fontWeight: "bold",
+};
+
+type Props = {
+  info: string;
+  numberOfLines?: number;
+  onClick?: () => void;
+};
+export const Description:FC<Props> = ({ info, numberOfLines = 0, onClick }) => (
+  <TouchableOpacity
+    style={{
+      alignContent: "center",
+      alignItems: "center",
+      width: "94%",
+      marginVertical: 5,
+      marginHorizontal: "3%",
+      backgroundColor: "#000",
+      flexDirection: "row",
+      overflow: "hidden",
+    }}
+    onPress={onClick}
+  >
+    <View style={{ flex: 4, flexDirection: "row" }}>
+      {numberOfLines == 1 ? (
+        <Text style={{ ...descriptionStyle, color: "red" }}>
+          運行情報 &gt;{" "}
+        </Text>
+      ) : (
+        <Text style={{ ...descriptionStyle, color: "green" }}> &gt; </Text>
+      )}
+
+      <Text
+        style={{ ...descriptionStyle, color: "green" }}
+        numberOfLines={numberOfLines}
+      >
+        {info}
+      </Text>
+    </View>
+  </TouchableOpacity>
+);

components/発車時刻表/LED_inside_Component/LastStation.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from "react";
+import { Text, View } from "react-native";
+
+type Props = {
+  lastStation: string;
+};
+export const LastStation: FC<Props> = ({ lastStation }) => {
+  return (
+    <View style={{ flex: 4, flexDirection: "row" }}>
+      <Text
+        style={{
+          fontSize: lastStation.length > 4 ? parseInt("12%") : parseInt("16%"),
+          color: "white",
+          fontWeight: "bold",
+        }}
+      >
+        {lastStation}
+      </Text>
+    </View>
+  );
+};

components/発車時刻表/LED_inside_Component/StatusAndDelay.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from "react";
+import { Text, TextStyle, View } from "react-native";
+const descriptionStyle: TextStyle = {
+  fontSize: parseInt("16%"),
+  fontWeight: "bold",
+};
+type Props = {
+  trainDelayStatus: string;
+};
+export const StatusAndDelay: FC<Props> = ({ trainDelayStatus }) => {
+  return (
+    <View style={{ flex: 4 }}>
+      <Text style={{ ...descriptionStyle, color: "white", paddingLeft: 1 }}>
+        {trainDelayStatus}
+      </Text>
+    </View>
+  );
+};

components/発車時刻表/LED_inside_Component/TrainName.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from "react";
+import { Text, View } from "react-native";
+import { getTrainType } from "../../../lib/getTrainType";
+type Props = {
+  trainName: string;
+  trainNumDistance?: number;
+  trainIDSwitch: boolean;
+  trainID: string;
+  type: string;
+};
+export const TrainName: FC<Props> = (props) => {
+  const { trainName, trainNumDistance, trainIDSwitch, trainID, type } = props;
+  const { name, color } = getTrainType(type);
+  const TrainNumber =
+    trainNumDistance != undefined
+      ? `${
+          parseInt(trainID.replace("M", "").replace("D", "")) - trainNumDistance
+        }号`
+      : "";
+  return (
+    <View style={{ flex: 9 }}>
+      <Text
+        style={{
+          fontSize: trainName.length > 6 ? parseInt("12%") : parseInt("16%"),
+          color: color,
+          fontWeight: "bold",
+        }}
+      >
+        {trainIDSwitch ? trainID : `${name} ${trainName}${TrainNumber}`}
+      </Text>
+    </View>
+  );
+};

components/発車時刻表/LED_vidion.js

@@ -1,18 +1,17 @@
 import React, { useState, useEffect } from "react";
-import { View, Text, TouchableOpacity } from "react-native";
+import { View } from "react-native";
 import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import { customTrainDataDetector } from "../custom-train-data";
 import { useInterval } from "../../lib/useInterval";
 import { objectIsEmpty } from "../../lib/objectIsEmpty";
-import { getTrainType } from "../../lib/getTrainType";
-import { getTrainDelayStatus } from "../../lib/getTrainDelayStatus";
-import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
 import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
 import { useAreaInfo } from "../../stateBox/useAreaInfo";
-import { SheetManager } from "react-native-actions-sheet";
 import { AS } from "../../storageControl";
 import { Footer } from "./LED_Vision_Component/Footer";
 import { Header } from "./LED_Vision_Component/Header";
+import { Description } from "./LED_inside_Component/Description";
+import { EachData } from "./EachData";
+
 
 
 /**
@@ -232,192 +231,3 @@ export default function LED_vision(props) {
     </View>
   );
 }
-
-const EachData = (props) => {
-  const {
-    d,
-    trainIDSwitch,
-    trainDescriptionSwitch,
-    station,
-    customTrainDataDetector,
-    navigate,
-    openStationACFromEachTrainInfo,
-  } = props;
-  const { currentTrain } = useCurrentTrain();
-  const openTrainInfo = (d) => {
-    let TrainNumber = "";
-    if (train.trainNumDistance != undefined) {
-      const timeInfo =
-        parseInt(d.train.replace("M", "").replace("D", "")) -
-        train.trainNumDistance;
-      TrainNumber = timeInfo + "号";
-    }
-    const payload = {
-      data: {
-        trainNum: d.train,
-        limited: `${getTrainType(train.type).data}:${
-          train.trainName
-        }${TrainNumber}`,
-      },
-      navigate,
-      openStationACFromEachTrainInfo,
-      from: "LED",
-    };
-    SheetManager.show("EachTrainInfo", {
-      payload,
-    });
-  };
-  const [train, setTrain] = useState(customTrainDataDetector(d.train));
-  useEffect(() => {
-    setTrain(customTrainDataDetector(d.train));
-  }, [currentTrain, d.train, trainDescriptionSwitch]);
-  // 土讃線複数存在対策
-  const currentTrainData = checkDuplicateTrainData(
-    currentTrain.filter((a) => a.num == d.train)
-  );
-  const trainDelayStatus = getTrainDelayStatus(
-    currentTrainData,
-    station.Station_JP
-  );
-  const trainPositionText = currentTrainData?.Pos.match("～")
-    ? `現在地：${
-        currentTrainData?.Pos.replace("（下り）", "")
-          .replace("（上り）", "")
-          .split("～")[currentTrainData?.Direction == 1 ? 0 : 1]
-      }→${
-        currentTrainData?.Pos.replace("（下り）", "")
-          .replace("（上り）", "")
-          .split("～")[currentTrainData?.Direction == 1 ? 1 : 0]
-      }間を走行中`
-    : `現在地：${currentTrainData?.Pos}`;
-  return (
-    <>
-      <TouchableOpacity
-        style={{
-          alignContent: "center",
-          alignItems: "center",
-          width: "94%",
-          marginVertical: 5,
-          marginHorizontal: "3%",
-          backgroundColor: "#000",
-          flexDirection: "row",
-        }}
-        onPress={() => openTrainInfo(d)}
-      >
-        <TrainName
-          trainName={train.trainName}
-          trainNumDistance={train.trainNumDistance}
-          trainIDSwitch={trainIDSwitch}
-          trainID={d.train}
-          type={train.type}
-        />
-        <LastStation lastStation={d.lastStation} />
-        <DependTime time={d.time} />
-        <StatusAndDelay trainDelayStatus={trainDelayStatus} />
-      </TouchableOpacity>
-      {trainDescriptionSwitch && <Description info={`${trainPositionText}`} />}
-      {trainDescriptionSwitch && !!train.info && (
-        <Description info={train.info} />
-      )}
-    </>
-  );
-};
-
-const TrainName = ({
-  trainName,
-  trainNumDistance,
-  trainIDSwitch,
-  trainID,
-  type,
-}) => {
-  const { name, color } = getTrainType(type);
-  let TrainNumber =
-    trainNumDistance != undefined
-      ? `${
-          parseInt(trainID.replace("M", "").replace("D", "")) - trainNumDistance
-        }号`
-      : "";
-  return (
-    <View style={{ flex: 9 }}>
-      <Text
-        style={{
-          fontSize: trainName.length > 6 ? parseInt("12%") : parseInt("16%"),
-          color: color,
-          fontWeight: "bold",
-        }}
-      >
-        {trainIDSwitch ? trainID : `${name} ${trainName}${TrainNumber}`}
-      </Text>
-    </View>
-  );
-};
-
-const LastStation = ({ lastStation }) => {
-  return (
-    <View style={{ flex: 4, flexDirection: "row" }}>
-      <Text
-        style={{
-          fontSize: lastStation.length > 4 ? parseInt("12%") : parseInt("16%"),
-          color: "white",
-          fontWeight: "bold",
-        }}
-      >
-        {lastStation}
-      </Text>
-    </View>
-  );
-};
-
-const descriptionStyle = {
-  fontSize: parseInt("16%"),
-  fontWeight: "bold",
-};
-
-const DependTime = ({ time }) => (
-  <View style={{ flex: 3 }}>
-    <Text style={{ ...descriptionStyle, color: "white" }}>{time}</Text>
-  </View>
-);
-
-const StatusAndDelay = ({ trainDelayStatus }) => {
-  return (
-    <View style={{ flex: 4 }}>
-      <Text style={{ ...descriptionStyle, color: "white", paddingLeft: 1 }}>
-        {trainDelayStatus}
-      </Text>
-    </View>
-  );
-};
-
-const Description = ({ info, numberOfLines = 0, onClick }) => (
-  <TouchableOpacity
-    style={{
-      alignContent: "center",
-      alignItems: "center",
-      width: "94%",
-      marginVertical: 5,
-      marginHorizontal: "3%",
-      backgroundColor: "#000",
-      flexDirection: "row",
-      overflow: "hidden",
-    }}
-    onPress={onClick}
-  >
-    <View style={{ flex: 4, flexDirection: "row" }}>
-      {numberOfLines == 1 ? (
-        <Text style={{ ...descriptionStyle, color: "red" }}>
-          運行情報 &gt;{" "}
-        </Text>
-      ) : (
-        <Text style={{ ...descriptionStyle, color: "green" }}> &gt; </Text>
-      )}
-
-      <Text
-        style={{ ...descriptionStyle, color: "green" }}
-        numberOfLines={numberOfLines}
-      >
-        {info}
-      </Text>
-    </View>
-  </TouchableOpacity>
-);

components/駅名表/Sign.js

@@ -12,13 +12,13 @@ import { StationNumberMaker } from "./StationNumberMaker";
 import { NextPreStationLine } from "./NextPreStationLine";
 import { LottieDelayView } from "./LottieDelayView";
 import { AddressText } from "./AddressText";
-import { useTrainMenu } from "../../stateBox/useTrainMenu";
+import { useStationList } from "../../stateBox/useStationList";
 
 export default function Sign(props) {
   const { currentStation, oP, oLP, isCurrentStation = false } = props;
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
   const [nexPrePosition, setNexPrePosition] = useState(0);
-  const { originalStationList } = useTrainMenu();
+  const { originalStationList } = useStationList();
 
   const [preStation, setPreStation] = useState();
   const [nexStation, setNexStation] = useState();

howto.js

@@ -1,7 +1,7 @@
-const WEBVIEW = "WEBVIEW";
+import React from "react";
-import React, { Component } from "react";
+import { View } from "react-native";
-import { StatusBar, View, TouchableOpacity, Text } from "react-native";
 import { WebView } from "react-native-webview";
+import { BigButton } from "./components/atom/BigButton";
 export default ({ navigation: { navigate }, route }) => {
   const { info, goTo, useShow } = route.params;
   const onExit = () => {
@@ -9,30 +9,13 @@ export default ({ navigation: { navigate }, route }) => {
     useShow && useShow();
   };
   return (
-    <View style={styles.View}>
+    <View style={styles}>
       <WebView
         useWebKit
         source={{ uri: info.replace("http://", "https://") }}
       />
-      <TouchableOpacity style={styles.touch} onPress={onExit}>
+      <BigButton onPress={onExit} string="閉じる" />
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
     </View>
   );
 };
-const styles = {
+const styles = { height: "100%", backgroundColor: "#0099CC" };
-  View: { height: "100%", backgroundColor: "#0099CC" },
-  touch: {
-    padding: 10,
-    flexDirection: "row",
-    borderColor: "white",
-    borderWidth: 1,
-    margin: 10,
-    borderRadius: 5,
-    alignItems: "center",
-  },
-};

lib/providerTreeProvider.js

@@ -17,7 +17,7 @@ export const buildProvidersTree = (providers) => {
   return buildProvidersTree([
     ({ children }) => (
       <FirstProvider>
-        <SecondProvider>{children}</SecondProvider>
+        <SecondProvider {...{ children }} />
       </FirstProvider>
     ),
     ...providers,

lib/webViewInjectjavascript.ts

@@ -1,5 +1,3 @@
-import { getJRF } from "../components/custom-train-data";
-
 type InjectJavascriptData = (
   a: string,
   b: string,

menu.js

@@ -23,19 +23,19 @@ import { TitleBar } from "./components/Menu/TitleBar";
 import { FixedContentBottom } from "./components/Menu/FixedContentBottom";
 
 import { UsefulBox } from "./components/atom/UsefulBox";
-import { getStationList, lineList } from "./lib/getStationList";
+import { lineList } from "./lib/getStationList";
 import useInterval from "./lib/useInterval";
 import { HeaderConfig } from "./lib/HeaderConfig";
 import { useFavoriteStation } from "./stateBox/useFavoriteStation";
 import { SheetManager } from "react-native-actions-sheet";
 import { useTrainDelayData } from "./stateBox/useTrainDelayData";
 import { useNavigation } from "@react-navigation/native";
-import { useTrainMenu } from "./stateBox/useTrainMenu";
+import { useStationList } from "./stateBox/useStationList";
 
 export default function Menu({ getCurrentTrain }) {
   const { navigate } = useNavigation();
   const { favoriteStation } = useFavoriteStation();
-  const { originalStationList } = useTrainMenu();
+  const { originalStationList } = useStationList();
 
   //位置情報
   const [locationStatus, setLocationStatus] = useState(null);
@@ -137,6 +137,21 @@ export default function Menu({ getCurrentTrain }) {
         setTrainDiagram(trainList);
       });
   }, []);
+
+  const oPSign = () => {
+    const payload = {
+      currentStation:
+        originalStationList &&
+        allStationData.length != 0 &&
+        allStationData[selectedCurrentStation],
+      navigate: navigate,
+      goTo: "menu",
+      useShow: () => SheetManager.show("StationDetailView", { payload }),
+      onExit: () => SheetManager.hide("StationDetailView"),
+    };
+    SheetManager.show("StationDetailView", { payload });
+  };
+
   return (
     <View
       style={{
@@ -159,9 +174,7 @@ export default function Menu({ getCurrentTrain }) {
             enableMomentum
             callbackOffsetMargin={1000}
             activeAnimationOptions={0.3}
-            onSnapToItem={(d) => {
+            onSnapToItem={setSelectedCurrentStation}
-              setSelectedCurrentStation(d);
-            }}
             renderItem={({ item }) => {
               return (
                 <View
@@ -171,26 +184,7 @@ export default function Menu({ getCurrentTrain }) {
                   <Sign
                     currentStation={item}
                     isCurrentStation={item == currentStation}
-                    oP={() => {
+                    oP={oPSign}
-                      const payload = {
-                        currentStation:
-                          originalStationList &&
-                          allStationData.length != 0 &&
-                          allStationData[selectedCurrentStation],
-                        navigate: navigate,
-                        goTo: "menu",
-                        useShow: () =>
-                          SheetManager.show("StationDetailView", {
-                            payload,
-                          }),
-                        onExit: () => {
-                          SheetManager.hide("StationDetailView");
-                        },
-                      };
-                      SheetManager.show("StationDetailView", {
-                        payload,
-                      });
-                    }}
                   />
                 </View>
               );
@@ -260,12 +254,8 @@ const TopMenuButton = () => {
 };
 
 const JRSTraInfoBox = () => {
-  const {
+  const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
-    getTime,
+    useTrainDelayData();
-    delayData,
-    loadingDelayData,
-    setLoadingDelayData,
-  } = useTrainDelayData();
   const styles = {
     touch: {
       backgroundColor: "#0099CC",

stateBox/useAllTrainDiagram.js

@@ -6,12 +6,15 @@ const initialState = {
 
 const AllTrainDiagramContext = createContext(initialState);
 
-export const useAllTrainDiagram = () => {
+export const useAllTrainDiagram = () => useContext(AllTrainDiagramContext);
-  return useContext(AllTrainDiagramContext);
-};
 
 export const AllTrainDiagramProvider = ({ children }) => {
   const [allTrainDiagram, setAllTrainDiagram] = useState();
+  const [keyList, setKeyList] = useState(); // 第二要素
+  useEffect(
+    () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)),
+    [allTrainDiagram]
+  );
   const customData = {};
   useEffect(() => {
     fetch(
@@ -55,7 +58,7 @@ export const AllTrainDiagramProvider = ({ children }) => {
 
   return (
     <AllTrainDiagramContext.Provider
-      value={{ allTrainDiagram, setAllTrainDiagram }}
+      value={{ allTrainDiagram, setAllTrainDiagram,keyList }}
     >
       {children}
     </AllTrainDiagramContext.Provider>

stateBox/useStationList.tsx

@@ -3,10 +3,8 @@ import React, {
   useContext,
   useState,
   useEffect,
-  useLayoutEffect,
   FC,
 } from "react";
-import { AS } from "../storageControl";
 import { getStationList } from "../lib/getStationList";
 
 type initialStateType = {
@@ -38,12 +36,11 @@ export const StationListProvider: FC<Props> = ({ children }) => {
     Object.keys(originalStationList).forEach((key) => {
       originalStationList[key].forEach((station) => {
         if (station.Station_JP === name) {
-          if(!!station.jslodApi)returnArray.push(station);
+          if (!!station.jslodApi) returnArray.push(station);
         }
       });
     });
     return returnArray;
-    
   };
 
   return (

stateBox/useTrainMenu.js

@@ -2,7 +2,6 @@ import React, { createContext, useContext, useState, useEffect } from "react";
 
 import { AS, ASCore } from "../storageControl";
 
-import { getStationList } from "../lib/getStationList";
 import { getStationList2 } from "../lib/getStationList2";
 import { injectJavascriptData } from "../lib/webViewInjectjavascript";
 
@@ -27,8 +26,6 @@ const initialState = {
     trainData: undefined,
   },
   setTrainInfo: () => {},
-  originalStationList: [],
-  setOriginalStationList: () => {},
   trainMenu: "true",
   setTrainMenu: () => {},
   injectJavascript: "",
@@ -61,9 +58,7 @@ export const TrainMenuProvider = ({ children }) => {
   });
 
   //駅情報画面用
-  const [originalStationList, setOriginalStationList] = useState([]);
   const [trainMenu, setTrainMenu] = useState("true");
-  useEffect(() => getStationList().then(setOriginalStationList), []);
 
   //地図表示テキスト
   const injectJavascript = injectJavascriptData(
@@ -112,8 +107,6 @@ export const TrainMenuProvider = ({ children }) => {
         setLoadError,
         trainInfo,
         setTrainInfo,
-        originalStationList,
-        setOriginalStationList,
         trainMenu,
         setTrainMenu,
         injectJavascript,

storageControl.ts

@@ -2,8 +2,8 @@ import storage from "./storageConfig";
 import * as Updates from "expo-updates";
 
 export const AS = {
-  getItem: (key) => storage.load({ key }),
+  getItem: (key: string) => storage.load({ key }),
-  setItem: (key, data) =>
+  setItem: (key: string, data: any) =>
     storage.save({
       key, // Note: Do not use underscore("_") in key!
       data,
@@ -12,9 +12,12 @@ export const AS = {
       // if set to null, then it will never expire.
       expires: null,
     }),
-  removeItem: (key) => storage.remove({ key }),
+  removeItem: (key: string) => storage.remove({ key }),
 };
-export const ASCore = ({ k, s, d, u }) =>
+
+type ASCoreProps = (s: { k: any; s: any; d: any; u: any }) => Promise<any>;
+
+export const ASCore: ASCoreProps = ({ k, s, d, u }) =>
   AS.getItem(k)
     .then((d) =>
       d ? s(d) : AS.setItem(k, d).then(() => u && Updates.reloadAsync())