Add Search/Tags screen bases

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

src/app.tsx

@@ -1,5 +1,5 @@
 import React, { JSX } from 'react';
-import { Appearance, StatusBar } from 'react-native';
+import { StatusBar, useColorScheme } from 'react-native';
 import { PaperProvider } from 'react-native-paper';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { RealmProvider } from '@realm/react';
@@ -10,7 +10,7 @@ import { SettingsProvider } from './contexts/settings';
 import ActionButton from './components/actionButton';
 
 function App(): JSX.Element {
-  const colorScheme = Appearance.getColorScheme();
+  const colorScheme = useColorScheme();
   const isDarkMode = colorScheme === 'dark';
   const theme = isDarkMode ? darkTheme : lightTheme;
 

src/navigation.tsx

@@ -6,7 +6,7 @@ import {
 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';
+import { Home, Search, Tags, Settings } from './screens';
 
 function NavigationContainer() {
   const TabNavigator = createBottomTabNavigator();
@@ -69,6 +69,24 @@ function NavigationContainer() {
             ),
           }}
         />
+        <TabNavigator.Screen
+          name="Search"
+          component={Search}
+          options={{
+            tabBarIcon: ({ color }) => (
+              <FontAwesome5 name="search" color={color} size={20} />
+            ),
+          }}
+        />
+        <TabNavigator.Screen
+          name="Tags"
+          component={Tags}
+          options={{
+            tabBarIcon: ({ color }) => (
+              <FontAwesome5 name="tags" color={color} size={20} />
+            ),
+          }}
+        />
         <TabNavigator.Screen
           name="Settings"
           component={Settings}

src/screens/home.tsx

@@ -2,15 +2,11 @@ import React from 'react';
 
 import { Text } from 'react-native-paper';
 import { PaddedView } from '../components';
-import { useSettings } from '../contexts';
 
 const Home = () => {
-  const { settings } = useSettings();
-
   return (
     <PaddedView centered>
       <Text>Home</Text>
-      <Text>Settings: {JSON.stringify(settings)}</Text>
     </PaddedView>
   );
 };

src/screens/index.ts

@@ -1,2 +1,4 @@
 export { default as Home } from './home';
+export { default as Search } from './search';
+export { default as Tags } from './tags';
 export { default as Settings } from './settings';

src/screens/search.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Text } from 'react-native-paper';
+import { PaddedView } from '../components';
+
+const Search = () => {
+  return (
+    <PaddedView centered>
+      <Text>Search</Text>
+    </PaddedView>
+  );
+};
+
+export default Search;

src/screens/tags.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Text } from 'react-native-paper';
+import { PaddedView } from '../components';
+
+const Tags = () => {
+  return (
+    <PaddedView centered>
+      <Text>Tags</Text>
+    </PaddedView>
+  );
+};
+
+export default Tags;