Add AddItem page base

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

src/navigation.tsx

@@ -5,32 +5,20 @@ import {
 } 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, Search, Tags, Settings } from './screens';
-import { FloatingActionButton } from './components';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { BottomNavigation, Portal, useTheme } from 'react-native-paper';
+import { Home, Search, Tags, Settings, AddItem } from './screens';
 import { horizontalScale } from './styles';
+import { FloatingActionButton } from './components';
 
-function NavigationContainer() {
-  const TabNavigator = createBottomTabNavigator();
-  const theme = useTheme();
-
-  const [showFab, setShowFab] = React.useState(true);
+function TabNavigator() {
+  const TabNavigatorBase = createBottomTabNavigator();
+  const [fabVisible, setFabVisible] = React.useState(true);
 
   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
+      <Portal.Host>
+        <TabNavigatorBase.Navigator
           screenOptions={{
             headerShown: false,
           }}
@@ -52,7 +40,9 @@ function NavigationContainer() {
                     target: state.key,
                   });
                 }
-                setShowFab(route.name !== 'Settings');
+                route.name === 'Settings'
+                  ? setFabVisible(false)
+                  : setFabVisible(true);
               }}
               renderIcon={({ route, focused, color }) => {
                 const { options } = descriptors[route.key];
@@ -70,7 +60,7 @@ function NavigationContainer() {
               }}
             />
           )}>
-          <TabNavigator.Screen
+          <TabNavigatorBase.Screen
             name="Home"
             component={Home}
             options={{
@@ -79,7 +69,7 @@ function NavigationContainer() {
               ),
             }}
           />
-          <TabNavigator.Screen
+          <TabNavigatorBase.Screen
             name="Search"
             component={Search}
             options={{
@@ -88,7 +78,7 @@ function NavigationContainer() {
               ),
             }}
           />
-          <TabNavigator.Screen
+          <TabNavigatorBase.Screen
             name="Tags"
             component={Tags}
             options={{
@@ -97,7 +87,7 @@ function NavigationContainer() {
               ),
             }}
           />
-          <TabNavigator.Screen
+          <TabNavigatorBase.Screen
             name="Settings"
             component={Settings}
             options={{
@@ -106,11 +96,40 @@ function NavigationContainer() {
               ),
             }}
           />
-        </TabNavigator.Navigator>
-      </NavigationContainerBase>
-      {showFab && <FloatingActionButton />}
+        </TabNavigatorBase.Navigator>
+        <FloatingActionButton visible={fabVisible} />
+      </Portal.Host>
     </>
   );
 }
 
+function NavigationContainer() {
+  const StackNavigatorBase = createNativeStackNavigator();
+  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,
+        },
+      }}>
+      <StackNavigatorBase.Navigator screenOptions={{ headerShown: false }}>
+        <StackNavigatorBase.Screen name="Main" component={TabNavigator} />
+        <StackNavigatorBase.Screen
+          name="Add Item"
+          component={AddItem}
+          options={{ animation: 'slide_from_bottom' }}
+        />
+      </StackNavigatorBase.Navigator>
+    </NavigationContainerBase>
+  );
+}
+
 export default NavigationContainer;