Replace tab names with icons

This commit is contained in:
Brandon Presley 2022-07-09 15:19:02 +12:00
parent 880fc976bc
commit 53db8597e1

47
App.tsx
View File

@ -10,6 +10,7 @@ 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';
@ -61,10 +62,48 @@ const App = () => {
{db && ( {db && (
<DatabaseContext.Provider value={db}> <DatabaseContext.Provider value={db}>
<Tab.Navigator> <Tab.Navigator>
<Tab.Screen name="Home" component={HomePage} /> <Tab.Screen
<Tab.Screen name="Plan" component={PlanPage} /> options={{
<Tab.Screen name="Best" component={BestPage} /> tabBarLabel: ({focused}) => (
<Tab.Screen name="Settings" component={SettingsPage} /> <IconButton icon={focused ? 'home' : 'home-outline'} />
),
}}
name="Home"
component={HomePage}
/>
<Tab.Screen
options={{
tabBarLabel: ({focused}) => (
<IconButton
icon={focused ? 'calendar' : 'calendar-outline'}
/>
),
}}
name="Plan"
component={PlanPage}
/>
<Tab.Screen
options={{
tabBarLabel: ({focused}) => (
<IconButton
icon={focused ? 'bar-chart' : 'bar-chart-outline'}
/>
),
}}
name="Best"
component={BestPage}
/>
<Tab.Screen
options={{
tabBarLabel: ({focused}) => (
<IconButton
icon={focused ? 'settings' : 'settings-outline'}
/>
),
}}
name="Settings"
component={SettingsPage}
/>
</Tab.Navigator> </Tab.Navigator>
</DatabaseContext.Provider> </DatabaseContext.Provider>
)} )}