Add settings page

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/navigation.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  CommonActions,
+  NavigationContainer as NavigationContainerBase,
+} from '@react-navigation/native';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { BottomNavigation, useTheme } from 'react-native-paper';
+import { Home, Settings } from './screens';
+
+function NavigationContainer() {
+  const TabNavigator = createBottomTabNavigator();
+  const theme = useTheme();
+
+  return (
+    <NavigationContainerBase
+      theme={{
+        dark: theme.dark,
+        colors: {
+          primary: theme.colors.primary,
+          background: theme.colors.background,
+          card: theme.colors.surface,
+          text: theme.colors.onSurface,
+          border: theme.colors.outline,
+          notification: theme.colors.error,
+        },
+      }}>
+      <TabNavigator.Navigator
+        screenOptions={{
+          headerShown: false,
+        }}
+        tabBar={({ navigation, state, descriptors, insets }) => (
+          <BottomNavigation.Bar
+            navigationState={state}
+            safeAreaInsets={insets}
+            onTabPress={({ route, preventDefault }) => {
+              const event = navigation.emit({
+                type: 'tabPress',
+                target: route.key,
+                canPreventDefault: true,
+              });
+              if (event.defaultPrevented) {
+                preventDefault();
+              } else {
+                navigation.dispatch({
+                  ...CommonActions.navigate(route.name, route.params),
+                  target: state.key,
+                });
+              }
+            }}
+            renderIcon={({ route, focused, color }) => {
+              const { options } = descriptors[route.key];
+              if (options.tabBarIcon) {
+                return options.tabBarIcon({ focused, color, size: 24 });
+              }
+            }}
+            getLabelText={({ route }) => {
+              const { options } = descriptors[route.key];
+              return options.title ?? route.name;
+            }}
+          />
+        )}>
+        <TabNavigator.Screen
+          name="Home"
+          component={Home}
+          options={{
+            tabBarIcon: ({ color }) => (
+              <FontAwesome5 name="home" color={color} size={20} />
+            ),
+          }}
+        />
+        <TabNavigator.Screen
+          name="Settings"
+          component={Settings}
+          options={{
+            tabBarIcon: ({ color }) => (
+              <FontAwesome5 name="cog" color={color} size={20} />
+            ),
+          }}
+        />
+      </TabNavigator.Navigator>
+    </NavigationContainerBase>
+  );
+}
+
+export default NavigationContainer;