6.0 update init

Apps.js

@@ -18,7 +18,7 @@ export function AppContainer() {
     name,
     options: {
       tabBarLabel: label,
-      headerTransparent: true,
+      headerShown: false,
       gestureEnabled: true,
       tabBarIcon: initIcon(icon, iconFamily),
       tabBarBadge,
@@ -27,27 +27,31 @@ export function AppContainer() {
   });
   const [fontLoaded, error] = useFonts({
     "JR-Nishi": require("./assets/fonts/jr-nishi.otf"),
-        "Zou": require("./assets/fonts/DelaGothicOne-Regular.ttf"),
+    Zou: require("./assets/fonts/DelaGothicOne-Regular.ttf"),
   });
   return (
-    <NavigationContainer name="Root" style={{ flex: 1 }} ref={navigationRef}>
+    <NavigationContainer ref={navigationRef}>
       <Tab.Navigator
         tabBarOptions={{ keyboardHidesTabBar: Platform.OS === "android" }}
-        initialRouteName="menuPage"
+        initialRouteName="topMenu"
+        screenOptions={{
+          animation: "shift",
+          tabBarVariant: "uikit",
+        }}
         lazy={false}
       >
         <Tab.Screen
-          {...getTabProps("login", "位置情報", "barchart", "AntDesign")}
+          {...getTabProps("positions", "走行位置", "barchart", "AntDesign")}
-          children={(props) => <Top {...props} navigationRef={navigationRef} />}
+          component={Top}
         />
         <Tab.Screen
-          {...getTabProps("menuPage", "リンク", "radio", "Ionicons")}
+          {...getTabProps("topMenu", "トップメニュー", "radio", "Ionicons")}
           component={MenuPage}
         />
 
         <Tab.Screen
           {...getTabProps(
-            "home",
+            "information",
             "運行情報",
             "train",
             "Ionicons",
@@ -57,7 +61,7 @@ export function AppContainer() {
               color: "white",
             }
           )}
-          children={(props) => <TNDView {...props} />}
+          children={TNDView}
         />
       </Tab.Navigator>
     </NavigationContainer>

MenuPage.js

@@ -1,8 +1,6 @@
 import React, { useEffect } from "react";
-import {
+import { createStackNavigator } from "@react-navigation/stack";
-  createStackNavigator,
+import { CommonActions } from "@react-navigation/native";
-  TransitionPresets,
-} from "@react-navigation/stack";
 import { AS } from "./storageControl";
 import TrainBase from "./components/trainbaseview";
 import HowTo from "./howto";
@@ -20,7 +18,8 @@ export function MenuPage() {
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
   const { getCurrentTrain } = useCurrentTrain();
   const navigation = useNavigation();
-  const { addListener } = navigation;
+  const { addListener, dispatch } = navigation;
+  dispatch(CommonActions.preload("positions"));
   useEffect(() => {
     AS.getItem("startPage")
       .then((res) => {
@@ -67,13 +66,8 @@ export function MenuPage() {
       />
       <Stack.Screen
         name="trainbase"
-        options={{ ...optionData, gestureResponseDistance: { vertical: 300 } }}
+        options={{ ...optionData }}
-        children={(props) => <TrainBase {...props} />}
+        component={TrainBase}
-      />
-      <Stack.Screen
-        name="currentTrainIDList"
-        options={{ ...optionData, gestureResponseDistance: { vertical: 300 } }}
-        component={CurrentTrainListView}
       />
       <Stack.Screen
         name="AllTrainIDList"

Top.js

@@ -1,8 +1,6 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect } from "react";
-import {
+import { createStackNavigator } from "@react-navigation/stack";
-  createStackNavigator,
+import { useNavigation } from "@react-navigation/native";
-  TransitionPresets,
-} from "@react-navigation/stack";
 import Apps from "./components/Apps";
 import TrainBase from "./components/trainbaseview";
 import HowTo from "./howto";
@@ -10,91 +8,76 @@ import News from "./components/news";
 import TrainMenu from "./components/trainMenu";
 import FavoriteList from "./components/FavoriteList";
 import { optionData } from "./lib/stackOption";
-import { useNavigation } from "@react-navigation/native";
 import { useCurrentTrain } from "./stateBox/useCurrentTrain";
 import { useTrainMenu } from "./stateBox/useTrainMenu";
 import { AS } from "./storageControl";
 import { news } from "./config/newsUpdate";
 const Stack = createStackNavigator();
-export const Top = ({ navigationRef }) => {
+export const Top = () => {
   const { webview } = useCurrentTrain();
-  const { navigate, addListener } = useNavigation();
+  const { navigate, addListener, isFocused } = useNavigation();
-
 
   useEffect(() => {
     //ニュース表示
     AS.getItem("status")
       .then((d) => {
-        if (d != news) navigate("news");
+        if (d != news) navigate("positions", { screen: "news" });
       })
-      .catch(() => navigate("news"));
+      .catch(() => navigate("positions", { screen: "news" }));
   }, []);
 
-
-
   //地図用
-  const { injectJavaScript, setInjectJavaScript, mapSwitch } = useTrainMenu();
+  const { injectJavaScript, mapSwitch } = useTrainMenu();
 
-  const goToFavoriteList = () => navigate("favoriteList");
+  const goToFavoriteList = () =>
+    navigate("positions", { screen: "favoriteList" });
 
   useEffect(() => {
     const unsubscribe = addListener("tabLongPress", goToFavoriteList);
     return unsubscribe;
-  }, [{ navigate, addListener }]);
+  }, []);
 
   const goToTrainMenu = () => {
-    if (navigationRef.current?.getCurrentRoute().name == "Apps") {
+    if (!isFocused()) {
+      navigate("positions", { screen: "Apps" });
+    }
     if (mapSwitch == "true") {
-        navigate("trainMenu");
+      navigate("positions", { screen: "trainMenu" });
-        setInjectJavaScript("");
     } else {
       webview.current?.injectJavaScript(`AccordionClassEvent()`);
     }
-    } else {
+    return;
-      if (mapSwitch == "true") {
-        if (injectJavaScript) {
-          webview.current?.injectJavaScript(injectJavaScript);
-          setInjectJavaScript("");
-        }
-      }
-      navigate("Apps");
-    }
   };
+
   useEffect(() => {
     const unsubscribe = addListener("tabPress", goToTrainMenu);
     return unsubscribe;
-  }, [{ navigate, addListener }, mapSwitch, injectJavaScript]);
+  }, [addListener, mapSwitch, injectJavaScript]);
 
   return (
-    <Stack.Navigator>
+    <Stack.Navigator detachInactiveScreens={false}>
       <Stack.Screen
         name="Apps"
         options={{
           headerShown: false,
           gestureEnabled: true,
           headerTransparent: true,
+          detachPreviousScreen: false,
         }}
         component={Apps}
       />
       <Stack.Screen
         name="trainbase"
-        options={{
+        options={{ ...optionData }}
-          title: "トレインビジョン",
-          gestureEnabled: true,
-          ...TransitionPresets.SlideFromRightIOS,
-        }}
         component={TrainBase}
       />
-
       <Stack.Screen name="howto" options={optionData} component={HowTo} />
       <Stack.Screen name="news" options={optionData} component={News} />
-
       <Stack.Screen
         name="trainMenu"
         options={optionData}
         component={TrainMenu}
       />
-
       <Stack.Screen
         name="favoriteList"
         options={{ ...optionData, gestureEnabled: false }}

app.json

@@ -2,9 +2,16 @@
   "expo": {
     "name": "JR四国運行状況",
     "slug": "jrshikoku",
-    "privacy": "public",
     "platforms": ["ios", "android"],
     "plugins": [
+      "expo-localization",
+      [
+        "expo-video",
+        {
+          "supportsBackgroundPlayback": true,
+          "supportsPictureInPicture": true
+        }
+      ],
       [
         "react-native-android-widget",
         {
@@ -34,14 +41,39 @@
         {
           "locationWhenInUsePermission": "この位置情報は、リンク画面で現在地側近の駅情報を取得するのに使用されます。"
         }
+      ],
+      [
+        "expo-alternate-app-icons",
+        [
+          {
+            "name": "EF65",
+            "ios": {
+              "light":"./assets/icons/ef65_rp0.png",
+              "dark":"./assets/icons/ef65_rp0.png",
+              "tinted":"./assets/icons/ef65_rp0.png"
+            },
+            "android": {
+              "foregroundImage": "./assets/icons/ef65_rp0.png", 
+              "backgroundColor": "#001413" 
+            }
+          },
+          {
+            "name": "8000NN",
+            "ios": "./assets/icons/s8000nn.png", 
+            "android": {
+              "foregroundImage": "./assets/icons/s8000nn.png",
+              "backgroundColor": "#001413"
+            }
+          }
+        ]
       ]
     ],
-    "version": "5.0",
+    "version": "6.0",
     "orientation": "default",
-    "icon": "./assets/icon.png",
+    "icon": "./assets/icons/s8000nn.png",
     "splash": {
       "image": "./assets/splash.png",
-      "resizeMode": "contain",
+      "resizeMode": "vertical",
       "backgroundColor": "#00b8ff"
     },
     "updates": {
@@ -64,13 +96,18 @@
         ]
       },
       "entitlements": {
-        "com.apple.developer.nfc.readersession.formats": ["TAG"]
+        "com.apple.developer.nfc.readersession.formats": [
+          "TAG"
+        ]
       }
     },
     "android": {
       "package": "jrshikokuinfo.xprocess.hrkn",
       "versionCode": 22,
-      "permissions": ["ACCESS_FINE_LOCATION", "NFC"],
+      "permissions": [
+        "ACCESS_FINE_LOCATION",
+        "NFC"
+      ],
       "googleServicesFile": "./google-services.json",
       "config": {
         "googleMaps": {

components/ActionSheetComponents/EachTrainInfo/TrainDataView.js

@@ -9,9 +9,6 @@ import { trainPosition } from "../../../lib/trainPositionTextArray";
 import { TrainPositionDataPush } from "../../発車時刻表/LED_inside_Component/TrainPositionDataPush";
 import { getStationID } from "../../../lib/eachTrainInfoCoreLib/getStationData";
 import { useStationList } from "../../../stateBox/useStationList";
-import { lineList } from "../../../lib/getStationList";
-
-
 
 export const TrainDataView = ({
   currentTrainData,
@@ -21,7 +18,6 @@ export const TrainDataView = ({
   mode = 0,
   navigate,
 }) => {
-  
   const { stationList } = useStationList();
 
   const { width, height } = useWindowDimensions();
@@ -62,7 +58,8 @@ export const TrainDataView = ({
   const [descInput, setDescInput] = useState("");
   const [stationInput, setStationInput] = useState("");
   const [stationNumberInput, setStationNumberInput] = useState("");
-  return (<>
+  return (
+    <>
       <TrainPositionDataPush
         dialog={dialog}
         setDialog={setDialog}
@@ -73,7 +70,11 @@ export const TrainDataView = ({
         descInput={descInput}
         setPosInput={setPosInput}
         setDescInput={setDescInput}
-        station={{Station_JP:trainPositionText(currentTrainData),StationNumber:currentPosition[0]}} />
+        station={{
+          Station_JP: trainPositionText(currentTrainData),
+          StationNumber: currentPosition[0],
+        }}
+      />
       <View
         style={{
           flexDirection: "row",
@@ -89,7 +90,10 @@ export const TrainDataView = ({
           onLongPress={() => {
             const { isBetween, Pos } = trainPosition(currentTrainData);
             if (isBetween === true) {
-            if (platformNumber == undefined && platformDescription == undefined)
+              if (
+                platformNumber == undefined &&
+                platformDescription == undefined
+              )
                 return;
               setStationInput(`${Pos.from}→${Pos.to}間`);
               setStationNumberInput(
@@ -108,7 +112,7 @@ export const TrainDataView = ({
             }
           }}
           onPress={() => {
-          if(!onLine) return;
+            if (!onLine) return;
             const test = [];
             Object.keys(mapsStationData).forEach((d) => {
               mapsStationData[d].forEach((x) => {
@@ -123,7 +127,7 @@ export const TrainDataView = ({
               }
             });
             if (!test.length) return;
-          navigate("Apps");
+            navigate("positions", { screen: "Apps" });
             inject(
               `MoveDisplayStation('${test[0].line}_${test[0].station.MyStation}_${test[0].station.Station_JP}');document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
             );

components/ActionSheetComponents/EachTrainInfoCore/trainViewIcon.tsx

@@ -13,7 +13,7 @@ export const TrainViewIcon: FC<Props> = ({ data, navigate, from }) => {
   const [isTrainView, setIsTrainView] = useState(false);
   //トレインビュー表示対象(特急、マリン)かを判定
   useEffect(() => {
-    if (!data.limited) return;
+    if (!data.limited) return () => {};
     setIsTrainView(
       getType(data.limited.split(":")[0]) &&
         !data.limited.split(":")[1].match("サンポート")

components/AllTrainDiagramView.js

@@ -20,7 +20,7 @@ import { useNavigation } from "@react-navigation/native";
 import { BigButton } from "./atom/BigButton";
 import { Switch } from "react-native-elements";
 export default function AllTrainDiagramView() {
-  const { navigate } = useNavigation();
+  const { goBack, navigate } = useNavigation();
   const { keyList, allTrainDiagram } = useAllTrainDiagram();
   const [input, setInput] = useState(""); // 文字入力
   const [keyBoardVisible, setKeyBoardVisible] = useState(false);
@@ -206,7 +206,7 @@ export default function AllTrainDiagramView() {
         </View>
       </KeyboardAvoidingView>
       <BigButton
-        onPress={() => navigate("menu")}
+        onPress={goBack}
         string="閉じる"
         style={{
           display:

components/CurrentTrainListView.js

@@ -4,12 +4,12 @@ import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useNavigation } from "@react-navigation/native";
 import { BigButton } from "./atom/BigButton";
 export default function CurrentTrainListView() {
-  const { navigate } = useNavigation();
+  const { goBack } = useNavigation();
   const { currentTrain } = useCurrentTrain();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       {currentTrain && currentTrain.map((d) => <Text>{d.num}</Text>)}
-      <BigButton onPress={() => navigate("menu")} string="閉じる" />
+      <BigButton onPress={goBack} string="閉じる" />
     </View>
   );
 }

components/FavoriteList.js

@@ -1,5 +1,5 @@
-import React from "react";
+import React, { useEffect } from "react";
-import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import { View, Text, ScrollView } from "react-native";
 
 import Icon from "react-native-vector-icons/Entypo";
 import { useFavoriteStation } from "../stateBox/useFavoriteStation";
@@ -11,9 +11,18 @@ import { BigButton } from "./atom/BigButton";
 export default function FavoriteList() {
   const { favoriteStation } = useFavoriteStation();
   const { webview } = useCurrentTrain();
-  const { navigate, goBack } = useNavigation();
+  const { navigate, addListener, goBack, canGoBack } = useNavigation();
   const { mapsStationData: stationData } = useTrainMenu();
 
+  useEffect(() => {
+    const unsubscribe = addListener("tabPress", goToTrainMenu);
+    return unsubscribe;
+  }, [{ navigate, addListener }]);
+
+  const goToTrainMenu = (e) => {
+    e.preventDefault();
+    goBack();
+  };
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <Text
@@ -50,7 +59,8 @@ export default function FavoriteList() {
                     `MoveDisplayStation('${lineName}_${currentStation[0].MyStation}_${currentStation[0].Station_JP}');
                     document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
                   );
-                  navigate("Apps");
+                  goBack();
+                  if (canGoBack()) goBack();
                 }}
               >
                 <View

components/Menu/FixedContentBottom.js

@@ -8,7 +8,6 @@ import {
 import Icon from "react-native-vector-icons/Entypo";
 import { TextBox } from "../atom/TextBox";
 import { TicketBox } from "../atom/TicketBox";
-import { ListItem } from "native-base";
 
 export const FixedContentBottom = (props) => {
   return (
@@ -249,11 +248,20 @@ export const FixedContentBottom = (props) => {
               name: "しこくたぬきのぽんちゃん　【四国家サポーターズクラブ】",
             },
           ].map((d) => (
-            <ListItem onPress={() => Linking.openURL(d.url)}>
+            <TouchableOpacity
+              onPress={() => Linking.openURL(d.url)}
+              style={{
+                flexDirection: "row",
+                padding: 5,
+                alignItems: "center",
+                borderBottomWidth: 1,
+                borderBottomColor: "white",
+              }}
+            >
               <Text>{d.name}</Text>
               <View style={{ flex: 1 }} />
               <Icon name="chevron-right" size={20} />
-            </ListItem>
+            </TouchableOpacity>
           ))}
         </View>
       </View>

components/Menu/StationPagination.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useState } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
-import { Pagination } from "react-native-snap-carousel";
 import { useInterval } from "../../lib/useInterval";
 
 import lineColorList from "../../assets/originData/lineColorList";
@@ -27,50 +26,12 @@ type StationPaginationProps = {
 };
 
 export const Paginations: FC<StationPaginationProps> = (props) => {
-  const {
+  const { entries, setSelectedCurrentStation } = props;
-    entries,
-    activeSlide,
-    carouselRef,
-    setSelectedCurrentStation,
-    dotButton,
-  } = props;
   return (
-    <Pagination
-      dotsLength={entries.length}
-      activeDotIndex={activeSlide}
-      carouselRef={carouselRef}
-      containerStyle={{ paddingVertical: 0 }}
-      dotStyle={{
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-        backgroundColor: "#0099CC",
-      }}
-      inactiveDotStyle={
-        {
-          // Define styles for inactive dots here
-        }
-      }
-      tappableDots={true}
-      inactiveDotOpacity={0.4}
-      inactiveDotScale={0.8}
-      inactiveDotElement={
-        dotButton && (
     <StationNumberMaker
       currentStations={entries}
       setSelectedCurrentStation={setSelectedCurrentStation}
     />
-        )
-      }
-      dotElement={
-        dotButton && (
-          <StationNumberMaker
-            currentStations={entries}
-            setSelectedCurrentStation={setSelectedCurrentStation}
-          />
-        )
-      }
-    />
   );
 };
 type StationNumberMakerProps = {

components/Settings/FavoriteSettings.js

@@ -1,17 +1,19 @@
 import React from "react";
 import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import { useNavigation } from "@react-navigation/native";
 import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
 import { CheckBox } from "react-native-elements";
 import { FavoriteSettingsItem } from "./FavoliteSettings/FavoiliteSettingsItem";
 
-export const FavoriteSettings = ({ navigate }) => {
+export const FavoriteSettings = () => {
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
+  const { goBack } = useNavigation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
         <View style={{ flex: 1 }}>
           <TouchableOpacity
-            onPress={() => navigate("settingTopPage")}
+            onPress={goBack}
             style={{
               flexDirection: "column",
               flex: 1,

components/Settings/LayoutSettings.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import { useNavigation } from "@react-navigation/native";
 import { SwitchArea } from "../atom/SwitchArea";
 import { CheckBox } from "react-native-elements";
 import { TripleSwitchArea } from "../atom/TripleSwitchArea";
@@ -21,12 +22,13 @@ export const LayoutSettings = ({
   headerSize,
   setHeaderSize,
 }) => {
+  const { goBack } = useNavigation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
         <View style={{ flex: 1 }}>
           <TouchableOpacity
-            onPress={() => navigate("settingTopPage")}
+            onPress={goBack}
             style={{
               flexDirection: "column",
               flex: 1,

components/Settings/NotificationSettings.js

@@ -1,12 +1,15 @@
 import React, { useEffect, useState } from "react";
 import { View, Text, TouchableOpacity, ScrollView,Clipboard } from "react-native";
+//import * as Clipboard from 'expo-clipboard';
 
 import { CheckBox } from "react-native-elements";
 import { AS } from "../../storageControl";
 import { useNotification } from "../../stateBox/useNotifications";
+import { useNavigation } from "@react-navigation/native";
 
-export const NotificationSettings = ({ navigate }) => {
+export const NotificationSettings = () => {
   const { expoPushToken } = useNotification();
+  const { goBack } = useNavigation();
   const [traInfoEX, setTraInfoEX] = useState(false);
   const [informations, setInformations] = useState(false);
   const [strangeTrain, setStrangeTrain] = useState(false);
@@ -21,9 +24,7 @@ export const NotificationSettings = ({ navigate }) => {
       <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
         <View style={{ flex: 1 }}>
           <TouchableOpacity
-            onPress={() => {
+            onPress={goBack}
-              navigate("settingTopPage");
-            }}
             style={{
               flexDirection: "column",
               flex: 1,
@@ -40,7 +41,7 @@ export const NotificationSettings = ({ navigate }) => {
                 padding: 10,
               }}
             >
-              ＜ 設定/送信
+              ＜ 設定
             </Text>
             <View style={{ flex: 1 }} />
           </TouchableOpacity>
@@ -79,7 +80,7 @@ export const NotificationSettings = ({ navigate }) => {
                   AS.setItem("traInfoEX", traInfoEX.toString()),
                   AS.setItem("informations", informations.toString()),
                   AS.setItem("strangeTrain", strangeTrain.toString()),
-                ]).then(()=>alert("通知の設定を保存、登録しました"));
+                ]).then(() => alert("通知の設定を保存、登録しました"));
               });
             }}
             style={{
@@ -120,9 +121,10 @@ export const NotificationSettings = ({ navigate }) => {
           setBool={setStrangeTrain}
           str="怪レい列車"
         />
-        <Text style={{fontWeight: "bold", padding: 10 }} onPress={()=>{
+        <Text
-          Clipboard.setString(expoPushToken);
+          style={{ fontWeight: "bold", padding: 10 }}
-        }}>
+          onPress={() => Clipboard.setStringAsync(expoPushToken)}
+        >
           通知を受け取りたい項目を選択してください。チェックボックスを選び、右上の「登録実行」を押すと設定が反映され、通知が届くようになります。
         </Text>
       </ScrollView>

components/Settings/SettingTopPage.js

@@ -10,6 +10,7 @@ import {
 } from "react-native";
 import * as Updates from "expo-updates";
 import { useWindowDimensions } from "react-native";
+import { useNavigation } from "@react-navigation/native";
 import { ListItem } from "native-base";
 import { SwitchArea } from "../atom/SwitchArea";
 import { useNotification } from "../../stateBox/useNotifications";
@@ -17,7 +18,6 @@ import { useNotification } from "../../stateBox/useNotifications";
 const versionCode = "5.6.0.2";
 
 export const SettingTopPage = ({
-  navigate,
   testNFC,
   startPage,
   setStartPage,
@@ -25,12 +25,13 @@ export const SettingTopPage = ({
 }) => {
   const { width } = useWindowDimensions();
   const { expoPushToken } = useNotification();
+  const navigation = useNavigation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
         <View style={{ flex: 1 }}>
           <TouchableOpacity
-            onPress={() => navigate("menu")}
+            onPress={() => navigation.goBack()}
             style={{
               flexDirection: "column",
               flex: 1,
@@ -120,7 +121,7 @@ export const SettingTopPage = ({
           />
           <ListItem
             style={{ flexDirection: "row" }}
-            onPress={() => navigate("FavoriteSettings")}
+            onPress={() => navigation.navigate("setting",{screen:"FavoriteSettings"})}
           >
             <Text
               style={{
@@ -148,7 +149,7 @@ export const SettingTopPage = ({
           </ListItem>
           <ListItem
             style={{ flexDirection: "row" }}
-            onPress={() => navigate("NotificationSettings")}
+            onPress={() => navigation.navigate("setting",{screen:"NotificationSettings"})}
             disabled={expoPushToken == ""}
           >
             <Text
@@ -177,7 +178,7 @@ export const SettingTopPage = ({
           </ListItem>
           <ListItem
             style={{ flexDirection: "row" }}
-            onPress={() => navigate("LayoutSettings")}
+            onPress={() => navigation.navigate("setting",{screen:"LayoutSettings"})}
           >
             <Text
               style={{
@@ -206,7 +207,7 @@ export const SettingTopPage = ({
           {Platform.OS === "android" ? (
             <ListItem
               style={{ flexDirection: "row" }}
-              onPress={() => navigate("WidgetSettings")}
+              onPress={() => navigation.navigate("setting",{screen:"WidgetSettings"})}
             >
               <Text
                 style={{

components/Settings/WidgetSettings.js

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { View, Text, TouchableOpacity, ScrollView } from "react-native";
-import { SwitchArea } from "../atom/SwitchArea";
+import { useNavigation } from "@react-navigation/native";
 import { CheckBox } from "react-native-elements";
-import { TripleSwitchArea } from "../atom/TripleSwitchArea";
 import { getWidgetInfo, WidgetPreview } from "react-native-android-widget";
 import { getDelayData } from "../AndroidWidget/TraInfoEXWidget";
 import { getInfoString } from "../AndroidWidget/InfoWidget";
@@ -12,6 +11,7 @@ import { ListItem } from "native-base";
 
 export const WidgetSettings = ({ navigate }) => {
   const { JR_shikoku_train_info, Info_Widget } = nameToWidget;
+  const { goBack } = useNavigation();
   const [time, setTime] = useState();
   const [delayString, setDelayString] = useState();
   const [trainInfo, setTrainInfo] = useState();
@@ -42,7 +42,7 @@ export const WidgetSettings = ({ navigate }) => {
       <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
         <View style={{ flex: 1 }}>
           <TouchableOpacity
-            onPress={() => navigate("settingTopPage")}
+            onPress={goBack}
             style={{
               flexDirection: "column",
               flex: 1,

components/TrainMenu/MapPin.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import { Marker } from "react-native-maps";
+import { useNavigation } from "@react-navigation/native";
 type Props = {
   index: number;
   indexBase: number;
@@ -12,6 +13,7 @@ type Props = {
 
 export const MapPin: FC<Props> = (props) => {
   const { index, indexBase, latlng, D, d, navigate, webview } = props;
+  const {goBack} = useNavigation();
   return (
     <Marker
       key={index + indexBase}
@@ -24,7 +26,7 @@ export const MapPin: FC<Props> = (props) => {
           `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');
           document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
         );
-        if (navigate) navigate("Apps");
+        if (navigate) goBack();
       }}
       image={require("../../assets/reccha-small.png")}
     ></Marker>

components/trainMenu.js

@@ -1,7 +1,6 @@
 import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
 import { View, Text, TouchableOpacity, Linking } from "react-native";
-import MapView, { Marker } from "react-native-maps";
+import MapView from "react-native-maps";
-import { MaterialCommunityIcons, Ionicons } from "@expo/vector-icons";
 import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useNavigation } from "@react-navigation/native";
 import lineColorList from "../assets/originData/lineColorList";
@@ -15,7 +14,7 @@ import { MapsButton } from "./TrainMenu/MapsButton";
 export default function TrainMenu({ style }) {
   const { webview } = useCurrentTrain();
   const mapRef = useRef();
-  const { navigate } = useNavigation();
+  const { navigate, goBack } = useNavigation();
   const [stationPin, setStationPin] = useState([]);
   const {
     selectedLine,
@@ -36,10 +35,9 @@ export default function TrainMenu({ style }) {
         ).split(",");
         if (latlng.length == 0) return null;
         if (index == 0 && stationPin.length > 0) {
-          setInjectJavaScript(
+          webview.current
-            `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');
+            ?.injectJavaScript(`MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');
-            document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
+              document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`);
-          );
         }
         stationPinData.push({ D, d, latlng, indexBase: 0, index });
       });
@@ -82,7 +80,7 @@ export default function TrainMenu({ style }) {
             d={d}
             navigate={navigate}
             webview={webview}
-            key={D.StationNumber+d}
+            key={D.StationNumber + d}
           />
         ))}
       </MapView>
@@ -201,7 +199,7 @@ export default function TrainMenu({ style }) {
       )}
       <MapsButton
         onPress={() => {
-          navigate("Apps");
+          goBack();
           webview.current?.injectJavaScript(injectJavaScript);
         }}
         top={0}

components/trainbaseview.js

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React from "react";
 import { StatusBar, Platform, View } from "react-native";
 import { WebView } from "react-native-webview";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
@@ -6,21 +6,19 @@ import { useNavigation } from "@react-navigation/native";
 import { BigButton } from "./atom/BigButton";
 
 export default function TrainBase({ route }) {
-  const { info, from } = route.params;
+  const { info } = route.params;
-  const { navigate } = useNavigation();
+  const { goBack } = useNavigation();
-  const webview = useRef();
   const jss = `document.getElementById('Footer').style.display = 'none';
   ${
-    Platform.OS == "ios" &&
+    Platform.OS == "ios"
-    `document.getElementsByTagName("html")[0].style['font-size'] = '11px';`
+      ? `document.getElementsByTagName("html")[0].style['font-size'] = '11px';`
+      : ""
   }`;
-  //const jss = `alert("ほげ")`;
   return (
     <View style={{ height: "100%" }}>
       {Platform.OS == "ios" && <StatusBar barStyle="dark-content" />}
       <WebView
-        //useWebKit={true}
+        useWebKit={true}
-        ref={webview}
         source={{ uri: "https://train.jr-shikoku.co.jp/" + info }}
         originWhitelist={[
           "https://train.jr-shikoku.co.jp",
@@ -30,20 +28,15 @@ export default function TrainBase({ route }) {
         javaScriptEnabled={true}
         injectedJavaScript={jss}
         setSupportMultipleWindows={false}
-        onMessage={(event) => {}}
       />
-      {(from == "LED" || from == "LED2" || from == "AllTrainIDList") && (
       <BigButton
         style={{ borderColor: "black" }}
         tS={{ color: "black" }}
         string="閉じる"
-          onPress={() =>
+        onPress={goBack}
-            navigate(from == "AllTrainIDList" ? "AllTrainIDList" : "menu")
-          }
       >
         <MaterialCommunityIcons name="close" color="black" size={30} />
       </BigButton>
-      )}
     </View>
   );
 }

howto.js

@@ -7,12 +7,11 @@ export default ({ navigation: { navigate }, route }) => {
   const { info, goTo, useShow } = route.params;
   const { goBack } = useNavigation();
   const onExit = () => {
-    if(goTo != "NearTrainDiagramView") {
+    if (goTo != "NearTrainDiagramView") {
-      navigate(goTo || "Apps");
+      //navigate(goTo || "Apps");
       useShow && useShow();
-    } else {
-      goBack();
     }
+    goBack();
   };
   return (
     <View style={styles}>

lib/initIcon.tsx

@@ -6,13 +6,13 @@ export const initIcon = (name: name, type:type) => {
   switch (type) {
     case "Ionicons":
       return ({ focused, color, size }) => (
-        <Ionicons name={name} size={32} color={focused ? "#0099CC" : "black"} />
+        <Ionicons name={name} size={30} color={focused ? "#0099CC" : "black"} />
       );
     case "AntDesign":
       return ({ focused, color, size }) => (
         <AntDesign
           name={name}
-          size={32}
+          size={30}
           color={focused ? "#0099CC" : "black"}
         />
       );

menu.js

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
-import Carousel, { Pagination } from "react-native-snap-carousel";
+import Carousel from "react-native-reanimated-carousel";
 import {
   Platform,
   View,
@@ -8,6 +8,7 @@ import {
   Text,
   TouchableOpacity,
   LayoutAnimation,
+  Dimensions,
 } from "react-native";
 import Constants from "expo-constants";
 import * as Location from "expo-location";
@@ -32,7 +33,7 @@ import { SheetManager } from "react-native-actions-sheet";
 import { useTrainDelayData } from "./stateBox/useTrainDelayData";
 import { useNavigation } from "@react-navigation/native";
 import { useStationList } from "./stateBox/useStationList";
-import { Paginations } from "./components/Menu/StationPagination";
+import { StationNumber } from "./components/Menu/StationPagination";
 import lineColorList from "./assets/originData/lineColorList";
 import { AS } from "./storageControl";
 
@@ -118,13 +119,13 @@ export default function Menu({ getCurrentTrain }) {
       const count = selectedCurrentStation - 1;
       setSelectedCurrentStation(count);
     }
-  }, [selectedCurrentStation, currentStation, favoriteStation]);
+  }, [selectedCurrentStation, currentStation, allStationData]);
   useEffect(() => {
     if (!carouselRef.current) return;
-    if (carouselRef.current?._itemToSnapTo != selectedCurrentStation) {
+    carouselRef?.current.scrollTo({
-      carouselRef.current.snapToItem(0);
+      count: selectedCurrentStation - carouselRef.current.getCurrentIndex(),
-      carouselRef.current.snapToItem(selectedCurrentStation);
+      animated: true,
-    }
+    });
   }, [selectedCurrentStation]);
 
   //全列車ダイヤリストを作成するuseEffect
@@ -174,10 +175,11 @@ export default function Menu({ getCurrentTrain }) {
     });
     AS.setItem(
       "CarouselSettings/activeDotSettings",
-      !dotButton ? "true": "false"
+      !dotButton ? "true" : "false"
     );
     setDotButton(!dotButton);
-  }
+  };
+  const width = Dimensions.get("window").width;
   return (
     <View
       style={{
@@ -191,41 +193,67 @@ export default function Menu({ getCurrentTrain }) {
       <ScrollView>
         <TopMenuButton />
         {originalStationList.length != 0 && allStationData.length != 0 && (
-          <>
+          <View style={{ flex: 1, paddingTop: 10 }}>
             <Carousel
               ref={carouselRef}
-              layout={"default"}
               data={originalStationList && allStationData}
-              sliderWidth={wp("100%")}
+              height={(wp("80%") / 20) * 9 + 10}
-              itemWidth={wp("80%")}
+              pagingEnabled={true}
-              enableMomentum
+              snapEnabled={true}
-              callbackOffsetMargin={1000}
+              loop={false}
-              activeAnimationOptions={0.3}
+              width={width}
+              style={{ width: width, alignContent: "center" }}
+              mode="parallax"
+              modeConfig={{
+                parallaxScrollingScale: 1,
+                parallaxScrollingOffset: 100,
+                parallaxAdjacentItemScale: 0.8,
+              }}
               onSnapToItem={setSelectedCurrentStation}
-              renderItem={({ item }) => {
+              renderItem={({ item, index }) => {
                 return (
                   <View
-                    style={{ marginVertical: 10 }}
+                    style={{
+                      backgroundColor: "#0000",
+                      width: width,
+                      flexDirection: "row",
+                      marginLeft: 0,
+                      marginRight: 0,
+                    }}
                     key={item[0].StationNumber}
                   >
+                    <View style={{ flex: 1 }} />
                     <Sign
                       currentStation={item}
                       isCurrentStation={item == currentStation}
                       oP={oPSign}
                       oLP={oLPSign}
                     />
+                    <View style={{ flex: 1 }} />
                   </View>
                 );
               }}
             />
-            <Paginations
+            <View
-              entries={allStationData}
+              style={{
-              activeSlide={selectedCurrentStation}
+                flexDirection: "row",
-              carouselRef={carouselRef}
+                justifyContent: "center",
-              setSelectedCurrentStation={setSelectedCurrentStation}
+                alignContent: "center",
-              dotButton={dotButton}
+                alignItems: "center",
+              }}
+            >
+              {originalStationList &&
+                allStationData.map((d, index) => {
+                  return (
+                    <StationNumber
+                      currentStation={d}
+                      active={index == selectedCurrentStation}
+                      onPress={() => setSelectedCurrentStation(index)}
                     />
-          </>
+                  );
+                })}
+            </View>
+          </View>
         )}
         {allStationData.length != 0 &&
           originalStationList.length != 0 &&
@@ -362,10 +390,13 @@ const JRSTraInfoBox = () => {
               />
             </View>
           ) : delayData ? (
-            delayData.map((d,index,array) => {
+            delayData.map((d, index, array) => {
               let data = d.split(" ");
               return (
-                <View style={{ flexDirection: "row" }} key={data[1] + "key"+index}>
+                <View
+                  style={{ flexDirection: "row" }}
+                  key={data[1] + "key" + index}
+                >
                   <Text style={{ flex: 15, fontSize: 18 }}>
                     {data[0].replace("\n", "")}
                   </Text>

package.json

@@ -8,54 +8,63 @@
   },
   "dependencies": {
     "@expo/ngrok": "^4.1.0",
-    "@expo/vector-icons": "^14.0.0",
+    "@expo/vector-icons": "^14.0.2",
-    "@react-native-async-storage/async-storage": "1.21.0",
+    "@react-native-async-storage/async-storage": "1.23.1",
-    "@react-native-community/masked-view": "0.1.10",
+    "@react-native-masked-view/masked-view": "0.3.2",
-    "@react-navigation/bottom-tabs": "^5.11.11",
+    "@react-navigation/bottom-tabs": "^7.2.0",
-    "@react-navigation/native": "^5.9.4",
+    "@react-navigation/native": "^7.0.14",
-    "@react-navigation/stack": "^5.14.5",
+    "@react-navigation/stack": "^7.1.1",
     "dayjs": "^1.11.9",
-    "eas-cli": "^5.9.1",
+    "expo": "^52.0.0",
-    "expo": "^50.0.11",
+    "expo-alternate-app-icons": "^1.3.0",
-    "expo-dev-client": "~3.3.9",
+    "expo-clipboard": "~7.0.1",
-    "expo-device": "~5.9.3",
+    "expo-constants": "~17.0.4",
-    "expo-font": "~11.10.3",
+    "expo-dev-client": "~5.0.9",
-    "expo-location": "~16.5.5",
+    "expo-device": "~7.0.2",
-    "expo-notifications": "~0.27.6",
+    "expo-font": "~13.0.3",
-    "expo-screen-orientation": "~6.4.1",
+    "expo-haptics": "~14.0.1",
-    "expo-sharing": "~11.10.0",
+    "expo-intent-launcher": "~12.0.2",
-    "expo-updates": "~0.24.11",
+    "expo-linear-gradient": "~14.0.2",
-    "expo-web-browser": "~12.8.2",
+    "expo-linking": "~7.0.4",
+    "expo-localization": "~16.0.1",
+    "expo-location": "~18.0.5",
+    "expo-notifications": "~0.29.12",
+    "expo-screen-orientation": "~8.0.4",
+    "expo-sharing": "~13.0.1",
+    "expo-status-bar": "~2.0.1",
+    "expo-updates": "~0.26.12",
+    "expo-video": "~2.0.5",
+    "expo-web-browser": "~14.0.2",
     "firebase": "8.2.3",
-    "lottie-react-native": "6.5.1",
+    "lottie-react-native": "7.1.0",
     "native-base": "^2.15.2",
-    "npm": "^7.18.1",
     "pushy-react-native": "^1.0.18",
-    "react": "18.2.0",
+    "react": "18.3.1",
-    "react-native": "0.73.4",
+    "react-native": "0.76.6",
     "react-native-actions-sheet": "0.8.21",
-    "react-native-android-widget": "^0.11.2",
+    "react-native-android-widget": "^0.15.1",
     "react-native-auto-height-image": "^3.2.4",
     "react-native-elements": "^3.4.2",
-    "react-native-gesture-handler": "~2.14.0",
+    "react-native-gesture-handler": "~2.20.2",
-    "react-native-maps": "1.10.0",
+    "react-native-maps": "1.18.0",
-    "react-native-reanimated": "~3.6.2",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-reanimated-carousel": "^3.5.1",
     "react-native-remote-svg": "^2.0.6",
     "react-native-responsive-screen": "^1.4.2",
     "react-native-router-flux": "^4.3.1",
-    "react-native-safe-area-context": "4.8.2",
+    "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~3.29.0",
+    "react-native-screens": "~4.4.0",
     "react-native-snap-carousel": "^3.9.1",
     "react-native-storage": "^1.0.1",
-    "react-native-svg": "14.1.0",
+    "react-native-svg": "15.8.0",
     "react-native-svg-uri": "^1.2.3",
     "react-native-vector-icons": "^8.1.0",
-    "react-native-view-shot": "3.8.0",
+    "react-native-view-shot": "~4.0.3",
-    "react-native-webview": "13.6.4",
+    "react-native-webview": "13.12.5",
     "typescript": "^5.3.0"
   },
   "devDependencies": {
-    "babel-preset-expo": "^10.0.0"
+    "babel-preset-expo": "~12.0.0"
   },
   "private": true
 }

stateBox/useTrainMenu.js

@@ -42,7 +42,9 @@ export const TrainMenuProvider = ({ children }) => {
   const [mapsStationData, setMapsStationData] = useState(undefined);
   const [injectJavaScript, setInjectJavaScript] = useState();
 
-  useEffect(() => getStationList2().then(setMapsStationData), []);
+  useEffect(() => {
+    getStationList2().then(setMapsStationData);
+  }, []);
 
   //画面表示関連
   const [iconSetting, setIconSetting] = useState(undefined);