Merge commit 'f3f9ee60c2d89616cdb1c555eb415779fdd3295e' into special/royal-develop

.gitignore

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

App.js

@@ -1,61 +1,80 @@
-import React, { useEffect, useRef, useState } 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 { GestureHandlerRootView } from "react-native-gesture-handler";
 import { UpdateAsync } from "./UpdateAsync.js";
-import { getStationList2 } from "./lib/getStationList2";
 import { AS } from "./storageControl";
-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";
-import FavoriteList from "./components/FavoriteList.js";
 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 Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
 if (Platform.OS === "android") {
   if (UIManager.setLayoutAnimationEnabledExperimental) {
     UIManager.setLayoutAnimationEnabledExperimental(true);
   }
 }
-export default function App() {
-  useEffect(() => {
-    UpdateAsync();
-  }, []);
-  const [favoriteStation, setFavoriteStation] = useState([]);
 
-  useEffect(() => {
-    AS.getItem("favoriteStation")
-      .then((d) => {
-        const returnData = JSON.parse(d);
-        setFavoriteStation(returnData);
-      })
-      .catch((d) => console.log(d));
-  }, []);
-  const [busAndTrainData, setBusAndTrainData] = useState([]);
+export default function App() {
+  useEffect(() => UpdateAsync(), []);
+  return (
+    <SafeAreaProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <FavoriteStationProvider>
+          <TrainDelayDataProvider>
+            <CurrentTrainProvider>
+              <AreaInfoProvider>
+                <AllTrainDiagramProvider>
+                  <BusAndTrainDataProvider>
+                    <SheetProvider>
+                      <AppContainer />
+                    </SheetProvider>
+                  </BusAndTrainDataProvider>
+                </AllTrainDiagramProvider>
+              </AreaInfoProvider>
+            </CurrentTrainProvider>
+          </TrainDelayDataProvider>
+        </FavoriteStationProvider>
+      </GestureHandlerRootView>
+    </SafeAreaProvider>
+  );
+}
+export function AppContainer() {
+  const { setBusAndTrainData, setTrainPairData } = useBusAndTrainData();
   useEffect(() => {
     AS.getItem("busAndTrain")
       .then((d) => {
         const returnData = JSON.parse(d);
         setBusAndTrainData(returnData);
       })
-      .catch((d) => {
+      .catch(() => {
         fetch(
           "https://script.google.com/macros/s/AKfycbw0UW6ZeCDgUYFRP0zxpc_Oqfy-91dBdbWv-cM8n3narKp14IyCd2wy5HW7taXcW7E/exec"
         )
@@ -66,34 +85,39 @@ export default function App() {
           });
       });
   }, []);
-
-  const [currentTrain, setCurrentTrain] = useState([]); //現在在線中の全列車 { num: 列車番号, delay: 遅延時分(状態), Pos: 位置情報 }
-  const [currentTrainLoading, setCurrentTrainLoading] = useState("loading"); // success, error, loading
-  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, Pos: x.Pos }))
-      )
+  useEffect(() => {
+    AS.getItem("trainPairData")
       .then((d) => {
-        setCurrentTrain(d);
-        setCurrentTrainLoading("success");
+        const returnData = JSON.parse(d);
+        setTrainPairData(returnData);
       })
-      .catch((e) => {
-        console.log("えらー");
-        setCurrentTrainLoading("error");
+      .catch(() => {
+        fetch(
+          "https://script.google.com/macros/s/AKfycbyoBH7_rBwzPmhU1ghRBNTAVuvGltIrZtWxE07gDdhGGlDL9Ip2qk3pFM5u2xtRBl8/exec"
+        )
+          .then((d) => d.json())
+          .then((d) => {
+            setTrainPairData(d);
+            AS.setItem("trainPairData", JSON.stringify(d));
+          });
       });
+  }, []);
 
-  useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得
-
-  useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得
+  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 detachInactiveScreens={false}>
+      <Tab.Navigator
+        tabBarOptions={{ keyboardHidesTabBar: Platform.OS === "android" }}
+      >
         <Tab.Screen
           name="login"
           options={{
@@ -103,20 +127,7 @@ export default function App() {
             tabBarIcon: initIcon("barchart", "AntDesign"),
           }}
         >
-          {(props) => (
-            <Top
-              {...props}
-              favoriteStation={favoriteStation}
-              setFavoriteStation={setFavoriteStation}
-              busAndTrainData={busAndTrainData}
-              currentTrainState={{ currentTrain, setCurrentTrain }}
-              currentTrainLoadingState={{
-                currentTrainLoading,
-                setCurrentTrainLoading,
-              }}
-              getCurrentTrain={getCurrentTrain}
-            />
-          )}
+          {(props) => <Top {...props} />}
         </Tab.Screen>
         <Tab.Screen
           name="menuPage"
@@ -127,20 +138,7 @@ export default function App() {
             tabBarIcon: initIcon("ios-radio", "Ionicons"),
           }}
         >
-          {(props) => (
-            <MenuPage
-              {...props}
-              favoriteStation={favoriteStation}
-              setFavoriteStation={setFavoriteStation}
-              busAndTrainData={busAndTrainData}
-              currentTrainState={{ currentTrain, setCurrentTrain }}
-              currentTrainLoadingState={{
-                currentTrainLoading,
-                setCurrentTrainLoading,
-              }}
-              getCurrentTrain={getCurrentTrain}
-            />
-          )}
+          {(props) => <MenuPage {...props} />}
         </Tab.Screen>
         <Tab.Screen
           name="home"
@@ -149,6 +147,7 @@ export default function App() {
             headerTransparent: true,
             gestureEnabled: true,
             tabBarIcon: initIcon("md-train", "Ionicons"),
+            tabBarBadge: areaInfo ? "!" : undefined,
           }}
         >
           {(props) => <TNDView {...props} />}
@@ -157,197 +156,3 @@ export default function App() {
     </NavigationContainer>
   );
 }
-
-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"}
-        />
-      );
-  }
-};
-
-const Top = ({
-  navigation,
-  favoriteStation,
-  setFavoriteStation,
-  busAndTrainData,
-  currentTrainState,
-  currentTrainLoadingState,
-  getCurrentTrain,
-}) => {
-  const webview = useRef();
-
-  //地図用
-  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}
-            favoriteStation={favoriteStation}
-            setFavoriteStation={setFavoriteStation}
-            busAndTrainData={busAndTrainData}
-            stationData={mapsStationData}
-            currentTrainState={currentTrainState}
-            currentTrainLoadingState={currentTrainLoadingState}
-            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}
-            favoriteStation={favoriteStation}
-            setFavoriteStation={setFavoriteStation}
-          />
-        )}
-      </Stack.Screen>
-    </Stack.Navigator>
-  );
-};
-function MenuPage({
-  navigation,
-  favoriteStation,
-  setFavoriteStation,
-  busAndTrainData,
-  currentTrainState,
-  currentTrainLoadingState,
-  getCurrentTrain,
-}) {
-  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}
-            favoriteStation={favoriteStation}
-            setFavoriteStation={setFavoriteStation}
-            busAndTrainData={busAndTrainData}
-            currentTrainState={currentTrainState}
-            currentTrainLoadingState={currentTrainLoadingState}
-            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="howto"
-        options={{
-          ...optionData,
-        }}
-      >
-        {(props) => <HowTo {...props} />}
-      </Stack.Screen>
-    </Stack.Navigator>
-  );
-}
-const optionData = {
-  gestureEnabled: true,
-  ...TransitionPresets.ModalPresentationIOS,
-  cardOverlayEnabled: true,
-  headerTransparent: true,
-  headerShown: false,
-};

Apps.js

@@ -1,50 +1,54 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   View,
   Platform,
-  ToastAndroid,
   Text,
   TouchableOpacity,
+  useWindowDimensions,
+  LayoutAnimation,
 } from "react-native";
 import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
-import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { Ionicons } from "@expo/vector-icons";
+
 import { AS } from "./storageControl";
 import { news } from "./config/newsUpdate";
 import { getStationList, lineList } from "./lib/getStationList";
-import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
 import { injectJavascriptData } from "./lib/webViewInjectjavascript";
-import { getStationList2 } from "./lib/getStationList2";
-import { EachTrainInfo } from "./components/ActionSheetComponents/EachTrainInfo";
 import { checkDuplicateTrainData } from "./lib/checkDuplicateTrainData";
+import { useFavoriteStation } from "./stateBox/useFavoriteStation";
+import { useCurrentTrain } from "./stateBox/useCurrentTrain";
+import { SheetManager } from "react-native-actions-sheet";
+import TrainMenu from "./components/trainMenu";
+import { EachTrainInfoCore } from "./components/ActionSheetComponents/EachTrainInfoCore";
 /* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
 
-export default function Apps({
-  navigation,
-  webview,
-  favoriteStation,
-  setFavoriteStation,
-  busAndTrainData,
-  stationData,
-  currentTrainState,
-  currentTrainLoadingState,
-  getCurrentTrain,
-}) {
-  const { currentTrain, setCurrentTrain } = currentTrainState;
-  const { currentTrainLoading, setCurrentTrainLoading } =
-    currentTrainLoadingState;
+export default function Apps({ navigation, webview, stationData }) {
+  const { currentTrain } = useCurrentTrain();
+  const { height, width } = useWindowDimensions();
   const { navigate } = navigation;
   var urlcache = "";
+  const { favoriteStation } = useFavoriteStation();
+  const [isLandscape, setIsLandscape] = useState(false); //画面が横向きかどうか
+  const handleLayout = () => {};
+  useEffect(() => {
+    if (height / width > 1.5) {
+      setIsLandscape(false);
+    }
+    if (height / width < 1.5) {
+      setIsLandscape(true);
+    }
+  }, [height, width]);
 
   //画面表示関連
   const [iconSetting, setIconSetting] = useState(undefined);
   const [mapSwitch, setMapSwitch] = useState(undefined);
   const [stationMenu, setStationMenu] = useState(undefined);
+  const [LoadError, setLoadError] = useState(false);
 
   //列車情報表示関連
-  const EachTrainInfoAsSR = useRef(null);
   const [trainInfo, setTrainInfo] = useState({
     trainNum: undefined,
     limited: undefined,
@@ -52,17 +56,13 @@ export default function Apps({
   });
 
   //駅情報画面用
-  const StationBoardAcSR = useRef(null);
-  const [stationBoardData, setStationBoardData] = useState(undefined);
   const [originalStationList, setOriginalStationList] = useState();
-  const [selectedStation, setSelectedStation] = useState(undefined);
   const [trainMenu, setTrainMenu] = useState("true");
   let once = false;
   useEffect(() => {
     getStationList().then(setOriginalStationList);
   }, []);
 
-  useEffect(() => {}, [stationData, favoriteStation]);
   //地図表示テキスト
   const injectJavascript = injectJavascriptData(
     mapSwitch,
@@ -77,7 +77,7 @@ export default function Apps({
       .then((d) => {
         if (d != news) navigate("news");
       })
-      .catch((e) => navigate("news"));
+      .catch(() => navigate("news"));
   }, []);
 
   useEffect(() => {
@@ -90,7 +90,7 @@ export default function Apps({
           AS.setItem("iconSwitch", "true").then(Updates.reloadAsync);
         }
       })
-      .catch((d) => AS.setItem("iconSwitch", "true").then(Updates.reloadAsync));
+      .catch(() => AS.setItem("iconSwitch", "true").then(Updates.reloadAsync));
   }, []);
 
   useEffect(() => {
@@ -103,7 +103,7 @@ export default function Apps({
           AS.setItem("mapSwitch", "false").then(Updates.reloadAsync);
         }
       })
-      .catch((d) => AS.setItem("mapSwitch", "false").then(Updates.reloadAsync));
+      .catch(() => AS.setItem("mapSwitch", "false").then(Updates.reloadAsync));
   }, []);
 
   useEffect(() => {
@@ -116,7 +116,7 @@ export default function Apps({
           AS.setItem("stationSwitch", "true").then(Updates.reloadAsync);
         }
       })
-      .catch((d) =>
+      .catch(() =>
         AS.setItem("stationSwitch", "true").then(Updates.reloadAsync)
       );
   }, []);
@@ -130,9 +130,7 @@ export default function Apps({
           AS.setItem("trainSwitch", "true").then(Updates.reloadAsync);
         }
       })
-      .catch((d) =>
-        AS.setItem("trainSwitch", "true").then(Updates.reloadAsync)
-      );
+      .catch(() => AS.setItem("trainSwitch", "true").then(Updates.reloadAsync));
   }, []);
 
   const onMessage = (event) => {
@@ -146,34 +144,51 @@ export default function Apps({
     }
     const dataSet = JSON.parse(event.nativeEvent.data);
     switch (dataSet.type) {
-      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) {
-          setStationBoardData(returnDataBase);
-          StationBoardAcSR.current?.show();
-        } else {
-          setStationBoardData(undefined);
-          StationBoardAcSR.current?.hide();
-        }
+      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);
+        LayoutAnimation.easeInEaseOut();
         setTrainInfo({
           trainNum,
           limited,
@@ -181,7 +196,19 @@ export default function Apps({
             currentTrain.filter((a) => a.num == trainNum)
           ),
         }); //遅延情報は未実装
-        EachTrainInfoAsSR.current?.show();
+        if (isLandscape) return;
+        const payload = {
+          data: {
+            trainNum,
+            limited,
+          },
+          navigate,
+          originalStationList,
+          openStationACFromEachTrainInfo,
+        };
+        SheetManager.show("EachTrainInfo", {
+          payload,
+        });
         return;
       }
       default: {
@@ -228,8 +255,8 @@ export default function Apps({
     }, 1);
   }
 
-  const openStationACFromEachTrainInfo = (stationName) => {
-    EachTrainInfoAsSR.current?.hide();
+  const openStationACFromEachTrainInfo = async (stationName) => {
+    await SheetManager.hide("EachTrainInfo");
     const findStationEachLine = (selectLine) => {
       let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
       return NearStation;
@@ -242,13 +269,24 @@ export default function Apps({
         return pre;
       }, []);
     if (returnDataBase.length) {
-      setStationBoardData(returnDataBase);
-      sleep(25, function () {
-        StationBoardAcSR.current?.show();
+      const payload = {
+        currentStation: returnDataBase,
+        originalStationList: originalStationList,
+        navigate: navigate,
+        goTo: "Apps",
+        useShow: () =>
+          SheetManager.show("StationDetailView", {
+            payload,
+          }),
+        onExit: () => {
+          SheetManager.hide("StationDetailView");
+        },
+      };
+      SheetManager.show("StationDetailView", {
+        payload,
       });
     } else {
-      setStationBoardData(undefined);
-      StationBoardAcSR.current?.hide();
+      SheetManager.hide("StationDetailView");
     }
   };
   return (
@@ -256,8 +294,22 @@ export default function Apps({
       style={{
         height: "100%",
         paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+        flexDirection: isLandscape ? "row" : "column",
       }}
+      onLayout={handleLayout}
     >
+      {!trainInfo.trainNum && isLandscape ? (
+        <TrainMenu
+          webview={webview}
+          stationData={stationData}
+          navigation={{ navigate: null }}
+          style={{
+            width: (width / 100) * 40,
+            height: "100%",
+            flexDirection: "column-reverse",
+          }}
+        />
+      ) : null}
       {/* {Status} */}
       <WebView
         useWebKit
