Split out routes
This commit is contained in:
parent
a4855a41d9
commit
a78a22207a
58
App.tsx
58
App.tsx
|
@ -10,18 +10,14 @@ import {StatusBar, useColorScheme} from 'react-native';
|
||||||
import {
|
import {
|
||||||
DarkTheme as DarkThemePaper,
|
DarkTheme as DarkThemePaper,
|
||||||
DefaultTheme as DefaultThemePaper,
|
DefaultTheme as DefaultThemePaper,
|
||||||
IconButton,
|
|
||||||
Provider,
|
Provider,
|
||||||
} from 'react-native-paper';
|
} from 'react-native-paper';
|
||||||
import {SQLiteDatabase} from 'react-native-sqlite-storage';
|
import {SQLiteDatabase} from 'react-native-sqlite-storage';
|
||||||
import Ionicon from 'react-native-vector-icons/Ionicons';
|
import Ionicon from 'react-native-vector-icons/Ionicons';
|
||||||
import BestPage from './BestPage';
|
|
||||||
import {createPlans, createSets, getDb} from './db';
|
import {createPlans, createSets, getDb} from './db';
|
||||||
import HomePage from './HomePage';
|
import Routes from './Routes';
|
||||||
import PlanPage from './PlanPage';
|
|
||||||
import SettingsPage from './SettingsPage';
|
|
||||||
|
|
||||||
const Drawer = createDrawerNavigator<DrawerParamList>();
|
export const Drawer = createDrawerNavigator<DrawerParamList>();
|
||||||
export type DrawerParamList = {
|
export type DrawerParamList = {
|
||||||
Home: {};
|
Home: {};
|
||||||
Settings: {};
|
Settings: {};
|
||||||
|
@ -62,55 +58,7 @@ const App = () => {
|
||||||
settings={{icon: props => <Ionicon {...props} />}}>
|
settings={{icon: props => <Ionicon {...props} />}}>
|
||||||
<NavigationContainer theme={dark ? DarkTheme : DefaultTheme}>
|
<NavigationContainer theme={dark ? DarkTheme : DefaultTheme}>
|
||||||
<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
|
<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
|
||||||
{db && (
|
<Routes db={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>
|
|
||||||
)}
|
|
||||||
</NavigationContainer>
|
</NavigationContainer>
|
||||||
</Provider>
|
</Provider>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -39,7 +39,7 @@ android {
|
||||||
missingDimensionStrategy "RNNotifications.reactNativeVersion", "reactNative60"
|
missingDimensionStrategy "RNNotifications.reactNativeVersion", "reactNative60"
|
||||||
minSdkVersion rootProject.ext.minSdkVersion
|
minSdkVersion rootProject.ext.minSdkVersion
|
||||||
targetSdkVersion rootProject.ext.targetSdkVersion
|
targetSdkVersion rootProject.ext.targetSdkVersion
|
||||||
versionCode 1
|
versionCode 2
|
||||||
versionName "1.0"
|
versionName "1.0"
|
||||||
buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
|
buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue