App.jsの分離、ProviderTreeの導入

App.js

@@ -1,17 +1,12 @@
 import React, { useEffect } from "react";
-import { NavigationContainer } from "@react-navigation/native";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { Platform, UIManager } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { AppContainer } from "./Apps.js";
 import { UpdateAsync } from "./UpdateAsync.js";
-import TNDView from "./ndView";
 import { LogBox } from "react-native";
-import { initIcon } from "./lib/initIcon";
 import { FavoriteStationProvider } from "./stateBox/useFavoriteStation";
-import { Top } from "./Top.js";
-import { MenuPage } from "./MenuPage.js";
 import { CurrentTrainProvider } from "./stateBox/useCurrentTrain.js";
-import { useAreaInfo, AreaInfoProvider } from "./stateBox/useAreaInfo.js";
+import { AreaInfoProvider } from "./stateBox/useAreaInfo.js";
 import { BusAndTrainDataProvider } from "./stateBox/useBusAndTrainData.js";
 import { AllTrainDiagramProvider } from "./stateBox/useAllTrainDiagram.js";
 import { SheetProvider } from "react-native-actions-sheet";
@@ -20,11 +15,13 @@ import { TrainDelayDataProvider } from "./stateBox/useTrainDelayData.js";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { DeviceOrientationChangeProvider } from "./stateBox/useDeviceOrientationChange.js";
 import { TrainMenuProvider } from "./stateBox/useTrainMenu.js";
+import { buildProvidersTree } from "./lib/providerTreeProvider.js";
+
 LogBox.ignoreLogs([
   "ViewPropTypes will be removed",
   "ColorPropType will be removed",
 ]);