@@ -274,7 +326,6 @@ export default function Apps({
         onNavigationStateChange={onNavigationStateChange}
         onMessage={onMessage}
         injectedJavaScript={injectJavascript}
-        onTouchMove={() => StationBoardAcSR.current?.hide()}
         onLoadEnd={() => {
           if (once) return () => {};
           if (!stationData) return () => {};
@@ -296,35 +347,51 @@ export default function Apps({
           }
         }}
       />
-      <MapsButton
-        onPress={() => navigate("trainMenu", { webview })}
-        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
-        mapSwitch={mapSwitch == "true" ? "flex" : "none"}
-      />
+      {isLandscape && trainInfo.trainNum && (
+        <View
+          style={{
+            width: (width / 100) * 40,
+            height: height,
+            flexDirection: "column",
+          }}
+        >
+          <EachTrainInfoCore
+            {...{
+              data: trainInfo.trainNum ? trainInfo : undefined,
+              navigate,
+              originalStationList,
+              openStationACFromEachTrainInfo,
+              from: "Train",
+              setTrainInfo,
+            }}
+          />
+        </View>
+      )}
+      {isLandscape || (
+        <MapsButton
+          onPress={() => navigate("trainMenu", { webview })}
+          top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+          mapSwitch={mapSwitch == "true" ? "flex" : "none"}
+        />
+      )}
+      {isLandscape && trainInfo.trainNum && (
+        <LandscapeBackButton
+          onPress={() => {
+            LayoutAnimation.easeInEaseOut();
+            setTrainInfo({
+              trainNum: undefined,
+              limited: undefined,
+              trainData: undefined,
+            });
+          }}
+          top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+        />
+      )}
       <ReloadButton
         onPress={() => webview.current.reload()}
         top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
-      />
-
-      <StationDeteilView
-        StationBoardAcSR={StationBoardAcSR}
-        currentStation={stationBoardData}
-        originalStationList={originalStationList}
-        favoriteStation={favoriteStation}
-        setFavoriteStation={setFavoriteStation}
-        busAndTrainData={busAndTrainData}
-        navigate={navigate}
-        onExit={() => {
-          StationBoardAcSR.current?.setModalVisible();
-          navigate("Apps");
-        }}
-      />
-      <EachTrainInfo
-        setRef={EachTrainInfoAsSR}
-        data={trainInfo}
-        navigate={navigate}
-        originalStationList={originalStationList}
-        openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
+        right={isLandscape && trainInfo.trainNum ? (width / 100) * 40 : 0}
+        LoadError={LoadError}
       />
     </View>
   );
@@ -366,12 +433,12 @@ const MapsButton = ({ onPress, top, mapSwitch }) => {
   );
 };
 
-const ReloadButton = ({ onPress, top, mapSwitch }) => {
+const LandscapeBackButton = ({ onPress, top }) => {
   const styles = {
     touch: {
       position: "absolute",
       top,
-      right: 10,
+      left: 10,
       width: 50,
       height: 50,
       backgroundColor: "#0099CC",
@@ -382,6 +449,48 @@ const ReloadButton = ({ onPress, top, mapSwitch }) => {
       alignContent: "center",
       alignSelf: "center",
       alignItems: "center",
+      display: "flex",
+    },
+    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="arrow-back" color="white" size={30} />
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};
+
+const ReloadButton = ({
+  onPress,
+  top,
+  mapSwitch,
+  LoadError = false,
+  right,
+}) => {
+  const styles = {
+    touch: {
+      position: "absolute",
+      top,
+      right: 10 + right,
+      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: {

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

app.json

@@ -7,8 +7,8 @@
       "ios",
       "android"
     ],
-    "version": "4.5",
-    "orientation": "portrait",
+    "version": "4.6",
+    "orientation": "default",
     "icon": "./assets/icon.png",
     "splash": {
       "image": "./assets/splash.png",
@@ -16,13 +16,14 @@
       "backgroundColor": "#00b8ff"
     },
     "updates": {
-      "fallbackToCacheTimeout": 0
+      "fallbackToCacheTimeout": 0,
+      "url": "https://u.expo.dev/398abf60-57a7-11e9-970c-8f04356d08bf"
     },
     "assetBundlePatterns": [
       "**/*"
     ],
     "ios": {
-      "buildNumber": "28",
+      "buildNumber": "31",
       "supportsTablet": true,
       "bundleIdentifier": "jrshikokuinfo.xprocess.hrkn",
       "config": {
@@ -31,7 +32,7 @@
     },
     "android": {
       "package": "jrshikokuinfo.xprocess.hrkn",
-      "versionCode": 18,
+      "versionCode": 20,
       "permissions": [
         "ACCESS_FINE_LOCATION"
       ],
@@ -46,6 +47,9 @@
       "eas": {
         "projectId": "398abf60-57a7-11e9-970c-8f04356d08bf"
       }
+    },
+    "runtimeVersion": {
+      "policy": "sdkVersion"
     }
   }
 }

assets/originData/trainList.js

@@ -1006,7 +1006,7 @@
 "9026M":"宇多津,発,18:36#坂出,発,18:40#高松,着,18:54#",
 "9028M":"宇多津,発,19:38#坂出,発,19:43#高松,着,19:56#",
 "9054D":"宇多津,発,9:00#坂出,発,9:07#高松,着,9:21#",
-"9095D":"松山,発,10:35#伊予市,発,10:54#下灘,発,11:51#喜多灘,発,12:07#伊予白滝,発,12:42#伊予大洲,着,13:07#",
+"9095D":"松山,発,10:34#伊予市,発,10:54#下灘,発,11:51#喜多灘,発,12:07#伊予白滝,発,12:42#伊予大洲,着,13:07#",
 "9096D":"伊予大洲,発,13:30#伊予白滝,発,13:47#伊予長浜,発,14:24#喜多灘,発,14:36#下灘,発,15:09#伊予上灘,発,15:31#北伊予,発,15:54#松山,着,16:00#",
 "9323D":"高松,発,9:32#栗林,発,9:53#屋島,発,10:24#八栗口,発,10:40#志度,発,11:32#造田,発,12:14#讃岐津田,発,12:36#三本松,発,13:02#讃岐相生,発,13:31#阿波大宮,発,13:46#板野,発,14:06#板東,発,14:24#池谷,発,14:33#勝瑞,発,14:43#徳島,着,14:56#",
 "9105D":"児島,発,13:44#坂出,発,14:10#鴨川,発,14:37#端岡,発,14:52#高松,着,15:01#",
@@ -1035,8 +1035,32 @@
 "9666D":"北伊予,発,22:46#市坪,発,22:50#松山,着,22:55#",
 "9668M":"市坪,発,23:00#松山,着,23:04#",
 "9052D":"窪川,発,15:13#土佐久礼,発,15:46#安和,発,15:57#須崎,発,16:25#佐川,発,16:54#日下,発,17:11#伊野,発,17:32#朝倉,発,17:42#高知,着,17:53#",
-"9062D":"大歩危,発,14:21#小歩危,発,14:38#阿波川口,発,15:01#阿波池田,発,15:26#坪尻,発,15:53#讃岐財田,発,16:15#琴平,着,16:31#",
+"9062D":"大歩危,発,14:21#小歩危,発,14:38#阿波川口,発,15:01#阿波池田,発,15:26#坪尻,発,15:53#讃岐財田,発,16:15#琴平,発,16:50#善通寺,発,17:01#金蔵寺,発,17:09#多度津,着,17:14#",
 "9920D":"伊予大洲,発,14:33#五郎,発,14:39#伊予白滝,発,14:59#伊予長浜,発,15:09#下灘,発,15:23#伊予上灘,発,15:30#伊予市,発,15:44#南伊予,発,15:49#北伊予,発,15:55#松山,着,16:01#",
 "9051D":"高知,発,12:04#朝倉,発,12:29#伊野,発,12:49#日下,発,13:06#西佐川,発,13:21#須崎,発,13:45#安和,発,14:05#土佐久礼,発,14:17#影野,発,14:31#窪川,着,14:40#",
-"9061D":"琴平,発,10:48#讃岐財田,発,11:12#坪尻,発,11:41#阿波池田,発,12:10#三縄,発,12:19#大歩危,着,12:47#"
+"9061D":"多度津,発,10:19#善通寺,発,10:26#琴平,発,10:48#讃岐財田,発,11:12#坪尻,発,11:41#阿波池田,発,12:10#三縄,発,12:19#大歩危,着,12:47#",
+"9523D":"川之江,発,9:00#伊予三島,発,9:15#伊予寒川,発,9:31#伊予土居,発,10:03#関川,発,10:16#多喜浜,発,10:31#中萩,発,10:49#伊予西条,着,10:57#",
+"9524D":"伊予西条,発,11:11#新居浜,発,11:35#伊予土居,発,11:59#伊予寒川,発,12:08#伊予三島,発,12:17#川之江,着,12:24#",
+"9987D":"鳴門,発,22:15#撫養,発,22:18#金比羅前,発,22:21#教会前,発,22:24#立道,発,22:27#阿波大谷,発,22:31#池谷,発,22:36#勝瑞,発,22:41#吉成,発,22:44#佐古,発,22:57#徳島,着,23:00#",
+"9093D":"松山,発,13:31#北伊予,発,13:42#下灘,発,14:22#喜多灘,発,14:38#伊予大洲,発,15:13#伊予平野,発,15:37#八幡浜,着,15:50#",
+"9094D":"八幡浜,発,16:14#伊予大洲,発,16:33#伊予長浜,発,16:57#下灘,発,17:24#伊予上灘,発,17:36#伊予市,発,17:53#北伊予,発,18:03#市坪,発,18:12#松山,着,18:17#",
+"9205D":"児島,発,15:10#宇多津,発,15:28#丸亀,発,15:31#多度津,発,15:36#琴平,発,15:47#讃岐財田,発,16:14#坪尻,発,16:35#佃,発,16:51#阿波池田,発,16:57#阿波川口,発,17:16#大歩危,発,17:35#大田口,発,17:58#大杉,発,18:30#土佐北川,発,18:47#繁藤,発,19:02#土佐山田,発,19:17#後免,発,19:22#土佐一宮,発,19:43#高知,着,19:47#",
+"9204D":"高知,発,8:43#土佐一宮,発,8:49#繁藤,発,9:16#大杉,発,9:28#土佐岩原,発,9:48#大歩危,発,10:08#阿波川口,発,10:29#阿波池田,発,10:42#讃岐財田,発,11:09#琴平,発,11:33#金蔵寺,発,11:59#多度津,発,12:06#丸亀,発,12:10#児島,着,12:25#",
+"9003M":"高松,発,8:45#坂出,発,9:02#宇多津,着,9:06#",
+"9005D":"高松,発,9:42#坂出,発,9:56#宇多津,発,10:01#丸亀,発,10:05#多度津,着,10:10#",
+"9004M":"宇多津,発,7:14#坂出,発,7:21#高松,着,7:36#",
+"9006D":"宇多津,発,8:26#坂出,発,8:31#高松,着,8:45#",
+"9253M":"児島,発,11:02#多度津,発,11:30#善通寺,発,11:54#琴平,着,12:00#",
+"9256M":"琴平,発,15:20#善通寺,発,15:26#多度津,発,15:35#宇多津,発,15:44#児島,着,16:04#",
+"9057M":"高松,発,18:27#坂出,発,18:41#宇多津,発,18:46#丸亀,発,18:49#多度津,着,18:55#",
+"9054M":"宇多津,発,9:00#坂出,発,9:07#高松,着,9:21#",
+//9001: "岡山,発,10:11#児島,発,11:05#坂出,発,11:41#高松,着,12:00#独自補完データ,提,https://x.com/makkun3/status/1750490886293848372#",
+9001: "ウェルカムセレモニー,頃,9:40#岡山,頃,10:10#琴平,頃,14:00#琴平観光,以降,14:00#湯山荘 阿讃琴南,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第1章\n－瀬戸の海に想いを馳せながら－\n岡山・高松・琴平,提,https://www.the-royalexpress.jp/plan/2614/#",
+//9029: "高松,発,12:42#琴平,着,13:57#独自補完データ,提,https://x.com/makkun3/status/1750490886293848372#",
+9029: "ウェルカムセレモニー,頃,9:40#岡山,頃,10:10#琴平,頃,14:00#琴平観光,以降,14:00#湯山荘 阿讃琴南,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第1章\n－瀬戸の海に想いを馳せながら－\n岡山・高松・琴平,提,https://www.the-royalexpress.jp/plan/2614/#",
+//9003: "多度津,発,10:09#今治,発,13:20#伊予亀岡,発,13:55#菊間,発,14:04#松山,着,14:50#独自補完データ,提,https://x.com/makkun3/status/1750490886293848372#",
+9003: "湯山荘 阿讃琴南,頃,9:00#多度津,頃,10:10#松山,頃,14:50#宿泊施設,以降,14:50#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第2章\n －四国の伝統文化を感じて－\n多度津・坂出・松山,提,https://www.the-royalexpress.jp/plan/2614/#",
+9055: "宿泊施設→バス,着,10:30#松山,頃,10:30#今治,頃,14:15#しまなみエリア観光,以降,14:15#Azumi Setoda,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第3章\n－凪の誘い・瀬戸内の絶景－\n今治・しまなみ海道,提,https://www.the-royalexpress.jp/plan/2614/#",
+9056: "宿泊施設→バス,着,10:30#松山,頃,10:30#今治,頃,14:15#しまなみエリア観光,以降,14:15#Azumi Setoda,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第3章\n－凪の誘い・瀬戸内の絶景－\n今治・しまなみ海道,提,https://www.the-royalexpress.jp/plan/2614/#",
+9004: "Azumi Setoda,頃,9:30#今治,頃,10:30#高松,頃,14:30#高松港\n↓\n瀬戸内クルーズ（貸切）\n「おりんぴあどりーむ せと」\n↓ \n 新岡山港,以降,14:15#岡山駅,頃,18:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS フィナーレ\n－四国・瀬戸内の彩りに囲まれて－\n今治・高松・岡山,提,https://www.the-royalexpress.jp/plan/2614/#",
 }

components/ActionSheetComponents/EachTrainInfo.js

@@ -1,714 +1,23 @@
-import React, { useEffect, useState } from "react";
-import {
-  View,
-  LayoutAnimation,
-  ScrollView,
-  Linking,
-  Text,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  TouchableHighlight,
-  Platform,
-} from "react-native";
-import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import React, { useRef } from "react";
+import { Platform } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
-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";
-
-export const EachTrainInfo = ({
-  setRef,
-  data,
-  navigate,
-  originalStationList,
-  openStationACFromEachTrainInfo,
-  from,
-}) => {
-  const [trainData, setTrainData] = useState([]);
-  const [isTop, setIsTop] = useState(true);
-  const [currentPosition, setCurrentPosition] = useState([]);
-
-  const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
-
-  useEffect(() => {
-    //列車現在地アイコン表示スイッチ
-    AS.getItem("trainPositionSwitch")
-      .then((d) => {
-        if (d) {
-          setTrainPositionSwitch(d);
-        } else {
-        }
-      })
-      .catch((d) => AS.setItem("trainPositionSwitch", "false"));
-  }, []);
-
-  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(() => {
-    //data.trainData.Pos = "鴨川～端岡"; //test
-    if (!data.trainData?.Pos) return;
-    if (data.trainData?.Pos.match("～")) {
-      const pos = data.trainData?.Pos.replace("（下り）", "")
-        .replace("（上り）", "")
-        .split("～");
-      setCurrentPosition([getStationData(pos[0]), getStationData(pos[1])]);
-    } else {
-      setCurrentPosition([getStationData(data.trainData?.Pos)]);
-    }
-  }, [data.trainData]);
-
-  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) {
-    // arrayは現在位置の駅ID(駅在宅の場合は1つの配列、駅間の場合は2つの配列)
-    // stopStationIDListは停車駅の駅IDの配列
-    if (!stopStationIDList.length) 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 [];
-    }
-  }
-  // 使用例
-  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("ライナーライナー", "ライナー");
-  };
+import { EachTrainInfoCore } from "./EachTrainInfoCore";
+export const EachTrainInfo = (props) => {
+  if (!props.payload) return <></>;
 
+  const actionSheetRef = useRef(null);
   return (
     <ActionSheet
-      ref={setRef}
-      gestureEnabled={isTop}
+      gestureEnabled={true}
+      //gestureEnabled={!actionSheetHorizonalScroll}
       CustomHeaderComponent={<></>}
+      ref={actionSheetRef}
+      drawUnderStatusBar={false}
+      isModal={Platform.OS == "ios"}
+
+      //useBottomSafeAreaPadding={Platform.OS == "android"}
     >
-      <View
-        style={{
-          backgroundColor: "#0099CC",
-          borderRadius: 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,
-                  });
-                  setRef.current?.hide();
-                }}
-              />
-            )}
-        </View>
-        <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 }} />
-              {data.trainData?.Pos && data.trainData?.Pos.match("～") ? (
-                <>
-                  <Text
-                    style={{
-                      fontSize: 28,
-                      color: "#0099CC",
-                      textAlign: "right",
-                    }}
-                  >
-                    {
-                      data.trainData?.Pos.replace("（下り）", "")
-                        .replace("（上り）", "")
-                        .split("～")[0]
-                    }
-                  </Text>
-                  <Text style={{ color: "#0099CC", textAlign: "right" }}>
-                    ～
-                  </Text>
-                  <Text
-                    style={{
-                      fontSize: 28,
-                      color: "#0099CC",
-                      textAlign: "right",
-                    }}
-                  >
-                    {
-                      data.trainData?.Pos.replace("（下り）", "")
-                        .replace("（上り）", "")
-                        .split("～")[1]
-                    }
-                  </Text>
-                </>
-              ) : (
-                <Text
-                  style={{ fontSize: 28, color: "#0099CC", textAlign: "right" }}
-                >
-                  {data.trainData?.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(data.trainData?.delay) ? "状態" : "遅延時分"}
-                </Text>
-                <View style={{ flex: 1 }} />
-                <Text
-                  style={{
-                    fontSize: 32,
-                    color: "#0099CC",
-                    textAlign: "right",
-                  }}
-                >
-                  {data.trainData?.delay}
-                  {isNaN(data.trainData?.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",
-                  }}
-                >
-                  {data.trainData?.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>
-        <ScrollView
-          style={{ maxHeight: heightPercentageToDP("55%") }}
-          nestedScrollEnabled
-          onScroll={(e) => {
-            if (!Platform.OS !== "android") return;
-            setIsTop(e.nativeEvent.contentOffset.y < 0);
-          }}
-        >
-          <View
-            style={{
-              padding: 10,
-              backgroundColor: "white",
-              borderBottomLeftRadius: 5,
-              borderBottomRightRadius: 5,
-            }}
-          >
-            <View style={{ alignItems: "center" }}>
-              {/* <LottieView
-                autoPlay
-                loop
-                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
-                source={require("../../assets/51690-loading-diamonds.json")}
-              />
-              <Text>ほげほげふがふが</Text> */}
-              <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 style={{ flexDirection: "row" }}>
-                    {!isNaN(data.trainData?.delay) &&
-                      data.trainData?.delay != 0 && (
-                        <Text
-                          style={{
-                            fontSize: 15,
-                            color: "black",
-                            position: "absolute",
-                            right: 110,
-                            textAlign: "right",
-                            textDecorationLine: "line-through",
-                          }}
-                        >
-                          (定刻)
-                        </Text>
-                      )}
-                    <Text
-                      style={{
-                        fontSize: 20,
-                        color: isNaN(data.trainData?.delay)
-                          ? "black"
-                          : data.trainData?.delay == 0
-                          ? "black"
-                          : "red",
-                        width: 60,
-                      }}
-                    >
-                      見込
-                    </Text>
-                    <Text style={{ fontSize: 20, width: 50 }}></Text>
-                  </View>
-                </View>
-              </View>
-              {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);
-
-                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(data.trainData?.delay)) {
-                  date.setMinutes(date.getMinutes() + data.trainData?.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.findIndex((d) => d == index) >= 0 ? (
-                          <Text
-                            style={{
-                              fontSize: 20,
-                              marginRight: 70,
-                            }}
-                          >
-                            🚊
-                          </Text>
-                        ) : null}
-                        {!isNaN(data.trainData?.delay) &&
-                          data.trainData?.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(data.trainData?.delay)
-                              ? "black"
-                              : data.trainData?.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>
-          </View>
-        </ScrollView>
-      </View>
+      <EachTrainInfoCore {...{ actionSheetRef, ...props.payload }} />
     </ActionSheet>
   );
 };

components/ActionSheetComponents/EachTrainInfo/DataFromButton.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { View, Text, TouchableWithoutFeedback } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { Linking } from "react-native";
+export const DataFromButton = ({ i }) => {
+  const [station, se, time] = i.split(",");
+  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>
+  );
+};

components/ActionSheetComponents/EachTrainInfo/EachStopList.js

@@ -0,0 +1,137 @@
+import React from "react";
+import { View, Text, TouchableWithoutFeedback } from "react-native";
+import dayjs from "dayjs";
+import lineColorList from "../../../assets/originData/lineColorList";
+
+export const EachStopList = ({
+  i,
+  index,
+  stationList,
+  points,
+  currentTrainData,
+  openStationACFromEachTrainInfo,
+}) => {
+  const [station, se, time] = i.split(","); // 阿波池田,発,6:21
+  const Stations = stationList
+    .map((a) => a.filter((d) => d.StationName == station))
+    .reduce((newArray, e) => newArray.concat(e), []);
+  /*Array [
+        Object {
+          "StationName": "佐古",
+          "StationNumber": "T01",
+        },
+        Object {
+          "StationName": "佐古",
+          "StationNumber": "B01",
+        },
+      ] */
+  const StationNumbers =
+    Stations &&
+    Stations.filter((d) => d.StationNumber).map((d) => d.StationNumber);
+  // Array [  "T01",  "B01",]
+  const lineIDs = [];
+  const EachIDs = [];
+  StationNumbers.forEach((d) => {
+    const textArray = d.split("");
+    lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
+    EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
+  });
+  // Array [  "T",  "B",]
+  // Array [  "01",  "01",]
+
+  const dates = dayjs()
+    .set("hour", parseInt(time.split(":")[0]))
+    .set("minute", parseInt(time.split(":")[1]))
+    .add(isNaN(currentTrainData?.delay) ? 0 : currentTrainData.delay, "minute");
+  const timeString = dates.format("HH:mm").split(":");
+
+  return (
+    <TouchableWithoutFeedback
+      onPress={() => openStationACFromEachTrainInfo(station)}
+      key={station}
+    >
+      <View style={{ flexDirection: "row", backgroundColor: "white" }}>
+        <View
+          style={{
+            width: 35,
+            position: "relative",
+            marginHorizontal: 15,
+            flexDirection: "row",
+            height: "101%",
+          }}
+        >
+          {lineIDs.map((lineID, index) => (
+            <View
+              style={{
+                backgroundColor: lineColorList[lineID],
+                flex: 1,
+              }}
+              key={lineID}
+            >
+              <View style={{ flex: 1 }} />
+              <Text
+                style={{
+                  color: "white",
+                  textAlign: "center",
+                  fontSize: 10,
+                  fontWeight: "bold",
+                }}
+              >
+                {lineIDs[index]}
+                {"\n"}
+                {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>
+  );
+};

components/ActionSheetComponents/EachTrainInfo/LandscapeTrainInfo.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { View, Text, ScrollView, useWindowDimensions } from "react-native";
+
+export const LandscapeTrainInfo = (props) => {
+  const { leftContent, topStickyContent, children, scrollHandlers } = props;
+  const { height, width } = useWindowDimensions();
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        backgroundColor: "blue",
+        width: width,
+        height: (height / 100) * 70,
+        marginBottom: 50,
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "column",
+          height: (height / 100) * 70,
+          width: width / 2,
+        }}
+      >
+        <Text>{width / 2}</Text>
+        {leftContent}
+      </View>
+      <ScrollView
+        {...scrollHandlers}
+        style={{
+          width: width / 2,
+          height: "auto",
+        }}
+        stickyHeaderIndices={[1]}
+        scrollEventThrottle={16}
+        onScroll={(d) => {
+          console.log(d.nativeEvent.contentOffset.y);
+        }}
+      >
+        <View style={{ height: 0 }} />
+        <View style={{ flexDirection: "column" }} index={1}>
+          {topStickyContent}
+        </View>
+        {children}
+      </ScrollView>
+    </View>
+  );
+};

components/ActionSheetComponents/EachTrainInfo/LongHeader.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import { TrainDataView } from "./TrainDataView";
+
+export const LongHeader = ({
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+}) => {
+  return (
+    <ScrollView
+      //onTouchStart={() => setActionSheetHorizonalScroll(true)}
+      //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+      //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
+      style={{
+        flexDirection: "row",
+        //width: widthPercentageToDP("200%"),
+        // minHeight: 200,
+        //height: heightPercentageToDP("20%"),
+      }}
+      horizontal
+      pagingEnabled
+    >
+      <TrainDataView
+        currentTrainData={currentTrainData}
+        currentPosition={currentPosition}
+        nearTrainIDList={nearTrainIDList}
+        openTrainInfo={openTrainInfo}
+      />
+    </ScrollView>
+  );
+};

components/ActionSheetComponents/EachTrainInfo/ScrollStickyContent.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export const ScrollStickyContent = ({ currentTrainData }) => {
+  return (
+    <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>
+  );
+};

components/ActionSheetComponents/EachTrainInfo/ShortHeader.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import { TrainDataView } from "./TrainDataView";
+
+export const ShortHeader = ({
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+}) => {
+  return (
+    <ScrollView
+      //onTouchStart={() => setActionSheetHorizonalScroll(true)}
+      //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+      //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
+      style={{
+        flexDirection: "row",
+        flex: 1,
+        //width: widthPercentageToDP("200%"),
+        // minHeight: 200,
+        //height: heightPercentageToDP("20%"),
+      }}
+      horizontal
+      pagingEnabled
+    >
+      <TrainDataView
+        mode={2}
+        currentTrainData={currentTrainData}
+        currentPosition={currentPosition}
+        nearTrainIDList={nearTrainIDList}
+        openTrainInfo={openTrainInfo}
+      />
+    </ScrollView>
+  );
+};

components/ActionSheetComponents/EachTrainInfo/StateBox.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export const StateBox = ({ text, title, style, mode }) => (
+  <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
+    <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
+    <View style={{ flex: 1 }} />
+    <View
+      style={{
+        color: "#0099CC",
+        textAlign: "right",
+        flexDirection: mode == 2 ? "row" : "column",
+      }}
+    >
+      {text?.match("～") ? (
+        <>
+          <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
+            {text.split("～")[0]}
+          </Text>
+          <Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
+          <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
+            {text.split("～")[1]}
+          </Text>
+        </>
+      ) : (
+        <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
+      )}
+    </View>
+  </View>
+);
+const boxStyle = {
+  flex: 1,
+  backgroundColor: "white",
+  borderRadius: 10,
+  padding: 10,
+  margin: 10,
+};
+const boxStyle2 = {
+  flex: 1,
+  backgroundColor: "white",
+  borderRadius: 10,
+  padding: 5,
+  margin: 5,
+};
+const boxTextStyle2 = {
+  fontSize: 18,
+  color: "#0099CC",
+  textAlign: "right",
+};
+
+const boxTextStyle = {
+  fontSize: 25,
+  color: "#0099CC",
+  textAlign: "right",
+};

components/ActionSheetComponents/EachTrainInfo/TrainDataView.js

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+} from "react-native";
+import { StateBox } from "./StateBox";
+import {
+  heightPercentageToDP,
+  widthPercentageToDP,
+} from "react-native-responsive-screen";
+
+export const TrainDataView = ({
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+  mode = 0,
+}) => {
+  const [isLandscape, setIsLandscape] = useState(false);
+  const { width, height } = useWindowDimensions();
+  useEffect(() => {
+    if (height / width > 1.5) {
+      setIsLandscape(false);
+    }
+    if (height / width < 1.5) {
+      setIsLandscape(true);
+    }
+  }, [width, height]);
+
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        //minHeight: 200,
+        //height: heightPercentageToDP("20%"),
+        width: isLandscape ? (width / 100) * 40 : width,
+        flex: 1,
+      }}
+    >
+      <StateBox
+        mode={mode}
+        title={`現在地 ${currentPosition.toString()}`}
+        text={
+          currentTrainData?.Pos.match("～")
+            ? `${
+                currentTrainData?.Pos.replace("（下り）", "")
+                  .replace("（上り）", "")
+                  .split("～")[0]
+              }～${
+                currentTrainData?.Pos.replace("（下り）", "")
+                  .replace("（上り）", "")
+                  .split("～")[1]
+              }`
+            : currentTrainData?.Pos
+        }
+      />
+      <View style={{ flex: 1, flexDirection: mode == 2 ? "row" : "column" }}>
+        <View style={{ flex: 1, flexDirection: "row" }}>
+          <StateBox
+            mode={mode}
+            title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
+            text={`${currentTrainData?.delay}${
+              isNaN(currentTrainData?.delay) ? "" : "分"
+            }`}
+          />
+        </View>
+        <TouchableOpacity
+          style={{ flex: 1, flexDirection: "row" }}
+          disabled={nearTrainIDList.length == 0}
+          onPress={() => {
+            if (nearTrainIDList.length == 0) return;
+            openTrainInfo(nearTrainIDList[0]);
+          }}
+        >
+          {nearTrainIDList.length == 0 ? (
+            <StateBox mode={mode} title="列番" text={currentTrainData?.num} />
+          ) : (
+            <StateBox
+              mode={mode}
+              title="増解結相手を表示▶️"
+              text={`${nearTrainIDList}`}
+              style={{
+                borderWidth: 1,
+                borderColor: "red",
+                borderStyle: "solid",
+              }}
+            />
+          )}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -0,0 +1,453 @@
+import React, { useEffect, useState, useRef } from "react";
+import {
+  View,
+  LayoutAnimation,
+  Text,
+  TouchableOpacity,
+  Platform,
+  StyleSheet,
+  useWindowDimensions,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import ActionSheet, {
+  SheetManager,
+  useScrollHandlers,
+} from "react-native-actions-sheet";
+import { AS } from "../../storageControl";
+import trainList from "../../assets/originData/trainList";
+import { lineList } from "../../lib/getStationList";
+import { heightPercentageToDP } from "react-native-responsive-screen";
+import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
+import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
+import { getTrainType } from "../../lib/getTrainType";
+import { customTrainDataDetector } from "../custom-train-data";
+import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
+import { EachStopList } from "./EachTrainInfo/EachStopList";
+import { DataFromButton } from "./EachTrainInfo/DataFromButton";
+import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
+import { LongHeader } from "./EachTrainInfo/LongHeader";
+import { ShortHeader } from "./EachTrainInfo/ShortHeader";
+import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
+import { LandscapeTrainInfo } from "./EachTrainInfo/LandscapeTrainInfo";
+import { getStationData } from "../../lib/eachTrainInfoCoreLib/getStationData";
+import { findReversalPoints } from "../../lib/eachTrainInfoCoreLib/findReversalPoints";
+import { migrateTrainName } from "../../lib/eachTrainInfoCoreLib/migrateTrainName";
+import { getType } from "../../lib/eachTrainInfoCoreLib/getType";
+import { searchSpecialTrain } from "../../lib/eachTrainInfoCoreLib/searchSpecialTrain";
+import { openBackTrainInfo } from "../../lib/eachTrainInfoCoreLib/openBackTrainInfo";
+
+export const EachTrainInfoCore = ({
+  actionSheetRef,
+  data,
+  navigate,
+  originalStationList,
+  openStationACFromEachTrainInfo,
+  from,
+  setTrainInfo,
+}) => {
+  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
+
+  const { currentTrain } = useCurrentTrain();
+  const [currentTrainData, setCurrentTrainData] = useState();
+
+  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
+
+  useEffect(() => {
+    console.log(currentTrain.length);
+    if (!currentTrain.length) return;
+    setCurrentTrainData(
+      checkDuplicateTrainData(
+        currentTrain.filter((d) => d.num == data.trainNum)
+      )
+    );
+  }, [currentTrain, data.trainNum]);
+
+  //bconst insets = useSafeAreaInsets();
+
+  const [headStation, setHeadStation] = useState();
+  const [tailStation, setTailStation] = useState();
+  const [isConcatNear, setIsConcatNear] = useState(false);
+  const [showNearTrain, setShowNearTrain] = useState([]);
+  const [nearTrainIDList, setNearTrainIDList] = useState([]);
+  const { getInfluencedTrainData } = useBusAndTrainData();
+  const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
+  const [currentPosition, setCurrentPosition] = useState([]);
+  const [trainData, setTrainData] = useState([]);
+  const scrollHandlers = actionSheetRef
+    ? useScrollHandlers("scrollview-1", actionSheetRef)
+    : null;
+
+  const stationList =
+    originalStationList &&
+    lineList.map((d) =>
+      originalStationList[d].map((a) => ({
+        StationNumber: a.StationNumber,
+        StationName: a.Station_JP,
+      }))
+    );
+
+  // 使用例
+  const points =
+    trainPositionSwitch == "true"
+      ? findReversalPoints(currentPosition, stopStationIDList)
+      : [];
+  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];
+  });
+
+  const { height, width } = useWindowDimensions();
+  const [isLandscape, setIsLandscape] = useState(false);
+
+  const [trueTrainID, setTrueTrainID] = useState();
+  useEffect(() => {
+    if (!data.trainNum) return;
+    const TD = trainList[data.trainNum];
+    setIsConcatNear(false);
+    setHeadStation();
+    setTailStation();
+    if (!TD) {
+      const specialTrainActualID = searchSpecialTrain(data.trainNum, trainList);
+      setTrueTrainID(specialTrainActualID || undefined);
+      setTrainData([]);
+      return;
+    }
+    setTrainData(TD.split("#").filter((d) => d != ""));
+  }, [data]);
+  //裏列車探索
+  useEffect(() => {
+    if (!data.trainNum) return;
+    const [returnArray, TDArray] = getInfluencedTrainData(data.trainNum);
+    setNearTrainIDList(returnArray);
+    setShowNearTrain(TDArray);
+    if (trainData.length == 0) return;
+    if (TDArray.length == 0) return;
+    let head;
+    let tail;
+    TDArray.forEach((d) => {
+      const [station, se, time] = d.split(",");
+
+      if (station == trainData[0].split(",")[0]) {
+        head = trainData[0].split(",")[0];
+      }
+      if (station == trainData[trainData.length - 1].split(",")[0]) {
+        tail = trainData[trainData.length - 1].split(",")[0];
+      }
+    });
+    if (head) setHeadStation(head);
+    else setHeadStation();
+    if (tail) setTailStation(tail);
+    else setTailStation();
+  }, [trainData, data]);
+
+  useEffect(() => {
+    //currentTrainData.Pos = "鴨川～端岡"; //test
+    if (!currentTrainData) return;
+    if (!currentTrainData?.Pos) return;
+    if (currentTrainData?.Pos.match("～")) {
+      const pos = currentTrainData?.Pos.replace("（下り）", "")
+        .replace("（上り）", "")
+        .split("～");
+      setCurrentPosition([
+        getStationData(pos[0], stationList),
+        getStationData(pos[1], stationList),
+      ]);
+    } else {
+      setCurrentPosition([getStationData(currentTrainData?.Pos, stationList)]);
+    }
+  }, [currentTrainData]);
+
+  useEffect(() => {
+    if (height / width > 1.5) {
+      setIsLandscape(false);
+    }
+    if (height / width < 1.5) {
+      setIsLandscape(true);
+    }
+  }, [width, height]);
+
+  const replaceSpecialTrainDetail = (trainNum) => {
+    let TD = trainList[trainNum];
+    if (!TD) return;
+    setTrainData(TD.split("#").filter((d) => d != ""));
+  };
+
+  useEffect(() => {
+    //列車現在地アイコン表示スイッチ
+    AS.getItem("trainPositionSwitch")
+      .then((d) => {
+        if (d) setTrainPositionSwitch(d);
+      })
+      .catch((d) => AS.setItem("trainPositionSwitch", "false"));
+  }, []);
+
+  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",
+    };
+    if (setTrainInfo) {
+      setTrainInfo(payload.data);
+    } else {
+      SheetManager.hide("EachTrainInfo").then(() => {
+        //0.1秒待機してから開く
+        setTimeout(() => {
+          SheetManager.show("EachTrainInfo", { payload });
+        }, 1);
+      });
+    }
+  };
+  return (
+    <View
+      style={{
+        backgroundColor: "#0099CC",
+        borderTopRadius: 5,
+        borderColor: "dark",
+        borderWidth: 1,
+      }}
+    >
+      {isLandscape || (
+        <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}
+          {isConcatNear ? ` + ${nearTrainIDList}` : ""}
+        </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>
+      <DynamicHeaderScrollView
+        styles={styles}
+        scrollViewProps={scrollHandlers}
+        containerProps={{
+          style: {
+            maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
+          },
+        }}
+        Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200}
+        Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80}
+        shortHeader={
+          from == "AllTrainDiagramView" ? (
+            <></>
+          ) : (
+            <ShortHeader
+              currentTrainData={currentTrainData}
+              currentPosition={currentPosition}
+              nearTrainIDList={nearTrainIDList}
+              openTrainInfo={openTrainInfo}
+            />
+          )
+        }
+        longHeader={
+          from == "AllTrainDiagramView" ? (
+            <></>
+          ) : (
+            <LongHeader
+              currentTrainData={currentTrainData}
+              currentPosition={currentPosition}
+              nearTrainIDList={nearTrainIDList}
+              openTrainInfo={openTrainInfo}
+            />
+          )
+        }
+        topStickyContent={
+          <ScrollStickyContent currentTrainData={currentTrainData} />
+        }
+      >
+        {headStation && !isConcatNear && (
+          <TouchableOpacity
+            onPress={() => {
+              const array = openBackTrainInfo(
+                headStation,
+                trainData,
+                showNearTrain
+              );
+              if (!array) return;
+              setTrainData(array);
+              setIsConcatNear(true);
+            }}
+            style={{
+              padding: 10,
+              flexDirection: "row",
+              borderColor: "blue",
+              borderWidth: 1,
+              margin: 10,
+              borderRadius: 5,
+              alignItems: "center",
+            }}
+          >
+            <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
+              「本当の始発駅」を表示
+            </Text>
+          </TouchableOpacity>
+        )}
+        {/* <LottieView
+                autoPlay
+                loop
+                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                source={require("../../assets/51690-loading-diamonds.json")}
+              />
+              <Text>ほげほげふがふが</Text> */}
+        {trainData.length == 0 && trueTrainID && (
+          <TouchableOpacity
+            onPress={() => replaceSpecialTrainDetail(trueTrainID)}
+            style={{
+              padding: 10,
+              flexDirection: "row",
+              borderColor: "blue",
+              borderWidth: 1,
+              margin: 10,
+              borderRadius: 5,
+              alignItems: "center",
+            }}
+          >
+            <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
+              本来の列車情報を表示
+            </Text>
+          </TouchableOpacity>
+        )}
+        {trainData.map((i, index) =>
+          i.split(",")[1] == "提" ? (
+            <DataFromButton i={i} />
+          ) : (
+            <EachStopList
+              i={i}
+              index={index}
+              stationList={stationList}
+              points={points}
+              currentTrainData={currentTrainData}
+              openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
+            />
+          )
+        )}
+        {tailStation && !isConcatNear && (
+          <TouchableOpacity
+            onPress={() => {
+              const array = openBackTrainInfo(
+                tailStation,
+                trainData,
+                showNearTrain
+              );
+
+              if (!array) return;
+              setTrainData(array);
+              setIsConcatNear(true);
+            }}
+            style={{
+              padding: 10,
+              flexDirection: "row",
+              borderColor: "blue",
+              borderWidth: 1,
+              margin: 10,
+              borderRadius: 5,
+              alignItems: "center",
+            }}
+          >
+            <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
+              「本当の終着駅」を表示
+            </Text>
+          </TouchableOpacity>
+        )}
+
+        <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>
+      </DynamicHeaderScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    justifyContent: "center",
+    alignItems: "center",
+    left: 0,
+    right: 0,
+    //paddingTop: 10,
+    position: "absolute",
+    zIndex: 1,
+    backgroundColor: "f0f0f0",
+  },
+  headerText: {
+    color: "#fff",
+    fontSize: 25,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+});

