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

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,95 +33,199 @@ if (Platform.OS === "android") {
   }
 }
 export default function App() {
-  const navigationRef = useRef();
   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>
   );
 }
-const top = () => (
-  <Stack.Navigator>
-    <Stack.Screen
-      name="Apps"
-      component={Apps}
-      options={{
-        headerShown: false,
-        gestureEnabled: true,
-        headerTransparent: true,
-      }}
-    />
-    <Stack.Screen
-      name="trainbase"
-      component={trainbase}
-      options={{
-        title: "トレインビジョン",
-        gestureEnabled: true,
-        ...TransitionPresets.SlideFromRightIOS,
-      }}
-    />
-    <Stack.Screen
-      name="howto"
-      component={howto}
-      options={{
-        title: "使い方",
-        ...optionData,
-      }}
-    />
-    <Stack.Screen name="news" component={News} options={optionData} />
-    <Stack.Screen name="trainMenu" component={trainMenu} options={optionData} />
-  </Stack.Navigator>
-);
-function menuPage() {
+
+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="menu"
-        component={menu}
+        name="Apps"
         options={{
           headerShown: false,
           gestureEnabled: true,
           headerTransparent: true,
         }}
-      />
-      <Stack.Screen name="setting" component={Setting} options={optionData} />
+      >
+        {(props) => (
+          <Apps
+            {...props}
+            webview={webview}
+            favoriteStation={favoriteStation}
+            setFavoriteStation={setFavoriteStation}
+          />
+        )}
+      </Stack.Screen>
+      <Stack.Screen
+        name="trainbase"
+        options={{
+          title: "トレインビジョン",
+          gestureEnabled: true,
+          ...TransitionPresets.SlideFromRightIOS,
+        }}
+      >
+        {(props) => <TrainBase {...props} />}
+      </Stack.Screen>
+      <Stack.Screen
+        name="howto"
+        options={{
+          title: "使い方",
+          ...optionData,
+        }}
+      >
+        {(props) => <HowTo {...props} />}
+      </Stack.Screen>
+      <Stack.Screen name="news" options={optionData}>
+        {(props) => <News {...props} />}
+      </Stack.Screen>
+      <Stack.Screen name="trainMenu" options={optionData}>
+        {(props) => (
+          <TrainMenu
+            {...props}
+            webview={webview}
+            stationData={mapsStationData}
+          />
+        )}
+      </Stack.Screen>
+      <Stack.Screen
+        name="favoriteList"
+        options={{ ...optionData, gestureEnabled: false }}
+      >
+        {(props) => (
+          <FavoriteList
+            {...props}
+            webview={webview}
+            stationData={mapsStationData}
+            favoriteStation={favoriteStation}
+            setFavoriteStation={setFavoriteStation}
+          />
+        )}
+      </Stack.Screen>
+    </Stack.Navigator>
+  );
+};
+function MenuPage({ favoriteStation, setFavoriteStation }) {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="menu"
+        options={{
+          headerShown: false,
+          gestureEnabled: true,
+          headerTransparent: true,
+        }}
+      >
+        {(props) => (
+          <Menu
+            {...props}
+            favoriteStation={favoriteStation}
+            setFavoriteStation={setFavoriteStation}
+          />
+        )}
+      </Stack.Screen>
+      <Stack.Screen name="setting" options={optionData}>
+        {(props) => <Setting {...props} />}
+      </Stack.Screen>
       <Stack.Screen
         name="trainbase"
-        component={trainbase}
         options={{
           ...TransitionPresets.ModalPresentationIOS,
           cardOverlayEnabled: true,
@@ -121,7 +234,9 @@ function menuPage() {
           headerTransparent: true,
           gestureResponseDistance: { vertical: 300 },
         }}
-      />
+      >
+        {(props) => <TrainBase {...props} />}
+      </Stack.Screen>
     </Stack.Navigator>
   );
 }

Apps.js

@@ -19,23 +19,20 @@ 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(setMapsStationData);
-  }, []);
-
   //駅情報画面用
   const StationBoardAcSR = useRef(null);
   const [stationBoardData, setStationBoardData] = useState(undefined);
@@ -187,9 +184,7 @@ export default function Apps(props) {
         onTouchMove={() => StationBoardAcSR.current?.hide()}
       />
       <MapsButton
-        onPress={() =>
-          navigate("trainMenu", { webview, stationData: mapsStationData })
-        }
+        onPress={() => navigate("trainMenu", { webview })}
         top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
         mapSwitch={mapSwitch == "true" ? "flex" : "none"}
       />
@@ -202,6 +197,8 @@ export default function Apps(props) {
         StationBoardAcSR={StationBoardAcSR}
         currentStation={stationBoardData}
         originalStationList={originalStationList}
+        favoriteStation={favoriteStation}
+        setFavoriteStation={setFavoriteStation}
       />
     </View>
   );

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": {

components/ActionSheetComponents/StationDeteilView.js

@@ -5,9 +5,19 @@ 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
@@ -38,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/settings.js

@@ -102,7 +102,7 @@ export default function Setting(props) {
                 textAlignVertical: "center",
               }}
             >
-              内部バージョン: 4.4.2.9
+              内部バージョン: 4.5 beta-1
             </Text>
             <View style={{ flex: 1 }} />
           </View>

components/trainMenu.js

