useStationListにstationListを分離

App.js

@@ -16,6 +16,7 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import { DeviceOrientationChangeProvider } from "./stateBox/useDeviceOrientationChange";
 import { TrainMenuProvider } from "./stateBox/useTrainMenu";
 import { buildProvidersTree } from "./lib/providerTreeProvider";
+import { StationListProvider } from "./stateBox/useStationList";
 
 LogBox.ignoreLogs([
   "ViewPropTypes will be removed",
@@ -32,6 +33,7 @@ export default function App() {
   useEffect(() => UpdateAsync(), []);
 
   const ProviderTree = buildProvidersTree([
+    StationListProvider,
     FavoriteStationProvider,
     TrainDelayDataProvider,
     CurrentTrainProvider,

components/Apps.js

@@ -24,6 +24,7 @@ import { EachTrainInfoCore } from "../components/ActionSheetComponents/EachTrain
 import { useNavigation } from "@react-navigation/native";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
 import { AppsWebView } from "./Apps/WebView";
+import { useStationList } from "../stateBox/useStationList";
 /* 
 import StatusbarDetect from '../StatusbarDetect';
 var Status = StatusbarDetect(); */
@@ -52,9 +53,8 @@ export default function Apps() {
   });
 
   //駅情報画面用
-  const [originalStationList, setOriginalStationList] = useState();
+  const {originalStationList, setOriginalStationList} = useStationList();
   const [trainMenu, setTrainMenu] = useState("true");
-  useEffect(() => getStationList().then(setOriginalStationList), []);
 
   //地図表示テキスト
   const injectJavascript = injectJavascriptData(

stateBox/useStationList.tsx

@@ -0,0 +1,42 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useLayoutEffect,
+  FC,
+} from "react";
+import { AS } from "../storageControl";
+import { getStationList } from "../lib/getStationList";
+
+type initialStateType = {
+  originalStationList: any[];
+  setOriginalStationList: React.Dispatch<React.SetStateAction<any[]>>;
+};
+const initialState = {
+  originalStationList: [],
+  setOriginalStationList: () => {},
+};
+
+const StationListContext = createContext<initialStateType>(initialState);
+type Props = {
+  children: React.ReactNode;
+};
+export const useStationList = () => {
+  return useContext(StationListContext);
+};
+
+export const StationListProvider: FC<Props> = ({ children }) => {
+  const [originalStationList, setOriginalStationList] = useState<any[]>();
+  useEffect(() => {
+    getStationList().then(setOriginalStationList);
+  }, []);
+
+  return (
+    <StationListContext.Provider
+      value={{ originalStationList, setOriginalStationList }}
+    >
+      {children}
+    </StationListContext.Provider>
+  );
+};