components/ActionSheetComponents/JRSTraInfo.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import {
   View,
   LayoutAnimation,
@@ -6,115 +6,159 @@ import {
   Linking,
   Text,
   TouchableOpacity,
+  Platform,
 } from "react-native";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import ActionSheet from "react-native-actions-sheet";
+import ActionSheet, { useScrollHandlers } from "react-native-actions-sheet";
 import LottieView from "lottie-react-native";
-export const JRSTraInfo = (props) => {
-  const {
-    JRSTraInfoEXAcSR,
-    getTime,
-    loadingDelayData,
-    setLoadingDelayData,
-    delayData,
-  } = props;
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import ViewShot from "react-native-view-shot";
+import * as Sharing from "expo-sharing";
+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();
+  const viewShot = useRef(null);
+
+  const onCapture = async () => {
+    const url = await viewShot.current.capture();
+
+    const ok = await Sharing.isAvailableAsync();
+    if (ok) {
+      await Sharing.shareAsync(
+        "file://" + url,
+        (options = { mimeType: "image/jpeg", dialogTitle: "Share this image" })
+      );
+    }
+  };
+
   return (
     <ActionSheet
-      ref={JRSTraInfoEXAcSR}
       gestureEnabled
       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,
         }}
       >
-        <View style={{ height: 26, width: "100%" }}>
+        <ViewShot ref={viewShot} options={{ format: "jpg" }}>
           <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: 30, fontWeight: "bold", color: "white" }}>
