カスタムデータ入れる枠作成

.gitignore

@@ -5,3 +5,4 @@ npm-debug.*
 *.p12
 *.key
 *.mobileprovision
+dist/

App.js

@@ -1,126 +1,138 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect } from "react";
 import { NavigationContainer } from "@react-navigation/native";
-import {
-  createStackNavigator,
-  TransitionPresets,
-} from "@react-navigation/stack";
+import { createStackNavigator } from "@react-navigation/stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { AntDesign, Ionicons } from "@expo/vector-icons";
 import { Platform, UIManager } from "react-native";
 import { UpdateAsync } from "./UpdateAsync.js";
-import Apps from "./Apps";
-import tndView from "./ndView";
-import trainbase from "./trainbaseview";
-import howto from "./howto";
-import menu from "./menu";
-import News from "./components/news.js";
-import Setting from "./components/settings.js";
-import trainMenu from "./components/trainMenu.js";
-const Stack = createStackNavigator();
+import { AS } from "./storageControl";
+import TNDView from "./ndView";
+import { LogBox } from "react-native";
+import useInterval from "./lib/useInterval";
+import { HeaderConfig } from "./lib/HeaderConfig";
+import { initIcon } from "./lib/initIcon";
+import {
+  useFavoriteStation,
+  FavoriteStationProvider,
+} from "./stateBox/useFavoriteStation";
+import { Top } from "./Top.js";
+import { MenuPage } from "./MenuPage.js";
+import {
+  useCurrentTrain,
+  CurrentTrainProvider,
+} from "./stateBox/useCurrentTrain.js";
+import { useAreaInfo, AreaInfoProvider } from "./stateBox/useAreaInfo.js";
+import {
+  useBusAndTrainData,
+  BusAndTrainDataProvider,
+} from "./stateBox/useBusAndTrainData.js";
+import { AllTrainDiagramProvider } from "./stateBox/useAllTrainDiagram.js";
+import { SheetProvider } from "react-native-actions-sheet";
+import "./components/ActionSheetComponents/sheets.js";
+import { TrainDelayDataProvider } from "./stateBox/useTrainDelayData.js";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+LogBox.ignoreLogs([
+  "ViewPropTypes will be removed",
+  "ColorPropType will be removed",
+]);
 const Tab = createBottomTabNavigator();
 if (Platform.OS === "android") {
   if (UIManager.setLayoutAnimationEnabledExperimental) {
     UIManager.setLayoutAnimationEnabledExperimental(true);
   }
 }
+
 export default function App() {
-  const navigationRef = useRef();
-  useEffect(UpdateAsync, []);
+  useEffect(() => UpdateAsync(), []);
   return (
-    <NavigationContainer name="Root" ref={navigationRef} style={{ flex: 1 }}>
-      <Tab.Navigator>
-        <Stack.Screen
+    <SafeAreaProvider>
+      <FavoriteStationProvider>
+        <TrainDelayDataProvider>
+          <CurrentTrainProvider>
+            <AreaInfoProvider>
+              <AllTrainDiagramProvider>
+                <BusAndTrainDataProvider>
+                  <SheetProvider>
+                    <AppContainer />
+                  </SheetProvider>
+                </BusAndTrainDataProvider>
+              </AllTrainDiagramProvider>
+            </AreaInfoProvider>
+          </CurrentTrainProvider>
+        </TrainDelayDataProvider>
+      </FavoriteStationProvider>
+    </SafeAreaProvider>
+  );
+}
+export function AppContainer() {
+  const { setBusAndTrainData } = useBusAndTrainData();
+  useEffect(() => {
+    AS.getItem("busAndTrain")
+      .then((d) => {
+        const returnData = JSON.parse(d);
+        setBusAndTrainData(returnData);
+      })
+      .catch(() => {
+        fetch(
+          "https://script.google.com/macros/s/AKfycbw0UW6ZeCDgUYFRP0zxpc_Oqfy-91dBdbWv-cM8n3narKp14IyCd2wy5HW7taXcW7E/exec"
+        )
+          .then((d) => d.json())
+          .then((d) => {
+            setBusAndTrainData(d);
+            AS.setItem("busAndTrain", JSON.stringify(d));
+          });
+      });
+  }, []);
+
+  const { areaInfo, setAreaInfo } = useAreaInfo();
+  const getAreaData = () =>
+    fetch(
+      "https://script.google.com/macros/s/AKfycbz80LcaEUrhnlEsLkJy0LG2IRO3DBVQhfNmN1d_0f_HvtsujNQpxM90SrV9yKWH_JG1Ww/exec"
+    )
+      .then((d) => d.text())
+      .then((d) => setAreaInfo(d));
+  useEffect(getAreaData, []);
+  useInterval(getAreaData, 60000); //60秒毎に全在線列車取得
+
+  return (
+    <NavigationContainer name="Root" style={{ flex: 1 }}>
+      <Tab.Navigator
+        tabBarOptions={{ keyboardHidesTabBar: Platform.OS === "android" }}
+      >
+        <Tab.Screen
           name="login"
-          component={top}
           options={{
             tabBarLabel: "位置情報",
             headerTransparent: true,
             gestureEnabled: true,
-            tabBarIcon: () => <AntDesign name="barchart" size={32} />,
+            tabBarIcon: initIcon("barchart", "AntDesign"),
           }}
-        />
-        <Stack.Screen
+        >
+          {(props) => <Top {...props} />}
+        </Tab.Screen>
+        <Tab.Screen
           name="menuPage"
-          component={menuPage}
           options={{
             tabBarLabel: "リンク",
             headerTransparent: true,
             gestureEnabled: true,
-            tabBarIcon: () => <Ionicons name="ios-radio" size={32} />,
+            tabBarIcon: initIcon("ios-radio", "Ionicons"),
           }}
-        />
-        <Stack.Screen
+        >
+          {(props) => <MenuPage {...props} />}
+        </Tab.Screen>
+        <Tab.Screen
           name="home"
-          component={tndView}
           options={{
             tabBarLabel: "運行情報",
             headerTransparent: true,
             gestureEnabled: true,
-            tabBarIcon: () => <Ionicons name="md-train" size={32} />,
+            tabBarIcon: initIcon("md-train", "Ionicons"),
+            tabBarBadge: areaInfo ? "!" : undefined,
           }}
-        />
+        >
+          {(props) => <TNDView {...props} />}
+        </Tab.Screen>
       </Tab.Navigator>
     </NavigationContainer>
   );
 }
-function top() {
-  return (
-    <Stack.Navigator>
-      <Stack.Screen
-        name="Apps"
-        component={Apps}
-        options={{
-          headerShown: false,
-          gestureEnabled: true,
-          headerTransparent: true,
-        }}
-      />
-      <Stack.Screen
-        name="trainbase"
-        component={trainbase}
-        options={{
-          title: "トレインビジョン",
-          gestureEnabled: true,
-          ...TransitionPresets.SlideFromRightIOS,
-        }}
-      />
-      <Stack.Screen
-        name="howto"
-        component={howto}
-        options={{
-          title: "使い方",
-          ...optionData,
-        }}
-      />
-      <Stack.Screen name="news" component={News} options={optionData} />
-      <Stack.Screen
-        name="trainMenu"
-        component={trainMenu}
-        options={optionData}
-      />
-    </Stack.Navigator>
-  );
-}
-function menuPage() {
-  return (
-    <Stack.Navigator>
-      <Stack.Screen
-        name="menu"
-        component={menu}
-        options={{
-          headerShown: false,
-          gestureEnabled: true,
-          headerTransparent: true,
-        }}
-      />
-      <Stack.Screen name="setting" component={Setting} options={optionData} />
-    </Stack.Navigator>
-  );
-}
-const optionData = {
-  gestureEnabled: true,
-  ...TransitionPresets.ModalPresentationIOS,
-  cardOverlayEnabled: true,
-  headerTransparent: true,
-  headerShown: false,
-};

Apps.js

@@ -1,116 +1,271 @@
 import React, { useEffect, useRef, useState } from "react";
-import {
-  View,
-  Platform,
-  ToastAndroid,
-  Text,
-  TouchableOpacity,
-} from "react-native";
+import { View, Platform, Text, TouchableOpacity } from "react-native";
 import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import { Ionicons } from "@expo/vector-icons";
+import { AS } from "./storageControl";
 import { news } from "./config/newsUpdate";
-import { getStationList } from "./lib/getStationList";
-import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
+import { getStationList, lineList } from "./lib/getStationList";
 import { injectJavascriptData } from "./lib/webViewInjectjavascript";
-import { getStationList2 } from "./lib/getStationList2";
+import { checkDuplicateTrainData } from "./lib/checkDuplicateTrainData";
+import { useFavoriteStation } from "./stateBox/useFavoriteStation";
+import { useCurrentTrain } from "./stateBox/useCurrentTrain";
+import { SheetManager } from "react-native-actions-sheet";
 /* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
 
-export default function Apps(props) {
-  const {
-    navigation: { navigate },
-  } = props;
+export default function Apps({ navigation, webview, stationData }) {
+  const { currentTrain } = useCurrentTrain();
+  const { navigate } = navigation;
   var urlcache = "";
-  const webview = useRef();
+  const { favoriteStation } = useFavoriteStation();
+
   //画面表示関連
   const [iconSetting, setIconSetting] = useState(undefined);
   const [mapSwitch, setMapSwitch] = useState(undefined);
   const [stationMenu, setStationMenu] = useState(undefined);
+  const [LoadError, setLoadError] = useState(false);
 
-  //地図用
-  const [mapsStationData, setMapsStationData] = useState(undefined);
-  useEffect(() => {
-    getStationList2().then((data) => {
-      console.log(data);
-      setMapsStationData(data);
-    });
-  }, []);
+  //列車情報表示関連
+  const [trainInfo, setTrainInfo] = useState({
+    trainNum: undefined,
+    limited: undefined,
+    trainData: undefined,
+  });
 
   //駅情報画面用
-  const StationBoardAcSR = useRef(null);
-  const [stationBoardData, setStationBoardData] = useState(undefined);
   const [originalStationList, setOriginalStationList] = useState();
-  const [selectedStation, setSelectedStation] = useState(undefined);
-  useEffect(() => getStationList().then(setOriginalStationList), []);
+  const [trainMenu, setTrainMenu] = useState("true");
+  let once = false;
+  useEffect(() => {
+    getStationList().then(setOriginalStationList);
+  }, []);
 
   //地図表示テキスト
   const injectJavascript = injectJavascriptData(
     mapSwitch,
     iconSetting,
-    stationMenu
+    stationMenu,
+    trainMenu
   );
 
   useEffect(() => {
     //ニュース表示
-    AsyncStorage.getItem("status")
+    AS.getItem("status")
       .then((d) => {
         if (d != news) navigate("news");
       })
-      .catch((e) => navigate("news"));
+      .catch(() => navigate("news"));
+  }, []);
 
+  useEffect(() => {
     //列車アイコンスイッチ
-    AsyncStorage.getItem("iconSwitch")
+    AS.getItem("iconSwitch")
       .then((d) => {
         if (d) {
           setIconSetting(d);
         } else {
-          AsyncStorage.setItem("iconSwitch", "true").then(() =>
-            Updates.reloadAsync()
-          );
+          AS.setItem("iconSwitch", "true").then(Updates.reloadAsync);
         }
       })
-      .catch((d) =>
-        AsyncStorage.setItem("iconSwitch", "true").then(() =>
-          Updates.reloadAsync()
-        )
-      );
+      .catch(() => AS.setItem("iconSwitch", "true").then(Updates.reloadAsync));
+  }, []);
 
+  useEffect(() => {
     //地図スイッチ
-    AsyncStorage.getItem("mapSwitch")
+    AS.getItem("mapSwitch")
       .then((d) => {
         if (d) {
           setMapSwitch(d);
         } else {
-          AsyncStorage.setItem("mapSwitch", "false").then(() =>
-            Updates.reloadAsync()
-          );
+          AS.setItem("mapSwitch", "false").then(Updates.reloadAsync);
         }
       })
-      .catch((d) =>
-        AsyncStorage.setItem("mapSwitch", "false").then(() =>
-          Updates.reloadAsync()
-        )
-      );
+      .catch(() => AS.setItem("mapSwitch", "false").then(Updates.reloadAsync));
+  }, []);
+
+  useEffect(() => {
     //駅メニュースイッチ
-    AsyncStorage.getItem("stationSwitch")
+    AS.getItem("stationSwitch")
       .then((d) => {
         if (d) {
           setStationMenu(d);
         } else {
-          AsyncStorage.setItem("stationSwitch", "true").then(() =>
-            Updates.reloadAsync()
-          );
+          AS.setItem("stationSwitch", "true").then(Updates.reloadAsync);
         }
       })
-      .catch((d) =>
-        AsyncStorage.setItem("stationSwitch", "true").then(() =>
-          Updates.reloadAsync()
-        )
+      .catch(() =>
+        AS.setItem("stationSwitch", "true").then(Updates.reloadAsync)
       );
   }, []);
+  useEffect(() => {
+    //列車メニュースイッチ
+    AS.getItem("trainSwitch")
+      .then((d) => {
+        if (d) {
+          setTrainMenu(d);
+        } else {
+          AS.setItem("trainSwitch", "true").then(Updates.reloadAsync);
+        }
+      })
+      .catch(() => AS.setItem("trainSwitch", "true").then(Updates.reloadAsync));
+  }, []);
 
+  const onMessage = (event) => {
+    if (event.nativeEvent.data.includes("train.html")) {
+      navigate("trainbase", { info: event.nativeEvent.data, from: "Train" });
+      return;
+    }
+    if (!originalStationList) {
+      alert("駅名標データを取得中...");
+      return;
+    }
+    const dataSet = JSON.parse(event.nativeEvent.data);
+    switch (dataSet.type) {
+      case "LoadError": {
+        setLoadError(true);
+        return;
+      }
+      case "PopUpMenu":
+        {
+          const selectedStationPDFAddress = dataSet.pdf;
+          const findStationEachLine = (selectLine) => {
+            let NearStation = selectLine.filter(
+              (d) => d.StationTimeTable == selectedStationPDFAddress
+            );
+            return NearStation;
+          };
+          let returnDataBase = lineList
+            .map((d) => findStationEachLine(originalStationList[d]))
+            .filter((d) => d.length > 0)
+            .reduce((pre, current) => {
+              pre.push(...current);
+              return pre;
+            }, []);
+
+          if (returnDataBase.length) {
+            const payload = {
+              currentStation: returnDataBase,
+              originalStationList: originalStationList,
+              navigate: navigate,
+              goTo: "Apps",
+              useShow: () =>
+                SheetManager.show("StationDetailView", {
+                  payload,
+                }),
+              onExit: () => {
+                SheetManager.hide("StationDetailView");
+              },
+            };
+            SheetManager.show("StationDetailView", {
+              payload,
+            });
+          }
+        }
+        return;
+      case "ShowTrainTimeInfo": {
+        const { trainNum, limited } = dataSet;
+        //alert(trainNum, limited);
+        setTrainInfo({
+          trainNum,
+          limited,
+          trainData: checkDuplicateTrainData(
+            currentTrain.filter((a) => a.num == trainNum)
+          ),
+        }); //遅延情報は未実装
+        const payload = {
+          data: {
+            trainNum,
+            limited,
+          },
+          navigate,
+          originalStationList,
+          openStationACFromEachTrainInfo,
+        };
+        SheetManager.show("EachTrainInfo", {
+          payload,
+        });
+        return;
+      }
+      default: {
+        return;
+      }
+    }
+  };
+
+  const onNavigationStateChange = (event) => {
+    if (event.url != urlcache) {
+      //URL二重判定回避
+      urlcache = event.url;
+
+      if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) {
+        if (Platform.OS === "android") navigate("howto", { info: event.url });
+        webview?.current.goBack();
+        //Actions.howto();
+      } else if (
+        event.url.includes("https://train.jr-shikoku.co.jp/train.html")
+      ) {
+        //Actions.trainbase({info: event.url});
+        if (Platform.OS === "android")
+          navigate("trainbase", { info: event.url });
+        webview?.current.goBack();
+      }
+    }
+  };
+  function sleep(waitSec, callbackFunc) {
+    // 経過時間（秒）
+    var spanedSec = 0;
+
+    // 1秒間隔で無名関数を実行
+    var id = setInterval(function () {
+      spanedSec++;
+
+      // 経過時間 >= 待機時間の場合、待機終了。
+      if (spanedSec >= waitSec) {
+        // タイマー停止
+        clearInterval(id);
+
+        // 完了時、コールバック関数を実行
+        if (callbackFunc) callbackFunc();
+      }
+    }, 1);
+  }
+
+  const openStationACFromEachTrainInfo = async (stationName) => {
+    await SheetManager.hide("EachTrainInfo");
+    const findStationEachLine = (selectLine) => {
+      let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
+      return NearStation;
+    };
+    let returnDataBase = lineList
+      .map((d) => findStationEachLine(originalStationList[d]))
+      .filter((d) => d.length > 0)
+      .reduce((pre, current) => {
+        pre.push(...current);
+        return pre;
+      }, []);
+    if (returnDataBase.length) {
+      const payload = {
+        currentStation: returnDataBase,
+        originalStationList: originalStationList,
+        navigate: navigate,
+        goTo: "Apps",
+        useShow: () =>
+          SheetManager.show("StationDetailView", {
+            payload,
+          }),
+        onExit: () => {
+          SheetManager.hide("StationDetailView");
+        },
+      };
+      SheetManager.show("StationDetailView", {
+        payload,
+      });
+    } else {
+      SheetManager.hide("StationDetailView");
+    }
+  };
   return (
     <View
       style={{
@@ -120,7 +275,7 @@ export default function Apps(props) {
     >
       {/* {Status} */}
       <WebView
-        useWebKit={true}
+        useWebKit
         ref={webview}
         source={{ uri: "https://train.jr-shikoku.co.jp/sp.html" }}
         originWhitelist={[
@@ -128,125 +283,115 @@ export default function Apps(props) {
           "https://train.jr-shikoku.co.jp/sp.html",
         ]}
         mixedContentMode={"compatibility"}
-        javaScriptEnabled={true}
-        allowsBackForwardNavigationGestures={true}
-        setSupportMultipleWindows={true}
-        onNavigationStateChange={(event) => {
-          if (event.url != urlcache) {
-            //URL二重判定回避
-            urlcache = event.url;
-
-            if (
-              event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")
-            ) {
-              if (Platform.OS === "android") navigate("howto");
-              webview?.current.goBack();
-              //Actions.howto();
-            } else if (
-              event.url.includes("https://train.jr-shikoku.co.jp/train.html")
-            ) {
-              //Actions.trainbase({info: event.url});
-              if (Platform.OS === "android")
-                navigate("trainbase", { info: event.url });
-              webview?.current.goBack();
-            }
-          }
-        }}
-        onMessage={(event) => {
-          if (!originalStationList) {
-            alert("駅名標データを取得中...");
-            return;
-          }
-          if (event.nativeEvent.data.includes("PopUpMenu")) {
-            const selectedStationPDFAddress = event.nativeEvent.data
-              .split(",")[3]
-              .replace("'", "")
-              .replace("'", "");
-
-            const findStationEachLine = (selectLine) => {
-              let NearStation = selectLine.filter(
-                (d) => d.StationTimeTable == selectedStationPDFAddress
-              );
-              return NearStation;
-            };
-
-            const lineList = [
-              "予讃線",
-              "松宇線",
-              "伊予灘線",
-              "土讃線",
-              "窪川線",
-              "高徳線",
-              "徳島線",
-              "鳴門線",
-              "瀬戸大橋線",
-            ];
-            let returnDataBase = lineList
-              .map((d) => findStationEachLine(originalStationList[d]))
-              .filter((d) => d.length > 0)
-              .reduce((pre, current) => {
-                pre.push(...current);
-                return pre;
-              }, []);
-            if (returnDataBase.length) {
-              let currentStation =
-                currentStation == undefined ? [] : currentStation;
-              setStationBoardData(returnDataBase);
-              StationBoardAcSR.current?.setModalVisible();
-            } else {
-              setStationBoardData(undefined);
-              StationBoardAcSR.current?.hide();
-            }
-
-            return;
-          }
-          navigate("trainbase", { info: event.nativeEvent.data });
-        }}
+        javaScriptEnabled
+        allowsBackForwardNavigationGestures
+        setSupportMultipleWindows
+        onNavigationStateChange={onNavigationStateChange}
+        onMessage={onMessage}
         injectedJavaScript={injectJavascript}
-        onTouchMove={() => StationBoardAcSR.current?.hide()}
-      />
-      <TouchableOpacity
-        onPress={() =>
-          navigate("trainMenu", { webview, stationData: mapsStationData })
-        }
-        style={{
-          position: "absolute",
-          top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
-          left: 10,
-          width: 50,
-          height: 50,
-          backgroundColor: "#0099CC",
-          borderColor: "white",
-          borderStyle: "solid",
-          borderWidth: 1,
-          borderRadius: 50,
-          alignContent: "center",
-          alignSelf: "center",
-          alignItems: "center",
-          display: mapSwitch == "true" ? "flex" : "none",
+        onLoadEnd={() => {
+          if (once) return () => {};
+          if (!stationData) return () => {};
+          if (favoriteStation.length > 0) {
+            const getStationLine = (now) => {
+              const returnData = Object.keys(stationData).filter((d) => {
+                const cache = stationData[d].findIndex(
+                  (data) => data.Station_JP == now.Station_JP
+                );
+                return cache != -1;
+              });
+              return returnData[0];
+            };
+            const lineName = getStationLine(favoriteStation[0][0]);
+            webview.current?.injectJavaScript(
+              `MoveDisplayStation('${lineName}_${favoriteStation[0][0].MyStation}_${favoriteStation[0][0].Station_JP}')`
+            );
+            once = true;
+          }
         }}
-      >
-        <View style={{ flex: 1 }} />
-        <Text
-          style={{
-            textAlign: "center",
-            width: "auto",
-            height: "auto",
-            textAlignVertical: "center",
-            fontWeight: "bold",
-            color: "white",
-          }}
-        >
-          三
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
-
-      <StationDeteilView
-        StationBoardAcSR={StationBoardAcSR}
-        currentStation={stationBoardData}
-        originalStationList={originalStationList}
+      />
+      <MapsButton
+        onPress={() => navigate("trainMenu", { webview })}
+        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+        mapSwitch={mapSwitch == "true" ? "flex" : "none"}
+      />
+      <ReloadButton
+        onPress={() => webview.current.reload()}
+        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+        LoadError={LoadError}
       />
     </View>
   );
 }
+
+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 }} />
+      <Text style={styles.text}>三</Text>
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};
+
+const ReloadButton = ({ onPress, top, mapSwitch, LoadError = false }) => {
+  const styles = {
+    touch: {
+      position: "absolute",
+      top,
+      right: 10,
+      width: 50,
+      height: 50,
+      backgroundColor: LoadError ? "red" : "#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="reload" color="white" size={30} />
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};

MenuPage.js

@@ -0,0 +1,97 @@
+import React, { useEffect } from "react";
+import {
+  createStackNavigator,
+  TransitionPresets,
+} from "@react-navigation/stack";
+import { AS } from "./storageControl";
+import TrainBase from "./trainbaseview";
+import HowTo from "./howto";
+import Menu from "./menu";
+import Setting from "./components/settings.js";
+import { useFavoriteStation } from "./stateBox/useFavoriteStation";
+import { optionData } from "./lib/stackOption.js";
+import CurrentTrainListView from "./components/CurrentTrainListView.js";
+import AllTrainDiagramView from "./components/AllTrainDiagramView.js";
+import { useCurrentTrain } from "./stateBox/useCurrentTrain.js";
+const Stack = createStackNavigator();
+
+export function MenuPage({ navigation }) {
+  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
+  const { getCurrentTrain } = useCurrentTrain();
+  useEffect(() => {
+    const unsubscribe = navigation.addListener("tabPress", (e) => {
+      AS.getItem("favoriteStation")
+        .then((d) => {
+          const returnData = JSON.parse(d);
+          if (favoriteStation.toString() != d) {
+            setFavoriteStation(returnData);
+          }
+        })
+        .catch((d) => console.log(d));
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="menu"
+        options={{
+          headerShown: false,
+          gestureEnabled: true,
+          headerTransparent: true,
+        }}
+      >
+        {(props) => <Menu {...props} getCurrentTrain={getCurrentTrain} />}
+      </Stack.Screen>
+      <Stack.Screen name="setting" options={optionData}>
+        {(props) => <Setting {...props} />}
+      </Stack.Screen>
+      <Stack.Screen
+        name="trainbase"
+        options={{
+          ...TransitionPresets.ModalPresentationIOS,
+          cardOverlayEnabled: true,
+          headerShown: false,
+          gestureEnabled: true,
+          headerTransparent: true,
+          gestureResponseDistance: { vertical: 300 },
+        }}
+      >
+        {(props) => <TrainBase {...props} />}
+      </Stack.Screen>
+      <Stack.Screen
+        name="currentTrainIDList"
+        options={{
+          ...TransitionPresets.ModalPresentationIOS,
+          cardOverlayEnabled: true,
+          headerShown: false,
+          gestureEnabled: true,
+          headerTransparent: true,
+          gestureResponseDistance: { vertical: 300 },
+        }}
+      >
+        {(props) => <CurrentTrainListView {...props} />}
+      </Stack.Screen>
+      <Stack.Screen
+        name="AllTrainIDList"
+        options={{
+          ...TransitionPresets.ModalPresentationIOS,
+          cardOverlayEnabled: true,
+          headerShown: false,
+          headerTransparent: true,
+        }}
+      >
+        {(props) => <AllTrainDiagramView {...props} />}
+      </Stack.Screen>
+      <Stack.Screen
+        name="howto"
+        options={{
+          ...optionData,
+        }}
+      >
+        {(props) => <HowTo {...props} />}
+      </Stack.Screen>
+    </Stack.Navigator>
+  );
+}

Top.js

@@ -0,0 +1,100 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  createStackNavigator,
+  TransitionPresets,
+} from "@react-navigation/stack";
+import { getStationList2 } from "./lib/getStationList2";
+import Apps from "./Apps";
+import TrainBase from "./trainbaseview";
+import HowTo from "./howto";
+import News from "./components/news.js";
+import TrainMenu from "./components/trainMenu.js";
+import FavoriteList from "./components/FavoriteList.js";
+import { useFavoriteStation } from "./stateBox/useFavoriteStation";
+import { optionData } from "./lib/stackOption.js";
+import { useCurrentTrain } from "./stateBox/useCurrentTrain.js";
+const Stack = createStackNavigator();
+export const Top = ({ navigation }) => {
+  const webview = useRef();
+  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
+  const { getCurrentTrain } = useCurrentTrain();
+
+  //地図用
+  const [mapsStationData, setMapsStationData] = useState(undefined);
+
+  useEffect(() => {
+    getStationList2().then(setMapsStationData);
+  }, []);
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener("tabLongPress", (e) => {
+      navigation.navigate("favoriteList");
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Apps"
+        options={{
+          headerShown: false,
+          gestureEnabled: true,
+          headerTransparent: true,
+        }}
+      >
+        {(props) => (
+          <Apps
+            {...props}
+            webview={webview}
+            stationData={mapsStationData}
+            getCurrentTrain={getCurrentTrain}
+          />
+        )}
+      </Stack.Screen>
+      <Stack.Screen
+        name="trainbase"
+        options={{
+          title: "トレインビジョン",
+          gestureEnabled: true,
+          ...TransitionPresets.SlideFromRightIOS,
+        }}
+      >
+        {(props) => <TrainBase {...props} />}
+      </Stack.Screen>
+      <Stack.Screen
+        name="howto"
+        options={{
+          ...optionData,
+        }}
+      >
+        {(props) => <HowTo {...props} />}
+      </Stack.Screen>
+      <Stack.Screen name="news" options={optionData}>
+        {(props) => <News {...props} />}
+      </Stack.Screen>
+      <Stack.Screen name="trainMenu" options={optionData}>
+        {(props) => (
+          <TrainMenu
+            {...props}
+            webview={webview}
+            stationData={mapsStationData}
+          />
+        )}
+      </Stack.Screen>
+      <Stack.Screen
+        name="favoriteList"
+        options={{ ...optionData, gestureEnabled: false }}
+      >
+        {(props) => (
+          <FavoriteList
+            {...props}
+            webview={webview}
+            stationData={mapsStationData}
+          />
+        )}
+      </Stack.Screen>
+    </Stack.Navigator>
+  );
+};

UpdateAsync.js

@@ -1,7 +1,7 @@
 import { ToastAndroid } from "react-native";
 import * as Updates from "expo-updates";
 
-export const UpdateAsync = () =>
+export const UpdateAsync = () => {
   Updates.checkForUpdateAsync()
     .then((update) => {
       if (!update.isAvailable) return;
@@ -34,3 +34,4 @@ export const UpdateAsync = () =>
     .finally(() => {
       return;
     });
+};

app.json

@@ -3,8 +3,11 @@
     "name": "JR四国運行状況",
     "slug": "jrshikoku",
     "privacy": "public",
-    "platforms": ["ios", "android"],
-    "version": "4.4",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "version": "4.6",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "splash": {
@@ -13,11 +16,14 @@
       "backgroundColor": "#00b8ff"
     },
     "updates": {
-      "fallbackToCacheTimeout": 0
+      "fallbackToCacheTimeout": 0,
+      "url": "https://u.expo.dev/398abf60-57a7-11e9-970c-8f04356d08bf"
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
-      "buildNumber": "22",
+      "buildNumber": "31",
       "supportsTablet": true,
       "bundleIdentifier": "jrshikokuinfo.xprocess.hrkn",
       "config": {
@@ -26,14 +32,24 @@
     },
     "android": {
       "package": "jrshikokuinfo.xprocess.hrkn",
-      "versionCode": 16,
-      "permissions": ["ACCESS_FINE_LOCATION"],
+      "versionCode": 20,
+      "permissions": [
+        "ACCESS_FINE_LOCATION"
+      ],
       "googleServicesFile": "./google-services.json",
       "config": {
         "googleMaps": {
           "apiKey": "AIzaSyAmFb-Yj033bXZWlSzNrfq_0jc1PgRrWcE"
         }
       }
+    },
+    "extra": {
+      "eas": {
+        "projectId": "398abf60-57a7-11e9-970c-8f04356d08bf"
+      }
+    },
+    "runtimeVersion": {
+      "policy": "sdkVersion"
     }
   }
 }

assets/originData/lineColorList.js

@@ -0,0 +1,11 @@
+export default {
+  Y: "#F5AC13",
+  U: "#F5AC13",
+  S: "#9AA7D7",
+  D: "#DC4586",
+  K: "#DC4586",
+  B: "#366481",
+  N: "#881F61",
+  T: "#87CA3B",
+  M: "#0071be",
+};

assets/originData/uwajima.js

@@ -14,7 +14,7 @@ export default [
 {"Station_JP" : "八幡浜",   "Station_EN" : "Yawatahama",    "MyStation" : "11", "StationNumber" : "U18", "DispNum" : "3", "StationTimeTable" : "http://www.jr-shikoku.co.jp/01_trainbus/jikoku/pdf/yawatahama.pdf",    "StationMap":"https://www.google.co.jp/maps/place/33.458146,132.436002", "JrHpUrl" : "http://www.jr-shikoku.co.jp/01_trainbus/kakueki/yawatahama/"},
 {"Station_JP" : "双岩",     "Station_EN" : "Futaiwa",       "MyStation" : "12", "StationNumber" : "U19", "DispNum" : "2", "StationTimeTable" : "http://www.jr-shikoku.co.jp/01_trainbus/jikoku/pdf/futaiwa.pdf",       "StationMap":"https://www.google.co.jp/maps/place/33.424669,132.457934", "JrHpUrl" : ""},
 {"Station_JP" : "伊予石城", "Station_EN" : "Iyo-Iwaki",     "MyStation" : "13", "StationNumber" : "U20", "DispNum" : "2", "StationTimeTable" : "http://www.jr-shikoku.co.jp/01_trainbus/jikoku/pdf/iyo-iwaki.pdf",     "StationMap":"https://www.google.co.jp/maps/place/33.391413,132.473259", "JrHpUrl" : ""},
-{"Station_JP" : "卯之町",   "Station_EN" : "Unomachi",      "MyStation" : "14", "StationNumber" : "U22", "DispNum" : "3", "StationTimeTable" : "http://www.jr-shikoku.co.jp/01_trainbus/jikoku/pdf/unomachi.pdf",      "StationMap":"https://www.google.co.jp/maps/place/33.363175,132.509959", "JrHpUrl" : "http://www.jr-shikoku.co.jp/01_trainbus/kakueki/unomachi/"},
+{"Station_JP" : "卯之町",   "Station_EN" : "Unomachi",      "MyStation" : "14", "StationNumber" : "U22", "DispNum" : "3", "StationTimeTable" : "http://www.jr-shikoku.co.jp/01_trainbus/jikoku/pdf/unomachi.pdf",      "StationMap":"https://www.google.co.jp/maps/place/33.363175,132.509959", "JrHpUrl" : ""},
 {"Station_JP" : "下宇和",   "Station_EN" : "Shimo-Uwa",     "MyStation" : "15", "StationNumber" : "U23", "DispNum" : "2", "StationTimeTable" : "http://www.jr-shikoku.co.jp/01_trainbus/jikoku/pdf/shimo-uwa.pdf",     "StationMap":"https://www.google.co.jp/maps/place/33.349786,132.531172", "JrHpUrl" : ""},
 {"Station_JP" : "立間",     "Station_EN" : "Tachima",       "MyStation" : "16", "StationNumber" : "U24", "DispNum" : "2", "StationTimeTable" : "http://www.jr-shikoku.co.jp/01_trainbus/jikoku/pdf/tachima.pdf",       "StationMap":"https://www.google.co.jp/maps/place/33.296721,132.539509", "JrHpUrl" : ""},
 {"Station_JP" : "伊予吉田", "Station_EN" : "Iyo-Yoshida",   "MyStation" : "17", "StationNumber" : "U25", "DispNum" : "2", "StationTimeTable" : "http://www.jr-shikoku.co.jp/01_trainbus/jikoku/pdf/iyo-yoshida.pdf",   "StationMap":"https://www.google.co.jp/maps/place/33.273287,132.544098", "JrHpUrl" : ""},

components/ActionSheetComponents/EachTrainInfo.js

@@ -0,0 +1,802 @@
+import React, { useEffect, useState, useRef } from "react";
+import {
+  View,
+  LayoutAnimation,
+  ScrollView,
+  Linking,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  TouchableHighlight,
+  Platform,
+} from "react-native";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import ActionSheet, {
+  SheetManager,
+  useScrollHandlers,
+} from "react-native-actions-sheet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AS } from "../../storageControl";
+import LottieView from "lottie-react-native";
+import trainList from "../../assets/originData/trainList";
+import { lineList } from "../../lib/getStationList";
+import {
+  heightPercentageToDP,
+  widthPercentageToDP,
+} from "react-native-responsive-screen";
+import lineColorList from "../../assets/originData/lineColorList";
+import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
+import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
+
+export const EachTrainInfo = (props) => {
+  if (!props.payload) return <></>;
+  const {
+    data,
+    navigate,
+    originalStationList,
+    openStationACFromEachTrainInfo = () => {},
+    from,
+  } = props.payload;
+  const [trainData, setTrainData] = useState([]);
+  const [isTop, setIsTop] = useState(true);
+  const [currentPosition, setCurrentPosition] = useState([]);
+
+  const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
+
+  const { currentTrain } = useCurrentTrain();
+
+  const [currentTrainData, setCurrentTrainData] = useState([]);
+
+  useEffect(() => {
+    setCurrentTrainData(
+      checkDuplicateTrainData(
+        currentTrain.filter((d) => d.num == data.trainNum)
+      )
+    );
+  }, [currentTrain]);
+
+  useEffect(() => {
+    //列車現在地アイコン表示スイッチ
+    AS.getItem("trainPositionSwitch")
+      .then((d) => {
+        if (d) {
+          setTrainPositionSwitch(d);
+        } else {
+        }
+      })
+      .catch((d) => AS.setItem("trainPositionSwitch", "false"));
+  }, []);
+  const insets = useSafeAreaInsets();
+  const getStationData = (stationName) => {
+    const Stations = stationList.map((a) =>
+      a.filter((d) => d.StationName == stationName)
+    );
+    const Station =
+      Stations &&
+      Stations.reduce((newArray, e) => {
+        return newArray.concat(e);
+      }, []);
+    if (!Station[0]) return [];
+    return Station.map((d) => d.StationNumber)[0];
+  };
+  useEffect(() => {
+    //currentTrainData.Pos = "鴨川～端岡"; //test
+    if (!currentTrainData?.Pos) return;
+    if (currentTrainData?.Pos.match("～")) {
+      const pos = currentTrainData?.Pos.replace("（下り）", "")
+        .replace("（上り）", "")
+        .split("～");
+      setCurrentPosition([getStationData(pos[0]), getStationData(pos[1])]);
+    } else {
+      setCurrentPosition([getStationData(currentTrainData?.Pos)]);
+    }
+  }, [currentTrainData]);
+
+  const stationList =
+    originalStationList &&
+    lineList.map((d) =>
+      originalStationList[d].map((a) => ({
+        StationNumber: a.StationNumber,
+        StationName: a.Station_JP,
+      }))
+    );
+  const stopStationIDList = trainData.map((i, index) => {
+    const [station, se, time] = i.split(",");
+    const Stations = stationList.map((a) =>
+      a.filter((d) => d.StationName == station)
+    );
+    const StationNumbers =
+      Stations &&
+      Stations.reduce((newArray, e) => {
+        return newArray.concat(e);
+      }, [])
+        .filter((d) => d.StationNumber)
+        .map((d) => d.StationNumber);
+    return StationNumbers[0];
+  });
+  function findReversalPoints(array) {
+    try {
+      // arrayは現在位置の駅ID(駅在宅の場合は1つの配列、駅間の場合は2つの配列)
+      // stopStationIDListは停車駅の駅IDの配列
+      if (!stopStationIDList.length) return [];
+      // arrayが二次元配列だったら早期リターン
+      if (!array instanceof Array) return [];
+      if (!array.length) return [];
+      if (array[0] instanceof Array) return [];
+      const arrayNumber = array.map((d) => ({
+        line: d
+          .split("")
+          .filter((s) => "A" < s && s < "Z")
+          .join(""),
+        ID: d
+          .split("")
+          .filter((s) => "0" <= s && s <= "9")
+          .join(""),
+      }));
+      const stopStationIDListNumber = stopStationIDList.map((d) => {
+        if (!d) return { line: [], ID: [] };
+        return {
+          line: d
+            .split("")
+            .filter((s) => "A" < s && s < "Z")
+            .join(""),
+          ID: d
+            .split("")
+            .filter((s) => "0" <= s && s <= "9")
+            .join(""),
+        };
+      });
+      // 完全一致
+      if (array.length == 1) {
+        const index = stopStationIDList.indexOf(array[0]);
+        if (index != -1) return [index];
+        // 通過駅の場合
+        for (let i = 0; i < stopStationIDListNumber.length - 1; i++) {
+          if (stopStationIDListNumber[i].ID < arrayNumber[0].ID) {
+            if (stopStationIDListNumber[i + 1].ID > arrayNumber[0].ID) {
+              return [i + 1];
+            }
+          }
+          if (stopStationIDListNumber[i].ID > arrayNumber[0].ID) {
+            if (stopStationIDListNumber[i + 1].ID < arrayNumber[0].ID) {
+              return [i + 1];
+            }
+          }
+        }
+      }
+      // 駅間の場合
+      if (array.length == 2) {
+        const index1 = stopStationIDList.indexOf(array[0]);
+        const index2 = stopStationIDList.indexOf(array[1]);
+        if (index1 != -1 && index2 != -1) {
+          // 駅間で通過駅も無い場合
+          if (index1 < index2) {
+            if (index1 + 1 == index2) {
+              return [index2];
+            } else {
+              const returnArray = [];
+              for (let i = index1 + 1; i <= index2; i++) {
+                returnArray.push(i);
+              }
+              return returnArray;
+            }
+          }
+          if (index1 > index2) {
+            if (index2 + 1 == index1) return [index1];
+            else {
+              const returnArray = [];
+              for (let i = index2 + 1; i <= index1; i++) {
+                returnArray.push(i);
+              }
+              return returnArray;
+            }
+          }
+        } else {
+          const getNearStationID = (stationID) => {
+            for (let i = 0; i <= stopStationIDListNumber.length; i++) {
+              if (stopStationIDListNumber[i].ID < stationID) {
+                if (stopStationIDListNumber[i + 1].ID > stationID) {
+                  return i + 1;
+                }
+              }
+              if (stopStationIDListNumber[i].ID > stationID) {
+                if (stopStationIDListNumber[i + 1].ID < stationID) {
+                  return i + 1;
+                }
+              }
+            }
+          };
+          let newIndex1 = index1;
+          let newIndex2 = index2;
+          if (index1 == -1) {
+            newIndex1 = getNearStationID(arrayNumber[0].ID);
+          }
+          if (index2 == -1) {
+            newIndex2 = getNearStationID(arrayNumber[1].ID);
+          }
+          if (newIndex1 && newIndex2) {
+            return [newIndex1, newIndex2];
+          }
+
+          // 通過駅の場合
+        }
+
+        return [];
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }
+  // 使用例
+  const points =
+    trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : [];
+
+  useEffect(() => {
+    setIsTop(true);
+    if (!data.trainNum) return;
+    const TD = trainList[data.trainNum];
+    if (!TD) {
+      setTrainData([]);
+      return;
+    }
+    setTrainData(TD.split("#").filter((d) => d != ""));
+  }, [data]);
+  const getType = (string) => {
+    switch (string) {
+      case "express":
+        return "特急";
+      case "rapid":
+        return "快速";
+      default:
+        return "";
+    }
+  };
+
+  const migrateTrainName = (string) => {
+    return string
+      .replace("マリン", "マリンライナー")
+      .replace("ライナーライナー", "ライナー");
+  };
+  const actionSheetRef = useRef(null);
+  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
+  return (
+    <ActionSheet
+      gestureEnabled={isTop}
+      CustomHeaderComponent={<></>}
+      ref={actionSheetRef}
+      drawUnderStatusBar={false}
+      isModal={Platform.OS == "ios"}
+      containerStyle={
+        Platform.OS == "android"
+          ? {
+              paddingBottom: insets.bottom,
+            }
+          : {}
+      }
+      useBottomSafeAreaPadding={Platform.OS == "android"}
+    >
+      <View
+        style={{
+          backgroundColor: "#0099CC",
+          borderTopRadius: 5,
+          borderColor: "dark",
+          borderWidth: 1,
+        }}
+      >
+        <View style={{ height: 26, width: "100%" }}>
+          <View
+            style={{
+              height: 6,
+              width: 45,
+              borderRadius: 100,
+              backgroundColor: "#f0f0f0",
+              marginVertical: 10,
+              alignSelf: "center",
+            }}
+          />
+        </View>
+        <View
+          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+        >
+          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+            {data.limited
+              ? getType(data.limited.split(":")[0]) +
+                migrateTrainName(
+                  data.limited.split(":")[1] ||
+                    (trainData.length > 0
+                      ? trainData[trainData.length - 1].split(",")[0] + "行き"
+                      : " ")
+                )
+              : ""}
+          </Text>
+          <View style={{ flex: 1 }} />
+          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+            {data.trainNum}
+          </Text>
+          {data.limited != undefined &&
+            getType(data.limited.split(":")[0]) &&
+            !data.limited.split(":")[1].match("サンポート") && (
+              <Ionicons
+                name="subway"
+                color="white"
+                size={30}
+                style={{ margin: 5 }}
+                onPress={() => {
+                  LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
+                  navigate("trainbase", {
+                    info: "train.html?tn=" + data.trainNum,
+                    from,
+                  });
+                  SheetManager.hide("EachTrainInfo");
+                }}
+              />
+            )}
+        </View>
+        {from == "AllTrainDiagramView" || (
+          <ScrollView
+            style={{
+              flexDirection: "row",
+              //width: widthPercentageToDP("200%"),
+              minHeight: 200,
+              height: heightPercentageToDP("20%"),
+            }}
+            horizontal
+            pagingEnabled
+          >
+            <View
+              style={{
+                flexDirection: "row",
+                minHeight: 200,
+                height: heightPercentageToDP("20%"),
+                width: widthPercentageToDP("100%"),
+              }}
+            >
+              <View
+                style={{
+                  flex: 1,
+                  backgroundColor: "white",
+                  borderRadius: 10,
+                  padding: 10,
+                  margin: 10,
+                }}
+              >
+                <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                  現在地 {currentPosition.toString()}
+                </Text>
+                <View style={{ flex: 1 }} />
+                {currentTrainData?.Pos && currentTrainData?.Pos.match("～") ? (
+                  <>
+                    <Text
+                      style={{
+                        fontSize: 28,
+                        color: "#0099CC",
+                        textAlign: "right",
+                      }}
+                    >
+                      {
+                        currentTrainData?.Pos.replace("（下り）", "")
+                          .replace("（上り）", "")
+                          .split("～")[0]
+                      }
+                    </Text>
+                    <Text style={{ color: "#0099CC", textAlign: "right" }}>
+                      ～
+                    </Text>
+                    <Text
+                      style={{
+                        fontSize: 28,
+                        color: "#0099CC",
+                        textAlign: "right",
+                      }}
+                    >
+                      {
+                        currentTrainData?.Pos.replace("（下り）", "")
+                          .replace("（上り）", "")
+                          .split("～")[1]
+                      }
+                    </Text>
+                  </>
+                ) : (
+                  <Text
+                    style={{
+                      fontSize: 28,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    {currentTrainData?.Pos}
+                  </Text>
+                )}
+              </View>
+              <View style={{ flex: 1, flexDirection: "column" }}>
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                    {isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
+                  </Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 32,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    {currentTrainData?.delay}
+                    {isNaN(currentTrainData?.delay) ? "" : "分"}
+                  </Text>
+                </View>
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>列番</Text>
+                  <Text
+                    style={{
+                      fontSize: 32,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    {currentTrainData?.num}
+                  </Text>
+                </View>
+              </View>
+            </View>
+            {/* <View
+            style={{
+              flexDirection: "column",
+              height: heightPercentageToDP("20%"),
+              flex: 1,
+              width: widthPercentageToDP("100%"),
+            }}
+          >
+            <View style={{ flex: 1, flexDirection: "row" }}>
+              <View
+                style={{
+                  flex: 1,
+                  backgroundColor: "white",
+                  borderRadius: 10,
+                  padding: 10,
+                  margin: 10,
+                }}
+              >
+                <Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    fontSize: 20,
+                    color: "#0099CC",
+                    textAlign: "right",
+                  }}
+                >
+                  岡山
+                </Text>
+              </View>
+
+              <View
+                style={{
+                  flex: 3,
+                  backgroundColor: "white",
+                  borderRadius: 10,
+                  padding: 10,
+                  margin: 10,
+                }}
+              >
+                <Text style={{ fontSize: 15, color: "#0099CC" }}>車両案内</Text>
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    fontSize: 20,
+                    color: "#0099CC",
+                    textAlign: "right",
+                  }}
+                >
+                  宇多津でうずしお号と連結
+                </Text>
+              </View>
+            </View>
+            <View style={{ flex: 1, flexDirection: "row" }}>
+              <View
+                style={{
+                  flex: 1,
+                  backgroundColor: "white",
+                  borderRadius: 10,
+                  padding: 10,
+                  margin: 10,
+                }}
+              >
+                <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                  編成(使用車両：2700系)
+                </Text>
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    fontSize: 20,
+                    color: "#0099CC",
+                    textAlign: "left",
+                  }}
+                >
+                  {"[<自][自>][アン自|指>][アン指|G>]"}
+                </Text>
+              </View>
+            </View>
+          </View> */}
+          </ScrollView>
+        )}
+        <View
+          style={{
+            alignItems: "center",
+            backgroundColor: "white",
+            flexDirection: "row",
+          }}
+        >
+          <View
+            style={{
+              padding: 8,
+              flexDirection: "row",
+              borderBottomWidth: 1,
+              borderBottomColor: "#f0f0f0",
+              flex: 1,
+            }}
+          >
+            <Text style={{ fontSize: 20 }}>停車駅</Text>
+            <View style={{ flex: 1 }} />
+            <View style={{ flexDirection: "row" }}>
+              {!isNaN(currentTrainData?.delay) &&
+                currentTrainData?.delay != 0 && (
+                  <Text
+                    style={{
+                      fontSize: 15,
+                      color: "black",
+                      position: "absolute",
+                      right: 110,
+                      textAlign: "right",
+                      textDecorationLine: "line-through",
+                    }}
+                  >
+                    (定刻)
+                  </Text>
+                )}
+              <Text
+                style={{
+                  fontSize: 20,
+                  color: isNaN(currentTrainData?.delay)
+                    ? "black"
+                    : currentTrainData?.delay == 0
+                    ? "black"
+                    : "red",
+                  width: 60,
+                }}
+              >
+                見込
+              </Text>
+              <Text style={{ fontSize: 20, width: 50 }}></Text>
+            </View>
+          </View>
+        </View>
+        <ScrollView
+          {...scrollHandlers}
+          style={{
+            maxHeight: heightPercentageToDP(
+              from == "AllTrainDiagramView" ? "70%" : "50%"
+            ),
+          }}
+          onScroll={(e) => {
+            if (!Platform.OS !== "android") return;
+            setIsTop(e.nativeEvent.contentOffset.y < 0);
+          }}
+        >
+          <View style={{ backgroundColor: "white", alignItems: "center" }}>
+            {/* <LottieView
+                autoPlay
+                loop
+                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                source={require("../../assets/51690-loading-diamonds.json")}
+              />
+              <Text>ほげほげふがふが</Text> */}
+
+            {trainData.map((i, index) => {
+              const [station, se, time] = i.split(",");
+              if(se == "提"){
+                return (
+                  <TouchableWithoutFeedback
+                    onPress={() => Linking.openURL(time)}
+                    key={station}
+                  >
+                    <View style={{ flexDirection: "row" }}>
+                      <View
+                        style={{
+                          padding: 8,
+                          flexDirection: "row",
+                          borderBottomWidth: 1,
+                          borderBottomColor: "#f0f0f0",
+                          flex: 1,
+                        }}
+                      >
+                        <Text style={{ fontSize: 20 }}>{station}</Text>
+                        <View style={{ flex: 1 }} />
+                        <Text style={{ fontSize: 18 }}>
+                          提供元<MaterialCommunityIcons name={"open-in-new"} color="black" size={20} />
+                        </Text>
+                        
+                      </View>
+                    </View>
+                  </TouchableWithoutFeedback>
+                );
+              }
+              const Stations = stationList.map((a) =>
+                a.filter((d) => d.StationName == station)
+              );
+              const StationNumbers =
+                Stations &&
+                Stations.reduce((newArray, e) => {
+                  return newArray.concat(e);
+                }, [])
+                  .filter((d) => d.StationNumber)
+                  .map((d) => d.StationNumber);
+
+              const colorIDs =
+                StationNumbers != null
+                  ? StationNumbers.map((d) => {
+                      return d.split("").filter((s) => "A" < s && s < "Z");
+                    }).reduce((newArray, e) => {
+                      return newArray.concat(e);
+                    }, [])
+                  : [];
+              const EachIDs =
+                StationNumbers != null
+                  ? StationNumbers.map((d) => {
+                      return d
+                        .split("")
+                        .filter((s) => "0" <= s && s <= "9")
+                        .join("");
+                    })
+                  : [];
+              const date = new Date();
+              if (time) {
+                date.setHours(time.split(":")[0], time.split(":")[1]);
+              }
+              if (!isNaN(currentTrainData?.delay)) {
+                date.setMinutes(date.getMinutes() + currentTrainData?.delay);
+              }
+              const timeString = date.toTimeString().split(" ")[0].split(":");
+              return (
+                <TouchableWithoutFeedback
+                  onPress={() => openStationACFromEachTrainInfo(station)}
+                  key={station}
+                >
+                  <View style={{ flexDirection: "row" }}>
+                    <View
+                      style={{
+                        width: 35,
+                        position: "relative",
+                        marginHorizontal: 15,
+                        flexDirection: "row",
+                        height: "101%",
+                      }}
+                    >
+                      {colorIDs.map((color, index) => (
+                        <View
+                          style={{
+                            backgroundColor: lineColorList[color],
+                            flex: 1,
+                          }}
+                          key={color}
+                        >
+                          <View style={{ flex: 1 }} />
+                          <Text
+                            style={{
+                              color: "white",
+                              textAlign: "center",
+                              fontSize: 10,
+                              fontWeight: "bold",
+                            }}
+                          >
+                            {colorIDs[index]}
+                          </Text>
+                          <Text
+                            style={{
+                              color: "white",
+                              textAlign: "center",
+                              fontSize: 10,
+                              fontWeight: "bold",
+                            }}
+                          >
+                            {EachIDs[index]}
+                          </Text>
+                          <View style={{ flex: 1 }} />
+                        </View>
+                      ))}
+                    </View>
+                    <View
+                      style={{
+                        padding: 8,
+                        flexDirection: "row",
+                        borderBottomWidth: 1,
+                        borderBottomColor: "#f0f0f0",
+                        flex: 1,
+                      }}
+                    >
+                      <Text style={{ fontSize: 20 }}>{station}</Text>
+                      <View style={{ flex: 1 }} />
+                      {points && points.findIndex((d) => d == index) >= 0 ? (
+                        <Text
+                          style={{
+                            fontSize: 20,
+                            marginRight: 70,
+                          }}
+                        >
+                          🚊
+                        </Text>
+                      ) : null}
+                      {!isNaN(currentTrainData?.delay) &&
+                        currentTrainData?.delay != 0 && (
+                          <Text
+                            style={{
+                              fontSize: 15,
+                              color: "black",
+                              width: 60,
+                              position: "absolute",
+                              right: 120,
+                              textAlign: "right",
+                              textDecorationLine: "line-through",
+                            }}
+                          >
+                            {time}
+                          </Text>
+                        )}
+                      <Text
+                        style={{
+                          fontSize: 20,
+                          color: isNaN(currentTrainData?.delay)
+                            ? "black"
+                            : currentTrainData?.delay == 0
+                            ? "black"
+                            : "red",
+                          width: 60,
+                        }}
+                      >
+                        {timeString[0]}:{timeString[1]}
+                      </Text>
+                      <Text style={{ fontSize: 18, width: 50 }}>
+                        {se?.replace("発", "出発").replace("着", "到着")}
+                      </Text>
+                    </View>
+                  </View>
+                </TouchableWithoutFeedback>
+              );
+            })}
+
+            <View style={{ flexDirection: "row" }}>
+              <View
+                style={{
+                  padding: 8,
+                  flexDirection: "row",
+                  borderBottomWidth: 1,
+                  borderBottomColor: "#f0f0f0",
+                  flex: 1,
+                }}
+              >
+                <Text style={{ fontSize: 20 }}> </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            </View>
+          </View>
+        </ScrollView>
+      </View>
+    </ActionSheet>
+  );
+};

components/ActionSheetComponents/JRSTraInfo.js

@@ -1,56 +1,43 @@
-import React, { Component, useRef, useState, useEffect } from "react";
+import React, { useRef } from "react";
 import {
-  StatusBar,
-  Platform,
   View,
   LayoutAnimation,
   ScrollView,
   Linking,
   Text,
   TouchableOpacity,
+  Platform,
 } from "react-native";
-import Image from "react-native-remote-svg";
-import Constants from "expo-constants";
-import { List, ListItem } from "native-base";
-import Icon from "react-native-vector-icons/Entypo";
-import * as Location from "expo-location";
-import StatusbarDetect from "../../StatusbarDetect";
-var Status = StatusbarDetect();
-import { useNavigation } from "@react-navigation/native";
-import AutoHeightImage from "react-native-auto-height-image";
-import {
-  widthPercentageToDP as wp,
-  heightPercentageToDP as hp,
-} from "react-native-responsive-screen";
-import {
-  FontAwesome,
-  Fontisto,
-  Foundation,
-  Ionicons,
-  MaterialCommunityIcons,
-} from "@expo/vector-icons";
-import * as WebBrowser from "expo-web-browser";
-import ActionSheet from "react-native-actions-sheet";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import ActionSheet, { useScrollHandlers } from "react-native-actions-sheet";
 import LottieView from "lottie-react-native";
-import SvgUri from "react-native-svg-uri";
-export const JRSTraInfo = (props) => {
-  const {
-    JRSTraInfoEXAcSR,
-    getTime,
-    loadingDelayData,
-    setLoadingDelayData,
-    delayData,
-  } = props;
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTrainDelayData } from "../../stateBox/useTrainDelayData";
+export const JRSTraInfo = () => {
+  const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
+    useTrainDelayData();
+  const actionSheetRef = useRef(null);
+  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
+  const insets = useSafeAreaInsets();
   return (
     <ActionSheet
-      ref={JRSTraInfoEXAcSR}
       gestureEnabled
-      CustomHeaderComponent={() => { }}
+      CustomHeaderComponent={<></>}
+      ref={actionSheetRef}
+      isModal={Platform.OS == "ios"}
+      containerStyle={
+        Platform.OS == "android"
+          ? {
+              paddingBottom: insets.bottom,
+            }
+          : {}
+      }
+      useBottomSafeAreaPadding={Platform.OS == "android"}
     >
       <View
         style={{
           backgroundColor: "#0099CC",
-          borderRadius: 5,
+          borderTopRadius: 5,
           borderColor: "dark",
           borderWidth: 1,
         }}
@@ -80,8 +67,8 @@ export const JRSTraInfo = (props) => {
           <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
             {getTime
               ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
-              ":" +
-              getTime.toLocaleTimeString("ja-JP").split(":")[1]
+                ":" +
+                getTime.toLocaleTimeString("ja-JP").split(":")[1]
               : NaN}{" "}
           </Text>
           <Ionicons
@@ -94,13 +81,11 @@ export const JRSTraInfo = (props) => {
             }}
           />
         </View>
-        <ScrollView>
+        <ScrollView {...scrollHandlers}>
           <View
             style={{
               padding: 10,
               backgroundColor: "white",
-              borderBottomLeftRadius: 5,
-              borderBottomRightRadius: 5,
             }}
           >
             {loadingDelayData ? (
@@ -116,7 +101,7 @@ export const JRSTraInfo = (props) => {
               delayData.map((d) => {
                 let data = d.split(" ");
                 return (
-                  <View style={{ flexDirection: "row" }}>
+                  <View style={{ flexDirection: "row" }} key={data[1]}>
                     <Text style={{ flex: 15, fontSize: 20 }}>
                       {data[0].replace("\n", "")}
                     </Text>
@@ -148,12 +133,14 @@ export const JRSTraInfo = (props) => {
               borderRadius: 5,
               alignItems: "center",
             }}
-            onPress={() => Linking.openURL("https://twitter.com/JRSTrainfoEX")}
+            onPress={() =>
+              Linking.openURL("https://mstdn.y-zu.org/@JRSTraInfoEX")
+            }
           >
-            <MaterialCommunityIcons name="twitter" color="white" size={30} />
+            <MaterialCommunityIcons name="mastodon" color="white" size={30} />
             <View style={{ flex: 1 }} />
             <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-              TwitterBOTはこちら！
+              MastodonBOTはこちら！
             </Text>
             <View style={{ flex: 1 }} />
             <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>

components/ActionSheetComponents/StationDeteilView.js

@@ -1,27 +1,70 @@
-import React from "react";
-import { View, ScrollView, Linking } from "react-native";
-import StatusbarDetect from "../../StatusbarDetect";
-var Status = StatusbarDetect();
+import React, { useState, useEffect } from "react";
+import { View, Linking, Text, TouchableOpacity, Platform } from "react-native";
+import AutoHeightImage from "react-native-auto-height-image";
 import { FontAwesome, Foundation, Ionicons } from "@expo/vector-icons";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import ActionSheet from "react-native-actions-sheet";
 import Sign from "../../components/駅名表/Sign";
 
 import { TicketBox } from "../atom/TicketBox";
+import { widthPercentageToDP as wp } from "react-native-responsive-screen";
+import lineColorList from "../../assets/originData/lineColorList";
+import { getPDFViewURL } from "../../lib/getPdfViewURL";
+import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
+import { AS } from "../../storageControl";
 
 export const StationDeteilView = (props) => {
-  const { StationBoardAcSR, currentStation, originalStationList } = props;
+  if (!props.payload) return <></>;
+  const {
+    currentStation,
+    originalStationList,
+    navigate,
+    onExit,
+    goTo,
+    useShow,
+  } = props.payload;
+  const { busAndTrainData } = useBusAndTrainData();
+  const [trainBus, setTrainBus] = useState();
+  useEffect(() => {
+    if (!currentStation) return () => {};
+    const data = busAndTrainData.filter((d) => {
+      return d.name === currentStation[0].Station_JP;
+    });
+    if (data.length == 0) {
+      setTrainBus();
+    }
+    setTrainBus(data[0]);
+  }, [currentStation]);
 
+  const [usePDFView, setUsePDFView] = useState(undefined);
+  useEffect(() => {
+    AS.getItem("usePDFView").then(setUsePDFView);
+  }, []);
+  const info =
+    currentStation &&
+    (currentStation[0].StationTimeTable.match(".pdf")
+      ? getPDFViewURL(currentStation[0].StationTimeTable)
+      : currentStation[0].StationTimeTable);
+  const insets = useSafeAreaInsets();
   return (
     <ActionSheet
-      ref={StationBoardAcSR}
       gestureEnabled
-      CustomHeaderComponent={() => {}}
+      CustomHeaderComponent={<></>}
+      isModal={Platform.OS == "ios"}
+      containerStyle={
+        Platform.OS == "android"
+          ? {
+              paddingBottom: insets.bottom,
+            }
+          : {}
+      }
+      useBottomSafeAreaPadding={Platform.OS == "android"}
     >
       <View
         key={currentStation}
         style={{
           backgroundColor: "white",
-          borderRadius: 5,
+          borderTopRadius: 5,
           borderColor: "dark",
           borderWidth: 1,
         }}
@@ -40,12 +83,60 @@ export const StationDeteilView = (props) => {
         </View>
         <View>
           {currentStation && (
-            <Sign
-              currentStation={currentStation}
-              originalStationList={originalStationList}
-              oP={() => Linking.openURL(currentStation[0].StationTimeTable)}
-            />
+            <View
+              style={{
+                margin: 10,
+                marginHorizontal: wp("10%"),
+              }}
+            >
+              <Sign
+                currentStation={currentStation}
+                originalStationList={originalStationList}
+                oP={() => {
+                  usePDFView == "true"
+                    ? Linking.openURL(currentStation[0].StationTimeTable)
+                    : navigate("howto", {
+                        info,
+                        goTo,
+                        useShow,
+                      });
+                  onExit();
+                }}
+                oLP={() => Linking.openURL(currentStation[0].StationTimeTable)}
+              />
+            </View>
           )}
+          {currentStation &&
+            currentStation.map((d) => (
+              <NexPreStationLine
+                currentStation={d}
+                originalStationList={originalStationList}
+              />
+            ))}
+          {currentStation &&
+            currentStation[0].JrHpUrl &&
+            currentStation[0].StationNumber != "M12" && (
+              <駅構内図 //高松/阿波池田&後免&須崎kounai.png児島例外/
+                oP={() => {
+                  navigate("howto", {
+                    info:
+                      currentStation[0].JrHpUrl.replace("/index.html", "/") +
+                      "/kounai_map.html",
+
+                    goTo,
+                    useShow,
+                  });
+                  onExit();
+                }}
+                oLP={() => {
+                  Linking.openURL(
+                    currentStation[0].JrHpUrl.replace("/index.html", "/") +
+                      "/kounai_map.html"
+                  );
+                }}
+                uri={currentStation[0].JrHpUrl.replace("/index.html", "/")}
+              />
+            )}
           {currentStation && (
             <View style={{ flexDirection: "row" }}>
               {!currentStation[0].JrHpUrl || (
@@ -53,7 +144,16 @@ export const StationDeteilView = (props) => {
                   backgroundColor={"#AD7FA8"}
                   icon={<Foundation name="web" color="white" size={50} />}
                   flex={1}
-                  onPressButton={() =>
+                  onPressButton={() => {
+                    navigate("howto", {
+                      info: currentStation[0].JrHpUrl,
+
+                      goTo,
+                      useShow,
+                    });
+                    onExit();
+                  }}
+                  onLongPressButton={() =>
                     Linking.openURL(currentStation[0].JrHpUrl)
                   }
                 >
@@ -65,7 +165,18 @@ export const StationDeteilView = (props) => {
                   backgroundColor={"#8F5902"}
                   icon={<FontAwesome name="table" color="white" size={50} />}
                   flex={1}
-                  onPressButton={() =>
+                  onPressButton={() => {
+                    usePDFView == "true"
+                      ? Linking.openURL(currentStation[0].StationTimeTable)
+                      : navigate("howto", {
+                          info,
+
+                          goTo,
+                          useShow,
+                        });
+                    onExit();
+                  }}
+                  onLongPressButton={() =>
                     Linking.openURL(currentStation[0].StationTimeTable)
                   }
                 >
@@ -81,7 +192,26 @@ export const StationDeteilView = (props) => {
                     Linking.openURL(currentStation[0].StationMap)
                   }
                 >
-                  GoogleMap
+                  Map
+                </TicketBox>
+              )}
+              {!trainBus || (
+                <TicketBox
+                  backgroundColor={"#CE5C00"}
+                  icon={<Ionicons name="bus" color="white" size={50} />}
+                  flex={1}
+                  onPressButton={() => {
+                    navigate("howto", {
+                      info: trainBus.address,
+
+                      goTo,
+                      useShow,
+                    });
+                    onExit();
+                  }}
+                  onLongPressButton={() => Linking.openURL(trainBus.address)}
+                >
+                  並行バス
                 </TicketBox>
               )}
             </View>
@@ -91,3 +221,280 @@ export const StationDeteilView = (props) => {
     </ActionSheet>
   );
 };
+
+const StationName = (props) => {
+  const { stringData, ss } = props;
+  return (
+    <View style={ss}>
+      <Text style={styleSheet.下枠駅名}>{stringData.Station_JP}</Text>
+      <Text style={styleSheet.下枠駅名}>{stringData.Station_EN}</Text>
+    </View>
+  );
+};
+
+const NexPreStationLine = ({ currentStation, originalStationList }) => {
+  const [preStation, setPreStation] = useState();
+  const [nexStation, setNexStation] = useState();
+  const [lineName, setLineName] = useState();
+
+  useEffect(() => {
+    getPreNextStation(currentStation);
+  }, [currentStation]);
+
+  useEffect(() => {
+    if (!currentStation) return () => {};
+    getPreNextStation(currentStation);
+  }, []);
+  const getPreNextStation = (now) => {
+    const lineList = [
+      "予讃線(高松-松山間)[Y]",
+      "予讃線(松山-宇和島間)[U]",
+      "予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]",
+      "土讃線(多度津-高知間)[D]",
+      "土讃線(高知-窪川間)[K]",
+      "高徳線(高松-徳島間)[T]",
+      "徳島線(徳島-阿波池田)[B]",
+      "鳴門線(池谷-鳴門間)[N]",
+      "瀬戸大橋線(宇多津-児島間)[M]",
+    ];
+    let returnData;
+    lineList.forEach((d) => {
+      let cache = originalStationList[d].findIndex(
+        (data) => data.StationNumber == now.StationNumber
+      );
+      if (cache != -1) {
+        returnData = [
+          originalStationList[d][cache - 1],
+          originalStationList[d][cache + 1],
+          d,
+        ];
+      }
+    });
+    setPreStation(returnData[0]);
+    setNexStation(returnData[1]);
+    setLineName(returnData[2]);
+  };
+  return (
+    <View
+      style={{
+        height: 50,
+        backgroundColor: lineName
+          ? lineColorList[lineName.split("[")[1].replace("]", "")]
+          : "red",
+        flexDirection: "row",
+        alignContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <View style={styleSheet.下枠フレーム}>
+        {preStation ? (
+          <>
+            <Text style={styleSheet.下枠左右マーク}>◀</Text>
+            {preStation.StationNumber ? (
+              <View style={styleSheet.下枠駅ナンバー}>
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    fontSize: parseInt("10%"),
+                    color: "white",
+                  }}
+                >
+                  {preStation.StationNumber}
+                </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            ) : (
+              <></>
+            )}
+            <StationName
+              stringData={preStation}
+              ss={{ flex: 1, alignItems: "flex-start" }}
+            />
+          </>
+        ) : (
+          <></>
+        )}
+      </View>
+
+      <Text
+        style={{
+          fontSize: parseInt("10%"),
+          color: "white",
+          textAlign: "center",
+        }}
+      >
+        {lineName &&
+          lineName
+            .split("(")
+            .map((d, index) => (index == 1 ? "(" + d : d))
+            .join("\n")}
+      </Text>
+      <View style={styleSheet.下枠フレーム}>
+        {nexStation ? (
+          <>
+            <StationName
+              stringData={nexStation}
+              ss={{ flex: 1, alignItems: "flex-end" }}
+            />
+            {nexStation.StationNumber ? (
+              <View style={styleSheet.下枠駅ナンバー}>
+                <View style={{ flex: 1 }} />
+                <Text style={{ fontSize: parseInt("15%"), color: "white" }}>
+                  {nexStation.StationNumber}
+                </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            ) : (
+              <></>
+            )}
+            <Text style={styleSheet.下枠左右マーク}>▶</Text>
+          </>
+        ) : (
+          <></>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const 駅構内図 = (props) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <TouchableOpacity
+        style={{
+          height: 50,
+          backgroundColor: "#888A85",
+          flexDirection: "column",
+          alignContent: "center",
+          alignItems: "center",
+          margin: 2,
+        }}
+        onPress={props.oP}
+        onLongPress={props.oLP}
+        //onPress={() => setOpen(!open)}
+      >
+        <View style={{ flex: 1 }} />
+        <Text
+          style={{
+            color: "white",
+            textAlign: "center",
+            textAlignVertical: "center",
+            flex: 1,
+          }}
+        >
+          {open ? "駅構内図を非表示" : "駅構内図を表示"}
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+      <View>
+        {open && (
+          <>
+            <AutoHeightImage
+              source={{ uri: props.uri + "images/kounai.gif" }}
+              resizeMode="contain"
+              width={wp("100%")}
+            />
+            <AutoHeightImage
+              source={{ uri: props.uri + "images/kounai.png" }}
+              resizeMode="contain"
+              width={wp("100%")}
+            />
+            <AutoHeightImage
+              source={{ uri: props.uri + "images/kounai_1f.gif" }}
+              resizeMode="contain"
+              width={wp("100%")}
+            />
+            <AutoHeightImage
+              source={{ uri: props.uri + "images/kounai_2f.png" }}
+              resizeMode="contain"
+              width={wp("100%")}
+            />
+          </>
+        )}
+      </View>
+    </>
+  );
+};
+
+const styleSheet = {
+  外枠: {
+    width: wp("80%"),
+    height: (wp("80%") / 20) * 9,
+    borderColor: "#2E94BB",
+    borderWidth: 1,
+    backgroundColor: "white",
+  },
+  下帯: {
+    position: "absolute",
+    bottom: "0%",
+    left: "0%",
+    width: "100%",
+    height: "30%",
+    backgroundColor: "#2E94BB",
+  },
+  JRStyle: {
+    position: "absolute",
+    top: "2%",
+    left: "2%",
+    fontWeight: "bold",
+    fontSize: parseInt("30%"),
+    color: "#2E94BB",
+  },
+  stationNameAreaOverWrap: {
+    position: "absolute",
+    top: "10%",
+    alignContent: "center",
+    flexDirection: "row",
+  },
+  Station_JP: {
+    fontWeight: "bold",
+    fontSize: parseInt("40%"),
+    color: "#005170",
+  },
+  Station_EN: {
+    fontWeight: "bold",
+    fontSize: parseInt("15%"),
+    color: "#005170",
+  },
+  下帯内容: {
+    position: "absolute",
+    bottom: "0%",
+    height: "30%",
+    width: "100%",
+    alignItems: "center",
+    flexDirection: "column",
+  },
+  下枠フレーム: {
+    flex: 1,
+    flexDirection: "row",
+    alignContent: "center",
+    height: wp("10%"),
+  },
+  下枠左右マーク: {
+    fontWeight: "bold",
+    fontSize: parseInt("20%"),
+    color: "white",
+    paddingHorizontal: 10,
+    textAlignVertical: "center",
+  },
+  下枠駅ナンバー: {
+    alignContent: "center",
+    alignItems: "center",
+    width: wp("8%"),
+    height: wp("8%"),
+    margin: wp("1%"),
+    borderColor: "white",
+    borderWidth: parseInt("2%"),
+    borderRadius: parseInt("100%"),
+  },
+  下枠駅名: {
+    fontWeight: "bold",
+    fontSize: parseInt("15%"),
+    color: "white",
+    flex: 1,
+    paddingHorizontal: 0,
+    marginVertical: 0,
+    textAlignVertical: "center",
+  },
+};

components/ActionSheetComponents/sheets.js

@@ -0,0 +1,10 @@
+import { registerSheet } from "react-native-actions-sheet";
+import { EachTrainInfo } from "./EachTrainInfo";
+import { JRSTraInfo } from "./JRSTraInfo";
+import { StationDeteilView } from "./StationDeteilView";
+
+registerSheet("EachTrainInfo", EachTrainInfo);
+registerSheet("JRSTraInfo", JRSTraInfo);
+registerSheet("StationDetailView", StationDeteilView);
+
+export {};

components/AllTrainDiagramView.js

@@ -0,0 +1,164 @@
+import React, { useRef, useState, useEffect } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Linking,
+  ScrollView,
+  FlatList,
+  KeyboardAvoidingView,
+  TextInput,
+  Platform,
+  Keyboard,
+} from "react-native";
+import MapView, { Marker } from "react-native-maps";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useCurrentTrain } from "../stateBox/useCurrentTrain";
+import { useAreaInfo } from "../stateBox/useAreaInfo";
+import { useAllTrainDiagram } from "../stateBox/useAllTrainDiagram";
+
+import { customTrainDataDetector } from "./custom-train-data";
+import { getStationList, lineList } from "../lib/getStationList";
+import { getTrainType } from "../lib/getTrainType";
+import { checkDuplicateTrainData } from "../lib/checkDuplicateTrainData";
+import { SheetManager } from "react-native-actions-sheet";
+export default function AllTrainDiagramView({ navigation: { navigate } }) {
+  const { currentTrain } = useCurrentTrain();
+  const { areaInfo } = useAreaInfo();
+  const { allTrainDiagram } = useAllTrainDiagram();
+  const [originalStationList, setOriginalStationList] = useState(); // 第一要素
+  const [keyList, setKeyList] = useState(); // 第二要素
+  useEffect(() => getStationList().then(setOriginalStationList), []);
+  useEffect(
+    () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)),
+    []
+  );
+  const [input, setInput] = useState(""); // 文字入力
+  const [keyBoardVisible, setKeyBoardVisible] = useState(false);
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
+      setKeyBoardVisible(true);
+    });
+    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+      setKeyBoardVisible(false);
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  const openTrainInfo = (d) => {
+    const train = customTrainDataDetector(d);
+    let TrainNumber = "";
+    if (train.trainNumDistance != undefined) {
+      const timeInfo =
+        parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
+      TrainNumber = timeInfo + "号";
+    }
+    const payload = {
+      data: {
+        trainNum: d,
+        limited: `${getTrainType(train.type).data}:${
+          train.trainName
+        }${TrainNumber}`,
+      },
+      navigate,
+      originalStationList,
+      from: "AllTrainDiagramView",
+    };
+    SheetManager.show("EachTrainInfo", {
+      payload,
+    });
+  };
+  return (
+    <View style={{ backgroundColor: "#0099CC", height: "100%" }}>
+      <FlatList
+        style={{ flex: 1 }}
+        data={keyList?.filter((d) => d.includes(input))}
+        renderItem={({ item }) => (
+          <Item openTrainInfo={openTrainInfo} id={item} />
+        )}
+        keyExtractor={(item) => item}
+        initialNumToRender={100}
+      />
+      <KeyboardAvoidingView
+        behavior="padding"
+        keyboardVerticalOffset={80}
+        enabled={Platform.OS === "ios"}
+      >
+        <View
+          style={{
+            height: 35,
+            margin: 5,
+            alignItems: "center",
+            backgroundColor: "#F4F4F4",
+            flexDirection: "row",
+            paddingLeft: 10,
+            paddingRight: 10,
+            borderRadius: 25,
+            borderColor: "#F4F4F4",
+          }}
+        >
+          <TextInput
+            placeholder="列番を入力してフィルタリングします。"
+            onFocus={() => {
+              setKeyBoardVisible(true);
+            }}
+            onEndEditing={() => {}}
+            onChange={(ret) => {
+              setInput(ret.nativeEvent.text);
+            }}
+            value={input}
+            style={{ flex: 1 }}
+          />
+        </View>
+      </KeyboardAvoidingView>
+
+      <TouchableOpacity
+        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>
+  );
+}
+const Item = ({ id, openTrainInfo }) => {
+  return (
+    <TouchableOpacity
+      style={{
+        padding: 5,
+        flexDirection: "row",
+        borderColor: "white",
+        borderWidth: 1,
+        margin: 5,
+        borderRadius: 5,
+        alignItems: "center",
+      }}
+      onPress={() => openTrainInfo(id)}
+    >
+      <View style={{ flex: 1 }} />
+      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+        {id}
+      </Text>
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};

components/CurrentTrainListView.js

@@ -0,0 +1,51 @@
+import React, { useRef } from "react";
+import { View, Text, TouchableOpacity, Linking } from "react-native";
+import MapView, { Marker } from "react-native-maps";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useCurrentTrain } from "../stateBox/useCurrentTrain";
+export default function CurrentTrainListView({ navigation: { navigate } }) {
+  const { currentTrain } = useCurrentTrain();
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      {currentTrain && currentTrain.map((d) => <Text>{d.num}</Text>)}
+      <TouchableOpacity
+        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

@@ -0,0 +1,101 @@
+import React from "react";
+import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import { ListItem } from "native-base";
+import Icon from "react-native-vector-icons/Entypo";
+import { useFavoriteStation } from "../stateBox/useFavoriteStation";
+export default function FavoriteList({ navigation, webview, stationData }) {
+  const { navigate } = navigation;
+  const { favoriteStation } = useFavoriteStation();
+
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      <Text
+        style={{
+          textAlign: "center",
+          fontSize: 25,
+          color: "white",
+          fontWeight: "bold",
+          paddingVertical: 10,
+        }}
+      >
+        位置情報クイック移動メニュー
+      </Text>
+      <ScrollView style={{ height: "100%", backgroundColor: "white" }}>
+        {favoriteStation
+          .filter((d) => d[0].StationMap)
+          .map((currentStation) => {
+            return (
+              <ListItem
+                onPress={() => {
+                  const getStationLine = (now) => {
+                    const returnData = Object.keys(stationData).filter((d) => {
+                      const cache = stationData[d].findIndex(
+                        (data) => data.Station_JP == now.Station_JP
+                      );
+                      return cache != -1;
+                    });
+                    return returnData[0];
+                  };
+                  const lineName = getStationLine(currentStation[0]);
+
+                  webview.current?.injectJavaScript(
+                    `MoveDisplayStation('${lineName}_${currentStation[0].MyStation}_${currentStation[0].Station_JP}')`
+                  );
+                  navigate("Apps");
+                }}
+              >
+                <Text style={{ fontSize: 20, flex: 2 }}>
+                  {currentStation
+                    .map((d) => d.StationNumber)
+                    .filter((d) => d !== null)
+                    .join("/")}
+                </Text>
+                <Text style={{ fontSize: 20, flex: 3 }}>
+                  {currentStation[0].Station_JP}
+                </Text>
+                <View
+                  style={{
+                    flex: 2,
+                    flexDirection: "row",
+                    alignContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <View style={{ flex: 1 }} />
+                  <Text style={{ fontSize: 20 }}>移動する</Text>
+                  <Icon name="chevron-right" size={20} />
+                </View>
+              </ListItem>
+            );
+          })}
+      </ScrollView>
+      <Text
+        style={{
+          backgroundColor: "white",
+          borderWidth: 1,
+          borderStyle: "solid",
+        }}
+      >
+        お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
+      </Text>
+      <TouchableOpacity
+        style={{
+          padding: 10,
+          flexDirection: "row",
+          borderColor: "white",
+          borderWidth: 1,
+          margin: 10,
+          borderRadius: 5,
+          alignItems: "center",
+        }}
+        onPress={() => navigation.goBack()}
+      >
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          閉じる
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+    </View>
+  );
+}

components/atom/TextBox.js

@@ -7,8 +7,8 @@ export const TextBox = (props) => {
       style={{
         flex: flex,
         backgroundColor: backgroundColor,
-        padding: 10,
-        height: 70,
+        padding: 5,
+        minHeight: 70,
         alignItems: "center",
         alignContent: "center",
         margin: 2,

components/atom/TicketBox.js

@@ -1,7 +1,14 @@
 import { TouchableOpacity, Text } from "react-native";
 
 export const TicketBox = (props) => {
-  const { icon, backgroundColor, flex, onPressButton, children } = props;
+  const {
+    icon,
+    backgroundColor,
+    flex,
+    onPressButton,
+    children,
+    onLongPressButton,
+  } = props;
   return (
     <TouchableOpacity
       style={{
@@ -14,6 +21,7 @@ export const TicketBox = (props) => {
         alignItems: "center",
       }}
       onPress={onPressButton}
+      onLongPress={onLongPressButton}
     >
       <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
         {children}

components/custom-train-data.js

@@ -2,7 +2,6 @@ export const customTrainDataDetector = (TrainNumber) => {
   switch (TrainNumber) {
     //しおかぜメイン
     //8000 ノーマル
-    case "2M":
     case "4M":
     case "6M":
     case "14M":
@@ -27,10 +26,18 @@ export const customTrainDataDetector = (TrainNumber) => {
         trainNumDistance: 0,
         info: "いしづちと併結 / 8000系で運転",
       };
+    case "2M":
+      return {
+        type: "LTDEXP",
+        trainName: "しおかぜ",
+        trainIcon: "http://www.trainfrontview.net/b/s8000nr.png",
+        trainNumDistance: 0,
+        info: "8000系で運転",
+      };
     //8000 アンパン
-    case "10M":
     case "22M":
     case "9M":
+    case "10M":
     case "21M":
       return {
         type: "LTDEXP",
@@ -158,22 +165,36 @@ export const customTrainDataDetector = (TrainNumber) => {
 
     //南風 2700ノーマル
     case "34D":
+    case "58D":
+    case "31D":
+    case "51D":
+      return {
+        type: "LTDEXP",
+        trainName: "南風",
+        trainIcon: "http://www.trainfrontview.net/b/s2700.png",
+        trainNumDistance: 30,
+        info: "しまんとと併結 / 2700系で運転",
+      };
+    case "52D":
+    case "53D":
+      return {
+        type: "LTDEXP",
+        trainName: "南風",
+        trainIcon: "http://www.trainfrontview.net/b/s2700.png",
+        trainNumDistance: 30,
+        info: "うずしおと併結 / 2700系で運転",
+      };
     case "38D":
     case "40D":
     case "42D":
     case "46D":
     case "50D":
-    case "52D":
     case "54D":
-    case "58D":
-    case "31D":
     case "35D":
     case "39D":
     case "41D":
     case "43D":
     case "47D":
-    case "51D":
-    case "53D":
     case "55D":
       return {
         type: "LTDEXP",
@@ -182,14 +203,22 @@ export const customTrainDataDetector = (TrainNumber) => {
         trainNumDistance: 30,
         info: "2700系で運転",
       };
+
     //2700アンパン
-    case "32D":
     case "36D":
+    case "37D":
+      return {
+        type: "LTDEXP",
+        trainName: "南風",
+        trainIcon: "http://www.trainfrontview.net/f/s2700apr.png",
+        trainNumDistance: 30,
+        info: "うずしおと連結 / アンパンマン列車で運転",
+      };
+    case "32D":
     case "44D":
     case "48D":
     case "56D":
     case "33D":
-    case "37D":
     case "45D":
     case "49D":
     case "57D":
@@ -200,7 +229,6 @@ export const customTrainDataDetector = (TrainNumber) => {
         trainNumDistance: 30,
         info: "アンパンマン列車で運転",
       };
-      break;
 
     //うずしお
     //2700
@@ -213,7 +241,7 @@ export const customTrainDataDetector = (TrainNumber) => {
         trainName: "うずしお",
         trainIcon: "http://www.trainfrontview.net/b/s2700_uzu.png",
         trainNumDistance: 5000,
-        info: "南風と宇多津で併結 / 高松-宇多津間進行方向逆転 / 2700系で運転",
+        info: "南風と併結 / 高松-宇多津間進行方向逆転 / 2700系で運転",
       };
     case "3002D":
     case "3004D":
@@ -384,7 +412,9 @@ export const customTrainDataDetector = (TrainNumber) => {
     case "1052D":
     case "1056D":
     case "1058D":
+    case "1062D":
     case "1064D":
+    case "1068D":
     case "1070D":
     case "1074D":
     case "1076D":
@@ -392,7 +422,10 @@ export const customTrainDataDetector = (TrainNumber) => {
     case "1080D":
     case "1082D":
     case "1051D":
+    case "1053D":
+    case "1057D":
     case "1059D":
+    case "1063D":
     case "1065D":
     case "1069D":
     case "1071D":
@@ -400,7 +433,6 @@ export const customTrainDataDetector = (TrainNumber) => {
     case "1075D":
     case "1077D":
     case "1079D":
-    case "1053D":
       return {
         type: "LTDEXP",
         trainName: "宇和海",
@@ -411,14 +443,10 @@ export const customTrainDataDetector = (TrainNumber) => {
     //2000 アンパン込み
     case "1054D":
     case "1060D":
-    case "1062D":
     case "1066D":
-    case "1068D":
     case "1072D":
     case "1055D":
-    case "1057D":
     case "1061D":
-    case "1063D":
     case "1067D":
     case "1081D":
       return {
@@ -430,13 +458,9 @@ export const customTrainDataDetector = (TrainNumber) => {
       };
     //しまんと
     case "2002D":
-    case "2004D":
-    case "2006D":
     case "2008D":
     case "2001D":
-    case "2003D":
     case "2005D":
-    case "2007D":
       return {
         type: "LTDEXP",
         trainName: "しまんと",
@@ -444,6 +468,17 @@ export const customTrainDataDetector = (TrainNumber) => {
         trainNumDistance: 2000,
         info: "2700系で運転",
       };
+    case "2004D":
+    case "2006D":
+    case "2003D":
+    case "2007D":
+      return {
+        type: "LTDEXP",
+        trainName: "しまんと",
+        trainIcon: "http://www.trainfrontview.net/b/s2700_smn.png",
+        trainNumDistance: 2000,
+        info: "南風と併結 / 2700系で運転",
+      };
 
     //あしずり 2000
     case "2074D":
@@ -537,10 +572,10 @@ export const customTrainDataDetector = (TrainNumber) => {
       };
 
     //伊予灘ものがたり
-    case "8901D":
-    case "8903D":
-    case "8902D":
-    case "8904D":
+    case "8091D":
+    case "8093D":
+    case "8092D":
+    case "8094D":
       return {
         type: "LTDEXP",
         trainName: "伊予灘ものがたり",
@@ -584,3 +619,37 @@ export const customTrainDataDetector = (TrainNumber) => {
       break;
   }
 };
+export const getJRF = (num) => {
+  switch (num) {
+    case "71":
+      return "東京(タ)→高松(タ)\\n";
+    case "73":
+    case "75":
+      return "大阪(タ)→高松(タ)\\n";
+    case "3079":
+      return "高松(タ)→伊予三島\\n";
+    case "3071":
+    case "3077":
+      return "高松(タ)→新居浜\\n";
+    case "3073":
+      return "高松(タ)→松山貨物\\n";
+    case "70":
+      return "高松(タ)→東京(タ)\\n";
+    case "74":
+    case "76":
+      return "高松(タ)→大阪(タ)\\n";
+    case "3078":
+      return "伊予三島→高松(タ)\\n";
+    case "3070":
+      return "新居浜→高松(タ)\\n";
+    case "3076":
+      return "新居浜→高松(タ)\\n";
+    case "3072":
+      return "松山貨物→高松(タ)\\n";
+    case "9070":
+      return "臨時貨物\\n";
+    default:
+      JRF = true;
+      return null;
+  }
+};

components/news.js

@@ -2,7 +2,7 @@ import React from "react";
 import { View, Text, TouchableOpacity } from "react-native";
 import { WebView } from "react-native-webview";
 import StatusbarDetect from "../StatusbarDetect";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import { AS } from "../storageControl";
 import { news } from "../config/newsUpdate";
 var Status = StatusbarDetect();
 export default function News(props) {
@@ -30,7 +30,7 @@ export default function News(props) {
           alignItems: "center",
         }}
         onPress={() => {
-          AsyncStorage.setItem("status", news);
+          AS.setItem("status", news);
           navigate("Apps");
         }}
       >

components/settings.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
-import { View, Text, TouchableOpacity } from "react-native";
+import { View, Text, TouchableOpacity, Linking } from "react-native";
 import * as Updates from "expo-updates";
 import StatusbarDetect from "../StatusbarDetect";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import { AS } from "../storageControl";
 var Status = StatusbarDetect();
 import { Switch } from "react-native-elements";
 
@@ -10,13 +10,19 @@ export default function Setting(props) {
   const {
     navigation: { navigate },
   } = props;
-  const [iconSetting, setIconSetting] = useState(undefined);
-  const [mapSwitch, setMapSwitch] = useState(undefined);
-  const [stationMenu, setStationMenu] = useState(undefined);
+  const [iconSetting, setIconSetting] = useState(false);
+  const [mapSwitch, setMapSwitch] = useState(false);
+  const [stationMenu, setStationMenu] = useState(false);
+  const [usePDFView, setUsePDFView] = useState(false);
+  const [trainMenu, setTrainMenu] = useState(false);
+  const [trainPosition, setTrainPosition] = useState(false);
   useEffect(() => {
-    AsyncStorage.getItem("iconSwitch").then(setIconSetting);
-    AsyncStorage.getItem("mapSwitch").then(setMapSwitch);
-    AsyncStorage.getItem("stationSwitch").then(setStationMenu);
+    AS.getItem("iconSwitch").then(setIconSetting);
+    AS.getItem("mapSwitch").then(setMapSwitch);
+    AS.getItem("stationSwitch").then(setStationMenu);
+    AS.getItem("usePDFView").then(setUsePDFView);
+    AS.getItem("trainSwitch").then(setTrainMenu);
+    AS.getItem("trainPositionSwitch").then(setTrainPosition);
   }, []);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
@@ -83,7 +89,7 @@ export default function Setting(props) {
                 textAlignVertical: "center",
               }}
             >
-              駅メニューを表示(beta)
+              駅メニューを表示
             </Text>
             <View style={{ flex: 1 }} />
             <Switch
@@ -102,7 +108,64 @@ export default function Setting(props) {
                 textAlignVertical: "center",
               }}
             >
-              内部バージョン: 4.4.2.3
+              時刻表PDFをアプリ外で表示
+            </Text>
+            <View style={{ flex: 1 }} />
+            <Switch
+              value={usePDFView == "true" ? true : false}
+              color={usePDFView == "true" ? "red" : null}
+              onValueChange={(value) => setUsePDFView(value.toString())}
+            />
+          </View>
+          <View style={{ flexDirection: "row", padding: 10 }}>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              列車メニュー
+            </Text>
+            <View style={{ flex: 1 }} />
+            <Switch
+              value={trainMenu == "true" ? true : false}
+              color={trainMenu == "true" ? "red" : null}
+              onValueChange={(value) => setTrainMenu(value.toString())}
+            />
+          </View>
+          <View style={{ flexDirection: "row", padding: 10 }}>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              →列車現在位置表示(alpha)
+            </Text>
+            <View style={{ flex: 1 }} />
+            <Switch
+              value={trainPosition == "true" ? true : false}
+              color={trainPosition == "true" ? "red" : null}
+              onValueChange={(value) => setTrainPosition(value.toString())}
+            />
+          </View>
+          <View style={{ flexDirection: "row", padding: 10 }}>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              内部バージョン: 4.6.4
             </Text>
             <View style={{ flex: 1 }} />
           </View>
@@ -116,10 +179,31 @@ export default function Setting(props) {
                 textAlignVertical: "center",
               }}
             >
-              releaseChannel: {Updates.releaseChannel}
+              releaseChannel: {Updates.channel}
             </Text>
             <View style={{ flex: 1 }} />
           </View>
+          <TouchableOpacity
+            style={{ flexDirection: "row", padding: 10 }}
+            onPress={() =>
+              Linking.openURL(
+                "https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/policy"
+              )
+            }
+          >
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              プライバシーポリシー
+            </Text>
+            <View style={{ flex: 1 }} />
+          </TouchableOpacity>
         </View>
       </View>
       <TouchableOpacity
@@ -134,9 +218,12 @@ export default function Setting(props) {
         }}
         onPress={() => {
           Promise.all([
-            AsyncStorage.setItem("iconSwitch", iconSetting.toString()),
-            AsyncStorage.setItem("mapSwitch", mapSwitch.toString()),
-            AsyncStorage.setItem("stationSwitch", stationMenu.toString()),
+            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();
           });

components/trainMenu.js

@@ -1,22 +1,11 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useRef } from "react";
 import { View, Text, TouchableOpacity, Linking } from "react-native";
-import { WebView } from "react-native-webview";
-import StatusbarDetect from "../StatusbarDetect";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import MapView, { Marker, Geojson, PROVIDER_GOOGLE } from "react-native-maps";
-import {
-  FontAwesome,
-  Fontisto,
-  Foundation,
-  Ionicons,
-  MaterialCommunityIcons,
-} from "@expo/vector-icons";
-var Status = StatusbarDetect();
-export default function trainMenu({
-  route: {
-    params: { webview, stationData },
-  },
+import MapView, { Marker } from "react-native-maps";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+export default function TrainMenu({
   navigation: { navigate },
+  webview,
+  stationData,
 }) {
   const mapRef = useRef();
   return (
@@ -54,7 +43,6 @@ export default function trainMenu({
                     longitude: parseFloat(latlng[1]),
                   }}
                   onPress={() => {
-                    console.log(stationData);
                     webview.current?.injectJavaScript(
                       `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}')`
                     );
@@ -70,7 +58,11 @@ export default function trainMenu({
           backgroundColor={"#F89038"}
           icon="train-car"
           flex={1}
-          onPressButton={() => navigate("howto")}
+          onPressButton={() =>
+            navigate("howto", {
+              info: "https://train.jr-shikoku.co.jp/usage.htm",
+            })
+          }
         >
           使い方
         </UsefulBox>
@@ -78,12 +70,7 @@ export default function trainMenu({
           backgroundColor={"#EA4752"}
           icon="star"
           flex={1}
-          onPressButton={() =>
-            /* Linking.openURL(
-              "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
-            ) */
-            alert("お気に入り駅登録機能は現在開発中です！レイアウト募集中！")
-          }
+          onPressButton={() => navigate("favoriteList")}
         >
           お気に入り
         </UsefulBox>
@@ -110,10 +97,7 @@ export default function trainMenu({
           borderRadius: 5,
           alignItems: "center",
         }}
-        onPress={() => {
-          AsyncStorage.setItem("status", "2022/04/14");
-          navigate("Apps");
-        }}
+        onPress={() => navigate("Apps")}
       >
         <View style={{ flex: 1 }} />
         <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>

components/発車時刻表/LED_vidion.js

@@ -1,22 +1,18 @@
-import React, { Component, useRef, useState, useEffect } from "react";
-import {
-  StatusBar,
-  View,
-  LayoutAnimation,
-  ScrollView,
-  Linking,
-  Text,
-  TouchableOpacity,
-} from "react-native";
+import React, { useState, useEffect } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
 import { Switch } from "react-native-elements";
-import {
-  widthPercentageToDP as wp,
-  heightPercentageToDP as hp,
-} from "react-native-responsive-screen";
+import { widthPercentageToDP as wp } from "react-native-responsive-screen";
+import LottieView from "lottie-react-native";
+import { Ionicons } from "@expo/vector-icons";
 import { customTrainDataDetector } from "../custom-train-data";
 import { useInterval } from "../../lib/useInterval";
-
-let diagramData = undefined;
+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";
 
 /**
  *
@@ -48,71 +44,78 @@ let diagramData = undefined;
  * 9062D 四国まんなか千年ものがたり(臨時？)
  */
 export default function LED_vision(props) {
-  const HeaderConfig = {
-    headers: {
-      referer: "https://train.jr-shikoku.co.jp/sp.html",
-    },
-  };
-  const [trainDiagram, setTrainDiagram] = useState(null);
-  const [stationDiagram, setStationDiagram] = useState(null);
-  const [currentTrain, setCurrentTrain] = useState(null);
+  const {
+    station,
+    trainDiagram,
+    getCurrentTrain,
+    navigate,
+    originalStationList,
+    openStationACFromEachTrainInfo,
+  } = props;
+  const { currentTrain } = useCurrentTrain();
+  const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
   const [finalSwitch, setFinalSwitch] = useState(false);
   const [trainIDSwitch, setTrainIDSwitch] = useState(false);
   const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
+  const { areaInfo } = useAreaInfo();
 
   useEffect(() => {
-    fetch(
-      "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=traintimeinfo&arg3=dia",
-      HeaderConfig
-    )
-      .then((response) => response.text())
-      .then((d) => {
-        const val = d.replace("[\r\n", "").split(",\r\n");
-        let trainDiagram = {};
-        val.forEach((element) => {
-          try {
-            let data = JSON.parse(element);
-            Object.keys(data).forEach((key) => (trainDiagram[key] = data[key]));
-          } catch (e) {}
-        });
-        setTrainDiagram(trainDiagram);
-        return trainDiagram;
-      })
-      .then((trainDiagram) => {
-        let returnData = {};
-        if (!trainDiagram) {
-          setStationDiagram(returnData);
-          return;
-        }
-        Object.keys(trainDiagram).forEach((key) => {
-          if (trainDiagram[key].match(props.station.Station_JP)) {
-            returnData[key] = trainDiagram[key];
-          }
-        });
-        setStationDiagram(returnData);
-      });
-  }, []);
-
-  const getTime = () => {
-    const returnData = [];
-    Object.keys(stationDiagram).forEach((d) => {
-      let a = {};
-      stationDiagram[d].split("#").forEach((data) => {
-        if (data.match("着")) {
-          a.lastStation = data.split(",着,")[0];
-        }
-        if (data.match(props.station.Station_JP)) {
-          if (data.match(",発,")) {
-            a.time = data.split(",発,")[1];
-          } else {
-            a.time = data.split(",着,")[1];
-            a.lastStation = "当駅止";
-          }
-        }
-      });
-      returnData.push({ train: d, time: a.time, lastStation: a.lastStation });
+    // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報]
+    if (!trainDiagram) {
+      setStationDiagram({});
+      return;
+    }
+    let returnData = {};
+    Object.keys(trainDiagram).forEach((key) => {
+      if (trainDiagram[key].match(station.Station_JP + ",")) {
+        returnData[key] = trainDiagram[key];
+      }
     });
+    setStationDiagram(returnData);
+  }, [trainDiagram, station]);
 
+  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);
+
+  useEffect(() => {
+    //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
+    if (objectIsEmpty(stationDiagram)) return () => {};
+    const getTimeData = getTime(stationDiagram, station);
+    setTrainTimeAndNumber(getTimeData);
+  }, [stationDiagram]);
+
+  const [selectedTrain, setSelectedTrain] = useState([]);
+  useEffect(() => {
+    if (!trainTimeAndNumber) return () => {};
+    if (!currentTrain) return () => {};
+    const data = trainTimeAndNumber
+      .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
+      .filter(timeFiltering)
+      .filter((d) => !!finalSwitch || d.lastStation != "当駅止");
+    setSelectedTrain(data);
+  }, [trainTimeAndNumber, currentTrain, finalSwitch]);
+
+  const getTime = (stationDiagram, station) => {
+    const returnData = Object.keys(stationDiagram).map((trainNum) => {
+      let trainData = {};
+      stationDiagram[trainNum].split("#").forEach((data) => {
+        if (data.match("着")) {
+          trainData.lastStation = data.split(",着,")[0];
+        }
+        if (data.split(",")[0] === station.Station_JP) {
+          if (data.match(",発,")) {
+            trainData.time = data.split(",発,")[1];
+          } else {
+            trainData.time = data.split(",着,")[1];
+            trainData.lastStation = "当駅止";
+          }
+        }
+      });
+      return {
+        train: trainNum,
+        time: trainData.time,
+        lastStation: trainData.lastStation,
+      };
+    });
     return returnData.sort((a, b) => {
       switch (true) {
         case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]):
@@ -126,19 +129,6 @@ export default function LED_vision(props) {
       }
     });
   };
-  const trainTimeAndNumber = stationDiagram != null ? getTime() : null;
-  const getCurrentTrain = () =>
-    fetch(
-      "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train",
-      HeaderConfig
-    )
-      .then((response) => response.json())
-      .then((d) => d.map((x) => ({ num: x.TrainNum, delay: x.delay })))
-      .then(setCurrentTrain);
-
-  useEffect(getCurrentTrain, []);
-
-  useInterval(getCurrentTrain, 15000);
 
   const timeFiltering = (d) => {
     const date = new Date();
@@ -156,6 +146,35 @@ export default function LED_vision(props) {
 
     return false;
   };
+
+  const [areaString, setAreaString] = useState("");
+  const [areaStringLength, setAreaStringLength] = useState(0);
+  const [move, setMove] = useState(0);
+  useInterval(
+    () => {
+      if (areaInfo != "") {
+        if (areaStringLength < move) {
+          setMove(0);
+        } else {
+          setMove(move + 1);
+        }
+      }
+    },
+    350,
+    true
+  );
+  useEffect(() => {
+    if (!areaInfo) return () => {};
+    setAreaString(
+      areaInfo.substring(move, areaInfo.length) + areaInfo.substring(0, move)
+    );
+  }, [move]);
+
+  useEffect(() => {
+    if (!areaInfo) return () => {};
+    setAreaStringLength(areaInfo.length);
+  }, [areaInfo]);
+
   return (
     <View
       style={{
@@ -166,206 +185,294 @@ export default function LED_vision(props) {
         marginHorizontal: wp("1%"),
       }}
     >
-      <View
-        style={{
-          alignContent: "center",
-          alignItems: "center",
-          width: "100%",
-          marginVertical: 10,
-          flexDirection: "row",
-        }}
-      >
-        <View style={{ flex: 1 }}></View>
-        <View style={{}}>
-          <Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
-            次の列車
-          </Text>
-          <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
-        </View>
-        <View style={{ flex: 1 }}></View>
-      </View>
-      {trainTimeAndNumber
-        ? currentTrain &&
-          trainTimeAndNumber
-            .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
-            .filter(timeFiltering)
-            .filter((d) => !!finalSwitch || d.lastStation != "当駅止")
-            .map((d, index) => {
-              const train = customTrainDataDetector(d.train);
-              return [
-                <View
-                  style={{
-                    alignContent: "center",
-                    alignItems: "center",
-                    width: "94%",
-                    marginVertical: 5,
-                    marginHorizontal: "3%",
-                    backgroundColor: "#000",
-                    flexDirection: "row",
-                  }}
-                >
-                  <View style={{ flex: 9 }}>
-                    <Text
-                      style={{
-                        fontSize: train.trainName.length > 6 ? 15 : 20,
-                        color: (() => {
-                          switch (train.type) {
-                            case "Rapid":
-                              return "aqua";
-                            case "LTDEXP":
-                              return "red";
-                            case "NightLTDEXP":
-                              return "red";
-                            case "Normal":
-                              return "white";
-                          }
-                        })(),
-                        fontWeight: "bold",
-                      }}
-                    >
-                      {trainIDSwitch
-                        ? d.train
-                        : (() => {
-                            switch (train.type) {
-                              case "Rapid":
-                                return "快速";
-                              case "LTDEXP":
-                                return "特急";
-                              case "NightLTDEXP":
-                                return "寝台特急";
-                              case "Normal":
-                                return "普通列車";
-                            }
-                          })() +
-                          " " +
-                          train.trainName +
-                          (train.trainNumDistance == undefined
-                            ? ""
-                            : parseInt(
-                                d.train.replace("M", "").replace("D", "")
-                              ) -
-                              train.trainNumDistance +
-                              "号")}
-                    </Text>
-                  </View>
-                  <View style={{ flex: 4, flexDirection: "row" }}>
-                    <Text
-                      style={{
-                        fontSize: d.lastStation.length > 4 ? 15 : 20,
-                        color: "white",
-                        fontWeight: "bold",
-                      }}
-                    >
-                      {d.lastStation}
-                    </Text>
-                  </View>
-                  <View style={{ flex: 3 }}>
-                    <Text
-                      style={{
-                        fontSize: 20,
-                        color: "white",
-                        fontWeight: "bold",
-                      }}
-                    >
-                      {d.time}
-                    </Text>
-                  </View>
-                  <View style={{ flex: 4 }}>
-                    <Text
-                      style={{
-                        fontSize: 20,
-                        color: "white",
-                        fontWeight: "bold",
-                      }}
-                    >
-                      {(() => {
-                        const delay = currentTrain.filter(
-                          (a) => a.num == d.train
-                        )[0].delay;
-                        switch (true) {
-                          case isNaN(delay):
-                            return delay;
-                          case delay == 0:
-                            return "定刻通り";
-                          default:
-                            return delay + "分遅れ";
-                        }
-                      })()}
-                    </Text>
-                  </View>
-                </View>,
-                trainDescriptionSwitch && !!train.info && (
-                  <View
-                    style={{
-                      alignContent: "center",
-                      alignItems: "center",
-                      width: "94%",
-                      marginVertical: 5,
-                      marginHorizontal: "3%",
-                      backgroundColor: "#000",
-                      flexDirection: "row",
-                    }}
-                  >
-                    <View style={{ flex: 4 }}>
-                      <Text
-                        style={{
-                          fontSize: 20,
-                          color: "green",
-                          fontWeight: "bold",
-                        }}
-                      >
-                        {" "}
-                        &gt; {train.info}
-                      </Text>
-                    </View>
-                  </View>
-                ),
-              ];
-            })
-        : null}
-      <View style={{ flexDirection: "row", padding: 10 }}>
-        <Text
-          style={{
-            alignItems: "center",
-            alignContent: "center",
-            textAlign: "center",
-            textAlignVertical: "center",
-            color: "white",
-          }}
-        >
-          種別名 / 列番
-        </Text>
-        <Switch value={trainIDSwitch} onValueChange={setTrainIDSwitch} />
-        <View style={{ flex: 1 }} />
-        <Text
-          style={{
-            alignItems: "center",
-            alignContent: "center",
-            textAlign: "center",
-            textAlignVertical: "center",
-            color: "white",
-          }}
-        >
-          列車情報
-        </Text>
-        <Switch
-          value={trainDescriptionSwitch}
-          onValueChange={setTrainDescriptionSwitch}
+      <Header getCurrentTrain={getCurrentTrain} />
+      {selectedTrain.map((d) => (
+        <EachData
+          d={d}
+          trainIDSwitch={trainIDSwitch}
+          trainDescriptionSwitch={trainDescriptionSwitch}
+          station={station}
+          customTrainDataDetector={customTrainDataDetector}
+          navigate={navigate}
+          originalStationList={originalStationList}
+          openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
         />
-        <View style={{ flex: 1 }} />
-        <Text
-          style={{
-            alignItems: "center",
-            alignContent: "center",
-            textAlign: "center",
-            textAlignVertical: "center",
-            color: "white",
-          }}
-        >
-          当駅止表示
-        </Text>
-        <Switch value={finalSwitch} onValueChange={setFinalSwitch} />
-      </View>
+      ))}
+      {areaString != "" && (
+        <Description
+          numberOfLines={1}
+          info={areaString.replace("\n", "").replace("\r", "")}
+          onClick={() => alert(areaInfo)}
+        />
+      )}
+
+      <Footer
+        trainIDSwitch={trainIDSwitch}
+        setTrainIDSwitch={setTrainIDSwitch}
+        trainDescriptionSwitch={trainDescriptionSwitch}
+        setTrainDescriptionSwitch={setTrainDescriptionSwitch}
+        finalSwitch={finalSwitch}
+        setFinalSwitch={setFinalSwitch}
+      />
     </View>
   );
 }
+const Header = ({ getCurrentTrain }) => {
+  const { currentTrainLoading, setCurrentTrainLoading } = useCurrentTrain();
+  return (
+    <View
+      style={{
+        alignContent: "center",
+        alignItems: "center",
+        width: "100%",
+        marginVertical: 10,
+        flexDirection: "row",
+      }}
+    >
+      <View style={{ flex: 1 }}></View>
+      <View style={{}}>
+        <Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
+          次の列車
+        </Text>
+        <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
+      </View>
+      <View style={{ flex: 1, flexDirection: "row-reverse" }}>
+        {currentTrainLoading == "loading" ? (
+          <LottieView
+            autoPlay
+            loop
+            style={{ width: 40, height: 40, marginRight: 30 }}
+            source={require("../../assets/51690-loading-diamonds.json")}
+          />
+        ) : currentTrainLoading == "error" ? (
+          <Ionicons
+            name="reload"
+            color="white"
+            size={30}
+            style={{ marginRight: 30 }}
+            onPress={() => {
+              setCurrentTrainLoading("loading");
+              getCurrentTrain();
+            }}
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+const Footer = (props) => {
+  const {
+    trainIDSwitch,
+    setTrainIDSwitch,
+    trainDescriptionSwitch,
+    setTrainDescriptionSwitch,
+    finalSwitch,
+    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 value={trainIDSwitch} onValueChange={setTrainIDSwitch} />
+      <View style={{ flex: 1 }} />
+      <Text style={textStyle}>列車情報</Text>
+      <Switch
+        value={trainDescriptionSwitch}
+        onValueChange={setTrainDescriptionSwitch}
+      />
+      <View style={{ flex: 1 }} />
+      <Text style={textStyle}>当駅止表示</Text>
+      <Switch value={finalSwitch} onValueChange={setFinalSwitch} />
+    </View>
+  );
+};
+
+const EachData = ({
+  d,
+  trainIDSwitch,
+  trainDescriptionSwitch,
+  station,
+  customTrainDataDetector,
+  navigate,
+  originalStationList,
+  openStationACFromEachTrainInfo,
+}) => {
+  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,
+      originalStationList,
+      openStationACFromEachTrainInfo,
+      from: "LED",
+    };
+    SheetManager.show("EachTrainInfo", {
+      payload,
+    });
+  };
+  const [train, setTrain] = useState(customTrainDataDetector(d.train));
+  useEffect(() => {
+    setTrain(customTrainDataDetector(d.train));
+  }, [currentTrain, d.train, trainDescriptionSwitch]);
+  // 土讃線複数存在対策
+  const trainDelayStatus = getTrainDelayStatus(
+    checkDuplicateTrainData(currentTrain.filter((a) => a.num == d.train)),
+    station.Station_JP
+  );
+  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 && !!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("13%") : parseInt("18%"),
+          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("13%") : parseInt("18%"),
+          color: "white",
+          fontWeight: "bold",
+        }}
+      >
+        {lastStation}
+      </Text>
+    </View>
+  );
+};
+
+const DependTime = ({ time }) => (
+  <View style={{ flex: 3 }}>
+    <Text
+      style={{
+        fontSize: parseInt("18%"),
+        color: "white",
+        fontWeight: "bold",
+      }}
+    >
+      {time}
+    </Text>
+  </View>
+);
+
+const StatusAndDelay = ({ trainDelayStatus }) => {
+  return (
+    <View style={{ flex: 4 }}>
+      <Text
+        style={{
+          fontSize: parseInt("18%"),
+          color: "white",
+          fontWeight: "bold",
+          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",
+    }}
+    onPress={onClick}
+  >
+    <View style={{ flex: 4 }}>
+      <Text
+        style={{
+          fontSize: parseInt("18%"),
+          color: "green",
+          fontWeight: "bold",
+        }}
+        numberOfLines={numberOfLines}
+      >
+        {" "}
+        &gt; {info}
+      </Text>
+    </View>
+  </TouchableOpacity>
+);

components/駅名表/Sign.js

@@ -1,32 +1,64 @@
-import React, { Component, useRef, useState, useEffect } from "react";
-import {
-  StatusBar,
-  View,
-  LayoutAnimation,
-  ScrollView,
-  Linking,
-  Text,
-  TouchableOpacity,
-} from "react-native";
-import {
-  widthPercentageToDP as wp,
-  heightPercentageToDP as hp,
-} from "react-native-responsive-screen";
+import React, { useRef, useState, useEffect } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { widthPercentageToDP as wp } from "react-native-responsive-screen";
+import LottieView from "lottie-react-native";
 import { useInterval } from "../../lib/useInterval";
+import { AS } from "../../storageControl";
+import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
+
+import lineColorList from "../../assets/originData/lineColorList";
 
 export default function Sign(props) {
-  const { currentStation, originalStationList, oP } = props;
+  const { currentStation, originalStationList, oP, oLP } = props;
+  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
+  const [nexPrePosition, setNexPrePosition] = useState(0);
+
+  const [preStation, setPreStation] = useState();
+  const [nexStation, setNexStation] = useState();
+  const [testButtonStatus, setTestButtonStatus] = useState(false);
+  useEffect(() => {
+    const isFavorite = favoriteStation.filter((d) => {
+      const compare = JSON.stringify(d);
+      const current = JSON.stringify(currentStation);
+      if (compare === current) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+    setTestButtonStatus(isFavorite.length == 0 ? false : true);
+  }, [favoriteStation, currentStation]);
+
+  useInterval(() => {
+    if (currentStation.length == 1) {
+      setNexPrePosition(0);
+      return () => {};
+    }
+    setNexPrePosition(
+      nexPrePosition + 1 == currentStation.length ? 0 : nexPrePosition + 1
+    );
+  }, 2000);
+
+  useEffect(() => {
+    setNexPrePosition(0);
+    getPreNextStation(currentStation[0]);
+  }, [currentStation]);
+
+  useEffect(() => {
+    if (!currentStation[nexPrePosition]) return () => {};
+    getPreNextStation(currentStation[nexPrePosition]);
+  }, [nexPrePosition]);
   const getPreNextStation = (now) => {
     const lineList = [
-      "予讃線",
-      "松宇線",
-      "伊予灘線",
-      "土讃線",
-      "窪川線",
-      "高徳線",
-      "徳島線",
-      "鳴門線",
-      "瀬戸大橋線",
+      "予讃線(高松-松山間)[Y]",
+      "予讃線(松山-宇和島間)[U]",
+      "予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]",
+      "土讃線(多度津-高知間)[D]",
+      "土讃線(高知-窪川間)[K]",
+      "高徳線(高松-徳島間)[T]",
+      "徳島線(徳島-阿波池田)[B]",
+      "鳴門線(池谷-鳴門間)[N]",
+      "瀬戸大橋線(宇多津-児島間)[M]",
     ];
     let returnData;
     lineList.forEach((d) => {
@@ -40,114 +72,190 @@ export default function Sign(props) {
         ];
       }
     });
-    return returnData;
+    setPreStation(returnData[0]);
+    setNexStation(returnData[1]);
   };
-  const [nexPrePosition, setNexPrePosition] = useState(0);
-  useInterval(() => {
-    if (currentStation.length == 1) return;
-    LayoutAnimation.easeInEaseOut();
-    setNexPrePosition(
-      nexPrePosition + 1 == currentStation.length ? 0 : nexPrePosition + 1
-    );
-  }, 2000);
+  const lottieRef = useRef();
   return (
-    <TouchableOpacity style={styleSheet.外枠} onPress={oP}>
+    <TouchableOpacity style={styleSheet.外枠} onPress={oP} onLongPress={oLP}>
       <StationNumberMaker currentStation={currentStation} />
       <StationNameArea currentStation={currentStation} />
+      <TouchableOpacity
+        style={{ position: "absolute", right: -15, top: -20 }}
+        onPress={() => {
+          if (testButtonStatus) {
+            const otherData = favoriteStation.filter((d) => {
+              const compare = JSON.stringify(d);
+              const current = JSON.stringify(currentStation);
+              if (compare !== current) {
+                return true;
+              } else {
+                return false;
+              }
+            });
+            AS.setItem("favoriteStation", JSON.stringify(otherData));
+            setFavoriteStation(otherData);
+          } else {
+            let ret = favoriteStation;
+            ret.push(currentStation);
+            AS.setItem("favoriteStation", JSON.stringify(ret));
+            setFavoriteStation(ret);
+          }
+          setTestButtonStatus(!testButtonStatus);
+        }}
+      >
+        <LottieDelayView
+          progress={testButtonStatus ? 1 : 0}
+          speed={1.4}
+          style={{ width: 80, height: 80 }}
+          source={require("../../assets/939-star.json")}
+          lottieRef={lottieRef}
+          loop={false}
+        />
+      </TouchableOpacity>
+
       <Text style={styleSheet.JRStyle}>JR</Text>
       <View style={styleSheet.下帯} />
       <View style={styleSheet.下帯内容}>
-        {(() => {
-          let [preStation, nexStation] = getPreNextStation(
-            currentStation[nexPrePosition]
-          );
-          return (
-            <View style={styleSheet.下枠フレーム}>
-              <View style={styleSheet.下枠フレーム}>
-                {preStation && (
-                  <>
-                    <Text style={styleSheet.下枠左右マーク}>◀</Text>
-                    {preStation.StationNumber && (
-                      <View style={styleSheet.下枠駅ナンバー}>
-                        <View style={{ flex: 1 }} />
-                        <Text
-                          style={{
-                            fontSize: parseInt("10%"),
-                            color: "white",
-                          }}
-                        >
-                          {preStation.StationNumber}
-                        </Text>
-                        <View style={{ flex: 1 }} />
-                      </View>
-                    )}
-                    <StationName
-                      stringData={preStation}
-                      ss={{ flex: 1, alignItems: "flex-start" }}
-                    />
-                  </>
-                )}
-              </View>
-              <View style={styleSheet.下枠フレーム}>
-                {nexStation && (
-                  <>
-                    <StationName
-                      stringData={nexStation}
-                      ss={{ flex: 1, alignItems: "flex-end" }}
-                    />
-                    {nexStation.StationNumber && (
-                      <View style={styleSheet.下枠駅ナンバー}>
-                        <View style={{ flex: 1 }} />
-                        <Text
-                          style={{ fontSize: parseInt("10%"), color: "white" }}
-                        >
-                          {nexStation.StationNumber}
-                        </Text>
-                        <View style={{ flex: 1 }} />
-                      </View>
-                    )}
-                    <Text style={styleSheet.下枠左右マーク}>▶</Text>
-                  </>
-                )}
-              </View>
-            </View>
-          );
-        })()}
+        <NexPreStationLine preStation={preStation} nexStation={nexStation} />
       </View>
     </TouchableOpacity>
   );
 }
 
+const LottieDelayView = ({
+  progress,
+  speed,
+  style,
+  source,
+  lottieRef,
+  loop,
+}) => {
+  const [progressState, setProgressState] = useState(undefined);
+  useEffect(() => {
+    if (progress == 0) {
+      lottieRef.current.play(progressState !== undefined ? 35 : 7, 7);
+    } else {
+      lottieRef.current.play(progressState !== undefined ? 7 : 35, 35);
+    }
+  }, [progress]);
+  return (
+    <LottieView
+      progress={progressState}
+      speed={speed}
+      style={style}
+      source={source}
+      ref={lottieRef}
+      loop={loop}
+      onAnimationFinish={(isCanceled) => {
+        setProgressState(progress);
+      }}
+    />
+  );
+};
+const NexPreStationLine = ({ nexStation, preStation }) => {
+  return (
+    <View style={styleSheet.下枠フレーム}>
+      <View style={styleSheet.下枠フレーム}>
+        {preStation ? (
+          <>
+            <Text style={styleSheet.下枠左右マーク}>◀</Text>
+            {preStation.StationNumber ? (
+              <View style={styleSheet.下枠駅ナンバー}>
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    fontSize: parseInt("10%"),
+                    color: "white",
+                  }}
+                >
+                  {preStation.StationNumber}
+                </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            ) : (
+              <></>
+            )}
+            <StationName
+              stringData={preStation}
+              ss={{ flex: 1, alignItems: "flex-start" }}
+            />
+          </>
+        ) : (
+          <></>
+        )}
+      </View>
+      <View style={styleSheet.下枠フレーム}>
+        {nexStation ? (
+          <>
+            <StationName
+              stringData={nexStation}
+              ss={{ flex: 1, alignItems: "flex-end" }}
+            />
+            {nexStation.StationNumber ? (
+              <View style={styleSheet.下枠駅ナンバー}>
+                <View style={{ flex: 1 }} />
+                <Text style={{ fontSize: parseInt("10%"), color: "white" }}>
+                  {nexStation.StationNumber}
+                </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            ) : (
+              <></>
+            )}
+            <Text style={styleSheet.下枠左右マーク}>▶</Text>
+          </>
+        ) : (
+          <></>
+        )}
+      </View>
+    </View>
+  );
+};
+
 const StationNumberMaker = (props) => {
+  const getTop = (array, index) => {
+    if (array.length == 1) return 20;
+    else if (index == 0) return 5;
+    else if (index == 1) return 35;
+    else return 20;
+  };
   return props.currentStation
     .filter((d) => (d.StationNumber ? true : false))
-    .map((d, index, array) => (
-      <View
-        key={d + index}
-        style={{
-          position: "absolute",
-          alignContent: "center",
-          alignItems: "center",
-          top:
-            (() => {
-              if (array.length == 1) return 20;
-              else if (index == 0) return 5;
-              else if (index == 1) return 35;
-              else return 20;
-            })() + "%",
-          right: "10%",
-          width: wp("10%"),
-          height: wp("10%"),
-          borderColor: "#2E94BB",
-          borderWidth: parseInt("2%"),
-          borderRadius: parseInt("100%"),
-        }}
-      >
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: parseInt("20%") }}>{d.StationNumber}</Text>
-        <View style={{ flex: 1 }} />
-      </View>
-    ));
+    .map((d, index, array) => {
+      const lineID = d.StationNumber.slice(0, 1);
+      const lineName = d.StationNumber.slice(1);
+      return (
+        <View
+          style={{
+            position: "absolute",
+            alignContent: "center",
+            alignItems: "center",
+            top: getTop(array, index) + "%",
+            right: "10%",
+            width: wp("10%"),
+            height: wp("10%"),
+            borderColor: lineColorList[lineID],
+            borderWidth: parseInt("3%"),
+            borderRadius: parseInt("100%"),
+          }}
+          key={array[index].StationNumber}
+        >
+          <View style={{ flex: 1 }} />
+          <Text
+            style={{
+              fontSize: parseInt("13%"),
+              margin: 0,
+              padding: 0,
+              textAlign: "center",
+            }}
+          >
+            {lineID + "\n" + lineName}
+          </Text>
+          <View style={{ flex: 1 }} />
+        </View>
+      );
+    });
 };
 
 const StationNameArea = (props) => {
@@ -185,8 +293,7 @@ const styleSheet = {
     height: (wp("80%") / 20) * 9,
     borderColor: "#2E94BB",
     borderWidth: 1,
-    margin: 10,
-    marginHorizontal: wp("10%"),
+    backgroundColor: "white",
   },
   下帯: {
     position: "absolute",
@@ -232,6 +339,7 @@ const styleSheet = {
     flex: 1,
     flexDirection: "row",
     alignContent: "center",
+    alignItems: "center",
   },
   下枠左右マーク: {
     fontWeight: "bold",

config/newsUpdate.js

@@ -1 +1 @@
-export const news = "2022-9-30";
+export const news = "2023-12-25";

eas.json

@@ -5,16 +5,30 @@
   "build": {
     "development": {
       "developmentClient": true,
-      "distribution": "internal"
+      "distribution": "internal",
+      "channel": "development"
     },
     "preview": {
-      "distribution": "internal"
+      "distribution": "internal",
+      "channel": "preview"
     },
     "mapsbuild": {
       "releaseChannel": "mapsbuild"
     },
     "production": {
       "releaseChannel": "aliexpress"
+    },
+    "beta4.5": {
+      "releaseChannel": "base"
+    },
+    "production4.5": {
+      "releaseChannel": "buyma"
+    },
+    "beta4.6": {
+      "channel": "catch"
+    },
+    "production4.6": {
+      "channel": "costoco"
     }
   },
   "submit": {

howto.js

@@ -2,29 +2,37 @@ const WEBVIEW = "WEBVIEW";
 import React, { Component } from "react";
 import { StatusBar, View, TouchableOpacity, Text } from "react-native";
 import { WebView } from "react-native-webview";
-export default ({ navigation: { navigate } }) => (
-  <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-    <WebView
-      useWebKit={true}
-      source={{ uri: "https://train.jr-shikoku.co.jp/usage.htm" }}
-    />
-    <TouchableOpacity
-      style={{
-        padding: 10,
-        flexDirection: "row",
-        borderColor: "white",
-        borderWidth: 1,
-        margin: 10,
-        borderRadius: 5,
-        alignItems: "center",
-      }}
-      onPress={() => navigate("Apps")}
-    >
-      <View style={{ flex: 1 }} />
-      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-        閉じる
-      </Text>
-      <View style={{ flex: 1 }} />
-    </TouchableOpacity>
-  </View>
-);
+export default ({ navigation: { navigate }, route }) => {
+  const { info, goTo, useShow } = route.params;
+  const onExit = () => {
+    navigate(goTo);
+    useShow();
+  };
+  return (
+    <View style={styles.View}>
+      <WebView
+        useWebKit
+        source={{ uri: info.replace("http://", "https://") }}
+      />
+      <TouchableOpacity style={styles.touch} onPress={onExit}>
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          閉じる
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+const styles = {
+  View: { height: "100%", backgroundColor: "#0099CC" },
+  touch: {
+    padding: 10,
+    flexDirection: "row",
+    borderColor: "white",
+    borderWidth: 1,
+    margin: 10,
+    borderRadius: 5,
+    alignItems: "center",
+  },
+};

lib/HeaderConfig.js

@@ -0,0 +1,5 @@
+export const HeaderConfig = {
+  headers: {
+    referer: "https://train.jr-shikoku.co.jp/sp.html",
+  },
+};

lib/checkDuplicateTrainData.js

@@ -0,0 +1,6 @@
+export const checkDuplicateTrainData = (currentTrainArray) => {
+  const notNyujoData = currentTrainArray.filter((d) => d.delay !== "入線");
+  if (currentTrainArray.length == 1) return currentTrainArray[0];
+  if (notNyujoData.length == 0) return currentTrainArray[0];
+  else return notNyujoData[0];
+};

lib/getPdfViewURL.js

@@ -0,0 +1,7 @@
+import { Platform } from "react-native";
+
+export const getPDFViewURL = (url) => {
+  if (Platform.OS == "ios") return url;
+  else
+    return `https://mozilla.github.io/pdf.js/web/viewer.html?file=${encodeURI(url)}`;
+};

lib/getStationList.js

@@ -18,14 +18,21 @@ import train_lang from "../assets/originData/train_lang";
 
 let status = undefined;
 
+export const lineList = [
+  "予讃線(高松-松山間)[Y]",
+  "予讃線(松山-宇和島間)[U]",
+  "予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]",
+  "土讃線(多度津-高知間)[D]",
+  "土讃線(高知-窪川間)[K]",
+  "高徳線(高松-徳島間)[T]",
+  "徳島線(徳島-阿波池田)[B]",
+  "鳴門線(池谷-鳴門間)[N]",
+  "瀬戸大橋線(宇多津-児島間)[M]",
+];
+
 export const getStationList = async (props) => {
   if (status) return status;
   //駅リストイニシャライズ
-  const HeaderConfig = {
-    headers: {
-      referer: "https://train.jr-shikoku.co.jp/sp.html",
-    },
-  };
   return await Promise.all([
     yosan,
     uwajima,
@@ -41,15 +48,15 @@ export const getStationList = async (props) => {
   ]).then((values) => {
     let stationList = {};
     [
-      stationList.予讃線,
-      stationList.松宇線,
-      stationList.伊予灘線,
-      stationList.土讃線,
-      stationList.窪川線,
-      stationList.高徳線,
-      stationList.徳島線,
-      stationList.鳴門線,
-      stationList.瀬戸大橋線,
+      stationList["予讃線(高松-松山間)[Y]"],
+      stationList["予讃線(松山-宇和島間)[U]"],
+      stationList["予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]"],
+      stationList["土讃線(多度津-高知間)[D]"],
+      stationList["土讃線(高知-窪川間)[K]"],
+      stationList["高徳線(高松-徳島間)[T]"],
+      stationList["徳島線(徳島-阿波池田)[B]"],
+      stationList["鳴門線(池谷-鳴門間)[N]"],
+      stationList["瀬戸大橋線(宇多津-児島間)[M]"],
       stationList.駅間リスト,
       stationList.日英対応表,
     ] = values;
@@ -103,52 +110,55 @@ export const getStationList = async (props) => {
         return data;
       });
     };
-    stationList.予讃線 = addStationPosition(
-      concatBetweenStations(stationList.予讃線),
+    stationList["予讃線(高松-松山間)[Y]"] = addStationPosition(
+      concatBetweenStations(stationList["予讃線(高松-松山間)[Y]"]),
       予讃線,
       stationList.日英対応表
     );
-    stationList.松宇線 = addStationPosition(
-      concatBetweenStations(stationList.松宇線),
+    stationList["予讃線(松山-宇和島間)[U]"] = addStationPosition(
+      concatBetweenStations(stationList["予讃線(松山-宇和島間)[U]"]),
       予讃線,
       stationList.日英対応表
     );
-    stationList.伊予灘線 = addStationPosition(
-      concatBetweenStations(stationList.伊予灘線),
-      予讃線,
-      stationList.日英対応表
-    );
-    stationList.土讃線 = addStationPosition(
-      concatBetweenStations(stationList.土讃線),
+    stationList["予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]"] =
+      addStationPosition(
+        concatBetweenStations(
+          stationList["予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]"]
+        ),
+        予讃線,
+        stationList.日英対応表
+      );
+    stationList["土讃線(多度津-高知間)[D]"] = addStationPosition(
+      concatBetweenStations(stationList["土讃線(多度津-高知間)[D]"]),
       土讃線,
       stationList.日英対応表
     );
-    stationList.窪川線 = addStationPosition(
-      concatBetweenStations(stationList.窪川線),
+    stationList["土讃線(高知-窪川間)[K]"] = addStationPosition(
+      concatBetweenStations(stationList["土讃線(高知-窪川間)[K]"]),
       土讃線,
       stationList.日英対応表
     );
-    stationList.高徳線 = addStationPosition(
-      concatBetweenStations(stationList.高徳線),
+    stationList["高徳線(高松-徳島間)[T]"] = addStationPosition(
+      concatBetweenStations(stationList["高徳線(高松-徳島間)[T]"]),
       高徳線,
       stationList.日英対応表
     );
-    stationList.鳴門線 = addStationPosition(
-      concatBetweenStations(stationList.鳴門線),
+    stationList["鳴門線(池谷-鳴門間)[N]"] = addStationPosition(
+      concatBetweenStations(stationList["鳴門線(池谷-鳴門間)[N]"]),
       鳴門線,
       stationList.日英対応表
     );
     const tokushimaCurrent = addStationPosition(
-      concatBetweenStations(stationList.徳島線),
+      concatBetweenStations(stationList["徳島線(徳島-阿波池田)[B]"]),
       徳島線,
       stationList.日英対応表
     );
-    stationList.徳島線 = [
+    stationList["徳島線(徳島-阿波池田)[B]"] = [
       tokushimaCurrent[tokushimaCurrent.length - 1],
       ...tokushimaCurrent,
     ];
-    stationList.徳島線.pop();
-    stationList.瀬戸大橋線 = [
+    stationList["徳島線(徳島-阿波池田)[B]"].pop();
+    stationList["瀬戸大橋線(宇多津-児島間)[M]"] = [
       {
         Station_JP: "坂出",
         Station_EN: "Sakaide",

lib/getTrainDelayStatus.js

@@ -0,0 +1,18 @@
+export const getTrainDelayStatus = (current, Station_JP) => {
+  if (!current) return () => {};
+  const delay = current.delay;
+  switch (true) {
+    case delay === "入線":
+      if (current.Pos === Station_JP) {
+        return "当駅始発";
+      } else {
+        return "発車前";
+      }
+    case isNaN(delay):
+      return delay;
+    case delay === 0:
+      return "定刻通り";
+    default:
+      return delay + "分遅れ";
+  }
+};

lib/getTrainType.js

@@ -0,0 +1,16 @@
+export const getTrainType = (nameString) => {
+  switch (nameString) {
+    case "Rapid":
+      return { color: "aqua", name: "快速", data: "rapid" };
+    case "LTDEXP":
+      return { color: "red", name: "特急", data: "express" };
+    case "NightLTDEXP":
+      return { color: "red", name: "寝台特急", data: "express" };
+    case "SPCL":
+      return { color: "blue", name: "臨時", data: "normal" };
+    case "Normal":
+      return { color: "white", name: "普通列車", data: "normal" };
+    default:
+      return { color: "white", name: "その他", data: "normal" };
+  }
+};

lib/initIcon.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Ionicons, AntDesign } from "@expo/vector-icons";
+
+export const initIcon = (name, type) => {
+  switch (type) {
+    case "Ionicons":
+      return ({ focused, color, size }) => (
+        <Ionicons name={name} size={32} color={focused ? "#0099CC" : "black"} />
+      );
+    case "AntDesign":
+      return ({ focused, color, size }) => (
+        <AntDesign
+          name={name}
+          size={32}
+          color={focused ? "#0099CC" : "black"}
+        />
+      );
+  }
+};

lib/objectIsEmpty.js

@@ -0,0 +1,3 @@
+export const objectIsEmpty = (obj) => {
+  return !Object.keys(obj).length;
+};

lib/parseAllTrainDiagram.js

@@ -0,0 +1,11 @@
+export const parseAllTrainDiagram = (text) => {
+  const val = text.replace("[\r\n", "").split(",\r\n");
+  let trainDiagram = {};
+  val.forEach((element) => {
+    try {
+      let data = JSON.parse(element);
+      Object.keys(data).forEach((key) => (trainDiagram[key] = data[key]));
+    } catch (e) {}
+  });
+  return trainDiagram;
+};

lib/stackOption.js

@@ -0,0 +1,8 @@
+import { TransitionPresets } from "@react-navigation/stack";
+export const optionData = {
+  gestureEnabled: true,
+  ...TransitionPresets.ModalPresentationIOS,
+  cardOverlayEnabled: true,
+  headerTransparent: true,
+  headerShown: false,
+};

ndView.js

@@ -1,9 +1,11 @@
-import React, { Component } from "react";
-import { StatusBar, View, Linking, Platform, Text } from "react-native";
+import React, { useRef, useState } from "react";
+import { View, Platform, TouchableOpacity } from "react-native";
 import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { Ionicons } from "@expo/vector-icons";
 export default function tndView() {
+  const webview = useRef();
+  const [LoadError, setLoadError] = useState(false);
   return (
     <View
       style={{
@@ -14,11 +16,22 @@ export default function tndView() {
     >
       <WebView
         useWebKit={true}
+        ref={webview}
         source={{ uri: "https://www.jr-shikoku.co.jp/info/" }}
         originWhitelist={["https://www.jr-shikoku.co.jp"]}
         mixedContentMode={"compatibility"}
         javaScriptEnabled={true}
         injectedJavaScript={jsa}
+        pullToRefreshEnabled
+        onError={(syntheticEvent) => {
+          //webViewの再読み込みを行う
+          this.webView.reload();
+        }}
+      />
+      <ReloadButton
+        onPress={() => webview.current.reload()}
+        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+        LoadError={LoadError}
       />
     </View>
   );
@@ -27,3 +40,39 @@ const jsa = `
 document.querySelector('.sitettl').style.display = 'none';	
 document.querySelector('.attention').style.display = 'none';
 `;
+
+const ReloadButton = ({ onPress, top, mapSwitch, LoadError = false }) => {
+  const styles = {
+    touch: {
+      position: "absolute",
+      top,
+      right: 10,
+      width: 50,
+      height: 50,
+      backgroundColor: LoadError ? "red" : "#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="reload" color="white" size={30} />
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};

package.json

@@ -8,42 +8,47 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
-    "@react-native-async-storage/async-storage": "~1.17.3",
+    "@react-native-async-storage/async-storage": "1.18.2",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/bottom-tabs": "^5.11.11",
     "@react-navigation/native": "^5.9.4",
     "@react-navigation/stack": "^5.14.5",
-    "expo": "^45.0.0",
-    "expo-font": "~10.1.0",
-    "expo-location": "~14.2.2",
-    "expo-updates": "~0.13.4",
-    "expo-web-browser": "~10.2.1",
+    "dayjs": "^1.11.9",
+    "eas-cli": "^5.9.1",
+    "expo": "^49.0.21",
+    "expo-device": "~5.4.0",
+    "expo-font": "~11.4.0",
+    "expo-location": "~16.1.0",
+    "expo-notifications": "~0.20.1",
+    "expo-updates": "~0.18.17",
+    "expo-web-browser": "~12.3.2",
     "firebase": "8.2.3",
-    "lottie-react-native": "5.0.1",
+    "lottie-react-native": "5.1.6",
     "native-base": "^2.15.2",
     "npm": "^7.18.1",
     "pushy-react-native": "^1.0.18",
-    "react": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-actions-sheet": "^0.4.9",
+    "react": "18.2.0",
+    "react-native": "0.72.6",
+    "react-native-actions-sheet": "0.8.21",
     "react-native-auto-height-image": "^3.2.4",
     "react-native-elements": "^3.4.2",
-    "react-native-gesture-handler": "~2.2.1",
-    "react-native-maps": "0.30.2",
-    "react-native-reanimated": "~2.8.0",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-maps": "1.7.1",
+    "react-native-reanimated": "^3.6.1",
     "react-native-remote-svg": "^2.0.6",
     "react-native-responsive-screen": "^1.4.2",
     "react-native-router-flux": "^4.3.1",
-    "react-native-safe-area-context": "4.2.4",
-    "react-native-screens": "~3.11.1",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
+    "react-native-snap-carousel": "^3.9.1",
     "react-native-storage": "^1.0.1",
-    "react-native-svg": "12.3.0",
+    "react-native-svg": "13.9.0",
     "react-native-svg-uri": "^1.2.3",
     "react-native-vector-icons": "^8.1.0",
-    "react-native-webview": "11.18.1"
+    "react-native-webview": "^13.6.3"
   },
   "devDependencies": {
-    "babel-preset-expo": "~9.1.0"
+    "babel-preset-expo": "^9.5.0"
   },
   "private": true
 }

stateBox/useAllTrainDiagram.js

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+const initialState = {
+  allTrainDiagram: undefined,
+  setAllTrainDiagram: () => {},
+};
+
+const AllTrainDiagramContext = createContext(initialState);
+
+export const useAllTrainDiagram = () => {
+  return useContext(AllTrainDiagramContext);
+};
+
+export const AllTrainDiagramProvider = ({ children }) => {
+  const [allTrainDiagram, setAllTrainDiagram] = useState();
+  const customData = {
+  };
+  useEffect(() => {
+    fetch(
+      "https://script.google.com/macros/s/AKfycbx_s7RB-xTy-iAslFJg7LfplLV09-hjDXEjdi9kCP_JT45wq17Af_IPOKIOqIfaNDg/exec"
+    )
+      .then((res) => res.json())
+      .then((res) => {
+        const data = {};
+        res.forEach((d) => {
+          const keys = Object.keys(d);
+          data[keys] = d[keys];
+        });
+        return data;
+      })
+      .then((res) => {
+        Object.assign(res, customData);
+        setAllTrainDiagram(res);
+      });
+  }, []);
+
+  return (
+    <AllTrainDiagramContext.Provider
+      value={{ allTrainDiagram, setAllTrainDiagram }}
+    >
+      {children}
+    </AllTrainDiagramContext.Provider>
+  );
+};

stateBox/useAreaInfo.js

@@ -0,0 +1,21 @@
+import React, { createContext, useContext, useState } from "react";
+const initialState = {
+  areaInfo: "",
+  setAreainfo: () => {},
+};
+
+const AreaInfoContext = createContext(initialState);
+
+export const useAreaInfo = () => {
+  return useContext(AreaInfoContext);
+};
+
+export const AreaInfoProvider = ({ children }) => {
+  const [areaInfo, setAreaInfo] = useState("");
+
+  return (
+    <AreaInfoContext.Provider value={{ areaInfo, setAreaInfo }}>
+      {children}
+    </AreaInfoContext.Provider>
+  );
+};

stateBox/useBusAndTrainData.js

@@ -0,0 +1,23 @@
+import React, { createContext, useContext, useState } from "react";
+const initialState = {
+  busAndTrainData: [],
+  setBusAndTrainData: () => {},
+};
+
+const BusAndTrainDataContext = createContext(initialState);
+
+export const useBusAndTrainData = () => {
+  return useContext(BusAndTrainDataContext);
+};
+
+export const BusAndTrainDataProvider = ({ children }) => {
+  const [busAndTrainData, setBusAndTrainData] = useState([]);
+
+  return (
+    <BusAndTrainDataContext.Provider
+      value={{ busAndTrainData, setBusAndTrainData }}
+    >
+      {children}
+    </BusAndTrainDataContext.Provider>
+  );
+};

stateBox/useCurrentTrain.js

@@ -0,0 +1,56 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
+import { HeaderConfig } from "../lib/HeaderConfig";
+
+import useInterval from "../lib/useInterval";
+const initialState = {
+  currentTrain: [],
+  setCurrentTrain: () => {},
+  currentTrainLoading: "loading",
+  setCurrentTrainLoading: () => {},
+  getCurrentTrain: () => {},
+};
+
+const CurrentTrainContext = createContext(initialState);
+
+export const useCurrentTrain = () => {
+  return useContext(CurrentTrainContext);
+};
+
+export const CurrentTrainProvider = ({ children }) => {
+  const [currentTrain, setCurrentTrain] = useState([]); //現在在線中の全列車 { num: 列車番号, delay: 遅延時分(状態), Pos: 位置情報 }
+  const [currentTrainLoading, setCurrentTrainLoading] = useState("loading"); // success, error, loading
+  const getCurrentTrain = () =>
+    fetch(
+      "https://script.google.com/macros/s/AKfycby9Y2-Bm75J_WkbZimi7iS8v5r9wMa9wtzpdwES9sOGF4i6HIYEJOM60W6gM1gXzt1o/exec",
+      HeaderConfig
+    )
+      .then((response) => response.json())
+      .then((d) =>
+        d.map((x) => ({ num: x.TrainNum, delay: x.delay, Pos: x.Pos }))
+      )
+      .then((d) => {
+        setCurrentTrain(d);
+        setCurrentTrainLoading("success");
+      })
+      .catch(() => {
+        console.log("えらー");
+        setCurrentTrainLoading("error");
+      });
+
+  useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得
+
+  useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得
+  return (
+    <CurrentTrainContext.Provider
+      value={{
+        currentTrain,
+        setCurrentTrain,
+        currentTrainLoading,
+        setCurrentTrainLoading,
+        getCurrentTrain,
+      }}
+    >
+      {children}
+    </CurrentTrainContext.Provider>
+  );
+};

stateBox/useFavoriteStation.js

@@ -0,0 +1,36 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useLayoutEffect,
+} from "react";
+import { AS } from "../storageControl";
+const initialState = {
+  favoriteStation: [],
+  setFavoriteStation: () => {},
+};
+
+const FavoriteStationContext = createContext(initialState);
+
+export const useFavoriteStation = () => {
+  return useContext(FavoriteStationContext);
+};
+
+export const FavoriteStationProvider = ({ children }) => {
+  const [favoriteStation, setFavoriteStation] = useState([]);
+  useLayoutEffect(() => {
+    AS.getItem("favoriteStation")
+      .then((d) => {
+        const returnData = JSON.parse(d);
+        setFavoriteStation(returnData);
+      })
+      .catch((d) => console.log(d));
+  }, []);
+  return (
+    <FavoriteStationContext.Provider
+      value={{ favoriteStation, setFavoriteStation }}
+    >
+      {children}
+    </FavoriteStationContext.Provider>
+  );
+};

stateBox/useTrainDelayData.js

@@ -0,0 +1,45 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+const initialState = {
+  getTime: new Date(),
+  setGetTime: () => {},
+  loadingDelayData: true,
+  setLoadingDelayData: () => {},
+  delayData: undefined,
+  setDelayData: () => {},
+};
+
+const TrainDelayDataContext = createContext(initialState);
+
+export const useTrainDelayData = () => {
+  return useContext(TrainDelayDataContext);
+};
+
+export const TrainDelayDataProvider = ({ children }) => {
+  const [delayData, setDelayData] = useState(undefined);
+  const [getTime, setGetTime] = useState(new Date());
+  const [loadingDelayData, setLoadingDelayData] = useState(true);
+  useEffect(() => {
+    fetch(
+      "https://script.google.com/macros/s/AKfycbyKxch7z7l8e07LXulRHqxjVoIiB13kcgvoToLE-rqlxLmLSKdlmqz0FI1F2EuA7Zfg/exec"
+    )
+      .then((response) => response.text())
+      .then((data) => setDelayData(data !== "" ? data.split("^") : null))
+      .then(() => setGetTime(new Date()))
+      .finally(() => setLoadingDelayData(false));
+  }, [loadingDelayData]);
+
+  return (
+    <TrainDelayDataContext.Provider
+      value={{
+        getTime,
+        setGetTime,
+        loadingDelayData,
+        setLoadingDelayData,
+        delayData,
+        setDelayData,
+      }}
+    >
+      {children}
+    </TrainDelayDataContext.Provider>
+  );
+};

storageConfig.js

@@ -0,0 +1,27 @@
+import Storage from "react-native-storage";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const storage = new Storage({
+  // maximum capacity, default 1000 key-ids
+  size: 10000,
+
+  // Use AsyncStorage for RN apps, or window.localStorage for web apps.
+  // If storageBackend is not set, data will be lost after reload.
+  storageBackend: AsyncStorage, // for web: window.localStorage
+
+  // expire time, default: 1 day (1000 * 3600 * 24 milliseconds).
+  // can be null, which means never expire.
+  defaultExpires: null,
+
+  // cache data in the memory. default is true.
+  enableCache: true,
+
+  // if data was not found in storage or expired data was found,
+  // the corresponding sync method will be invoked returning
+  // the latest data.
+  sync: {
+    // we'll talk about the details later.
+  },
+});
+
+export default storage;

storageControl.js

@@ -0,0 +1,14 @@
+import storage from "./storageConfig.js";
+
+export const AS = {
+  getItem: (key) => storage.load({ key }),
+  setItem: (key, data) =>
+    storage.save({
+      key, // Note: Do not use underscore("_") in key!
+      data,
+
+      // if expires not specified, the defaultExpires will be applied instead.
+      // if set to null, then it will never expire.
+      expires: null,
+    }),
+};

trainbaseview.js

@@ -1,9 +1,17 @@
 import React, { Component, useRef } from "react";
-import { StatusBar, Platform, View } from "react-native";
+import {
+  StatusBar,
+  Platform,
+  View,
+  TouchableOpacity,
+  Text,
+} from "react-native";
 import { WebView } from "react-native-webview";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 
-export default function TrainBase({ route }) {
-  const { info } = route.params;
+export default function TrainBase({ route, navigation }) {
+  const { info, from } = route.params;
+  const { navigate } = navigation;
   const webview = useRef();
   const jss = `document.getElementById('Footer').style.display = 'none';
   ${
@@ -28,6 +36,29 @@ export default function TrainBase({ route }) {
         setSupportMultipleWindows={false}
         onMessage={(event) => {}}
       />
+      {(from == "LED" || from == "AllTrainDiagramView") && (
+        <TouchableOpacity
+          style={{
+            padding: 10,
+            flexDirection: "row",
+            borderColor: "black",
+            borderWidth: 1,
+            margin: 10,
+            borderRadius: 5,
+            alignItems: "center",
+          }}
+          onPress={() =>
+            navigate(from == "AllTrainDiagramView" ? "AllTrainIDList" : "menu")
+          }
+        >
+          <View style={{ flex: 1 }} />
+          <MaterialCommunityIcons name="close" color="black" size={30} />
+          <Text style={{ fontSize: 25, fontWeight: "bold", color: "black" }}>
+            閉じる
+          </Text>
+          <View style={{ flex: 1 }} />
+        </TouchableOpacity>
+      )}
     </View>
   );
 }