Add AddItem page base

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

package.json

@@ -15,7 +15,6 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.19.0",
     "@react-navigation/bottom-tabs": "^6.5.8",
-    "@react-navigation/drawer": "^6.6.3",
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/native-stack": "^6.9.13",
     "@realm/react": "^0.5.1",
@@ -36,6 +35,7 @@
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
+    "@jest/globals": "^29.6.1",
     "@react-native/eslint-config": "^0.72.2",
     "@react-native/metro-config": "^0.72.7",
     "@tsconfig/react-native": "^3.0.2",
@@ -44,7 +44,10 @@
     "@types/react": "^18.2.14",
     "@types/react-native-vector-icons": "^6.4.13",
     "@types/react-test-renderer": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
     "babel-jest": "^29.2.1",
+    "depcheck": "^1.4.3",
     "eslint": "^8.44.0",
     "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-prettier": "^4.2.1",

src/components/floatingActionButton.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { FAB, Portal } from 'react-native-paper';
-import { noOp } from '../constants';
 import { verticalScale } from '../styles';
+import { ParamListBase, useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 const styles = StyleSheet.create({
   fab: {
@@ -10,40 +11,42 @@ const styles = StyleSheet.create({
   },
 });
 
-const FloatingActionButton = () => {
+const FloatingActionButton = ({ visible }: { visible?: boolean }) => {
   const [state, setState] = React.useState(false);
+  const { navigate } =
+    useNavigation<NativeStackNavigationProp<ParamListBase>>();
 
   return (
     <Portal>
       <FAB.Group
         open={state}
-        visible
+        visible={visible ?? true}
         icon={state ? 'image' : 'plus'}
         actions={[
           {
             icon: 'tag',
             label: 'Tag',
-            onPress: () => noOp,
+            onPress: () => navigate('Add Item'),
           },
           {
             icon: 'note-text',
             label: 'Text',
-            onPress: () => noOp,
+            onPress: () => navigate('Add Item'),
           },
           {
             icon: 'microphone',
             label: 'Audio',
-            onPress: () => noOp,
+            onPress: () => navigate('Add Item'),
           },
           {
             icon: 'image-album',
             label: 'Album',
-            onPress: () => noOp,
+            onPress: () => navigate('Add Item'),
           },
         ]}
         onStateChange={({ open }) => setState(open)}
         onPress={() => {
-          if (state) noOp;
+          if (state) navigate('Add Item');
         }}
         style={styles.fab}
       />

src/components/paddedView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 import { useTheme } from 'react-native-paper';
 import styles from '../styles';
@@ -8,7 +8,7 @@ const PaddedView = ({
   style,
   centered,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   style?: StyleProp<ViewStyle>;
   centered?: boolean;
 }) => {

src/contexts/index.ts

@@ -1 +1 @@
-export { useSettings, SettingsProvider } from './settings';
+export { SettingsProvider, useSettings } from './settings';

src/contexts/settings.tsx

@@ -1,4 +1,10 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  ReactNode,
+} from 'react';
 import { Settings } from '../types';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { LoadingView } from '../components';
@@ -19,9 +25,7 @@ const SettingsContext = createContext<SettingsContextType | undefined>(
   undefined,
 );
 
-const SettingsProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
+function SettingsProvider({ children }: { children: ReactNode }) {
   const [settings, setSettings] = useState<Settings>({
     storageUri: '',
   });
@@ -51,7 +55,9 @@ const SettingsProvider: React.FC<{ children: React.ReactNode }> = ({
       if (storageUri !== '') {
         const permissions = await getPersistedUriPermissions();
         if (
-          !permissions.some(permission => storageUri.startsWith(permission + '/'))
+          !permissions.some(permission =>
+            storageUri.startsWith(permission + '/'),
+          )
         ) {
           storageUri = '';
         }
@@ -100,7 +106,7 @@ const SettingsProvider: React.FC<{ children: React.ReactNode }> = ({
       )}
     </SettingsContext.Provider>
   );
-};
+}
 
 const useSettings = (): SettingsContextType => {
   const context = useContext(SettingsContext);

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;

src/screens/addItem.tsx

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

src/screens/index.ts

@@ -1,3 +1,4 @@
+export { default as AddItem } from './addItem';
 export { default as Home } from './home';
 export { default as Search } from './search';
 export { default as Tags } from './tags';