-            列車遅延速報EX
-          </Text>
-          <View style={{ flex: 1 }} />
-          {/* <TouchableOpacity style={{padding:10,backgroundColor:"white",alignContent:"center"}} onPress={() => {doFetch()}}>
-                      <Text style={{fontSize:20,fontWeight:"bold",color:"#0099CC"}}>最新の情報へ更新</Text>
-                    </TouchableOpacity> */}
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-            {getTime
-              ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
-                ":" +
-                getTime.toLocaleTimeString("ja-JP").split(":")[1]
-              : NaN}{" "}
-          </Text>
-          <Ionicons
-            name="reload"
-            color="white"
-            size={30}
-            style={{ margin: 5 }}
-            onPress={() => {
-              LayoutAnimation.easeInEaseOut(), setLoadingDelayData(true);
-            }}
-          />
-        </View>
-        <ScrollView>
+            style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}
+          >
+            <View
+              style={{
+                height: 6,
+                width: 45,
+                borderRadius: 100,
+                backgroundColor: "#f0f0f0",
+                marginVertical: 10,
+                alignSelf: "center",
+              }}
+            />
+          </View>
           <View
             style={{
               padding: 10,
-              backgroundColor: "white",
-              borderBottomLeftRadius: 5,
-              borderBottomRightRadius: 5,
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor: "#0099CC",
             }}
           >