-const Tab = createBottomTabNavigator();
+
 if (Platform.OS === "android") {
   if (UIManager.setLayoutAnimationEnabledExperimental) {
     UIManager.setLayoutAnimationEnabledExperimental(true);
@@ -33,77 +30,25 @@ if (Platform.OS === "android") {
 
 export default function App() {
   useEffect(() => UpdateAsync(), []);
+
+  const ProviderTree = buildProvidersTree([
+    FavoriteStationProvider,
+    TrainDelayDataProvider,
+    CurrentTrainProvider,
+    AreaInfoProvider,
+    AllTrainDiagramProvider,
+    BusAndTrainDataProvider,
+    TrainMenuProvider,
+    SheetProvider,
+    AppContainer,
+  ]);
   return (
     <DeviceOrientationChangeProvider>
       <SafeAreaProvider>
         <GestureHandlerRootView style={{ flex: 1 }}>
-          <FavoriteStationProvider>
-            <TrainDelayDataProvider>
-              <CurrentTrainProvider>
-                <AreaInfoProvider>
-                  <AllTrainDiagramProvider>
-                    <BusAndTrainDataProvider>
-                      <TrainMenuProvider>
-                        <SheetProvider>
-                          <AppContainer />
-                        </SheetProvider>
-                      </TrainMenuProvider>
-                    </BusAndTrainDataProvider>
-                  </AllTrainDiagramProvider>
-                </AreaInfoProvider>
-              </CurrentTrainProvider>
-            </TrainDelayDataProvider>
-          </FavoriteStationProvider>
+          <ProviderTree />
         </GestureHandlerRootView>
       </SafeAreaProvider>
     </DeviceOrientationChangeProvider>
   );
 }
-export function AppContainer() {
-  const { areaInfo, areaIconBadgeText } = useAreaInfo();
-  const navigationRef = React.useRef();
-  return (
-    <NavigationContainer name="Root" style={{ flex: 1 }} ref={navigationRef}>
-      <Tab.Navigator
-        tabBarOptions={{ keyboardHidesTabBar: Platform.OS === "android" }}
-        initialRouteName="menuPage"
-        lazy={false}
-      >
-        <Tab.Screen
-          name="login"
-          options={{
-            tabBarLabel: "位置情報",
-            headerTransparent: true,
-            gestureEnabled: true,
-            tabBarIcon: initIcon("barchart", "AntDesign"),
-          }}
-        >
-          {(props) => <Top {...props} navigationRef={navigationRef} />}
-        </Tab.Screen>
-        <Tab.Screen
-          name="menuPage"
-          options={{
-            tabBarLabel: "リンク",
-            headerTransparent: true,
-            gestureEnabled: true,
-            tabBarIcon: initIcon("radio", "Ionicons"),
-          }}
-          component={MenuPage}
-        />
-
-        <Tab.Screen
-          name="home"
-          options={{
-            tabBarLabel: "運行情報",
-            headerTransparent: true,
-            gestureEnabled: true,
-            tabBarIcon: initIcon("train", "Ionicons"),
-            tabBarBadge: areaInfo ? areaIconBadgeText : undefined,
-          }}
-        >
-          {(props) => <TNDView {...props} />}
-        </Tab.Screen>
-      </Tab.Navigator>
-    </NavigationContainer>
-  );
-}

Apps.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { Platform } from "react-native";
+import TNDView from "./ndView";
+import { initIcon } from "./lib/initIcon";
+import { Top } from "./Top.js";
+import { MenuPage } from "./MenuPage.js";
+import { useAreaInfo } from "./stateBox/useAreaInfo.js";
+import "./components/ActionSheetComponents/sheets.js";
+
+const Tab = createBottomTabNavigator();
+export function AppContainer() {
+    const { areaInfo, areaIconBadgeText } = useAreaInfo();
+    const navigationRef = React.useRef();
+    return (
+      <NavigationContainer name="Root" style={{ flex: 1 }} ref={navigationRef}>
+        <Tab.Navigator
+          tabBarOptions={{ keyboardHidesTabBar: Platform.OS === "android" }}
+          initialRouteName="menuPage"
+          lazy={false}
+        >
+          <Tab.Screen
+            name="login"
+            options={{
+              tabBarLabel: "位置情報",
+              headerTransparent: true,
+              gestureEnabled: true,
+              tabBarIcon: initIcon("barchart", "AntDesign"),
+            }}
+          >
+            {(props) => <Top {...props} navigationRef={navigationRef} />}
+          </Tab.Screen>
+          <Tab.Screen
+            name="menuPage"
+            options={{
+              tabBarLabel: "リンク",
+              headerTransparent: true,
+              gestureEnabled: true,
+              tabBarIcon: initIcon("radio", "Ionicons"),
+            }}
+            component={MenuPage}
+          />
+  
+          <Tab.Screen
+            name="home"
+            options={{
+              tabBarLabel: "運行情報",
+              headerTransparent: true,
+              gestureEnabled: true,
+              tabBarIcon: initIcon("train", "Ionicons"),
+              tabBarBadge: areaInfo ? areaIconBadgeText : undefined,
+            }}
+          >
+            {(props) => <TNDView {...props} />}
+          </Tab.Screen>
+        </Tab.Navigator>
+      </NavigationContainer>
+    );
+  }
+  

lib/providerTreeProvider.js

@@ -0,0 +1,25 @@
+export const buildProvidersTree = (providers) => {
+  // 基本ケース：ContextProviderが1つしか残っていない場合、それを返して終了する
+  if (providers.length === 1) {
+    return providers[0];
+  }
+
+  // 配列から最初の2つのContextProviderを取り出す
+  const FirstProvider = providers.shift();
+  const SecondProvider = providers.shift();
+
+  // 十分な数のContextProviderがあるかどうかを確認
+  if (FirstProvider === undefined || SecondProvider === undefined) {
+    throw new Error("ContextProviderが不足しています");
+  }
+
+  // 最初の2つのContextProviderをネストした新しいContextProviderを作成し、再帰する
+  return buildProvidersTree([
+    ({ children }) => (
+      <FirstProvider>
+        <SecondProvider>{children}</SecondProvider>
+      </FirstProvider>
+    ),
+    ...providers,
+  ]);
+};