From 53db8597e12b88b04a61f67aa6119305dd4706ad Mon Sep 17 00:00:00 2001
From: Brandon Presley <brandon@presley.nz>
Date: Sat, 9 Jul 2022 15:19:02 +1200
Subject: [PATCH] Replace tab names with icons

---
 App.tsx | 47 +++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/App.tsx b/App.tsx
index bd2f50b..812e615 100644
--- a/App.tsx
+++ b/App.tsx
@@ -10,6 +10,7 @@ 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';
@@ -61,10 +62,48 @@ const App = () => {
         {db && (
           <DatabaseContext.Provider value={db}>
             <Tab.Navigator>
-              <Tab.Screen name="Home" component={HomePage} />
-              <Tab.Screen name="Plan" component={PlanPage} />
-              <Tab.Screen name="Best" component={BestPage} />
-              <Tab.Screen name="Settings" component={SettingsPage} />
+              <Tab.Screen
+                options={{
+                  tabBarLabel: ({focused}) => (
+                    <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>
           </DatabaseContext.Provider>
         )}