-            {loadingDelayData ? (
-              <View style={{ alignItems: "center" }}>
-                <LottieView
-                  autoPlay
-                  loop
-                  style={{ width: 150, height: 150, backgroundColor: "#fff" }}
-                  source={require("../../assets/51690-loading-diamonds.json")}
-                />
-              </View>
-            ) : delayData ? (
-              delayData.map((d) => {
-                let data = d.split(" ");
-                return (
-                  <View style={{ flexDirection: "row" }} key={data[1]}>
-                    <Text style={{ flex: 15, fontSize: 20 }}>
-                      {data[0].replace("\n", "")}
-                    </Text>
-                    <Text style={{ flex: 5, fontSize: 20 }}>{data[1]}</Text>
-                    <Text style={{ flex: 6, fontSize: 20 }}>{data[3]}</Text>
-                  </View>
-                );
-              })
-            ) : (
-              <Text>現在、5分以上の遅れはありません。</Text>
-            )}
+            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+              列車遅延速報EX
+            </Text>
+            <View style={{ flex: 1 }} />
+            {/* <TouchableOpacity style={{padding:10,backgroundColor:"white",alignContent:"center"}} onPress={() => {doFetch()}}>
+                      <Text style={{fontSize:20,fontWeight:"bold",color:"#0099CC"}}>最新の情報へ更新</Text>
+                    </TouchableOpacity> */}
+            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+              {getTime
+                ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
+                  ":" +
+                  getTime.toLocaleTimeString("ja-JP").split(":")[1]
+                : NaN}{" "}
+            </Text>
+            <Ionicons
+              name="reload"
+              color="white"
+              size={30}
+              style={{ margin: 5 }}
+              onPress={() => {
+                LayoutAnimation.easeInEaseOut(), setLoadingDelayData(true);
+              }}
+            />
           </View>
+          <ScrollView {...scrollHandlers}>
+            <View
+              style={{
+                padding: 10,
+                backgroundColor: "white",
+              }}
+            >
+              {loadingDelayData ? (
+                <View style={{ alignItems: "center" }}>
+                  <LottieView
+                    autoPlay
+                    loop
+                    style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                    source={require("../../assets/51690-loading-diamonds.json")}
+                  />
+                </View>
+              ) : delayData ? (
+                delayData.map((d) => {
+                  let data = d.split(" ");
+                  return (
+                    <View style={{ flexDirection: "row" }} key={data[1]}>
+                      <Text style={{ flex: 15, fontSize: 20 }}>
+                        {data[0].replace("\n", "")}
+                      </Text>
+                      <Text style={{ flex: 5, fontSize: 20 }}>{data[1]}</Text>
+                      <Text style={{ flex: 6, fontSize: 20 }}>{data[3]}</Text>
+                    </View>
+                  );
+                })
+              ) : (
+                <Text>現在、5分以上の遅れはありません。</Text>
+              )}
+            </View>
 
-          <View style={{ padding: 10 }}>
-            <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
-              列車遅延情報EXについて
-            </Text>
-            <Text style={{ color: "white" }}>
-              列車遅延情報をJR四国公式列車運行情報より5分毎に取得します。Twitterにて投稿している内容と同一のものとなります。
-            </Text>
-          </View>
+            <View style={{ padding: 10, backgroundColor: "#0099CC" }}>
+              <Text
+                style={{ fontSize: 20, fontWeight: "bold", color: "white" }}
+              >
+                列車遅延情報EXについて
+              </Text>
+              <Text style={{ color: "white" }}>
+                列車遅延情報をJR四国公式列車運行情報より5分毎に取得します。Twitterにて投稿している内容と同一のものとなります。
+              </Text>
+            </View>
+          </ScrollView>
+        </ViewShot>
+        <View
+          style={{
+            padding: 10,
+            backgroundColor: "#0099CC",
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}
+        >
           <TouchableOpacity
             style={{
               padding: 10,
@@ -124,20 +168,40 @@ export const JRSTraInfo = (props) => {
               margin: 10,
               borderRadius: 5,
               alignItems: "center",
+              backgroundColor: "#0099CC",
+              flex: 1,
             }}
-            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" }}>
-              →
-            </Text>
           </TouchableOpacity>
-        </ScrollView>
+          <TouchableOpacity
+            style={{
+              padding: 10,
+              flexDirection: "row",
+              borderColor: "white",
+              borderWidth: 1,
+              margin: 10,
+              borderRadius: 5,
+              alignItems: "center",
+              backgroundColor: "#0099CC",
+            }}
+            onPress={onCapture}
+          >
+            <MaterialCommunityIcons
+              name="share-variant"
+              color="white"
+              size={30}
+            />
+          </TouchableOpacity>
+        </View>
       </View>
     </ActionSheet>
   );

components/ActionSheetComponents/StationDeteilView.js

@@ -1,38 +1,29 @@
 import React, { useState, useEffect } from "react";
-import {
-  StatusBar,
-  View,
-  LayoutAnimation,
-  ScrollView,
-  Linking,
-  Text,
-  TouchableOpacity,
-} from "react-native";
+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 { useInterval } from "../../lib/useInterval";
 
 import { TicketBox } from "../atom/TicketBox";
-import {
-  widthPercentageToDP as wp,
-  heightPercentageToDP as hp,
-} from "react-native-responsive-screen";
+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) => {
+  if (!props.payload) return <></>;
   const {
-    StationBoardAcSR,
     currentStation,
     originalStationList,
-    favoriteStation,
-    setFavoriteStation,
-    busAndTrainData,
     navigate,
     onExit,
-  } = props;
+    goTo,
+    useShow,
+  } = props.payload;
+  const { busAndTrainData } = useBusAndTrainData();
   const [trainBus, setTrainBus] = useState();
   useEffect(() => {
     if (!currentStation) return () => {};
@@ -44,22 +35,36 @@ export const StationDeteilView = (props) => {
     }
     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={<></>}
+      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,
         }}
@@ -87,14 +92,15 @@ export const StationDeteilView = (props) => {
               <Sign
                 currentStation={currentStation}
                 originalStationList={originalStationList}
-                favoriteStation={favoriteStation}
-                setFavoriteStation={setFavoriteStation}
                 oP={() => {
-                  navigate("howto", {
-                    info,
-                    onExit,
-                  });
-                  StationBoardAcSR.current?.hide();
+                  usePDFView == "true"
+                    ? Linking.openURL(currentStation[0].StationTimeTable)
+                    : navigate("howto", {
+                        info,
+                        goTo,
+                        useShow,
+                      });
+                  onExit();
                 }}
                 oLP={() => Linking.openURL(currentStation[0].StationTimeTable)}
               />
@@ -105,8 +111,6 @@ export const StationDeteilView = (props) => {
               <NexPreStationLine
                 currentStation={d}
                 originalStationList={originalStationList}
-                favoriteStation={favoriteStation}
-                setFavoriteStation={setFavoriteStation}
               />
             ))}
           {currentStation &&
@@ -118,9 +122,11 @@ export const StationDeteilView = (props) => {
                     info:
                       currentStation[0].JrHpUrl.replace("/index.html", "/") +
                       "/kounai_map.html",
-                    onExit,
+
+                    goTo,
+                    useShow,
                   });
