Split out routes

.rgignore

@@ -0,0 +1 @@
+yarn.lock

App.tsx

@@ -10,18 +10,14 @@ import {StatusBar, useColorScheme} from 'react-native';
 import {
   DarkTheme as DarkThemePaper,
   DefaultTheme as DefaultThemePaper,
-  IconButton,
   Provider,
 } from 'react-native-paper';
 import {SQLiteDatabase} from 'react-native-sqlite-storage';
 import Ionicon from 'react-native-vector-icons/Ionicons';
-import BestPage from './BestPage';
 import {createPlans, createSets, getDb} from './db';
-import HomePage from './HomePage';
-import PlanPage from './PlanPage';
-import SettingsPage from './SettingsPage';
+import Routes from './Routes';
 
-const Drawer = createDrawerNavigator<DrawerParamList>();
+export const Drawer = createDrawerNavigator<DrawerParamList>();
 export type DrawerParamList = {
   Home: {};
   Settings: {};
@@ -62,55 +58,7 @@ const App = () => {
       settings={{icon: props => <Ionicon {...props} />}}>
       <NavigationContainer theme={dark ? DarkTheme : DefaultTheme}>
         <StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
-        {db && (
-          <DatabaseContext.Provider value={db}>
-            <Drawer.Navigator
-              screenOptions={{headerTintColor: dark ? 'white' : 'black'}}>
-              <Drawer.Screen
-                options={{
-                  drawerIcon: ({focused}) => (
-                    <IconButton icon={focused ? 'home' : 'home-outline'} />
-                  ),
-                }}
-                name="Home"
-                component={HomePage}
-              />
-              <Drawer.Screen
-                options={{
-                  drawerIcon: ({focused}) => (
-                    <IconButton
-                      icon={focused ? 'calendar' : 'calendar-outline'}
-                    />
-                  ),
-                }}
-                name="Plans"
-                component={PlanPage}
-              />
-              <Drawer.Screen
-                options={{
-                  drawerIcon: ({focused}) => (
-                    <IconButton
-                      icon={focused ? 'stats-chart' : 'stats-chart-outline'}
-                    />
-                  ),
-                }}
-                name="Best"
-                component={BestPage}
-              />
-              <Drawer.Screen
-                options={{
-                  drawerIcon: ({focused}) => (
-                    <IconButton
-                      icon={focused ? 'settings' : 'settings-outline'}
-                    />
-                  ),
-                }}
-                name="Settings"
-                component={SettingsPage}
-              />
-            </Drawer.Navigator>
-          </DatabaseContext.Provider>
-        )}
+        <Routes db={db} />
       </NavigationContainer>
     </Provider>
   );

Routes.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {useColorScheme} from 'react-native';
+import {IconButton} from 'react-native-paper';
+import {SQLiteDatabase} from 'react-native-sqlite-storage';
+import {DatabaseContext, Drawer, DrawerParamList} from './App';
+import BestPage from './BestPage';
+import HomePage from './HomePage';
+import PlanPage from './PlanPage';
+import SettingsPage from './SettingsPage';
+
+interface Route {
+  name: keyof DrawerParamList;
+  component: React.ComponentType<any>;
+  icon: string;
+}
+
+export default function Routes({db}: {db: SQLiteDatabase | null}) {
+  const dark = useColorScheme() === 'dark';
+
+  if (!db) return null;
+
+  const routes: Route[] = [
+    {name: 'Home', component: HomePage, icon: 'home'},
+    {name: 'Plans', component: PlanPage, icon: 'calendar'},
+    {name: 'Best', component: BestPage, icon: 'stats-chart'},
+    {name: 'Settings', component: SettingsPage, icon: 'settings'},
+  ];
+
+  return (
+    <DatabaseContext.Provider value={db}>
+      <Drawer.Navigator
+        screenOptions={{headerTintColor: dark ? 'white' : 'black'}}>
+        {routes.map(route => (
+          <Drawer.Screen
+            key={route.name}
+            name={route.name}
+            component={route.component}
+            options={{
+              drawerIcon: ({focused}) => (
+                <IconButton
+                  icon={focused ? route.icon : `${route.icon}-outline`}
+                />
+              ),
+            }}
+          />
+        ))}
+      </Drawer.Navigator>
+    </DatabaseContext.Provider>
+  );
+}

android/app/build.gradle

@@ -39,7 +39,7 @@ android {
         missingDimensionStrategy "RNNotifications.reactNativeVersion", "reactNative60"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
+        versionCode 2
         versionName "1.0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()