@@ -2,11 +2,10 @@ import React, { useRef } from "react";
 import { View, Text, TouchableOpacity, Linking } from "react-native";
 import MapView, { Marker } from "react-native-maps";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
-export default function trainMenu({
-  route: {
-    params: { webview, stationData },
-  },
+export default function TrainMenu({
   navigation: { navigate },
+  webview,
+  stationData,
 }) {
   const mapRef = useRef();
   return (
@@ -67,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>
@@ -99,9 +93,7 @@ export default function trainMenu({
           borderRadius: 5,
           alignItems: "center",
         }}
-        onPress={() => {
-          navigate("Apps");
-        }}
+        onPress={() => navigate("Apps")}
       >
         <View style={{ flex: 1 }} />
         <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>

components/駅名表/Sign.js

@@ -12,14 +12,36 @@ 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) {
@@ -68,10 +90,48 @@ export default function Sign(props) {
     setPreStation(returnData[0]);
     setNexStation(returnData[1]);
   };
+  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.下帯内容}>
@@ -199,8 +259,6 @@ const styleSheet = {
     height: (wp("80%") / 20) * 9,
     borderColor: "#2E94BB",
     borderWidth: 1,
-    margin: 10,
-    marginHorizontal: wp("10%"),
     backgroundColor: "white",
   },
   下帯: {

eas.json

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

menu.js

@@ -1,4 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
+import Carousel from "react-native-snap-carousel";
 import {
   Platform,
   View,
@@ -38,6 +39,8 @@ import useInterval from "./lib/useInterval";
 export default function Menu(props) {
   const {
     navigation: { navigate },
+    favoriteStation,
+    setFavoriteStation,
   } = props;
   const JRSTraInfoEXAcSR = useRef(null);
   const StationBoardAcSR = useRef(null);
@@ -72,6 +75,22 @@ export default function Menu(props) {
     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);
   useEffect(() => {
@@ -117,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(
@@ -139,7 +162,7 @@ export default function Menu(props) {
     >
       <StatusbarDetect />
       <TitleBar />
-      <ScrollView>
+      <ScrollView ref={scrollRef} scrollEnabled={isScroll}>
         <TopMenuButton />
         <TextBox
           backgroundColor="#0099CC"
@@ -157,15 +180,47 @@ export default function Menu(props) {
             列車の運行計画・混雑状況・感染症対策への取り組み
           </Text>
         </TextBox>
-        {currentStation && (
-          <>
-            <Sign
-              currentStation={currentStation}
-              originalStationList={originalStationList}
-              oP={StationBoardAcSR.current?.setModalVisible}
-            />
-            <LED_vision station={currentStation[0]} navigate={navigate} />
-          </>
+        <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>
+            );
+          }}
+        />
+        {(currentStation || originalStationList) && (
+          <LED_vision
+            station={
+              originalStationList &&
+              (currentStation
+                ? [currentStation, ...locationAndFavorite]
+                : locationAndFavorite)[selectedCurrentStation][0]
+            }
+            navigate={navigate}
+          />
         )}
         <JRSTraInfoBox
           JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
@@ -456,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}

package.json

@@ -8,42 +8,43 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
-    "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/bottom-tabs": "^5.11.11",
     "@react-navigation/native": "^5.9.4",
     "@react-navigation/stack": "^5.14.5",
-    "expo": "^48.0.0",
-    "expo-font": "~11.1.1",
-    "expo-location": "~15.1.1",
-    "expo-updates": "~0.16.3",
-    "expo-web-browser": "~12.1.1",
+    "expo": "^45.0.0",
+    "expo-font": "~10.1.0",
+    "expo-location": "~14.2.2",
+    "expo-updates": "~0.13.4",
+    "expo-web-browser": "~10.2.1",
     "firebase": "8.2.3",
-    "lottie-react-native": "5.1.4",
+    "lottie-react-native": "5.0.1",
     "native-base": "^2.15.2",
     "npm": "^7.18.1",
     "pushy-react-native": "^1.0.18",
-    "react": "18.2.0",
-    "react-native": "0.71.3",
+    "react": "17.0.2",
+    "react-native": "0.68.2",
     "react-native-actions-sheet": "^0.4.9",
     "react-native-auto-height-image": "^3.2.4",
     "react-native-elements": "^3.4.2",
-    "react-native-gesture-handler": "~2.9.0",
-    "react-native-maps": "1.3.2",
-    "react-native-reanimated": "~2.14.4",
+    "react-native-gesture-handler": "~2.2.1",
+    "react-native-maps": "0.30.2",
+    "react-native-reanimated": "~2.8.0",
     "react-native-remote-svg": "^2.0.6",
     "react-native-responsive-screen": "^1.4.2",
     "react-native-router-flux": "^4.3.1",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.20.0",
+    "react-native-safe-area-context": "4.2.4",
+    "react-native-screens": "~3.11.1",
+    "react-native-snap-carousel": "^3.9.1",
     "react-native-storage": "^1.0.1",
-    "react-native-svg": "13.4.0",
+    "react-native-svg": "12.3.0",
     "react-native-svg-uri": "^1.2.3",
     "react-native-vector-icons": "^8.1.0",
-    "react-native-webview": "11.26.0"
+    "react-native-webview": "11.18.1"
   },
   "devDependencies": {
-    "babel-preset-expo": "^9.3.0"
+    "babel-preset-expo": "~9.1.0"
   },
   "private": true
 }