-                  StationBoardAcSR.current?.hide();
+                  onExit();
                 }}
                 oLP={() => {
                   Linking.openURL(
@@ -141,9 +147,11 @@ export const StationDeteilView = (props) => {
                   onPressButton={() => {
                     navigate("howto", {
                       info: currentStation[0].JrHpUrl,
-                      onExit,
+
+                      goTo,
+                      useShow,
                     });
-                    StationBoardAcSR.current?.hide();
+                    onExit();
                   }}
                   onLongPressButton={() =>
                     Linking.openURL(currentStation[0].JrHpUrl)
@@ -158,11 +166,15 @@ export const StationDeteilView = (props) => {
                   icon={<FontAwesome name="table" color="white" size={50} />}
                   flex={1}
                   onPressButton={() => {
-                    navigate("howto", {
-                      info,
-                      onExit,
-                    });
-                    StationBoardAcSR.current?.hide();
+                    usePDFView == "true"
+                      ? Linking.openURL(currentStation[0].StationTimeTable)
+                      : navigate("howto", {
+                          info,
+
+                          goTo,
+                          useShow,
+                        });
+                    onExit();
                   }}
                   onLongPressButton={() =>
                     Linking.openURL(currentStation[0].StationTimeTable)
@@ -191,9 +203,11 @@ export const StationDeteilView = (props) => {
                   onPressButton={() => {
                     navigate("howto", {
                       info: trainBus.address,
-                      onExit,
+
+                      goTo,
+                      useShow,
                     });
-                    StationBoardAcSR.current?.hide();
+                    onExit();
                   }}
                   onLongPressButton={() => Linking.openURL(trainBus.address)}
                 >
@@ -218,13 +232,7 @@ const StationName = (props) => {
   );
 };
 
-const NexPreStationLine = ({
-  currentStation,
-  originalStationList,
-  oP,
-  favoriteStation,
-  setFavoriteStation,
-}) => {
+const NexPreStationLine = ({ currentStation, originalStationList }) => {
   const [preStation, setPreStation] = useState();
   const [nexStation, setNexStation] = useState();
   const [lineName, setLineName] = useState();

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/DynamicHeaderScrollView.js

@@ -0,0 +1,106 @@
+import { ScrollView, View, Animated, Platform } from "react-native";
+import React, { useRef } from "react";
+
+export const DynamicHeaderScrollView = (props) => {
+  const {
+    Max_Header_Height = 200,
+    Min_Header_Height = 80,
+    children,
+    scrollViewProps = {},
+    containerProps = {},
+    shortHeader = <></>,
+    longHeader = <></>,
+    topStickyContent,
+    styles,
+  } = props;
+  const scrollOffsetY = useRef(new Animated.Value(0)).current;
+
+  const Scroll_Distance = Max_Header_Height - Min_Header_Height;
+
+  const animatedHeaderHeight = scrollOffsetY.interpolate({
+    inputRange: [Scroll_Distance, Scroll_Distance + 30],
+    outputRange: [Max_Header_Height, 0],
+    extrapolate: "clamp",
+  });
+  const animatedHeaderHeight2 = scrollOffsetY.interpolate({
+    inputRange: [Scroll_Distance, Scroll_Distance + 30],
+    outputRange: [Max_Header_Height, Min_Header_Height],
+    extrapolate: "clamp",
+  });
+  const animatedHeaderVisible = scrollOffsetY.interpolate({
+    inputRange: [Scroll_Distance - 30, Scroll_Distance],
+    outputRange: [1, 0],
+    extrapolate: "clamp",
+  });
+  const animatedHeaderVisible2 = scrollOffsetY.interpolate({
+    inputRange: [Scroll_Distance - 30, Scroll_Distance + 30],
+    outputRange: [0, 1],
+    extrapolate: "clamp",
+  });
+  return (
+    <View {...containerProps}>
+      <View style={{ zIndex: 1 }}>
+        <Animated.View
+          style={[
+            styles.header,
+            {
+              height: animatedHeaderHeight2,
+              backgroundColor: "#0099CC",
+              margin: 0,
+              top: 0,
+              opacity: animatedHeaderVisible2,
+            },
+          ]}
+        >
+          {shortHeader}
+        </Animated.View>
+        <Animated.View
+          style={[
+            styles.header,
+            {
+              height: animatedHeaderHeight,
+              backgroundColor: "#0099CC",
+              opacity: animatedHeaderVisible,
+
+              top: 0,
+            },
+          ]}
+        >
+          {longHeader}
+        </Animated.View>
+      </View>
+      <ScrollView
+        {...scrollViewProps}
+        style={{
+          backgroundColor: "white",
+          zIndex: 0,
+        }}
+        stickyHeaderIndices={[1]}
+        scrollEventThrottle={16}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
+          { useNativeDriver: false }
+        )}
+      >
+        <View
+          style={{
+            height: Scroll_Distance,
+            flexDirection: "column",
+          }}
+        />
+        {topStickyContent && (
+          <View
+            style={{
+              paddingTop: Min_Header_Height,
+              flexDirection: "column",
+            }}
+            index={1}
+          >
+            {topStickyContent}
+          </View>
+        )}
+        {children}
+      </ScrollView>
+    </View>
+  );
+};

components/FavoriteList.js

@@ -1,21 +1,11 @@
-import React, { Component, useRef, useState, useEffect } from "react";
+import React from "react";
 import { View, Text, TouchableOpacity, ScrollView } from "react-native";
-import { WebView } from "react-native-webview";
 import { ListItem } from "native-base";
 import Icon from "react-native-vector-icons/Entypo";
-import StatusbarDetect from "../StatusbarDetect";
-import { AS } from "../storageControl";
-import { news } from "../config/newsUpdate";
-import { getStationList, lineList } from "../lib/getStationList";
-var Status = StatusbarDetect();
-export default function FavoriteList({
-  navigation,
-  webview,
-  stationData,
-  favoriteStation,
-  setFavoriteStation,
-}) {
+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" }}>

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/custom-train-data.js

@@ -608,6 +608,43 @@ export const customTrainDataDetector = (TrainNumber) => {
         info: "",
       };
 
+    /////ロイヤルエクスプレス
+    case "9001":
+    case "9029":
+      return {
+        type: "SPCL",
+        trainName: "THE ROYAL EXPRESS",
+        trainIcon: "http://trainfrontview.net/p/izq2100rex1.png",
+        trainNumDistance: null,
+        info: "[団体専用] 第1章　－瀬戸の海に想いを馳せながら－　岡山・高松・琴平",
+      };
+    /////ロイヤルエクスプレス
+    case "9003":
+      return {
+        type: "SPCL",
+        trainName: "THE ROYAL EXPRESS",
+        trainIcon: "http://trainfrontview.net/p/izq2100rex1.png",
+        trainNumDistance: null,
+        info: "[団体専用] 第2章　－四国の伝統文化を感じて－　多度津・坂出・松山",
+      };
+      /////ロイヤルエクスプレス
+      case "9055":
+      case "9056":
+        return {
+          type: "SPCL",
+          trainName: "THE ROYAL EXPRESS",
+          trainIcon: "http://trainfrontview.net/p/izq2100rex1.png",
+          trainNumDistance: null,
+          info: "[団体専用] 第3章　－凪の誘い・瀬戸内の絶景－　今治・しまなみ海道",
+        };
+      case "9004":
+        return {
+          type: "SPCL",
+          trainName: "THE ROYAL EXPRESS",
+          trainIcon: "http://trainfrontview.net/p/izq2100rex1.png",
+          trainNumDistance: null,
+          info: "[団体専用] フィナーレ －四国・瀬戸内の彩りに囲まれて－ 今治・高松・岡山",
+        };
     default:
       return {
         type: "Normal",

components/settings.js

@@ -1,5 +1,5 @@
 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 { AS } from "../storageControl";
@@ -10,15 +10,17 @@ 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 [trainMenu, setTrainMenu] = useState(undefined);
-  const [trainPosition, setTrainPosition] = 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(() => {
     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);
   }, []);
@@ -96,6 +98,25 @@ export default function Setting(props) {
               onValueChange={(value) => setStationMenu(value.toString())}
             />
           </View>
+          <View style={{ flexDirection: "row", padding: 10 }}>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              時刻表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={{
@@ -144,7 +165,7 @@ export default function Setting(props) {
                 textAlignVertical: "center",
               }}
             >
-              内部バージョン: 4.5 beta-2
+              内部バージョン: 4.6.4
             </Text>
             <View style={{ flex: 1 }} />
           </View>
@@ -158,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
@@ -179,6 +221,7 @@ export default function Setting(props) {
             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(() => {

components/trainMenu.js

@@ -6,10 +6,11 @@ export default function TrainMenu({
   navigation: { navigate },
   webview,
   stationData,
+  style,
 }) {
   const mapRef = useRef();
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+    <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
       <MapView
         style={{ flex: 1, width: "100%", height: "100%" }}
         showsUserLocation={true}
@@ -46,65 +47,69 @@ export default function TrainMenu({
                     webview.current?.injectJavaScript(
                       `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}')`
                     );
-                    navigate("Apps");
+                    if (navigate) navigate("Apps");
                   }}
                 ></Marker>
               );
             })
           )}
       </MapView>
-      <View style={{ flexDirection: "row" }}>
-        <UsefulBox
-          backgroundColor={"#F89038"}
-          icon="train-car"
-          flex={1}
-          onPressButton={() =>
-            navigate("howto", {
-              info: "https://train.jr-shikoku.co.jp/usage.htm",
-            })
-          }
+      {navigate && (
+        <View style={{ flexDirection: "row" }}>
+          <UsefulBox
+            backgroundColor={"#F89038"}
+            icon="train-car"
+            flex={1}
+            onPressButton={() =>
+              navigate("howto", {
+                info: "https://train.jr-shikoku.co.jp/usage.htm",
+              })
+            }
+          >
+            使い方
+          </UsefulBox>
+          <UsefulBox
+            backgroundColor={"#EA4752"}
+            icon="star"
+            flex={1}
+            onPressButton={() => navigate("favoriteList")}
+          >
+            お気に入り
+          </UsefulBox>
+          <UsefulBox
+            backgroundColor={"#91C31F"}
+            icon="clipboard-list-outline"
+            flex={1}
+            onPressButton={() =>
+              Linking.openURL(
+                "https://nexcloud.haruk.in/apps/forms/ZRHjWFF7znr5Xjr2"
+              )
+            }
+          >
+            フィードバック
+          </UsefulBox>
+        </View>
+      )}
+      {navigate && (
+        <TouchableOpacity
+          style={{
+            padding: 10,
+            flexDirection: "row",
+            borderColor: "white",
+            borderWidth: 1,
+            margin: 10,
+            borderRadius: 5,
+            alignItems: "center",
+          }}
+          onPress={() => navigate("Apps")}
         >
-          使い方
-        </UsefulBox>
-        <UsefulBox
-          backgroundColor={"#EA4752"}
-          icon="star"
-          flex={1}
-          onPressButton={() => navigate("favoriteList")}
-        >
-          お気に入り
-        </UsefulBox>
-        <UsefulBox
-          backgroundColor={"#91C31F"}
-          icon="clipboard-list-outline"
-          flex={1}
-          onPressButton={() =>
-            Linking.openURL(
-              "https://nexcloud.haruk.in/apps/forms/ZRHjWFF7znr5Xjr2"
-            )
-          }
-        >
-          この機能のフィードバック
-        </UsefulBox>
-      </View>
-      <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 style={{ flex: 1 }} />
+          <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+            閉じる
+          </Text>
+          <View style={{ flex: 1 }} />
+        </TouchableOpacity>
+      )}
     </View>
   );
 }
@@ -115,14 +120,14 @@ const UsefulBox = (props) => {
       style={{
         flex: flex,
         backgroundColor: backgroundColor,
-        padding: 10,
+        padding: 5,
         alignItems: "center",
         margin: 2,
       }}
       onPress={onPressButton}
     >
       <MaterialCommunityIcons name={icon} color="white" size={50} />
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
+      <Text style={{ color: "white", fontWeight: "bold", fontSize: 16 }}>
         {children}
       </Text>
     </TouchableOpacity>

components/発車時刻表/LED_vidion.js

@@ -3,16 +3,16 @@ import { View, Text, TouchableOpacity } from "react-native";
 import { Switch } from "react-native-elements";
 import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import LottieView from "lottie-react-native";
-import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { Ionicons } from "@expo/vector-icons";
 import { customTrainDataDetector } from "../custom-train-data";
 import { useInterval } from "../../lib/useInterval";
 import { objectIsEmpty } from "../../lib/objectIsEmpty";
 import { getTrainType } from "../../lib/getTrainType";
-import { HeaderConfig } from "../../lib/HeaderConfig";
 import { getTrainDelayStatus } from "../../lib/getTrainDelayStatus";
 import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
-
-let diagramData = undefined;
+import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
+import { useAreaInfo } from "../../stateBox/useAreaInfo";
+import { SheetManager } from "react-native-actions-sheet";
 
 /**
  *
@@ -46,20 +46,18 @@ let diagramData = undefined;
 export default function LED_vision(props) {
   const {
     station,
-    setTrainInfo,
-    EachTrainInfoAsSR,
     trainDiagram,
-    currentTrainState,
-    currentTrainLoadingState,
     getCurrentTrain,
+    navigate,
+    originalStationList,
+    openStationACFromEachTrainInfo,
   } = props;
-  const { currentTrain, setCurrentTrain } = currentTrainState;
-  const { currentTrainLoading, setCurrentTrainLoading } =
-    currentTrainLoadingState;
+  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(() => {
     // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報]
@@ -149,6 +147,34 @@ 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={{
@@ -159,23 +185,27 @@ export default function LED_vision(props) {
         marginHorizontal: wp("1%"),
       }}
     >
-      <Header
-        currentTrainLoading={currentTrainLoading}
-        setCurrentTrainLoading={setCurrentTrainLoading}
-        getCurrentTrain={getCurrentTrain}
-      />
-      {selectedTrain.map((d, index) => (
+      <Header getCurrentTrain={getCurrentTrain} />
+      {selectedTrain.map((d) => (
         <EachData
           d={d}
           trainIDSwitch={trainIDSwitch}
           trainDescriptionSwitch={trainDescriptionSwitch}
           station={station}
-          currentTrain={currentTrain}
           customTrainDataDetector={customTrainDataDetector}
-          setTrainInfo={setTrainInfo}
-          EachTrainInfoAsSR={EachTrainInfoAsSR}
+          navigate={navigate}
+          originalStationList={originalStationList}
+          openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
         />
       ))}
+      {areaString != "" && (
+        <Description
+          numberOfLines={1}
+          info={areaString.replace("\n", "").replace("\r", "")}
+          onClick={() => alert(areaInfo)}
+        />
+      )}
+
       <Footer
         trainIDSwitch={trainIDSwitch}
         setTrainIDSwitch={setTrainIDSwitch}
@@ -187,50 +217,49 @@ export default function LED_vision(props) {
     </View>
   );
 }
-const Header = ({
-  currentTrainLoading,
-  setCurrentTrainLoading,
-  getCurrentTrain,
-}) => (
-  <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>
+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>
-    <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 {
@@ -272,11 +301,12 @@ const EachData = ({
   trainIDSwitch,
   trainDescriptionSwitch,
   station,
-  currentTrain,
   customTrainDataDetector,
-  setTrainInfo,
-  EachTrainInfoAsSR,
+  navigate,
+  originalStationList,
+  openStationACFromEachTrainInfo,
 }) => {
+  const { currentTrain } = useCurrentTrain();
   const openTrainInfo = (d) => {
     let TrainNumber = "";
     if (train.trainNumDistance != undefined) {
@@ -285,16 +315,21 @@ const EachData = ({
         train.trainNumDistance;
       TrainNumber = timeInfo + "号";
     }
-    setTrainInfo({
-      trainNum: d.train,
-      limited: `${getTrainType(train.type).data}:${
-        train.trainName
-      }${TrainNumber}`,
-      trainData: checkDuplicateTrainData(
-        currentTrain.filter((a) => a.num == d.train)
-      ),
+    const payload = {
+      data: {
+        trainNum: d.train,
+        limited: `${getTrainType(train.type).data}:${
+          train.trainName
+        }${TrainNumber}`,
+      },
+      navigate,
+      originalStationList,
+      openStationACFromEachTrainInfo,
+      from: "LED",
+    };
+    SheetManager.show("EachTrainInfo", {
+      payload,
     });
-    EachTrainInfoAsSR.current?.show();
   };
   const [train, setTrain] = useState(customTrainDataDetector(d.train));
   useEffect(() => {
@@ -413,8 +448,8 @@ const StatusAndDelay = ({ trainDelayStatus }) => {
   );
 };
 
-const Description = ({ info }) => (
-  <View
+const Description = ({ info, numberOfLines = 0, onClick }) => (
+  <TouchableOpacity
     style={{
       alignContent: "center",
       alignItems: "center",
@@ -424,6 +459,7 @@ const Description = ({ info }) => (
       backgroundColor: "#000",
       flexDirection: "row",
     }}
+    onPress={onClick}
   >
     <View style={{ flex: 4 }}>
       <Text
@@ -432,10 +468,11 @@ const Description = ({ info }) => (
           color: "green",
           fontWeight: "bold",
         }}
+        numberOfLines={numberOfLines}
       >
         {" "}
         &gt; {info}
       </Text>
     </View>
-  </View>
+  </TouchableOpacity>
 );

components/駅名表/Sign.js

@@ -1,36 +1,21 @@
-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,
-    oLP,
-    favoriteStation,
-    setFavoriteStation,
-  } = 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);
@@ -41,7 +26,7 @@ export default function Sign(props) {
         return false;
       }
     });
-    setTestButtonStatus(isFavorite.length != 0);
+    setTestButtonStatus(isFavorite.length == 0 ? false : true);
   }, [favoriteStation, currentStation]);
 
   useInterval(() => {
@@ -237,26 +222,40 @@ const StationNumberMaker = (props) => {
   };
   return props.currentStation
     .filter((d) => (d.StationNumber ? true : false))
-    .map((d, index, array) => (
-      <View
-        style={{
-          position: "absolute",
-          alignContent: "center",
-          alignItems: "center",
-          top: getTop(array, index) + "%",
-          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) => {

config/newsUpdate.js

@@ -1 +1 @@
-export const news = "2023-7-16";
+export const news = "2023-12-25";

eas.json

@@ -5,10 +5,12 @@
   "build": {
     "development": {
       "developmentClient": true,
-      "distribution": "internal"
+      "distribution": "internal",
+      "channel": "development"
     },
     "preview": {
-      "distribution": "internal"
+      "distribution": "internal",
+      "channel": "preview"
     },
     "mapsbuild": {
       "releaseChannel": "mapsbuild"
@@ -21,6 +23,18 @@
     },
     "production4.5": {
       "releaseChannel": "buyma"
+    },
+    "beta4.6": {
+      "channel": "catch"
+    },
+    "production4.6": {
+      "channel": "costoco"
+    },
+    "beta5.0": {
+      "channel": "dshopping"
+    },
+    "production5.0": {
+      "channel": "dmm"
     }
   },
   "submit": {

howto.js

@@ -3,11 +3,17 @@ import React, { Component } from "react";
 import { StatusBar, View, TouchableOpacity, Text } from "react-native";
 import { WebView } from "react-native-webview";
 export default ({ navigation: { navigate }, route }) => {
-  const { info, onExit = () => navigate("Apps") } = route.params;
-
+  const { info, goTo, useShow } = route.params;
+  const onExit = () => {
+    navigate(goTo);
+    useShow();
+  };
   return (
     <View style={styles.View}>
-      <WebView useWebKit source={{ uri: info }} />
+      <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" }}>

lib/eachTrainInfoCoreLib/findReversalPoints.js

@@ -0,0 +1,113 @@
+// arrayは現在位置の駅ID(駅在宅の場合は1つの配列、駅間の場合は2つの配列)
+// stopStationIDListは停車駅の駅IDの配列 [Y01,Y02,Y05,...]
+export const findReversalPoints = (array, stopStationIDList) => {
+  try {
+    if (!stopStationIDList) return [];
+    // arrayが二次元配列だったら早期リターン
+    if (!array instanceof Array) return [];
+    if (!array) 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);
+  }
+};

lib/eachTrainInfoCoreLib/getStationData.js

@@ -0,0 +1,15 @@
+// 駅名から駅情報を取得する
+//stationName: 駅名
+//stationList: 駅情報リスト
+export const getStationData = (stationName, stationList) => {
+  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];
+};

lib/eachTrainInfoCoreLib/getType.js

@@ -0,0 +1,11 @@
+//　種別判定
+export const getType = (string) => {
+  switch (string) {
+    case "express":
+      return "特急";
+    case "rapid":
+      return "快速";
+    default:
+      return "";
+  }
+};

lib/eachTrainInfoCoreLib/migrateTrainName.js

@@ -0,0 +1,7 @@
+// Description: 電車名の変換を行う。
+// マリンライナーやマリン表記をマリンライナーに変換する。
+export const migrateTrainName = (string) => {
+  return string
+    .replace("マリン", "マリンライナー")
+    .replace("ライナーライナー", "ライナー");
+};

lib/eachTrainInfoCoreLib/openBackTrainInfo.js

@@ -0,0 +1,68 @@
+export const openBackTrainInfo = (stationInfo, trainData, showNearTrain) => {
+  const migrationArray = (stationInfo) => {
+    const mainTrainStationPosition = trainData.findIndex(
+      (d) => d.split(",")[0] == stationInfo
+    );
+
+    const relationMain = (() => {
+      if (mainTrainStationPosition == 0) return "head";
+      if (mainTrainStationPosition == trainData.length - 1) return "tail";
+      return "middle";
+    })();
+
+    const subTrainStationPosition = showNearTrain.findIndex(
+      (d) => d.split(",")[0] == stationInfo
+    );
+    const relationSub = (() => {
+      if (subTrainStationPosition == 0) return "head";
+      if (subTrainStationPosition == showNearTrain.length - 1) return "tail";
+      return "middle";
+    })();
+
+    switch (relationMain) {
+      case "head":
+        if (relationSub == "head") {
+          return;
+        } else if (relationSub == "tail") {
+          return [
+            ...showNearTrain.slice(0, subTrainStationPosition),
+            ...trainData,
+          ];
+        } else if (relationSub == "middle") {
+          return [
+            ...showNearTrain.slice(0, subTrainStationPosition),
+            ...trainData,
+          ];
+        } else return;
+      case "tail":
+        if (relationSub == "head") {
+          return [
+            ...trainData.slice(0, mainTrainStationPosition),
+            ...showNearTrain,
+          ];
+        } else if (relationSub == "tail") {
+          return;
+        } else if (relationSub == "middle") {
+          return [
+            ...trainData.slice(0, mainTrainStationPosition),
+            ...showNearTrain.slice(subTrainStationPosition),
+          ];
+        } else return;
+      case "middle":
+        if (relationSub == "head") {
+          return [
+            ...trainData.slice(0, mainTrainStationPosition),
+            ...showNearTrain,
+          ];
+        } else if (relationSub == "tail") {
+          return [
+            ...showNearTrain.slice(0, subTrainStationPosition),
+            ...trainData.slice(mainTrainStationPosition),
+          ];
+        } else return;
+    }
+  };
+  const array = migrationArray(stationInfo);
+  if (!array) return null;
+  return array;
+};

lib/eachTrainInfoCoreLib/searchSpecialTrain.js

@@ -0,0 +1,13 @@
+// S列番の列車からDやMの列車を検索する
+export const searchSpecialTrain = (trainNum, trainList) => {
+  const searchBase = trainNum.replace("S", "").replace("X", "");
+  const search = (text) => {
+    const TD = trainList[searchBase + text];
+    if (TD) {
+      return true;
+    }
+    return false;
+  };
+  if (search("D")) return searchBase + "D";
+  if (search("M")) return searchBase + "M";
+};

lib/getPdfViewURL.js

@@ -3,5 +3,5 @@ import { Platform } from "react-native";
 export const getPDFViewURL = (url) => {
   if (Platform.OS == "ios") return url;
   else
-    return `https://docs.google.com/viewer?url=${encodeURI(url)}&embedded=true`;
+    return `https://mozilla.github.io/pdf.js/web/viewer.html?file=${encodeURI(url)}`;
 };

lib/getTrainType.js

@@ -6,6 +6,8 @@ export const getTrainType = (nameString) => {
       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:

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

lib/webViewInjectjavascript.js

@@ -6,6 +6,34 @@ export const injectJavascriptData = (
   stationMenu,
   trainMenu
 ) => {
+
+
+  const specialTrainIcon = `
+    ////ロイヤルエクスプレス
+    case "9001":
+    case "9029":
+    case "9003":
+    case "9055":  
+    case "9056":
+    case "9004":
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/izq2100rex.png');
+    break;
+  `
+  const specialTrainName = `
+    ////ロイヤルエクスプレス
+    case "9001":
+    case "9029":
+      return "ロイヤルエクスプレス\\n－瀬戸の海に想いを馳せながら－";
+    case "9003":
+      return "ロイヤルエクスプレス\\n－四国の伝統文化を感じて－";
+    case "9055":  
+    case "9056":
+      return "ロイヤルエクスプレス\\n－凪の誘い・瀬戸内の絶景－";
+    case "9004":
+      return "ロイヤルエクスプレス\\n－四国・瀬戸内の彩りに囲まれて－";
+    break;
+    `
+
   // 一番上のメニュー非表示　地図スイッチによって切り替え
   const topMenu =
     mapSwitch != "true"
@@ -72,14 +100,14 @@ export const injectJavascriptData = (
     case "25M":
     case "27M":
     case "29M":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s8000nr.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s8000nr.png');
       break;
     //8000 アンパン
     case "10M":
     case "22M":
     case "9M":
     case "21M":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s8000ap.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s8000ap.png');
       break;
 
 
@@ -92,7 +120,7 @@ export const injectJavascriptData = (
     case "11M":
     case "19M":
     case "23M":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s8600.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s8600.png');
       break;
 
     //いしづちメイン
@@ -115,7 +143,7 @@ export const injectJavascriptData = (
     case "1025M":
     case "1027M":
     case "1029M":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s8000nr.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s8000nr.png');
       break;
 
     //8000 アンパン
@@ -123,7 +151,7 @@ export const injectJavascriptData = (
     case "1022M":
     case "1009M":
     case "1021M":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s8000ap.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s8000ap.png');
       break;
 
     //8600
@@ -135,29 +163,29 @@ export const injectJavascriptData = (
     case "1011M":
     case "1019M":
     case "1023M":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s8600_isz.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s8600_isz.png');
       break;
 
     //MEXP
     //8000
     case "1092M":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s8000nr.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s8000nr.png');
       break;
     //8600
     case "1091M":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s8600_isz.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s8600_isz.png');
       break;
     //三桁いしづち
     //8000 アンパン
     case "1041M":
     case "1044M":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s8000ap.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s8000ap.png');
       break;
     //8600
     case "1043M":
     case "1042M":
     case "1046M":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s8600_isz.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s8600_isz.png');
       break;
 
 
@@ -180,7 +208,7 @@ export const injectJavascriptData = (
     case "51D":
     case "53D":
     case "55D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s2700.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s2700.png');
       break;
     //2700アンパン
     case "32D":
@@ -193,7 +221,7 @@ export const injectJavascriptData = (
     case "45D":
     case "49D":
     case "57D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s2700apr.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s2700apr.png');
       break;
 
 
@@ -223,7 +251,7 @@ export const injectJavascriptData = (
     case "3027D":
     case "3031D":
     case "3033D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s2700_uzu.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s2700_uzu.png');
       break;
 
     //2600
@@ -235,13 +263,13 @@ export const injectJavascriptData = (
     case "3011D":
     case "3017D":
     case "3023D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s2600.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s2600.png');
       break;
 
     //キハ185
     case "3009D":
     case "3032D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s185tu_uzu.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s185tu_uzu.png');
       break;
       
     //マリンライナー
@@ -313,14 +341,14 @@ export const injectJavascriptData = (
     case "3167M":
     case "3169M":
     case "3175M":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s5001.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s5001.png');
       break;
     case "3102M":
     case "3101M":
     case "3103M":
     case "3171M":
     case "3173M":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s5001k.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s5001k.png');
       break;
 
     //サンライズ瀬戸
@@ -328,7 +356,7 @@ export const injectJavascriptData = (
     case "5031M":
     case "8041M": //琴平延長高松迄
     case "8031M": //琴平延長高松以降
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/w285.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/w285.png');
       break;
 
     //宇和海
@@ -357,7 +385,7 @@ export const injectJavascriptData = (
     case "1075D":
     case "1077D":
     case "1079D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s2000_uwa.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s2000_uwa.png');
     break;
     //2000 アンパン込み
     case "1054D":
@@ -368,7 +396,7 @@ export const injectJavascriptData = (
     case "1061D":
     case "1067D":
     case "1081D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s2002a.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s2002a.png');
     break;
     //しまんと
     case "2002D":
@@ -379,7 +407,7 @@ export const injectJavascriptData = (
     case "2003D":
     case "2005D":
     case "2007D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s2700_smn.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s2700_smn.png');
     break;
 
     //あしずり 2000
@@ -393,7 +421,7 @@ export const injectJavascriptData = (
     case "2077D":
     case "2081D":
     case "2083D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s2000_asi.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s2000_asi.png');
     break;
 
     //あしずり 2700
@@ -404,7 +432,7 @@ export const injectJavascriptData = (
     case "2079D":
     case "2085D":
     case "2072D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s2700_asi.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s2700_asi.png');
     break;
     //剣山
     case "4002D":
@@ -418,19 +446,19 @@ export const injectJavascriptData = (
     case "4007D":
     case "4009D":
     case "4011D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s185tu.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s185tu.png');
     break;
     //むろと
     case "5051D":
     case "5052D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s185_mrt.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s185_mrt.png');
     break;
 
 
     //よしのがわトロッコ
     case "8452D":
     case "8451D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s185to_ai.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s185to_ai.png');
     break;
 
     //岡山高松アントロ
@@ -439,7 +467,7 @@ export const injectJavascriptData = (
     //岡山琴平アントロ
     case "8277D":
     case "8278D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/s32to4.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s32to4.png');
     break;
 
     //伊予灘ものがたり
@@ -447,14 +475,14 @@ export const injectJavascriptData = (
     case "8093D":
     case "8092D":
     case "8094D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s185iyoy.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s185iyoy.png');
     break;
 
 
     //千年ものがたり
     case "8011D":
     case "8012D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s185mm1.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s185mm1.png');
     break;
 
     //夜明けものがたり
@@ -462,8 +490,9 @@ export const injectJavascriptData = (
     case "8054D":
     case "8062D":
     case "8063D":
-      setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/b/s185ym1.png');
+      setStationIcon(element.querySelector("img"),'https://storage.haruk.in/s185ym1.png');
     break;
+`+specialTrainIcon+`
     default:
       break;
     }
@@ -472,7 +501,7 @@ export const injectJavascriptData = (
 
   const JRF_icon =
     iconSetting == "true"
-      ? `JRF || setStationIcon(element.querySelector("img"),'http://www.trainfrontview.net/f/ef210a.png');`
+      ? `JRF || setStationIcon(element.querySelector("img"),'https://storage.haruk.in/ef210a.png');`
       : ``;
   const normal_train_name = `
     if(new RegExp(/^4[1-9]\\d\\d[DM]$/).test(列番データ) || new RegExp(/^5[1-7]\\d\\d[DM]$/).test(列番データ)){
@@ -541,6 +570,7 @@ const data = getJRF(列番データ);
   //安芸行と併結列車を個別に表示、それ以外をdefaultで下りなら既定の行き先を、上りなら奈半利行を設定
   const getTKT = num =>{
     switch(num){
+      `+specialTrainName+`
     case "5814D":
     case "5816D":
       return "ごめん・なはり線直通\\n快速 奈半利行";
@@ -667,7 +697,8 @@ const setStrings = () =>{
       document.getElementById('disp').style.overflowX = 'hidden';
 
     }catch(e){
-      alert("にゃーん");
+      alert("本家サーバーからのデータ取得に失敗しました。");
+      window.ReactNativeWebView.postMessage(JSON.stringify({type:"LoadError"}));
     }
   } catch (e) {}
 }
@@ -745,6 +776,23 @@ const setStationMenuDialog = new MutationObserver( (mutations) => {
       window.ReactNativeWebView.postMessage(JSON.stringify({type:"PopUpMenu",event:s[0],id:s[1],name:s[2],pdf:s[3],map:s[4],url:s[5],chk:s[6]}));
     }
   }
+  const data2 =[];
+  document.querySelectorAll('#disp > div > div > div > div > font > div').forEach(d=>data2.push(d))
+
+  for(let d of data2 ){
+    if(!d.offclick){
+      d.offclick = d.onclick.toString();
+    }
+    const stationID = d.childNodes[0].innerText;
+    const PDFAddress = d.offclick.split("'")[1];
+    const Name = d.childNodes[2].innerText;
+    //alert(PDFAddress);
+    d.onclick = () =>{ 
+      //const s = d.offclick.replace('(event)','').replaceAll("'", "").split('(')[1].split(')')[0].split(',');
+      // これの中身抽出 PopUpMenu(event,'2','端岡','http://www.jr-shikoku.co.jp/01_trainbus/jikoku/pdf/hashioka.pdf','https://www.google.co.jp/maps/place/34.305027,133.967643','','1')
+      window.ReactNativeWebView.postMessage(JSON.stringify({type:"PopUpMenu",id:stationID,name:Name,pdf:PDFAddress}));
+    }
+  }
 });
 
 // 監視を開始

menu.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
 import Carousel from "react-native-snap-carousel";
 import {
   Platform,
@@ -7,14 +7,12 @@ import {
   Linking,
   Text,
   TouchableOpacity,
-  ToastAndroid,
 } from "react-native";
 import Constants from "expo-constants";
 import { ListItem } from "native-base";
 import Icon from "react-native-vector-icons/Entypo";
 import * as Location from "expo-location";
 import StatusbarDetect from "./StatusbarDetect";
-import { useNavigation } from "@react-navigation/native";
 import AutoHeightImage from "react-native-auto-height-image";
 import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import {
@@ -24,7 +22,6 @@ import {
   MaterialCommunityIcons,
 } from "@expo/vector-icons";
 import LottieView from "lottie-react-native";
-import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
 import { parseAllTrainDiagram } from "./lib/parseAllTrainDiagram";
 import trainList from "./assets/originData/trainList";
 
@@ -35,24 +32,18 @@ import { UsefulBox } from "./components/atom/UsefulBox";
 import { TicketBox } from "./components/atom/TicketBox";
 import { TextBox } from "./components/atom/TextBox";
 import { getStationList, lineList } from "./lib/getStationList";
-import { JRSTraInfo } from "./components/ActionSheetComponents/JRSTraInfo";
-import { EachTrainInfo } from "./components/ActionSheetComponents/EachTrainInfo";
 import useInterval from "./lib/useInterval";
 import { HeaderConfig } from "./lib/HeaderConfig";
+import { useFavoriteStation } from "./stateBox/useFavoriteStation";
+import { SheetManager } from "react-native-actions-sheet";
+import { useTrainDelayData } from "./stateBox/useTrainDelayData";
 
 export default function Menu(props) {
   const {
     navigation: { navigate },
-    favoriteStation,
-    setFavoriteStation,
-    busAndTrainData,
-    currentTrainState,
-    currentTrainLoadingState,
     getCurrentTrain,
   } = props;
-  const JRSTraInfoEXAcSR = useRef(null);
-  const StationBoardAcSR = useRef(null);
-  const navigation = useNavigation();
+  const { favoriteStation } = useFavoriteStation();
 
   //位置情報
   const [locationStatus, setLocationStatus] = useState(null);
@@ -62,14 +53,6 @@ export default function Menu(props) {
     });
   }, []);
 
-  //列車情報表示関連
-  const EachTrainInfoAsSR = useRef(null);
-  const [trainInfo, setTrainInfo] = useState({
-    trainNum: undefined,
-    limited: undefined,
-    trainData: undefined,
-  });
-
   const getCurrentPosition = () => {
     if (locationStatus !== "granted") return () => {};
     Location.getCurrentPositionAsync({}).then((location) =>
@@ -118,27 +101,17 @@ export default function Menu(props) {
   const [currentStation, setCurrentStation] = useState(undefined); //第三要素
 
   const [originalStationList, setOriginalStationList] = useState(); // 第一要素
-  useEffect(() => getStationList().then(setOriginalStationList), []);
+  useLayoutEffect(() => getStationList().then(setOriginalStationList), []);
 
-  const [count, setCount] = useState(0);
-  const [delayData, setDelayData] = useState(undefined);
-  const [getTime, setGetTime] = useState(new Date());
-  const [loadingDelayData, setLoadingDelayData] = useState(true);
   const carouselRef = useRef();
   const [selectedCurrentStation, setSelectedCurrentStation] = useState(0);
 
+  const [allStationData, setAllStationData] = useState([]);
   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]);
-  const allStationData = [currentStation, ...favoriteStation].filter(
-    (d) => d != undefined
-  );
+    setAllStationData(
+      [currentStation, ...favoriteStation].filter((d) => d != undefined)
+    );
+  }, [currentStation, favoriteStation]);
   useEffect(() => {
     if (allStationData.length == 0) {
       setSelectedCurrentStation(0);
@@ -170,13 +143,13 @@ export default function Menu(props) {
         if (d.indexOf("<title>404 Not Found</title>") != -1) throw Error;
         setTrainDiagram(parseAllTrainDiagram(d));
       })
-      .catch((d) => {
+      .catch(() => {
         console.log("fallback");
         setTrainDiagram(trainList);
       });
   }, []);
 
-  const openStationACFromEachTrainInfo = (stationName) => {
+  const openStationACFromEachTrainInfo = () => {
     // EachTrainInfoAsSR.current?.hide();
     // const findStationEachLine = (selectLine) => {
     //   let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
@@ -224,7 +197,7 @@ export default function Menu(props) {
             onSnapToItem={(d) => {
               setSelectedCurrentStation(d);
             }}
-            renderItem={({ item, index }) => {
+            renderItem={({ item }) => {
               return (
                 <View
                   style={{ marginVertical: 10 }}
@@ -233,9 +206,27 @@ export default function Menu(props) {
                   <Sign
                     currentStation={item}
                     originalStationList={originalStationList}
-                    favoriteStation={favoriteStation}
-                    setFavoriteStation={setFavoriteStation}
-                    oP={StationBoardAcSR.current?.setModalVisible}
+                    oP={() => {
+                      const payload = {
+                        currentStation:
+                          originalStationList &&
+                          allStationData.length != 0 &&
+                          allStationData[selectedCurrentStation],
+                        originalStationList: originalStationList,
+                        navigate: navigate,
+                        goTo: "menu",
+                        useShow: () =>
+                          SheetManager.show("StationDetailView", {
+                            payload,
+                          }),
+                        onExit: () => {
+                          SheetManager.hide("StationDetailView");
+                        },
+                      };
+                      SheetManager.show("StationDetailView", {
+                        payload,
+                      });
+                    }}
                   />
                 </View>
               );
@@ -249,56 +240,16 @@ export default function Menu(props) {
               station={
                 originalStationList && allStationData[selectedCurrentStation][0]
               }
-              setTrainInfo={setTrainInfo}
-              EachTrainInfoAsSR={EachTrainInfoAsSR}
               trainDiagram={trainDiagram}
-              currentTrainState={currentTrainState}
-              currentTrainLoadingState={currentTrainLoadingState}
               getCurrentTrain={getCurrentTrain}
+              navigate={navigate}
+              originalStationList={originalStationList}
+              openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
             />
           )}
-        <JRSTraInfoBox
-          JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
-          getTime={getTime}
-          setLoadingDelayData={setLoadingDelayData}
-          loadingDelayData={loadingDelayData}
-          delayData={delayData}
-        />
+        <JRSTraInfoBox />
         <FixedContentBottom navigate={navigate} />
       </ScrollView>
-
-      <StationDeteilView
-        StationBoardAcSR={StationBoardAcSR}
-        currentStation={
-          originalStationList &&
-          allStationData.length != 0 &&
-          allStationData[selectedCurrentStation]
-        }
-        originalStationList={originalStationList}
-        favoriteStation={favoriteStation}
-        setFavoriteStation={setFavoriteStation}
-        busAndTrainData={busAndTrainData}
-        navigate={navigate}
-        onExit={() => {
-          StationBoardAcSR.current?.setModalVisible();
-          navigate("menu");
-        }}
-      />
-      <JRSTraInfo
-        JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
-        getTime={getTime}
-        loadingDelayData={loadingDelayData}
-        setLoadingDelayData={setLoadingDelayData}
-        delayData={delayData}
-      />
-      <EachTrainInfo
-        setRef={EachTrainInfoAsSR}
-        data={trainInfo}
-        navigate={navigate}
-        originalStationList={originalStationList}
-        openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
-        from="LED"
-      />
     </View>
   );
 }
@@ -361,14 +312,15 @@ const TopMenuButton = () => {
   );
 };
 
-const JRSTraInfoBox = (props) => {
+const JRSTraInfoBox = () => {
   const {
-    JRSTraInfoEXAcSR,
     getTime,
-    setLoadingDelayData,
-    loadingDelayData,
+    setGetTime,
     delayData,
-  } = props;
+    setDelayData,
+    loadingDelayData,
+    setLoadingDelayData,
+  } = useTrainDelayData();
   const styles = {
     touch: {
       backgroundColor: "#0099CC",
@@ -400,7 +352,7 @@ const JRSTraInfoBox = (props) => {
   };
   return (
     <TouchableOpacity
-      onPress={JRSTraInfoEXAcSR.current?.setModalVisible}
+      onPress={() => SheetManager.show("JRSTraInfo")}
       style={styles.touch}
     >
       <ScrollView scrollEnabled={false} style={styles.scroll}>
@@ -439,7 +391,7 @@ const JRSTraInfoBox = (props) => {
               />
             </View>
           ) : delayData ? (
-            delayData.map((d, index) => {
+            delayData.map((d) => {
               let data = d.split(" ");
               return (
                 <View style={{ flexDirection: "row" }} key={data[1] + "key"}>
@@ -467,7 +419,7 @@ const JRSTraInfoBox = (props) => {
   );
 };
 
-const FixedContentTop = (props) => {
+const FixedContentTop = () => {
   return (
     <>
       <TopMenuButton />
@@ -716,12 +668,26 @@ const FixedContentBottom = (props) => {
           ))}
         </View>
       </View>
+      <Text style={{ fontWeight: "bold", fontSize: 20 }}>上級者向け機能</Text>
+      <TextBox
+        backgroundColor="#8c00d6"
+        flex={1}
+        onPressButton={() => props.navigate("AllTrainIDList")}
+      >
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          列番探索
+        </Text>
+        <Text style={{ color: "white", fontSize: 18 }}>
+          データベースに存在する全列車のダイヤを探索
+        </Text>
+      </TextBox>
       <Text style={{ fontWeight: "bold", fontSize: 20 }}>
         このアプリについて
       </Text>
       <Text>
         このアプリはXprocess(HARUKIN)が製作しているJR四国の完全非公式アシストアプリケーションです。このアプリに関することでのJR四国公式へ問合せすることはお控えください。以下のTwitterよりお願いします。
       </Text>
+
       <TextBox
         backgroundColor="#CC0000"
         flex={1}

ndView.js

@@ -1,8 +1,11 @@
-import React from "react";
-import { View, Platform } 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 { Ionicons } from "@expo/vector-icons";
 export default function tndView() {
+  const webview = useRef();
+  const [LoadError, setLoadError] = useState(false);
   return (
     <View
       style={{
@@ -13,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>
   );
@@ -26,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,43 +8,49 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
-    "@react-native-async-storage/async-storage": "1.17.11",
+    "@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": "^48.0.0",
-    "expo-font": "~11.1.1",
-    "expo-location": "~15.1.1",
-    "expo-updates": "~0.16.3",
-    "expo-web-browser": "~12.1.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-sharing": "~11.5.0",
+    "expo-updates": "~0.18.17",
+    "expo-web-browser": "~12.3.2",
     "firebase": "8.2.3",
-    "lottie-react-native": "5.1.4",
+    "lottie-react-native": "5.1.6",
     "native-base": "^2.15.2",
     "npm": "^7.18.1",
     "pushy-react-native": "^1.0.18",
     "react": "18.2.0",
-    "react-native": "0.71.3",
-    "react-native-actions-sheet": "^0.4.9",
+    "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.9.0",
-    "react-native-maps": "1.3.2",
-    "react-native-reanimated": "~2.14.4",
+    "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.5.0",
-    "react-native-screens": "~3.20.0",
+    "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": "13.4.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.26.0"
+    "react-native-view-shot": "3.7.0",
+    "react-native-webview": "^13.6.3"
   },
   "devDependencies": {
-    "babel-preset-expo": "^9.3.0"
+    "babel-preset-expo": "^9.5.0"
   },
   "private": true
 }

stateBox/useAllTrainDiagram.js

@@ -0,0 +1,52 @@
+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 = {
+    //9001: "岡山,発,10:11#児島,発,11:05#坂出,発,11:41#高松,着,12:00#独自補完データ,提,https://x.com/makkun3/status/1750490886293848372#",
+    9001: "ウェルカムセレモニー,頃,9:40#岡山,頃,10:10#琴平,頃,14:00#琴平観光,以降,14:00#湯山荘 阿讃琴南,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第1章\n－瀬戸の海に想いを馳せながら－\n岡山・高松・琴平,提,https://www.the-royalexpress.jp/plan/2614/#",
+    //9029: "高松,発,12:42#琴平,着,13:57#独自補完データ,提,https://x.com/makkun3/status/1750490886293848372#",
+    9029: "ウェルカムセレモニー,頃,9:40#岡山,頃,10:10#琴平,頃,14:00#琴平観光,以降,14:00#湯山荘 阿讃琴南,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第1章\n－瀬戸の海に想いを馳せながら－\n岡山・高松・琴平,提,https://www.the-royalexpress.jp/plan/2614/#",
+    //9003: "多度津,発,10:09#今治,発,13:20#伊予亀岡,発,13:55#菊間,発,14:04#松山,着,14:50#独自補完データ,提,https://x.com/makkun3/status/1750490886293848372#",
+    9003: "湯山荘 阿讃琴南,頃,9:00#多度津,頃,10:10#松山,頃,14:50#宿泊施設,以降,14:50#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第2章\n －四国の伝統文化を感じて－\n多度津・坂出・松山,提,https://www.the-royalexpress.jp/plan/2614/#",
+    9055: "宿泊施設→バス,着,10:30#松山,頃,10:30#今治,頃,14:15#しまなみエリア観光,以降,14:15#Azumi Setoda,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第3章\n－凪の誘い・瀬戸内の絶景－\n今治・しまなみ海道,提,https://www.the-royalexpress.jp/plan/2614/#",
+    9056: "宿泊施設→バス,着,10:30#松山,頃,10:30#今治,頃,14:15#しまなみエリア観光,以降,14:15#Azumi Setoda,頃,16:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS 第3章\n－凪の誘い・瀬戸内の絶景－\n今治・しまなみ海道,提,https://www.the-royalexpress.jp/plan/2614/#",
+    9004: "Azumi Setoda,頃,9:30#今治,頃,10:30#高松,頃,14:30#高松港\n↓\n瀬戸内クルーズ（貸切）\n「おりんぴあどりーむ せと」\n↓ \n 新岡山港,以降,14:15#岡山駅,頃,18:00#独自補完データ,提,https://www.the-royalexpress.jp/plan/2614/#ROYAL EXPRESS フィナーレ\n－四国・瀬戸内の彩りに囲まれて－\n今治・高松・岡山,提,https://www.the-royalexpress.jp/plan/2614/#",
+  };
+  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,70 @@
+import React, { createContext, useContext, useState } from "react";
+import trainList from "../assets/originData/trainList";
+const initialState = {
+  busAndTrainData: [],
+  setBusAndTrainData: () => {},
+  trainPairData: [],
+  setTrainPairData: () => {},
+  initializeTrainPairList: () => {},
+  getInfluencedTrainData: () => {},
+};
+
+const BusAndTrainDataContext = createContext(initialState);
+
+export const useBusAndTrainData = () => {
+  return useContext(BusAndTrainDataContext);
+};
+
+export const BusAndTrainDataProvider = ({ children }) => {
+  const [busAndTrainData, setBusAndTrainData] = useState([]);
+  const [trainPairData, setTrainPairData] = useState([]);
+  const initializeTrainPairList = () => {
+    const trainPairList = {};
+    trainPairData.forEach((d) => {
+      trainPairList[Object.keys(d)[0]] = d[Object.keys(d)[0]];
+    });
+    return trainPairList;
+  };
+  const getInfluencedTrainData = (trainNum) => {
+    const trainPairList = initializeTrainPairList();
+
+    const returnArray = [];
+    if (!trainNum) return;
+    if (trainPairList[trainNum]) {
+      returnArray.push(Object.keys(trainPairList[trainNum])[0]);
+    }
+    if (
+      // 列番が4xxDまたは5xxDの場合はxxDの列番を検索
+      new RegExp(/^4[1-9]\d\d[DM]$/).test(trainNum) ||
+      new RegExp(/^5[1-7]\d\d[DM]$/).test(trainNum)
+    ) {
+      if (trainList[trainNum.substring(1)]) {
+        returnArray.push(trainNum.substring(1));
+      }
+    }
+    if (new RegExp(/^[1-9]\d\d[DM]$/).test(trainNum)) {
+      // 列番がxxDの場合は4xxDと5xxDの列番を検索
+      if (trainList["4" + trainNum]) returnArray.push("4" + trainNum);
+      if (trainList["5" + trainNum]) returnArray.push("5" + trainNum);
+    }
+    if (!returnArray[0]) return [[], []];
+    const TD = trainList[returnArray[0]];
+    if (!TD) return [[], []];
+    const TDArray = TD.split("#").filter((d) => d != "");
+    return [returnArray, TDArray];
+  };
+  return (
+    <BusAndTrainDataContext.Provider
+      value={{
+        busAndTrainData,
+        setBusAndTrainData,
+        trainPairData,
+        setTrainPairData,
+        initializeTrainPairList,
+        getInfluencedTrainData,
+      }}
+    >
+      {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>
+  );
+};

trainbaseview.js

@@ -36,7 +36,7 @@ export default function TrainBase({ route, navigation }) {
         setSupportMultipleWindows={false}
         onMessage={(event) => {}}
       />
-      {from == "LED" && (
+      {(from == "LED" || from == "AllTrainDiagramView") && (
         <TouchableOpacity
           style={{
             padding: 10,
@@ -47,7 +47,9 @@ export default function TrainBase({ route, navigation }) {
             borderRadius: 5,
             alignItems: "center",
           }}
-          onPress={() => navigate("menu")}
+          onPress={() =>
+            navigate(from == "AllTrainDiagramView" ? "AllTrainIDList" : "menu")
+          }
         >
           <View style={{ flex: 1 }} />
           <MaterialCommunityIcons name="close" color="black" size={30} />