delayをトップに配置

App.js

@@ -20,6 +20,8 @@ import Setting from "./components/settings.js";
 import TrainMenu from "./components/trainMenu.js";
 import FavoriteList from "./components/FavoriteList.js";
 import { LogBox } from "react-native";
+import useInterval from "./lib/useInterval";
+import { HeaderConfig } from "./lib/HeaderConfig";
 
 LogBox.ignoreLogs([
   "ViewPropTypes will be removed",
@@ -65,6 +67,30 @@ export default function App() {
       });
   }, []);
 
+  const [currentTrain, setCurrentTrain] = useState([]); //現在在線中の全列車 { num: 列車番号, delay: 遅延時分(状態), Pos: 位置情報 }
+  const [currentTrainLoading, setCurrentTrainLoading] = useState("loading"); // success, error, loading
+  const getCurrentTrain = () =>
+    fetch(
+      "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train",
+      HeaderConfig
+    )
+      .then((response) => response.json())
+      .then((d) =>
+        d.map((x) => ({ num: x.TrainNum, delay: x.delay, Pos: x.Pos }))
+      )
+      .then((d) => {
+        setCurrentTrain(d);
+        setCurrentTrainLoading("success");
+      })
+      .catch((e) => {
+        console.log("えらー");
+        setCurrentTrainLoading("error");
+      });
+
+  useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得
+
+  useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得
+
   return (
     <NavigationContainer name="Root" style={{ flex: 1 }}>
       <Tab.Navigator detachInactiveScreens={false}>
@@ -83,6 +109,12 @@ export default function App() {
               favoriteStation={favoriteStation}
               setFavoriteStation={setFavoriteStation}
               busAndTrainData={busAndTrainData}
+              currentTrainState={{ currentTrain, setCurrentTrain }}
+              currentTrainLoadingState={{
+                currentTrainLoading,
+                setCurrentTrainLoading,
+              }}
+              getCurrentTrain={getCurrentTrain}
             />
           )}
         </Tab.Screen>
@@ -101,6 +133,12 @@ export default function App() {
               favoriteStation={favoriteStation}
               setFavoriteStation={setFavoriteStation}
               busAndTrainData={busAndTrainData}
+              currentTrainState={{ currentTrain, setCurrentTrain }}
+              currentTrainLoadingState={{
+                currentTrainLoading,
+                setCurrentTrainLoading,
+              }}
+              getCurrentTrain={getCurrentTrain}
             />
           )}
         </Tab.Screen>
@@ -142,6 +180,9 @@ const Top = ({
   favoriteStation,
   setFavoriteStation,
   busAndTrainData,
+  currentTrainState,
+  currentTrainLoadingState,
+  getCurrentTrain,
 }) => {
   const webview = useRef();
 
@@ -178,6 +219,9 @@ const Top = ({
             setFavoriteStation={setFavoriteStation}
             busAndTrainData={busAndTrainData}
             stationData={mapsStationData}
+            currentTrainState={currentTrainState}
+            currentTrainLoadingState={currentTrainLoadingState}
+            getCurrentTrain={getCurrentTrain}
           />
         )}
       </Stack.Screen>
@@ -233,6 +277,9 @@ function MenuPage({
   favoriteStation,
   setFavoriteStation,
   busAndTrainData,
+  currentTrainState,
+  currentTrainLoadingState,
+  getCurrentTrain,
 }) {
   useEffect(() => {
     const unsubscribe = navigation.addListener("tabPress", (e) => {
@@ -264,6 +311,9 @@ function MenuPage({
             favoriteStation={favoriteStation}
             setFavoriteStation={setFavoriteStation}
             busAndTrainData={busAndTrainData}
+            currentTrainState={currentTrainState}
+            currentTrainLoadingState={currentTrainLoadingState}
+            getCurrentTrain={getCurrentTrain}
           />
         )}
       </Stack.Screen>