最右端のデータを消去した場合にクラッシュするバグの修正

App.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import {
   createStackNavigator,
@@ -8,14 +8,23 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { AntDesign, Ionicons } from "@expo/vector-icons";
 import { Platform, UIManager } from "react-native";
 import { UpdateAsync } from "./UpdateAsync.js";
+import { 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 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 TrainMenu from "./components/trainMenu.js";
+import FavoriteList from "./components/FavoriteList.js";
+import { LogBox } from "react-native";
+
+LogBox.ignoreLogs([
+  "ViewPropTypes will be removed",
+  "ColorPropType will be removed",
+]);
 const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
 if (Platform.OS === "android") {
@@ -24,96 +33,210 @@ if (Platform.OS === "android") {
   }
 }
 export default function App() {
-  const navigationRef = useRef();
-  useEffect(UpdateAsync, []);
+  useEffect(() => {
+    UpdateAsync();
+  }, []);
+  const [favoriteStation, setFavoriteStation] = useState([]);
+
+  useEffect(() => {
+    AS.getItem("favoriteStation")
+      .then((d) => {
+        const returnData = JSON.parse(d);
+        setFavoriteStation(returnData);
+      })
+      .catch((d) => console.log(d));
+  }, []);
+
   return (
-    <NavigationContainer name="Root" ref={navigationRef} style={{ flex: 1 }}>
+    <NavigationContainer name="Root" style={{ flex: 1 }}>
       <Tab.Navigator>
-        <Stack.Screen
+        <Tab.Screen
           name="login"
-          component={top}
           options={{
             tabBarLabel: "位置情報",
             headerTransparent: true,
             gestureEnabled: true,
-            tabBarIcon: () => <AntDesign name="barchart" size={32} />,
+            tabBarIcon: initIcon("barchart", "AntDesign"),
           }}
-        />
-        <Stack.Screen
+        >
+          {(props) => (
+            <Top
+              {...props}
+              favoriteStation={favoriteStation}
+              setFavoriteStation={setFavoriteStation}
+            />
+          )}
+        </Tab.Screen>
+        <Tab.Screen
           name="menuPage"
-          component={menuPage}
           options={{
             tabBarLabel: "リンク",
             headerTransparent: true,
             gestureEnabled: true,
-            tabBarIcon: () => <Ionicons name="ios-radio" size={32} />,
+            tabBarIcon: initIcon("ios-radio", "Ionicons"),
           }}
-        />
-        <Stack.Screen
+        >
+          {(props) => (
+            <MenuPage
+              {...props}
+              favoriteStation={favoriteStation}
+              setFavoriteStation={setFavoriteStation}
+            />
+          )}
+        </Tab.Screen>
+        <Tab.Screen
           name="home"
-          component={tndView}
           options={{
             tabBarLabel: "運行情報",
             headerTransparent: true,
             gestureEnabled: true,
-            tabBarIcon: () => <Ionicons name="md-train" size={32} />,
+            tabBarIcon: initIcon("md-train", "Ionicons"),
           }}
-        />
+        >
+          {(props) => <TNDView {...props} />}
+        </Tab.Screen>
       </Tab.Navigator>
     </NavigationContainer>
   );
 }
-function top() {
+
+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 }) => {
+  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"
-        component={Apps}
         options={{
           headerShown: false,
           gestureEnabled: true,
           headerTransparent: true,
         }}
-      />
+      >
+        {(props) => (
+          <Apps
+            {...props}
+            webview={webview}
+            favoriteStation={favoriteStation}
+            setFavoriteStation={setFavoriteStation}
+          />
+        )}
+      </Stack.Screen>
       <Stack.Screen
         name="trainbase"
-        component={trainbase}
         options={{
           title: "トレインビジョン",
           gestureEnabled: true,
           ...TransitionPresets.SlideFromRightIOS,
         }}
-      />
+      >
+        {(props) => <TrainBase {...props} />}
+      </Stack.Screen>
       <Stack.Screen
         name="howto"
-        component={howto}
         options={{
           title: "使い方",
           ...optionData,
         }}
-      />
-      <Stack.Screen name="news" component={News} 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="trainMenu"
-        component={trainMenu}
-        options={optionData}
-      />
+        name="favoriteList"
+        options={{ ...optionData, gestureEnabled: false }}
+      >
+        {(props) => (
+          <FavoriteList
+            {...props}
+            webview={webview}
+            stationData={mapsStationData}
+            favoriteStation={favoriteStation}
+            setFavoriteStation={setFavoriteStation}
+          />
+        )}
+      </Stack.Screen>
     </Stack.Navigator>
   );
-}
-function menuPage() {
+};
+function MenuPage({ favoriteStation, setFavoriteStation }) {
   return (
     <Stack.Navigator>
       <Stack.Screen
         name="menu"
-        component={menu}
         options={{
           headerShown: false,
           gestureEnabled: true,
           headerTransparent: true,
         }}
-      />
-      <Stack.Screen name="setting" component={Setting} options={optionData} />
+      >
+        {(props) => (
+          <Menu
+            {...props}
+            favoriteStation={favoriteStation}
+            setFavoriteStation={setFavoriteStation}
+          />
+        )}
+      </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.Navigator>
   );
 }

Apps.js

@@ -8,9 +8,10 @@ import {
 } from "react-native";
 import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { AS } from "./storageControl";
 import { news } from "./config/newsUpdate";
-import { getStationList } from "./lib/getStationList";
+import { getStationList, lineList } from "./lib/getStationList";
 import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
 import { injectJavascriptData } from "./lib/webViewInjectjavascript";
 import { getStationList2 } from "./lib/getStationList2";
@@ -18,32 +19,28 @@ import { getStationList2 } from "./lib/getStationList2";
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
 
-export default function Apps(props) {
-  const {
-    navigation: { navigate },
-  } = props;
+export default function Apps({
+  navigation,
+  webview,
+  favoriteStation,
+  setFavoriteStation,
+}) {
+  const { navigate } = navigation;
   var urlcache = "";
-  const webview = useRef();
+
   //画面表示関連
   const [iconSetting, setIconSetting] = useState(undefined);
   const [mapSwitch, setMapSwitch] = useState(undefined);
   const [stationMenu, setStationMenu] = useState(undefined);
 
-  //地図用
-  const [mapsStationData, setMapsStationData] = useState(undefined);
-  useEffect(() => {
-    getStationList2().then((data) => {
-      console.log(data);
-      setMapsStationData(data);
-    });
-  }, []);
-
   //駅情報画面用
   const StationBoardAcSR = useRef(null);
   const [stationBoardData, setStationBoardData] = useState(undefined);
   const [originalStationList, setOriginalStationList] = useState();
   const [selectedStation, setSelectedStation] = useState(undefined);
-  useEffect(() => getStationList().then(setOriginalStationList), []);
+  useEffect(() => {
+    getStationList().then(setOriginalStationList);
+  }, []);
 
   //地図表示テキスト
   const injectJavascript = injectJavascriptData(
@@ -54,63 +51,113 @@ export default function Apps(props) {
 
   useEffect(() => {
     //ニュース表示
-    AsyncStorage.getItem("status")
+    AS.getItem("status")
       .then((d) => {
         if (d != news) navigate("news");
       })
       .catch((e) => navigate("news"));
+  }, []);
 
+  useEffect(() => {
     //列車アイコンスイッチ
-    AsyncStorage.getItem("iconSwitch")
+    AS.getItem("iconSwitch")
       .then((d) => {
         if (d) {
           setIconSetting(d);
         } else {
-          AsyncStorage.setItem("iconSwitch", "true").then(() =>
-            Updates.reloadAsync()
-          );
+          AS.setItem("iconSwitch", "true").then(Updates.reloadAsync);
         }
       })
-      .catch((d) =>
-        AsyncStorage.setItem("iconSwitch", "true").then(() =>
-          Updates.reloadAsync()
-        )
-      );
+      .catch((d) => AS.setItem("iconSwitch", "true").then(Updates.reloadAsync));
+  }, []);
 
+  useEffect(() => {
     //地図スイッチ
-    AsyncStorage.getItem("mapSwitch")
+    AS.getItem("mapSwitch")
       .then((d) => {
         if (d) {
           setMapSwitch(d);
         } else {
-          AsyncStorage.setItem("mapSwitch", "false").then(() =>
-            Updates.reloadAsync()
-          );
+          AS.setItem("mapSwitch", "false").then(Updates.reloadAsync);
         }
       })
-      .catch((d) =>
-        AsyncStorage.setItem("mapSwitch", "false").then(() =>
-          Updates.reloadAsync()
-        )
-      );
+      .catch((d) => AS.setItem("mapSwitch", "false").then(Updates.reloadAsync));
+  }, []);
+
+  useEffect(() => {
     //駅メニュースイッチ
-    AsyncStorage.getItem("stationSwitch")
+    AS.getItem("stationSwitch")
       .then((d) => {
         if (d) {
           setStationMenu(d);
         } else {
-          AsyncStorage.setItem("stationSwitch", "true").then(() =>
-            Updates.reloadAsync()
-          );
+          AS.setItem("stationSwitch", "true").then(Updates.reloadAsync);
         }
       })
       .catch((d) =>
-        AsyncStorage.setItem("stationSwitch", "true").then(() =>
-          Updates.reloadAsync()
-        )
+        AS.setItem("stationSwitch", "true").then(Updates.reloadAsync)
       );
   }, []);
 
+  const onMessage = (event) => {
+    if (!event.nativeEvent.data.includes("PopUpMenu")) {
+      navigate("trainbase", { info: event.nativeEvent.data, from: "Train" });
+      return;
+    }
+    if (!originalStationList) {
+      alert("駅名標データを取得中...");
+      return;
+    }
+    const selectedStationPDFAddress = event.nativeEvent.data
+      .split(",")[3]
+      .replace("'", "")
+      .replace("'", "");
+
+    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?.setModalVisible();
+    } else {
+      setStationBoardData(undefined);
+      StationBoardAcSR.current?.hide();
+    }
+
+    return;
+  };
+
+  const onNavigationStateChange = (event) => {
+    if (event.url != urlcache) {
+      //URL二重判定回避
+      urlcache = event.url;
+
+      if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) {
+        if (Platform.OS === "android") navigate("howto");
+        webview?.current.goBack();
+        //Actions.howto();
+      } else if (
+        event.url.includes("https://train.jr-shikoku.co.jp/train.html")
+      ) {
+        //Actions.trainbase({info: event.url});
+        if (Platform.OS === "android")
+          navigate("trainbase", { info: event.url });
+        webview?.current.goBack();
+      }
+    }
+  };
+
   return (
     <View
       style={{
@@ -120,7 +167,7 @@ export default function Apps(props) {
     >
       {/* {Status} */}
       <WebView
-        useWebKit={true}
+        useWebKit
         ref={webview}
         source={{ uri: "https://train.jr-shikoku.co.jp/sp.html" }}
         originWhitelist={[
@@ -128,125 +175,103 @@ export default function Apps(props) {
           "https://train.jr-shikoku.co.jp/sp.html",
         ]}
         mixedContentMode={"compatibility"}
-        javaScriptEnabled={true}
-        allowsBackForwardNavigationGestures={true}
-        setSupportMultipleWindows={true}
-        onNavigationStateChange={(event) => {
-          if (event.url != urlcache) {
-            //URL二重判定回避
-            urlcache = event.url;
-
-            if (
-              event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")
-            ) {
-              if (Platform.OS === "android") navigate("howto");
-              webview?.current.goBack();
-              //Actions.howto();
-            } else if (
-              event.url.includes("https://train.jr-shikoku.co.jp/train.html")
-            ) {
-              //Actions.trainbase({info: event.url});
-              if (Platform.OS === "android")
-                navigate("trainbase", { info: event.url });
-              webview?.current.goBack();
-            }
-          }
-        }}
-        onMessage={(event) => {
-          if (!originalStationList) {
-            alert("駅名標データを取得中...");
-            return;
-          }
-          if (event.nativeEvent.data.includes("PopUpMenu")) {
-            const selectedStationPDFAddress = event.nativeEvent.data
-              .split(",")[3]
-              .replace("'", "")
-              .replace("'", "");
-
-            const findStationEachLine = (selectLine) => {
-              let NearStation = selectLine.filter(
-                (d) => d.StationTimeTable == selectedStationPDFAddress
-              );
-              return NearStation;
-            };
-
-            const lineList = [
-              "予讃線",
-              "松宇線",
-              "伊予灘線",
-              "土讃線",
-              "窪川線",
-              "高徳線",
-              "徳島線",
-              "鳴門線",
-              "瀬戸大橋線",
-            ];
-            let returnDataBase = lineList
-              .map((d) => findStationEachLine(originalStationList[d]))
-              .filter((d) => d.length > 0)
-              .reduce((pre, current) => {
-                pre.push(...current);
-                return pre;
-              }, []);
-            if (returnDataBase.length) {
-              let currentStation =
-                currentStation == undefined ? [] : currentStation;
-              setStationBoardData(returnDataBase);
-              StationBoardAcSR.current?.setModalVisible();
-            } else {
-              setStationBoardData(undefined);
-              StationBoardAcSR.current?.hide();
-            }
-
-            return;
-          }
-          navigate("trainbase", { info: event.nativeEvent.data });
-        }}
+        javaScriptEnabled
+        allowsBackForwardNavigationGestures
+        setSupportMultipleWindows
+        onNavigationStateChange={onNavigationStateChange}
+        onMessage={onMessage}
         injectedJavaScript={injectJavascript}
         onTouchMove={() => StationBoardAcSR.current?.hide()}
       />
-      <TouchableOpacity
-        onPress={() =>
-          navigate("trainMenu", { webview, stationData: mapsStationData })
-        }
-        style={{
-          position: "absolute",
-          top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
-          left: 10,
-          width: 50,
-          height: 50,
-          backgroundColor: "#0099CC",
-          borderColor: "white",
-          borderStyle: "solid",
-          borderWidth: 1,
-          borderRadius: 50,
-          alignContent: "center",
-          alignSelf: "center",
-          alignItems: "center",
-          display: mapSwitch == "true" ? "flex" : "none",
-        }}
-      >
-        <View style={{ flex: 1 }} />
-        <Text
-          style={{
-            textAlign: "center",
-            width: "auto",
-            height: "auto",
-            textAlignVertical: "center",
-            fontWeight: "bold",
-            color: "white",
-          }}
-        >
-          三
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
+      <MapsButton
+        onPress={() => navigate("trainMenu", { webview })}
+        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+        mapSwitch={mapSwitch == "true" ? "flex" : "none"}
+      />
+      <ReloadButton
+        onPress={() => webview.current.reload()}
+        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+      />
 
       <StationDeteilView
         StationBoardAcSR={StationBoardAcSR}
         currentStation={stationBoardData}
         originalStationList={originalStationList}
+        favoriteStation={favoriteStation}
+        setFavoriteStation={setFavoriteStation}
       />
     </View>
   );
 }
+
+const MapsButton = ({ onPress, top, mapSwitch }) => {
+  const styles = {
+    touch: {
+      position: "absolute",
+      top,
+      left: 10,
+      width: 50,
+      height: 50,
+      backgroundColor: "#0099CC",
+      borderColor: "white",
+      borderStyle: "solid",
+      borderWidth: 1,
+      borderRadius: 50,
+      alignContent: "center",
+      alignSelf: "center",
+      alignItems: "center",
+      display: mapSwitch,
+    },
+    text: {
+      textAlign: "center",
+      width: "auto",
+      height: "auto",
+      textAlignVertical: "center",
+      fontWeight: "bold",
+      color: "white",
+    },
+  };
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.touch}>
+      <View style={{ flex: 1 }} />
+      <Text style={styles.text}>三</Text>
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};
+
+const ReloadButton = ({ onPress, top, mapSwitch }) => {
+  const styles = {
+    touch: {
+      position: "absolute",
+      top,
+      right: 10,
+      width: 50,
+      height: 50,
+      backgroundColor: "#0099CC",
+      borderColor: "white",
+      borderStyle: "solid",
+      borderWidth: 1,
+      borderRadius: 50,
+      alignContent: "center",
+      alignSelf: "center",
+      alignItems: "center",
+      display: mapSwitch,
+    },
+    text: {
+      textAlign: "center",
+      width: "auto",
+      height: "auto",
+      textAlignVertical: "center",
+      fontWeight: "bold",
+      color: "white",
+    },
+  };
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.touch}>
+      <View style={{ flex: 1 }} />
+      <Ionicons name="reload" color="white" size={30} />
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};

UpdateAsync.js

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

app.json

@@ -4,7 +4,7 @@
     "slug": "jrshikoku",
     "privacy": "public",
     "platforms": ["ios", "android"],
-    "version": "4.4",
+    "version": "4.5",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "splash": {
@@ -17,7 +17,7 @@
     },
     "assetBundlePatterns": ["**/*"],
     "ios": {
-      "buildNumber": "22",
+      "buildNumber": "23",
       "supportsTablet": true,
       "bundleIdentifier": "jrshikokuinfo.xprocess.hrkn",
       "config": {

components/ActionSheetComponents/JRSTraInfo.js

@@ -1,7 +1,5 @@
-import React, { Component, useRef, useState, useEffect } from "react";
+import React from "react";
 import {
-  StatusBar,
-  Platform,
   View,
   LayoutAnimation,
   ScrollView,
@@ -9,30 +7,9 @@ import {
   Text,
   TouchableOpacity,
 } from "react-native";
-import Image from "react-native-remote-svg";
-import Constants from "expo-constants";
-import { List, ListItem } from "native-base";
-import Icon from "react-native-vector-icons/Entypo";
-import * as Location from "expo-location";
-import StatusbarDetect from "../../StatusbarDetect";
-var Status = StatusbarDetect();
-import { useNavigation } from "@react-navigation/native";
-import AutoHeightImage from "react-native-auto-height-image";
-import {
-  widthPercentageToDP as wp,
-  heightPercentageToDP as hp,
-} from "react-native-responsive-screen";
-import {
-  FontAwesome,
-  Fontisto,
-  Foundation,
-  Ionicons,
-  MaterialCommunityIcons,
-} from "@expo/vector-icons";
-import * as WebBrowser from "expo-web-browser";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import ActionSheet from "react-native-actions-sheet";
 import LottieView from "lottie-react-native";
-import SvgUri from "react-native-svg-uri";
 export const JRSTraInfo = (props) => {
   const {
     JRSTraInfoEXAcSR,
@@ -45,7 +22,7 @@ export const JRSTraInfo = (props) => {
     <ActionSheet
       ref={JRSTraInfoEXAcSR}
       gestureEnabled
-      CustomHeaderComponent={() => { }}
+      CustomHeaderComponent={<></>}
     >
       <View
         style={{
@@ -80,8 +57,8 @@ export const JRSTraInfo = (props) => {
           <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
             {getTime
               ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
-              ":" +
-              getTime.toLocaleTimeString("ja-JP").split(":")[1]
+                ":" +
+                getTime.toLocaleTimeString("ja-JP").split(":")[1]
               : NaN}{" "}
           </Text>
           <Ionicons
@@ -116,7 +93,7 @@ export const JRSTraInfo = (props) => {
               delayData.map((d) => {
                 let data = d.split(" ");
                 return (
-                  <View style={{ flexDirection: "row" }}>
+                  <View style={{ flexDirection: "row" }} key={data[1]}>
                     <Text style={{ flex: 15, fontSize: 20 }}>
                       {data[0].replace("\n", "")}
                     </Text>

components/ActionSheetComponents/StationDeteilView.js

@@ -1,21 +1,29 @@
 import React from "react";
-import { View, ScrollView, Linking } from "react-native";
-import StatusbarDetect from "../../StatusbarDetect";
-var Status = StatusbarDetect();
+import { View, Linking } from "react-native";
 import { FontAwesome, Foundation, Ionicons } from "@expo/vector-icons";
 import ActionSheet from "react-native-actions-sheet";
 import Sign from "../../components/駅名表/Sign";
 
 import { TicketBox } from "../atom/TicketBox";
+import {
+  widthPercentageToDP as wp,
+  heightPercentageToDP as hp,
+} from "react-native-responsive-screen";
 
 export const StationDeteilView = (props) => {
-  const { StationBoardAcSR, currentStation, originalStationList } = props;
+  const {
+    StationBoardAcSR,
+    currentStation,
+    originalStationList,
+    favoriteStation,
+    setFavoriteStation,
+  } = props;
 
   return (
     <ActionSheet
       ref={StationBoardAcSR}
       gestureEnabled
-      CustomHeaderComponent={() => {}}
+      CustomHeaderComponent={<></>}
     >
       <View
         key={currentStation}
@@ -40,11 +48,20 @@ export const StationDeteilView = (props) => {
         </View>
         <View>
           {currentStation && (
-            <Sign
-              currentStation={currentStation}
-              originalStationList={originalStationList}
-              oP={() => Linking.openURL(currentStation[0].StationTimeTable)}
-            />
+            <View
+              style={{
+                margin: 10,
+                marginHorizontal: wp("10%"),
+              }}
+            >
+              <Sign
+                currentStation={currentStation}
+                originalStationList={originalStationList}
+                favoriteStation={favoriteStation}
+                setFavoriteStation={setFavoriteStation}
+                oP={() => Linking.openURL(currentStation[0].StationTimeTable)}
+              />
+            </View>
           )}
           {currentStation && (
             <View style={{ flexDirection: "row" }}>

components/FavoriteList.js

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

components/news.js

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

components/settings.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
 import * as Updates from "expo-updates";
 import StatusbarDetect from "../StatusbarDetect";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import { AS } from "../storageControl";
 var Status = StatusbarDetect();
 import { Switch } from "react-native-elements";
 
@@ -14,9 +14,9 @@ export default function Setting(props) {
   const [mapSwitch, setMapSwitch] = useState(undefined);
   const [stationMenu, setStationMenu] = useState(undefined);
   useEffect(() => {
-    AsyncStorage.getItem("iconSwitch").then(setIconSetting);
-    AsyncStorage.getItem("mapSwitch").then(setMapSwitch);
-    AsyncStorage.getItem("stationSwitch").then(setStationMenu);
+    AS.getItem("iconSwitch").then(setIconSetting);
+    AS.getItem("mapSwitch").then(setMapSwitch);
+    AS.getItem("stationSwitch").then(setStationMenu);
   }, []);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
@@ -102,7 +102,7 @@ export default function Setting(props) {
                 textAlignVertical: "center",
               }}
             >
-              内部バージョン: 4.4.2.3
+              内部バージョン: 4.5 beta-1
             </Text>
             <View style={{ flex: 1 }} />
           </View>
@@ -134,9 +134,9 @@ export default function Setting(props) {
         }}
         onPress={() => {
           Promise.all([
-            AsyncStorage.setItem("iconSwitch", iconSetting.toString()),
-            AsyncStorage.setItem("mapSwitch", mapSwitch.toString()),
-            AsyncStorage.setItem("stationSwitch", stationMenu.toString()),
+            AS.setItem("iconSwitch", iconSetting.toString()),
+            AS.setItem("mapSwitch", mapSwitch.toString()),
+            AS.setItem("stationSwitch", stationMenu.toString()),
           ]).then(() => {
             Updates.reloadAsync();
           });

components/trainMenu.js

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

components/発車時刻表/LED_vidion.js

@@ -1,20 +1,13 @@
-import React, { Component, useRef, useState, useEffect } from "react";
-import {
-  StatusBar,
-  View,
-  LayoutAnimation,
-  ScrollView,
-  Linking,
-  Text,
-  TouchableOpacity,
-} from "react-native";
+import React, { useState, useEffect } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
 import { Switch } from "react-native-elements";
-import {
-  widthPercentageToDP as wp,
-  heightPercentageToDP as hp,
-} from "react-native-responsive-screen";
+import { widthPercentageToDP as wp } from "react-native-responsive-screen";
+import LottieView from "lottie-react-native";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { customTrainDataDetector } from "../custom-train-data";
 import { useInterval } from "../../lib/useInterval";
+import trainList from "../../assets/originData/trainList";
+import { objectIsEmpty } from "../../lib/objectIsEmpty";
 
 let diagramData = undefined;
 
@@ -53,55 +46,88 @@ export default function LED_vision(props) {
       referer: "https://train.jr-shikoku.co.jp/sp.html",
     },
   };
-  const [trainDiagram, setTrainDiagram] = useState(null);
-  const [stationDiagram, setStationDiagram] = useState(null);
-  const [currentTrain, setCurrentTrain] = useState(null);
+  const [trainDiagram, setTrainDiagram] = useState(null); // 全列車のダイヤを列番ベースで整理
+  const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
+  const [currentTrain, setCurrentTrain] = useState(null); //現在在線中の全列車
+  const [currentTrainLoading, setCurrentTrainLoading] = useState("loading");
   const [finalSwitch, setFinalSwitch] = useState(false);
   const [trainIDSwitch, setTrainIDSwitch] = useState(false);
   const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
 
+  const parseAllTrainDiagram = (text) => {
+    const val = text.replace("[\r\n", "").split(",\r\n");
+    let trainDiagram = {};
+    val.forEach((element) => {
+      try {
+        let data = JSON.parse(element);
+        Object.keys(data).forEach((key) => (trainDiagram[key] = data[key]));
+      } catch (e) {}
+    });
+    return trainDiagram;
+  };
+
   useEffect(() => {
+    //全列車リストを生成する副作用[無条件初回実行]
     fetch(
       "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=traintimeinfo&arg3=dia",
       HeaderConfig
     )
       .then((response) => response.text())
       .then((d) => {
-        const val = d.replace("[\r\n", "").split(",\r\n");
-        let trainDiagram = {};
-        val.forEach((element) => {
-          try {
-            let data = JSON.parse(element);
-            Object.keys(data).forEach((key) => (trainDiagram[key] = data[key]));
-          } catch (e) {}
-        });
-        setTrainDiagram(trainDiagram);
-        return trainDiagram;
+        if (d.indexOf("<title>404 Not Found</title>") != -1) throw Error;
+        setTrainDiagram(parseAllTrainDiagram(d));
       })
-      .then((trainDiagram) => {
-        let returnData = {};
-        if (!trainDiagram) {
-          setStationDiagram(returnData);
-          return;
-        }
-        Object.keys(trainDiagram).forEach((key) => {
-          if (trainDiagram[key].match(props.station.Station_JP)) {
-            returnData[key] = trainDiagram[key];
-          }
-        });
-        setStationDiagram(returnData);
+      .catch((d) => {
+        console.log("fallback");
+        setTrainDiagram(trainList);
       });
   }, []);
 
-  const getTime = () => {
-    const returnData = [];
-    Object.keys(stationDiagram).forEach((d) => {
+  useEffect(() => {
+    // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報]
+    if (!trainDiagram) {
+      setStationDiagram({});
+      return;
+    }
+    let returnData = {};
+    Object.keys(trainDiagram).forEach((key) => {
+      if (trainDiagram[key].match(props.station.Station_JP + ",")) {
+        returnData[key] = trainDiagram[key];
+      }
+    });
+    setStationDiagram(returnData);
+  }, [trainDiagram, props.station]);
+
+  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 }))
+      )
+      .then((d) => {
+        setCurrentTrain(d);
+        setCurrentTrainLoading("success");
+      })
+      .catch((e) => {
+        console.log("えらー");
+        setCurrentTrainLoading("error");
+      });
+
+  useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得
+
+  useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得
+
+  const getTime = (stationDiagram, station) => {
+    const returnData = Object.keys(stationDiagram).map((d) => {
       let a = {};
       stationDiagram[d].split("#").forEach((data) => {
         if (data.match("着")) {
           a.lastStation = data.split(",着,")[0];
         }
-        if (data.match(props.station.Station_JP)) {
+        if (data.split(",")[0] === station.Station_JP) {
           if (data.match(",発,")) {
             a.time = data.split(",発,")[1];
           } else {
@@ -110,9 +136,9 @@ export default function LED_vision(props) {
           }
         }
       });
-      returnData.push({ train: d, time: a.time, lastStation: a.lastStation });
+      return { train: d, time: a.time, lastStation: a.lastStation };
     });
-
+    console.log(returnData);
     return returnData.sort((a, b) => {
       switch (true) {
         case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]):
@@ -126,19 +152,15 @@ export default function LED_vision(props) {
       }
     });
   };
-  const trainTimeAndNumber = stationDiagram != null ? getTime() : null;
-  const getCurrentTrain = () =>
-    fetch(
-      "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train",
-      HeaderConfig
-    )
-      .then((response) => response.json())
-      .then((d) => d.map((x) => ({ num: x.TrainNum, delay: x.delay })))
-      .then(setCurrentTrain);
 
-  useEffect(getCurrentTrain, []);
+  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);
 
-  useInterval(getCurrentTrain, 15000);
+  useEffect(() => {
+    //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
+    if (objectIsEmpty(stationDiagram)) return () => {};
+    const getTimeData = getTime(stationDiagram, props.station);
+    setTrainTimeAndNumber(getTimeData);
+  }, [stationDiagram]);
 
   const timeFiltering = (d) => {
     const date = new Date();
@@ -156,6 +178,17 @@ export default function LED_vision(props) {
 
     return false;
   };
+
+  const [selectedTrain, setSelectedTrain] = useState([]);
+  useEffect(() => {
+    if (!trainTimeAndNumber) return () => {};
+    if (!currentTrain) return () => {};
+    const data = trainTimeAndNumber
+      .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
+      .filter(timeFiltering)
+      .filter((d) => !!finalSwitch || d.lastStation != "当駅止");
+    setSelectedTrain(data);
+  }, [trainTimeAndNumber, currentTrain, finalSwitch]);
   return (
     <View
       style={{
@@ -166,206 +199,328 @@ export default function LED_vision(props) {
         marginHorizontal: wp("1%"),
       }}
     >
-      <View
-        style={{
-          alignContent: "center",
-          alignItems: "center",
-          width: "100%",
-          marginVertical: 10,
-          flexDirection: "row",
-        }}
-      >
-        <View style={{ flex: 1 }}></View>
-        <View style={{}}>
-          <Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
-            次の列車
-          </Text>
-          <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
-        </View>
-        <View style={{ flex: 1 }}></View>
-      </View>
-      {trainTimeAndNumber
-        ? currentTrain &&
-          trainTimeAndNumber
-            .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
-            .filter(timeFiltering)
-            .filter((d) => !!finalSwitch || d.lastStation != "当駅止")
-            .map((d, index) => {
-              const train = customTrainDataDetector(d.train);
-              return [
-                <View
-                  style={{
-                    alignContent: "center",
-                    alignItems: "center",
-                    width: "94%",
-                    marginVertical: 5,
-                    marginHorizontal: "3%",
-                    backgroundColor: "#000",
-                    flexDirection: "row",
-                  }}
-                >
-                  <View style={{ flex: 9 }}>
-                    <Text
-                      style={{
-                        fontSize: train.trainName.length > 6 ? 15 : 20,
-                        color: (() => {
-                          switch (train.type) {
-                            case "Rapid":
-                              return "aqua";
-                            case "LTDEXP":
-                              return "red";
-                            case "NightLTDEXP":
-                              return "red";
-                            case "Normal":
-                              return "white";
-                          }
-                        })(),
-                        fontWeight: "bold",
-                      }}
-                    >
-                      {trainIDSwitch
-                        ? d.train
-                        : (() => {
-                            switch (train.type) {
-                              case "Rapid":
-                                return "快速";
-                              case "LTDEXP":
-                                return "特急";
-                              case "NightLTDEXP":
-                                return "寝台特急";
-                              case "Normal":
-                                return "普通列車";
-                            }
-                          })() +
-                          " " +
-                          train.trainName +
-                          (train.trainNumDistance == undefined
-                            ? ""
-                            : parseInt(
-                                d.train.replace("M", "").replace("D", "")
-                              ) -
-                              train.trainNumDistance +
-                              "号")}
-                    </Text>
-                  </View>
-                  <View style={{ flex: 4, flexDirection: "row" }}>
-                    <Text
-                      style={{
-                        fontSize: d.lastStation.length > 4 ? 15 : 20,
-                        color: "white",
-                        fontWeight: "bold",
-                      }}
-                    >
-                      {d.lastStation}
-                    </Text>
-                  </View>
-                  <View style={{ flex: 3 }}>
-                    <Text
-                      style={{
-                        fontSize: 20,
-                        color: "white",
-                        fontWeight: "bold",
-                      }}
-                    >
-                      {d.time}
-                    </Text>
-                  </View>
-                  <View style={{ flex: 4 }}>
-                    <Text
-                      style={{
-                        fontSize: 20,
-                        color: "white",
-                        fontWeight: "bold",
-                      }}
-                    >
-                      {(() => {
-                        const delay = currentTrain.filter(
-                          (a) => a.num == d.train
-                        )[0].delay;
-                        switch (true) {
-                          case isNaN(delay):
-                            return delay;
-                          case delay == 0:
-                            return "定刻通り";
-                          default:
-                            return delay + "分遅れ";
-                        }
-                      })()}
-                    </Text>
-                  </View>
-                </View>,
-                trainDescriptionSwitch && !!train.info && (
-                  <View
-                    style={{
-                      alignContent: "center",
-                      alignItems: "center",
-                      width: "94%",
-                      marginVertical: 5,
-                      marginHorizontal: "3%",
-                      backgroundColor: "#000",
-                      flexDirection: "row",
-                    }}
-                  >
-                    <View style={{ flex: 4 }}>
-                      <Text
-                        style={{
-                          fontSize: 20,
-                          color: "green",
-                          fontWeight: "bold",
-                        }}
-                      >
-                        {" "}
-                        &gt; {train.info}
-                      </Text>
-                    </View>
-                  </View>
-                ),
-              ];
-            })
-        : null}
-      <View style={{ flexDirection: "row", padding: 10 }}>
-        <Text
-          style={{
-            alignItems: "center",
-            alignContent: "center",
-            textAlign: "center",
-            textAlignVertical: "center",
-            color: "white",
-          }}
-        >
-          種別名 / 列番
-        </Text>
-        <Switch value={trainIDSwitch} onValueChange={setTrainIDSwitch} />
-        <View style={{ flex: 1 }} />
-        <Text
-          style={{
-            alignItems: "center",
-            alignContent: "center",
-            textAlign: "center",
-            textAlignVertical: "center",
-            color: "white",
-          }}
-        >
-          列車情報
-        </Text>
-        <Switch
-          value={trainDescriptionSwitch}
-          onValueChange={setTrainDescriptionSwitch}
+      <Header
+        currentTrainLoading={currentTrainLoading}
+        setCurrentTrainLoading={setCurrentTrainLoading}
+        getCurrentTrain={getCurrentTrain}
+      />
+      {selectedTrain.map((d, index) => (
+        <EachData
+          d={d}
+          trainIDSwitch={trainIDSwitch}
+          trainDescriptionSwitch={trainDescriptionSwitch}
+          props={props}
+          currentTrain={currentTrain}
+          customTrainDataDetector={customTrainDataDetector}
+          navigate={props.navigate}
         />
-        <View style={{ flex: 1 }} />
-        <Text
-          style={{
-            alignItems: "center",
-            alignContent: "center",
-            textAlign: "center",
-            textAlignVertical: "center",
-            color: "white",
-          }}
-        >
-          当駅止表示
-        </Text>
-        <Switch value={finalSwitch} onValueChange={setFinalSwitch} />
-      </View>
+      ))}
+      <Footer
+        trainIDSwitch={trainIDSwitch}
+        setTrainIDSwitch={setTrainIDSwitch}
+        trainDescriptionSwitch={trainDescriptionSwitch}
+        setTrainDescriptionSwitch={setTrainDescriptionSwitch}
+        finalSwitch={finalSwitch}
+        setFinalSwitch={setFinalSwitch}
+      />
     </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>
+    </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 = ({
+  trainIDSwitch,
+  setTrainIDSwitch,
+  trainDescriptionSwitch,
+  setTrainDescriptionSwitch,
+  finalSwitch,
+  setFinalSwitch,
+}) => {
+  return (
+    <View style={{ flexDirection: "row", padding: 10 }}>
+      <Text
+        style={{
+          alignItems: "center",
+          alignContent: "center",
+          textAlign: "center",
+          textAlignVertical: "center",
+          color: "white",
+        }}
+      >
+        種別名 / 列番
+      </Text>
+      <Switch value={trainIDSwitch} onValueChange={setTrainIDSwitch} />
+      <View style={{ flex: 1 }} />
+      <Text
+        style={{
+          alignItems: "center",
+          alignContent: "center",
+          textAlign: "center",
+          textAlignVertical: "center",
+          color: "white",
+        }}
+      >
+        列車情報
+      </Text>
+      <Switch
+        value={trainDescriptionSwitch}
+        onValueChange={setTrainDescriptionSwitch}
+      />
+      <View style={{ flex: 1 }} />
+      <Text
+        style={{
+          alignItems: "center",
+          alignContent: "center",
+          textAlign: "center",
+          textAlignVertical: "center",
+          color: "white",
+        }}
+      >
+        当駅止表示
+      </Text>
+      <Switch value={finalSwitch} onValueChange={setFinalSwitch} />
+    </View>
+  );
+};
+
+const EachData = ({
+  d,
+  trainIDSwitch,
+  trainDescriptionSwitch,
+  props,
+  currentTrain,
+  customTrainDataDetector,
+  navigate,
+}) => {
+  const getTrainType = (data) => {
+    switch (data) {
+      case "Rapid":
+        return { color: "aqua", name: "快速" };
+      case "LTDEXP":
+        return { color: "red", name: "特急" };
+      case "NightLTDEXP":
+        return { color: "red", name: "寝台特急" };
+      case "Normal":
+        return { color: "white", name: "普通列車" };
+    }
+  };
+  const [train, setTrain] = useState(customTrainDataDetector(d.train));
+  useEffect(() => {
+    setTrain(customTrainDataDetector(d.train));
+  }, [currentTrain, d.train, trainDescriptionSwitch]);
+  return (
+    <>
+      <TouchableOpacity
+        style={{
+          alignContent: "center",
+          alignItems: "center",
+          width: "94%",
+          marginVertical: 5,
+          marginHorizontal: "3%",
+          backgroundColor: "#000",
+          flexDirection: "row",
+        }}
+        onPress={() => {
+          if (train.type != "Normal") {
+            navigate("trainbase", {
+              info: "train.html?tn=" + d.train,
+              from: "LED",
+            });
+          }
+        }}
+      >
+        <TrainName
+          train={train}
+          trainIDSwitch={trainIDSwitch}
+          d={d}
+          getTrainType={getTrainType(train.type)}
+        />
+        <LastStation d={d} />
+        <DependTime d={d} />
+        <StatusAndDelay
+          currentTrain={currentTrain}
+          d={d}
+          props={props}
+          trainDescriptionSwitch={trainDescriptionSwitch}
+        />
+      </TouchableOpacity>
+      {trainDescriptionSwitch && !!train.info && <Description train={train} />}
+    </>
+  );
+};
+
+const TrainName = ({ train, trainIDSwitch, d, getTrainType }) => {
+  const { trainName, trainNumDistance } = train;
+  let TrainNumber = "";
+  if (trainNumDistance != undefined) {
+    const timeInfo =
+      parseInt(d.train.replace("M", "").replace("D", "")) - trainNumDistance;
+    TrainNumber = timeInfo + "号";
+  }
+  return (
+    <View style={{ flex: 9 }}>
+      <Text
+        style={{
+          fontSize: trainName.length > 6 ? 15 : 20,
+          color: getTrainType.color,
+          fontWeight: "bold",
+        }}
+      >
+        {trainIDSwitch
+          ? d.train
+          : `${getTrainType.name} ${trainName}${TrainNumber}`}
+      </Text>
+    </View>
+  );
+};
+
+const LastStation = ({ d }) => {
+  return (
+    <View style={{ flex: 4, flexDirection: "row" }}>
+      <Text
+        style={{
+          fontSize: d.lastStation.length > 4 ? 15 : 20,
+          color: "white",
+          fontWeight: "bold",
+        }}
+      >
+        {d.lastStation}
+      </Text>
+    </View>
+  );
+};
+const DependTime = ({ d }) => {
+  return (
+    <View style={{ flex: 3 }}>
+      <Text
+        style={{
+          fontSize: 20,
+          color: "white",
+          fontWeight: "bold",
+        }}
+      >
+        {d.time}
+      </Text>
+    </View>
+  );
+};
+
+const checkDuplicateTrainData = (currentTrainArray) => {
+  const notNyujoData = currentTrainArray.filter((d) => d.delay !== "入線");
+  if (currentTrainArray.length == 1) return currentTrainArray[0];
+  if (notNyujoData.length == 0) return currentTrainArray[0];
+  else return notNyujoData[0];
+};
+const StatusAndDelay = ({ currentTrain, d, props, trainDescriptionSwitch }) => {
+  const [status, setStatus] = useState("");
+  useEffect(() => {
+    const array = currentTrain.filter((a) => a.num == d.train);
+    const current = checkDuplicateTrainData(array);
+    // 土讃線複数存在対策
+    if (!current) return () => {};
+    const delay = current.delay;
+    switch (true) {
+      case delay === "入線":
+        if (current.Pos === props.station.Station_JP) {
+          setStatus("当駅始発");
+          break;
+        } else {
+          setStatus("発車前");
+          break;
+        }
+      case isNaN(delay):
+        setStatus(delay);
+        break;
+      case delay === 0:
+        setStatus("定刻通り");
+        break;
+      default:
+        setStatus(delay + "分遅れ");
+        break;
+    }
+  }, [currentTrain, d.train, trainDescriptionSwitch]);
+  return (
+    <View style={{ flex: 4 }}>
+      <Text
+        style={{
+          fontSize: 20,
+          color: "white",
+          fontWeight: "bold",
+        }}
+      >
+        {status}
+      </Text>
+    </View>
+  );
+};
+const Description = ({ train }) => {
+  return (
+    <View
+      style={{
+        alignContent: "center",
+        alignItems: "center",
+        width: "94%",
+        marginVertical: 5,
+        marginHorizontal: "3%",
+        backgroundColor: "#000",
+        flexDirection: "row",
+      }}
+    >
+      <View style={{ flex: 4 }}>
+        <Text
+          style={{
+            fontSize: 20,
+            color: "green",
+            fontWeight: "bold",
+          }}
+        >
+          {" "}
+          &gt; {train.info}
+        </Text>
+      </View>
+    </View>
+  );
+};

components/駅名表/Sign.js

@@ -12,10 +12,57 @@ import {
   widthPercentageToDP as wp,
   heightPercentageToDP as hp,
 } from "react-native-responsive-screen";
+import LottieView from "lottie-react-native";
 import { useInterval } from "../../lib/useInterval";
+import { AS } from "../../storageControl";
 
 export default function Sign(props) {
-  const { currentStation, originalStationList, oP } = props;
+  const {
+    currentStation,
+    originalStationList,
+    oP,
+    favoriteStation,
+    setFavoriteStation,
+  } = props;
+  const [nexPrePosition, setNexPrePosition] = useState(0);
+
+  const [preStation, setPreStation] = useState();
+  const [nexStation, setNexStation] = useState();
+  const [testButtonStatus, setTestButtonStatus] = useState(false);
+
+  useEffect(() => {
+    const isFavorite = favoriteStation.filter((d) => {
+      const compare = JSON.stringify(d);
+      const current = JSON.stringify(currentStation);
+      if (compare === current) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+    setTestButtonStatus(isFavorite.length != 0);
+  }, [favoriteStation, currentStation]);
+
+  useInterval(() => {
+    if (currentStation.length == 1) {
+      setNexPrePosition(0);
+      return () => {};
+    }
+    LayoutAnimation.easeInEaseOut();
+    setNexPrePosition(
+      nexPrePosition + 1 == currentStation.length ? 0 : nexPrePosition + 1
+    );
+  }, 2000);
+
+  useEffect(() => {
+    setNexPrePosition(0);
+    getPreNextStation(currentStation[0]);
+  }, [currentStation]);
+
+  useEffect(() => {
+    if (!currentStation[nexPrePosition]) return () => {};
+    getPreNextStation(currentStation[nexPrePosition]);
+  }, [nexPrePosition]);
   const getPreNextStation = (now) => {
     const lineList = [
       "予讃線",
@@ -40,101 +87,128 @@ export default function Sign(props) {
         ];
       }
     });
-    return returnData;
+    setPreStation(returnData[0]);
+    setNexStation(returnData[1]);
   };
-  const [nexPrePosition, setNexPrePosition] = useState(0);
-  useInterval(() => {
-    if (currentStation.length == 1) return;
-    LayoutAnimation.easeInEaseOut();
-    setNexPrePosition(
-      nexPrePosition + 1 == currentStation.length ? 0 : nexPrePosition + 1
-    );
-  }, 2000);
+  const lottieRef = useRef();
   return (
     <TouchableOpacity style={styleSheet.外枠} onPress={oP}>
       <StationNumberMaker currentStation={currentStation} />
       <StationNameArea currentStation={currentStation} />
+      <TouchableOpacity
+        style={{ position: "absolute", right: -15, top: -20 }}
+        onPress={() => {
+          if (testButtonStatus) {
+            lottieRef.current.play(35, 7);
+            const otherData = favoriteStation.filter((d) => {
+              const compare = JSON.stringify(d);
+              const current = JSON.stringify(currentStation);
+              if (compare !== current) {
+                return true;
+              } else {
+                return false;
+              }
+            });
+            AS.setItem("favoriteStation", JSON.stringify(otherData));
+            setFavoriteStation(otherData);
+          } else {
+            lottieRef.current.play(7, 35);
+            let ret = favoriteStation;
+            console.log(currentStation);
+            ret.push(currentStation);
+            AS.setItem("favoriteStation", JSON.stringify(ret));
+            setFavoriteStation(ret);
+          }
+          setTestButtonStatus(!testButtonStatus);
+        }}
+      >
+        <LottieView
+          progress={testButtonStatus ? 1 : 0}
+          speed={1.4}
+          style={{ width: 80, height: 80 }}
+          source={require("../../assets/939-star.json")}
+          ref={lottieRef}
+          loop={false}
+        />
+      </TouchableOpacity>
+
       <Text style={styleSheet.JRStyle}>JR</Text>
       <View style={styleSheet.下帯} />
       <View style={styleSheet.下帯内容}>
-        {(() => {
-          let [preStation, nexStation] = getPreNextStation(
-            currentStation[nexPrePosition]
-          );
-          return (
-            <View style={styleSheet.下枠フレーム}>
-              <View style={styleSheet.下枠フレーム}>
-                {preStation && (
-                  <>
-                    <Text style={styleSheet.下枠左右マーク}>◀</Text>
-                    {preStation.StationNumber && (
-                      <View style={styleSheet.下枠駅ナンバー}>
-                        <View style={{ flex: 1 }} />
-                        <Text
-                          style={{
-                            fontSize: parseInt("10%"),
-                            color: "white",
-                          }}
-                        >
-                          {preStation.StationNumber}
-                        </Text>
-                        <View style={{ flex: 1 }} />
-                      </View>
-                    )}
-                    <StationName
-                      stringData={preStation}
-                      ss={{ flex: 1, alignItems: "flex-start" }}
-                    />
-                  </>
-                )}
-              </View>
-              <View style={styleSheet.下枠フレーム}>
-                {nexStation && (
-                  <>
-                    <StationName
-                      stringData={nexStation}
-                      ss={{ flex: 1, alignItems: "flex-end" }}
-                    />
-                    {nexStation.StationNumber && (
-                      <View style={styleSheet.下枠駅ナンバー}>
-                        <View style={{ flex: 1 }} />
-                        <Text
-                          style={{ fontSize: parseInt("10%"), color: "white" }}
-                        >
-                          {nexStation.StationNumber}
-                        </Text>
-                        <View style={{ flex: 1 }} />
-                      </View>
-                    )}
-                    <Text style={styleSheet.下枠左右マーク}>▶</Text>
-                  </>
-                )}
-              </View>
-            </View>
-          );
-        })()}
+        <NexPreStationLine preStation={preStation} nexStation={nexStation} />
       </View>
     </TouchableOpacity>
   );
 }
 
+const NexPreStationLine = ({ nexStation, preStation }) => {
+  return (
+    <View style={styleSheet.下枠フレーム}>
+      <View style={styleSheet.下枠フレーム}>
+        {preStation && (
+          <>
+            <Text style={styleSheet.下枠左右マーク}>◀</Text>
+            {preStation.StationNumber && (
+              <View style={styleSheet.下枠駅ナンバー}>
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    fontSize: parseInt("10%"),
+                    color: "white",
+                  }}
+                >
+                  {preStation.StationNumber}
+                </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            )}
+            <StationName
+              stringData={preStation}
+              ss={{ flex: 1, alignItems: "flex-start" }}
+            />
+          </>
+        )}
+      </View>
+      <View style={styleSheet.下枠フレーム}>
+        {nexStation && (
+          <>
+            <StationName
+              stringData={nexStation}
+              ss={{ flex: 1, alignItems: "flex-end" }}
+            />
+            {nexStation.StationNumber && (
+              <View style={styleSheet.下枠駅ナンバー}>
+                <View style={{ flex: 1 }} />
+                <Text style={{ fontSize: parseInt("10%"), color: "white" }}>
+                  {nexStation.StationNumber}
+                </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            )}
+            <Text style={styleSheet.下枠左右マーク}>▶</Text>
+          </>
+        )}
+      </View>
+    </View>
+  );
+};
+
 const StationNumberMaker = (props) => {
+  const getTop = (array, index) => {
+    if (array.length == 1) return 20;
+    else if (index == 0) return 5;
+    else if (index == 1) return 35;
+    else return 20;
+  };
   return props.currentStation
     .filter((d) => (d.StationNumber ? true : false))
     .map((d, index, array) => (
       <View
-        key={d + index}
         style={{
           position: "absolute",
           alignContent: "center",
           alignItems: "center",
-          top:
-            (() => {
-              if (array.length == 1) return 20;
-              else if (index == 0) return 5;
-              else if (index == 1) return 35;
-              else return 20;
-            })() + "%",
+          top: getTop(array, index) + "%",
           right: "10%",
           width: wp("10%"),
           height: wp("10%"),
@@ -185,8 +259,7 @@ const styleSheet = {
     height: (wp("80%") / 20) * 9,
     borderColor: "#2E94BB",
     borderWidth: 1,
-    margin: 10,
-    marginHorizontal: wp("10%"),
+    backgroundColor: "white",
   },
   下帯: {
     position: "absolute",

eas.json

@@ -15,6 +15,12 @@
     },
     "production": {
       "releaseChannel": "aliexpress"
+    },
+    "beta4.5": {
+      "releaseChannel": "base"
+    },
+    "production4.5": {
+      "releaseChannel": "buyma"
     }
   },
   "submit": {

howto.js

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

lib/getStationList.js

@@ -18,6 +18,18 @@ import train_lang from "../assets/originData/train_lang";
 
 let status = undefined;
 
+export const lineList = [
+  "予讃線",
+  "松宇線",
+  "伊予灘線",
+  "土讃線",
+  "窪川線",
+  "高徳線",
+  "徳島線",
+  "鳴門線",
+  "瀬戸大橋線",
+];
+
 export const getStationList = async (props) => {
   if (status) return status;
   //駅リストイニシャライズ

lib/objectIsEmpty.js

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

lib/webViewInjectjavascript.js

@@ -109,7 +109,7 @@ case "1017M":
 case "1025M":
 case "1027M":
 case "1029M":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000no.png');
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/s8000nr.png');
   break;
 
 //8000 アンパン
@@ -135,7 +135,7 @@ case "1023M":
 //MEXP
 //8000
 case "1092M":
-  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000no.png');
+  setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000nr.png');
   break;
 //8600
 case "1091M":

menu.js

@@ -1,6 +1,6 @@
-import React, { Component, useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect } from "react";
+import Carousel from "react-native-snap-carousel";
 import {
-  StatusBar,
   Platform,
   View,
   LayoutAnimation,
@@ -9,49 +9,38 @@ import {
   Text,
   TouchableOpacity,
 } from "react-native";
-import Image from "react-native-remote-svg";
 import Constants from "expo-constants";
-import { List, ListItem } from "native-base";
+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,
-  heightPercentageToDP as hp,
-} from "react-native-responsive-screen";
+import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import {
   FontAwesome,
-  Fontisto,
   Foundation,
   Ionicons,
   MaterialCommunityIcons,
 } from "@expo/vector-icons";
-import * as WebBrowser from "expo-web-browser";
-import ActionSheet from "react-native-actions-sheet";
 import LottieView from "lottie-react-native";
-import SvgUri from "react-native-svg-uri";
 import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
 
-import 予讃線 from "./assets/四国旅客鉄道予讃線.json";
-import 土讃線 from "./assets/四国旅客鉄道土讃線.json";
-import 高徳線 from "./assets/四国旅客鉄道高徳線.json";
-import 内子線 from "./assets/四国旅客鉄道内子線.json";
-import 徳島線 from "./assets/四国旅客鉄道徳島線.json";
-import 鳴門線 from "./assets/四国旅客鉄道鳴門線.json";
 import LED_vision from "./components/発車時刻表/LED_vidion";
 import Sign from "./components/駅名表/Sign";
 
 import { UsefulBox } from "./components/atom/UsefulBox";
 import { TicketBox } from "./components/atom/TicketBox";
 import { TextBox } from "./components/atom/TextBox";
-import { getStationList } from "./lib/getStationList";
+import { getStationList, lineList } from "./lib/getStationList";
 import { JRSTraInfo } from "./components/ActionSheetComponents/JRSTraInfo";
+import useInterval from "./lib/useInterval";
 
 export default function Menu(props) {
   const {
     navigation: { navigate },
+    favoriteStation,
+    setFavoriteStation,
   } = props;
   const JRSTraInfoEXAcSR = useRef(null);
   const StationBoardAcSR = useRef(null);
@@ -59,26 +48,48 @@ export default function Menu(props) {
 
   //位置情報
   const [location, setLocation] = useState(null);
-  const [errorMsg, setErrorMsg] = useState(null);
+  const [locationStatus, setLocationStatus] = useState(null);
   useEffect(() => {
     Location.requestForegroundPermissionsAsync().then((data) => {
-      if (data.status !== "granted") {
-        setErrorMsg("Permission to access location was denied");
-        return () => {};
-      }
-      Location.getCurrentPositionAsync({}).then((location) =>
-        setLocation(location)
-      );
+      setLocationStatus(data.status);
     });
-    setInterval(() => {
-      Location.getCurrentPositionAsync({}).then((location) =>
-        setLocation(location)
-      );
-    }, 10000);
   }, []);
+  useEffect(() => {
+    if (locationStatus !== "granted") return () => {};
+    getCurrentPosition();
+  }, [locationStatus]);
+
+  const getCurrentPosition = () => {
+    Location.getCurrentPositionAsync({}).then((location) =>
+      setLocation(location)
+    );
+  };
+
+  useInterval(() => {
+    if (locationStatus !== "granted") return () => {};
+    getCurrentPosition();
+  }, 5000);
 
   const [originalStationList, setOriginalStationList] = useState();
-  useEffect(() => getStationList().then(setOriginalStationList), []);
+  useEffect(() => {
+    getStationList().then(setOriginalStationList);
+  }, []);
+
+  const [locationAndFavorite, setLocationAndFavorite] = useState([]);
+  useEffect(() => {
+    if (!favoriteStation) return () => {};
+    const data = favoriteStation.filter((d) =>
+      JSON.stringify(d) === JSON.stringify(currentStation) ? false : true
+    );
+    setLocationAndFavorite(data);
+  }, [currentStation, favoriteStation]);
+
+  useEffect(() => {
+    if (!(selectedCurrentStation < favoriteStation.length)) {
+      setSelectedCurrentStation(favoriteStation.length - 1);
+      carouselRef.current.snapToItem(favoriteStation.length - 1);
+    }
+  }, [favoriteStation]);
 
   const [stationName, setStationName] = useState(undefined);
   const [currentStation, setCurrentStation] = useState(undefined);
@@ -102,17 +113,6 @@ export default function Menu(props) {
       return NearStation;
     };
 
-    const lineList = [
-      "予讃線",
-      "松宇線",
-      "伊予灘線",
-      "土讃線",
-      "窪川線",
-      "高徳線",
-      "徳島線",
-      "鳴門線",
-      "瀬戸大橋線",
-    ];
     let returnDataBase = lineList
       .map((d) => findStationEachLine(originalStationList[d]))
       .filter((d) => d.length > 0)
@@ -120,7 +120,7 @@ export default function Menu(props) {
         pre.push(...current);
         return pre;
       }, []);
-    LayoutAnimation.spring();
+    LayoutAnimation.easeInEaseOut();
     if (returnDataBase.length) {
       let currentStation = currentStation == undefined ? [] : currentStation;
       if (currentStation.toString() != returnDataBase.toString()) {
@@ -136,6 +136,10 @@ export default function Menu(props) {
   const [delayData, setDelayData] = useState(undefined);
   const [getTime, setGetTime] = useState(new Date());
   const [loadingDelayData, setLoadingDelayData] = useState(true);
+  const carouselRef = useRef();
+  const scrollRef = useRef();
+  const [isScroll, setIsScroll] = useState(true);
+  const [selectedCurrentStation, setSelectedCurrentStation] = useState(0);
 
   useEffect(() => {
     fetch(
@@ -157,52 +161,9 @@ export default function Menu(props) {
       }}
     >
       <StatusbarDetect />
-      <View style={{ alignItems: "center" }}>
-        <TouchableOpacity
-          onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
-        >
-          <AutoHeightImage
-            source={require("./assets/Header.png")}
-            resizeMode="contain"
-            width={wp("100%")}
-          />
-        </TouchableOpacity>
-      </View>
-      <ScrollView>
-        <View style={{ flexDirection: "row" }}>
-          <UsefulBox
-            backgroundColor={"#F89038"}
-            icon="train-car"
-            flex={1}
-            onPressButton={() =>
-              Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/")
-            }
-          >
-            駅・鉄道情報
-          </UsefulBox>
-          <UsefulBox
-            backgroundColor={"#EA4752"}
-            icon="google-spreadsheet"
-            flex={1}
-            onPressButton={() =>
-              Linking.openURL(
-                "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
-              )
-            }
-          >
-            運賃表
-          </UsefulBox>
-          <UsefulBox
-            backgroundColor={"#91C31F"}
-            icon="clipboard-list-outline"
-            flex={1}
-            onPressButton={() =>
-              Linking.openURL("https://www.jr-shikoku.co.jp/e5489/")
-            }
-          >
-            予約
-          </UsefulBox>
-        </View>
+      <TitleBar />
+      <ScrollView ref={scrollRef} scrollEnabled={isScroll}>
+        <TopMenuButton />
         <TextBox
           backgroundColor="#0099CC"
           flex={1}
@@ -219,127 +180,55 @@ export default function Menu(props) {
             列車の運行計画・混雑状況・感染症対策への取り組み
           </Text>
         </TextBox>
-        {currentStation && (
-          <>
-            <Sign
-              currentStation={currentStation}
-              originalStationList={originalStationList}
-              oP={StationBoardAcSR.current?.setModalVisible}
-            />
-            <LED_vision station={currentStation[0]} />
-          </>
-        )}
-        <TouchableOpacity onPress={JRSTraInfoEXAcSR.current?.setModalVisible}>
-          <View
-            style={{
-              backgroundColor: "#0099CC",
-              borderRadius: 5,
-              margin: 10,
-              borderColor: "black",
-              borderWidth: 2,
-              overflow: "hidden",
-            }}
-          >
-            <ScrollView
-              scrollEnabled={false}
-              style={{
-                backgroundColor: "#0099CC",
-                borderRadius: 5,
-                maxHeight: 300,
-              }}
-            >
-              <View
-                style={{
-                  padding: 10,
-                  flexDirection: "row",
-                  alignItems: "center",
-                }}
-              >
-                <Text
-                  style={{ fontSize: 30, fontWeight: "bold", color: "white" }}
-                >
-                  列車遅延速報EX
-                </Text>
-                <View style={{ flex: 1 }} />
-                <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);
-                  }}
+        <Carousel
+          ref={carouselRef}
+          layout={"default"}
+          data={
+            originalStationList &&
+            (currentStation
+              ? [currentStation, ...locationAndFavorite]
+              : locationAndFavorite)
+          }
+          sliderWidth={wp("100%")}
+          itemWidth={wp("80%")}
+          enableMomentum
+          callbackOffsetMargin={1000}
+          activeAnimationOptions={0.3}
+          onSnapToItem={(d) => {
+            setSelectedCurrentStation(d);
+          }}
+          renderItem={({ item, index }) => {
+            return (
+              <View style={{ marginVertical: 10 }} key={item[0].StationNumber}>
+                <Sign
+                  currentStation={item}
+                  originalStationList={originalStationList}
+                  favoriteStation={favoriteStation}
+                  setFavoriteStation={setFavoriteStation}
+                  oP={StationBoardAcSR.current?.setModalVisible}
                 />
               </View>
-              <View
-                style={{
-                  padding: 10,
-                  backgroundColor: "white",
-                  borderBottomLeftRadius: 5,
-                  borderBottomRightRadius: 5,
-                }}
-              >
-                {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" }}>
-                        <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>
-            </ScrollView>
-            <View
-              style={{
-                position: "absolute",
-                top: 250,
-                alignItems: "center",
-                width: "100%",
-                height: 50,
-                backgroundColor: "#007FCC88",
-              }}
-            >
-              <View style={{ flex: 1 }} />
-              <Text
-                style={{ color: "white", fontWeight: "bold", fontSize: 20 }}
-              >
-                詳細を見る
-              </Text>
-              <View style={{ flex: 1 }} />
-            </View>
-          </View>
-        </TouchableOpacity>
+            );
+          }}
+        />
+        {(currentStation || originalStationList) && (
+          <LED_vision
+            station={
+              originalStationList &&
+              (currentStation
+                ? [currentStation, ...locationAndFavorite]
+                : locationAndFavorite)[selectedCurrentStation][0]
+            }
+            navigate={navigate}
+          />
+        )}
+        <JRSTraInfoBox
+          JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
+          getTime={getTime}
+          setLoadingDelayData={setLoadingDelayData}
+          loadingDelayData={loadingDelayData}
+          delayData={delayData}
+        />
 
         <View style={{ flexDirection: "row" }}>
           <TicketBox
@@ -622,8 +511,15 @@ export default function Menu(props) {
       </ScrollView>
       <StationDeteilView
         StationBoardAcSR={StationBoardAcSR}
-        currentStation={currentStation}
+        currentStation={
+          originalStationList &&
+          (currentStation
+            ? [currentStation, ...locationAndFavorite]
+            : locationAndFavorite)[selectedCurrentStation]
+        }
         originalStationList={originalStationList}
+        favoriteStation={favoriteStation}
+        setFavoriteStation={setFavoriteStation}
       />
       <JRSTraInfo
         JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
@@ -635,3 +531,168 @@ export default function Menu(props) {
     </View>
   );
 }
+
+const TitleBar = () => {
+  return (
+    <View style={{ alignItems: "center" }}>
+      <TouchableOpacity
+        onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
+      >
+        <AutoHeightImage
+          source={require("./assets/Header.png")}
+          resizeMode="contain"
+          width={wp("100%")}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const TopMenuButton = () => {
+  const buttonList = [
+    {
+      backgroundColor: "#F89038",
+      icon: "train-car",
+      onPress: () =>
+        Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"),
+      title: "駅・鉄道情報",
+    },
+    {
+      backgroundColor: "#EA4752",
+      icon: "google-spreadsheet",
+      onPress: () =>
+        Linking.openURL(
+          "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
+        ),
+      title: "運賃表",
+    },
+    {
+      backgroundColor: "#91C31F",
+      icon: "clipboard-list-outline",
+      onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"),
+      title: "予約",
+    },
+  ];
+  return (
+    <View style={{ flexDirection: "row" }}>
+      {buttonList.map((d, index) => (
+        <UsefulBox
+          backgroundColor={d.backgroundColor}
+          icon={d.icon}
+          flex={1}
+          onPressButton={d.onPress}
+          key={index + d.icon}
+        >
+          {d.title}
+        </UsefulBox>
+      ))}
+    </View>
+  );
+};
+
+const JRSTraInfoBox = (props) => {
+  const {
+    JRSTraInfoEXAcSR,
+    getTime,
+    setLoadingDelayData,
+    loadingDelayData,
+    delayData,
+  } = props;
+  const styles = {
+    touch: {
+      backgroundColor: "#0099CC",
+      borderRadius: 5,
+      margin: 10,
+      borderColor: "black",
+      borderWidth: 2,
+      overflow: "hidden",
+    },
+    scroll: {
+      backgroundColor: "#0099CC",
+      borderRadius: 5,
+      maxHeight: 300,
+    },
+    bottom: {
+      position: "absolute",
+      top: 250,
+      alignItems: "center",
+      width: "100%",
+      height: 50,
+      backgroundColor: "#007FCC88",
+    },
+    box: {
+      padding: 10,
+      backgroundColor: "white",
+      borderBottomLeftRadius: 5,
+      borderBottomRightRadius: 5,
+    },
+  };
+  return (
+    <TouchableOpacity
+      onPress={JRSTraInfoEXAcSR.current?.setModalVisible}
+      style={styles.touch}
+    >
+      <ScrollView scrollEnabled={false} style={styles.scroll}>
+        <View
+          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+        >
+          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+            列車遅延速報EX
+          </Text>
+          <View style={{ flex: 1 }} />
+          <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>
+        <View style={styles.box}>
+          {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, index) => {
+              let data = d.split(" ");
+              return (
+                <View style={{ flexDirection: "row" }} key={data[1] + "key"}>
+                  <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>
+      </ScrollView>
+      <View style={styles.bottom}>
+        <View style={{ flex: 1 }} />
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          詳細を見る
+        </Text>
+        <View style={{ flex: 1 }} />
+      </View>
+    </TouchableOpacity>
+  );
+};

ndView.js

@@ -1,8 +1,7 @@
-import React, { Component } from "react";
-import { StatusBar, View, Linking, Platform, Text } from "react-native";
+import React from "react";
+import { View, Platform } from "react-native";
 import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
-import { TouchableOpacity } from "react-native-gesture-handler";
 export default function tndView() {
   return (
     <View

package.json

@@ -36,6 +36,7 @@
     "react-native-router-flux": "^4.3.1",
     "react-native-safe-area-context": "4.2.4",
     "react-native-screens": "~3.11.1",
+    "react-native-snap-carousel": "^3.9.1",
     "react-native-storage": "^1.0.1",
     "react-native-svg": "12.3.0",
     "react-native-svg-uri": "^1.2.3",

storageConfig.js

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

storageControl.js

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

trainbaseview.js

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

yarn.lock

@@ -5167,6 +5167,19 @@ fbjs-css-vars@^1.0.0:
   resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
   integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
 
+fbjs@^0.8.4:
+  version "0.8.18"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.18.tgz#9835e0addb9aca2eff53295cd79ca1cfc7c9662a"
+  integrity sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.30"
+
 fbjs@^0.8.9:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
@@ -8399,7 +8412,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@*:
+prop-types@*, prop-types@^15.6.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8549,6 +8562,14 @@ rc@~1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-addons-shallow-compare@15.6.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.6.2.tgz#198a00b91fc37623db64a28fd17b596ba362702f"
+  integrity sha512-yAV9tOObmKPiohqne1jiMcx6kDjfz7GeL8K9KHgI+HvDsbrRv148uyUzrPc6GwepZnQcJ59Q3lp1ghrkyPwtjg==
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"
+
 react-devtools-core@^4.23.0:
   version "4.24.7"
   resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.24.7.tgz#43df22e6d244ed8286fd3ff16a80813998fe82a0"
@@ -8741,6 +8762,14 @@ react-native-size-matters@^0.3.1:
   resolved "https://registry.yarnpkg.com/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz#24d0cfc335a2c730f6d58bd7b43ea5a41be4b49f"
   integrity sha512-mKOfBLIBFBcs9br1rlZDvxD5+mAl8Gfr5CounwJtxI6Z82rGrMO+Kgl9EIg3RMVf3G855a85YVqHJL2f5EDRlw==
 
+react-native-snap-carousel@^3.9.1:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/react-native-snap-carousel/-/react-native-snap-carousel-3.9.1.tgz#6fd9bd8839546c2c6043a41d2035afbc6fe0443e"
+  integrity sha512-xWEGusacIgK1YaDXLi7Gao2+ISLoGPVEBR8fcMf4tOOJQufutlNwkoLu0l6B8Qgsrre0nTxoVZikRgGRDWlLaQ==
+  dependencies:
+    prop-types "^15.6.1"
+    react-addons-shallow-compare "15.6.2"
+
 react-native-storage@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/react-native-storage/-/react-native-storage-1.0.1.tgz#2c493875ff76ec301987c951a8302f3a54381241"
@@ -10192,6 +10221,11 @@ ua-parser-js@^0.7.18:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
   integrity sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==
 
+ua-parser-js@^0.7.30:
+  version "0.7.33"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.33.tgz#1d04acb4ccef9293df6f70f2c3d22f3030d8b532"
+  integrity sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw==
+
 uglify-es@^3.1.9:
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"