upgrade root navigation

apps/mobile/index.js

@@ -1,9 +1,13 @@
+import "react-native-gesture-handler";
 import 'react-native-get-random-values'
+import { enableScreens } from 'react-native-screens';
 import { AppRegistry } from 'react-native';
 import App from './App';
 import { name as appName } from './app.json';
 import React from 'react';
 import { Provider } from './src/provider';
+enableScreens();
+
 const AppProvider = () => {
   return (
     <Provider>

apps/mobile/index.mobile.js

@@ -1,22 +1,20 @@
-import React, { useEffect, createRef } from 'react';
+import React, {createRef, useEffect} from 'react';
-import Animated from 'react-native-reanimated';
+import {Platform, StatusBar, View} from 'react-native';
-import { Menu } from './src/components/Menu';
 import * as Animatable from 'react-native-animatable';
+import Animated from 'react-native-reanimated';
+import {Menu} from './src/components/Menu';
 import SideMenu from './src/components/SideMenu';
-import { EditorPosition, EditorOpacity } from './src/utils/animations';
+import {useTracked} from './src/provider';
-import { sideMenuRef } from './src/utils/refs';
+import {EditorOpacity, EditorPosition} from './src/utils/animations';
-import { DDS, w } from './src/utils/utils';
+import {sideMenuRef} from './src/utils/refs';
+import {DDS, w} from './src/utils/utils';
 import Editor from './src/views/Editor';
-import { useTracked } from './src/provider';
+import {NavigationStack} from './src/services/Navigator';
-import { StatusBar, Platform } from 'react-native';
-import { AppContainer } from './src/services/AppContainer';
-import NavigationService from './src/services/NavigationService';
-import { useSafeArea } from 'react-native-safe-area-context';
 
 const editorRef = createRef();
 export const Initialize = () => {
   const [state, dispatch] = useTracked();
-  const { colors } = state;
+  const {colors} = state;
 
   useEffect(() => {
     if (Platform.OS === 'android') {
@@ -52,16 +50,14 @@ export const Initialize = () => {
           />
         }
         openMenuOffset={w / 1.5}>
-        <AppContainer
+        <View
           style={{
             width: DDS.isTab ? '70%' : '100%',
             height: '100%',
             backgroundColor: colors.bg,
-          }}
+          }}>
-          ref={navigatorRef => {
+          <NavigationStack />
-            NavigationService.setTopLevelNavigator(navigatorRef);
+        </View>
-          }}
-        />
       </SideMenu>
 
       <Animated.View
@@ -78,7 +74,7 @@ export const Initialize = () => {
           position: 'absolute',
           backgroundColor: colors.bg,
           elevation: 10,
-          opacity:EditorOpacity,
+          opacity: EditorOpacity,
           transform: [
             {
               translateX: EditorPosition,

apps/mobile/index.tablet.js

@@ -4,23 +4,18 @@ import * as Animatable from 'react-native-animatable';
 import { Menu } from './src/components/Menu';
 import { ModalMenu } from './src/components/ModalMenu';
 import { useTracked } from './src/provider';
-
+import { eSendEvent, eSubscribeEvent } from './src/services/eventManager';
+import { eCloseFullscreenEditor, eOnLoadNote, eOpenFullscreenEditor } from './src/services/events';
+import { NavigationStack } from './src/services/Navigator';
 import Editor from './src/views/Editor';
-import { eSubscribeEvent, eSendEvent } from './src/services/eventManager';
+
-import {
-  eOpenFullscreenEditor,
-  eCloseFullscreenEditor,
-  eOnLoadNote,
-} from './src/services/events';
-import { AppContainer } from './src/services/AppContainer';
-import NavigationService from './src/services/NavigationService';
 
 const editorRef = createRef();
 let outColors;
 
 export const Initialize = () => {
   const [state, dispatch] = useTracked();
-  const { colors } = state;
+  const {colors} = state;
 
   const [fullscreen, setFullscreen] = useState(false);
 
@@ -56,7 +51,7 @@ export const Initialize = () => {
   };
 
   useEffect(() => {
-    eSendEvent(eOnLoadNote, { type: 'new' });
+    eSendEvent(eOnLoadNote, {type: 'new'});
     eSubscribeEvent(eOpenFullscreenEditor, showFullScreenEditor);
     eSubscribeEvent(eCloseFullscreenEditor, closeFullScreenEditor);
 
@@ -104,15 +99,7 @@ export const Initialize = () => {
           borderRightColor: colors.nav,
           borderRightWidth: 2,
         }}>
-        <AppContainer
+        <NavigationStack />
-          style={{
-            width: '100%',
-            height: '100%',
-          }}
-          ref={navigatorRef => {
-            NavigationService.setTopLevelNavigator(navigatorRef);
-          }}
-        />
       </Animatable.View>
       <View
         ref={editorRef}

apps/mobile/src/components/DialogManager/index.js

@@ -1,37 +1,17 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
-import {
+import { Platform } from 'react-native';
-  eSubscribeEvent,
+import { eSubscribeEvent, eUnSubscribeEvent, openVault } from '../../services/eventManager';
-  eUnSubscribeEvent,
+import { eCloseActionSheet, eCloseAddNotebookDialog, eCloseAddTopicDialog, eCloseLoginDialog, eCloseMoveNoteDialog, eCloseSimpleDialog, eOnLoadNote, eOpenActionSheet, eOpenAddNotebookDialog, eOpenAddTopicDialog, eOpenLoginDialog, eOpenMoveNoteDialog, eOpenSimpleDialog } from '../../services/events';
-  openVault,
+import { DDS, hexToRGBA } from '../../utils/utils';
-} from '../../services/eventManager';
-import {
-  eCloseActionSheet,
-  eCloseAddNotebookDialog,
-  eCloseAddTopicDialog,
-  eCloseLoginDialog,
-  eCloseMoveNoteDialog,
-  eCloseSimpleDialog,
-  eOnLoadNote,
-  eOpenActionSheet,
-  eOpenAddNotebookDialog,
-  eOpenAddTopicDialog,
-  eOpenLoginDialog,
-  eOpenMoveNoteDialog,
-  eOpenSimpleDialog,
-} from '../../services/events';
 import ActionSheet from '../ActionSheet';
-import {ActionSheetComponent} from '../ActionSheetComponent';
+import { ActionSheetComponent } from '../ActionSheetComponent';
-import {AddNotebookDialog} from '../AddNotebookDialog';
+import { AddNotebookDialog } from '../AddNotebookDialog';
-import {AddTopicDialog} from '../AddTopicDialog';
+import { AddTopicDialog } from '../AddTopicDialog';
-import {Dialog} from '../Dialog';
+import { Dialog } from '../Dialog';
-import LoginDialog from '../LoginDialog';
-import MoveNoteDialog from '../MoveNoteDialog';
-import {VaultDialog} from '../VaultDialog';
-import {hexToRGBA, DDS} from '../../utils/utils';
-import {Platform} from 'react-native';
-import {TEMPLATE_DELETE, TEMPLATE_PERMANANT_DELETE} from './templates';
-import {moveNoteEvent} from './recievers';
 import MergeEditor from '../MergeEditor';
+import { VaultDialog } from '../VaultDialog';
+import { moveNoteEvent } from './recievers';
+import { TEMPLATE_DELETE, TEMPLATE_PERMANANT_DELETE } from './templates';
 
 export class DialogManager extends Component {
   constructor(props) {
@@ -307,11 +287,11 @@ export class DialogManager extends Component {
         />
 
         <VaultDialog colors={colors} />
-
+{/* 
         <MoveNoteDialog
           ref={ref => (this.moveNoteDialog = ref)}
           colors={colors}
-        />
+        /> */}
 
         <AddTopicDialog
           ref={ref => (this.addTopicsDialog = ref)}
@@ -329,7 +309,7 @@ export class DialogManager extends Component {
           colors={colors}
         />
 
-        <LoginDialog colors={colors} ref={ref => (this.loginDialog = ref)} />
+       {/*  <LoginDialog colors={colors} ref={ref => (this.loginDialog = ref)} /> */}
 
         <MergeEditor />
       </>

apps/mobile/src/components/LoginDialog/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+/* import React from 'react';
 import {Modal, TouchableOpacity, View} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import {createAppContainer} from 'react-navigation';
@@ -169,3 +169,4 @@ class LoginDialog extends React.Component {
 }
 
 export default LoginDialog;
+ */

apps/mobile/src/components/MoveNoteDialog/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+/* import React from 'react';
 import {Modal, TouchableOpacity, View} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import {createAppContainer} from 'react-navigation';
@@ -175,3 +175,4 @@ class MoveNoteDialog extends React.Component {
 }
 
 export default MoveNoteDialog;
+ */

apps/mobile/src/services/AppContainer.js

@@ -1,6 +0,0 @@
-import { TopLevelNavigator } from "./Navigator";
-import {
-  createAppContainer,
-} from 'react-navigation';
-
-export const AppContainer = createAppContainer(TopLevelNavigator);

apps/mobile/src/services/NavigationService.js

@@ -1,43 +1,19 @@
-import {
+import { StackActions } from '@react-navigation/routers';
-  NavigationActions,
+import { rootNavigatorRef } from '../utils/refs';
-  StackActions,
-} from 'react-navigation';
 
-
+function navigate(name, params) {
-
+  rootNavigatorRef .current?.navigate(name, params);
-let _navigator;
-
-function setTopLevelNavigator(navigatorRef) {
-  _navigator = navigatorRef;
 }
-
-function navigate(routeName, params) {
-  _navigator.dispatch(
-    NavigationActions.navigate({
-      routeName,
-      params,
-    }),
-  );
-}
-
-function push(routeName, params) {
-  _navigator.dispatch(
-    StackActions.push({
-      routeName,
-      params,
-    }),
-  );
-}
-
 function goBack() {
-  _navigator.dispatch(NavigationActions.back());
+   rootNavigatorRef.current?.goBack();
 }
 
-// add other navigation functions that you need and export them
+function push(...args) {
+  rootNavigatorRef.current?.dispatch(StackActions.push(...args));
+}
 
 export default {
   navigate,
-  push,
   goBack,
-  setTopLevelNavigator,
+  push,
 };

apps/mobile/src/services/Navigator.js

@@ -1,105 +1,44 @@
-import Editor from '../views/Editor';
+import {NavigationContainer} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
+import * as React from 'react';
 import Favorites from '../views/Favorites';
 import Folders from '../views/Folders';
-import ForgotPassword from '../views/ForgotPassword';
 import Home from '../views/Home/index';
-import Lists from '../views/Lists';
-import ListsEditor from '../views/ListsEditor';
 import Login from '../views/Login';
 import Notebook from '../views/Notebook';
 import Notes from '../views/Notes';
-import ReminderEditor from '../views/ReminderEditor';
-import Reminders from '../views/Reminders';
 import Settings from '../views/Settings';
 import Signup from '../views/Signup';
 import Tags from '../views/Tags';
 import Trash from '../views/Trash';
-import {createStackNavigator} from 'react-navigation-stack';
+import {rootNavigatorRef} from '../utils/refs';
-import {Animated} from 'react-native';
-const fade = props => {
-  const {position, scene} = props;
-  const index = scene.index;
-  const translateX = 0;
-  const translateY = 0;
 
-  const opacity = position.interpolate({
+const Stack = createStackNavigator();
-    inputRange: [index - 0.7, index, index + 0.7],
-    outputRange: [0.7, 1, 0.7],
-  });
 
-  return {
+export const NavigationStack = () => {
-    opacity,
+  return (
-    transform: [{translateX}, {translateY}],
+    <NavigationContainer independent={true} ref={rootNavigatorRef}>
-  };
+      <Stack.Navigator
+        initialRouteName="Home"
+        screenOptions={{
+          headerShown:false,
+          animationEnabled: false,
+          gestureEnabled: false,
+          cardOverlayEnabled: false,
+          cardShadowEnabled: false,
+        }}>
+        <Stack.Screen name="Home" component={Home} />
+        <Stack.Screen name="Folders" component={Folders} />
+        <Stack.Screen name="Favorites" component={Favorites} />
+        <Stack.Screen name="Trash" component={Trash} />
+        <Stack.Screen name="Notes" component={Notes} />
+        <Stack.Screen name="Tags" component={Tags} />
+        <Stack.Screen name="Notebook" component={Notebook} />
+        <Stack.Screen name="Login" component={Login} />
+        <Stack.Screen name="Signup" component={Signup} />
+        <Stack.Screen name="Settings" component={Settings} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
 };
 
-export const TopLevelNavigator = createStackNavigator(
-  {
-    Home: {
-      screen: Home,
-    },
-    Editor: {
-      screen: Editor,
-      navigationOptions: {
-        gesturesEnabled: false,
-      },
-    },
-    Lists: {
-      screen: Lists,
-    },
-    Folders: {
-      screen: Folders,
-    },
-    Favorites: {
-      screen: Favorites,
-    },
-    ListsEditor: {
-      screen: ListsEditor,
-    },
-    Login: {
-      screen: Login,
-    },
-    Signup: {
-      screen: Signup,
-    },
-    ForgotPassword: {
-      screen: ForgotPassword,
-    },
-    Settings: {
-      screen: Settings,
-    },
-    Trash: {
-      screen: Trash,
-    },
-    Notes: {
-      screen: Notes,
-    },
-    Tags: {
-      screen: Tags,
-    },
-    Notebook: {
-      screen: Notebook,
-    },
-  },
-  {
-    initialRouteName: 'Home',
-    defaultNavigationOptions: {
-      gestureEnabled: false,
-      headerStyle: {
-        backgroundColor: 'transparent',
-        borderBottomWidth: 0,
-        height: 0,
-      },
-    },
-    animationEnabled: false,
-    transitionConfig: () => ({
-      transitionSpec: {
-        duration: 0,
-        timing: Animated.timing,
-      },
-    }),
-    cardOverlayEnabled: true,
-    cardShadowEnabled: true,
-    animationEnabled: false,
-  },
-);

apps/mobile/src/utils/refs.js

@@ -3,3 +3,4 @@ import {createRef} from 'react';
 export const sideMenuRef = createRef();
 export const inputRef = createRef();
 export const sideMenuOverlayRef = createRef();
+export const rootNavigatorRef = createRef();

apps/mobile/src/views/Favorites/index.js

@@ -1,5 +1,4 @@
 import React, {useEffect, useState} from 'react';
-import {useIsFocused} from 'react-navigation-hooks';
 import Container from '../../components/Container';
 import {FavoritesPlaceHolder} from '../../components/ListPlaceholders';
 import {NotebookItem} from '../../components/NotebookItem';
@@ -9,7 +8,7 @@ import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
 import {ToastEvent, w, db} from '../../utils/utils';
 import SimpleList from '../../components/SimpleList';
-
+import { useIsFocused } from '@react-navigation/native';
 export const Favorites = ({navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, favorites} = state;
@@ -118,8 +117,5 @@ export const Favorites = ({navigation}) => {
   );
 };
 
-Favorites.navigationOptions = {
-  header: null,
-};
 
 export default Favorites;

apps/mobile/src/views/Folders/index.js

@@ -1,7 +1,8 @@
-import React, {useEffect, useState} from 'react';
+import {useIsFocused} from '@react-navigation/native';
+import React, {useEffect} from 'react';
 import {BackHandler} from 'react-native';
-import {useIsFocused} from 'react-navigation-hooks';
 import Container from '../../components/Container';
+import {AddNotebookEvent} from '../../components/DialogManager/recievers';
 import {NotebookPlaceHolder} from '../../components/ListPlaceholders';
 import {NotebookItem} from '../../components/NotebookItem';
 import SelectionWrapper from '../../components/SelectionWrapper';
@@ -10,12 +11,10 @@ import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {eScrollEvent} from '../../services/events';
-import {slideLeft, slideRight} from '../../utils/animations';
-import {ToastEvent, w, db} from '../../utils/utils';
-import {AddNotebookEvent} from '../../components/DialogManager/recievers';
 import NavigationService from '../../services/NavigationService';
-
+import {slideRight} from '../../utils/animations';
-export const Folders = ({navigation}) => {
+import {w} from '../../utils/utils';
+export const Folders = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
   const {
     colors,
@@ -27,7 +26,7 @@ export const Folders = ({navigation}) => {
   let isFocused = useIsFocused();
 
   const handleBackPress = () => {
-    if (navigation.state.params.isMove) {
+    if (route.params.isMove) {
       return true;
     } else {
       NavigationService.goBack();
@@ -62,7 +61,7 @@ export const Folders = ({navigation}) => {
     };
   }, []);
 
-  const params = navigation.state.params;
+  const params = route.params;
 
   const _renderItem = ({item, index}) => (
     <SelectionWrapper item={item}>
@@ -129,8 +128,4 @@ export const Folders = ({navigation}) => {
   );
 };
 
-Folders.navigationOptions = {
-  header: null,
-};
-
 export default Folders;

apps/mobile/src/views/ForgotPassword/index.js

@@ -1,13 +1,12 @@
 import React, {createRef, useEffect} from 'react';
 import {SafeAreaView, Text, TouchableOpacity, View} from 'react-native';
 import {TextInput} from 'react-native-gesture-handler';
-import {useIsFocused} from 'react-navigation-hooks';
 import {opacity, pv, SIZE, WEIGHT, DDS} from '../../common/common';
 import {Header} from '../../components/header';
 import {useTracked} from '../../provider';
 import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager';
 import {eLoginDialogNavigateBack} from '../../services/events';
-
+import { useIsFocused } from '@react-navigation/native';
 export const ForgotPassword = ({navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors, isLoginNavigator} = state;

apps/mobile/src/views/Home/index.js

@@ -1,19 +1,18 @@
-import React, {useEffect, useState} from 'react';
+import { useIsFocused } from '@react-navigation/native';
-import {useIsFocused} from 'react-navigation-hooks';
+import React, { useEffect } from 'react';
 import Container from '../../components/Container';
-import SelectionHeader from '../../components/SelectionHeader';
+import { NotesPlaceHolder } from '../../components/ListPlaceholders';
-import {useTracked} from '../../provider';
-import {ACTIONS} from '../../provider/actions';
-import {eSendEvent} from '../../services/eventManager';
-import {DDS, ToastEvent, db} from '../../utils/utils';
-import {eScrollEvent, eOnLoadNote} from '../../services/events';
-import {openEditorAnimation} from '../../utils/animations';
-import {sideMenuRef} from '../../utils/refs';
-import SimpleList from '../../components/SimpleList';
-import {NotesPlaceHolder} from '../../components/ListPlaceholders';
-import SelectionWrapper from '../../components/SelectionWrapper';
 import NoteItem from '../../components/NoteItem';
-import {Platform} from 'react-native';
+import SelectionHeader from '../../components/SelectionHeader';
+import SelectionWrapper from '../../components/SelectionWrapper';
+import SimpleList from '../../components/SimpleList';
+import { useTracked } from '../../provider';
+import { ACTIONS } from '../../provider/actions';
+import { eSendEvent } from '../../services/eventManager';
+import { eOnLoadNote, eScrollEvent } from '../../services/events';
+import { openEditorAnimation } from '../../utils/animations';
+import { sideMenuRef } from '../../utils/refs';
+import { DDS } from '../../utils/utils';
 let count = 0;
 
 export const Home = ({navigation}) => {
@@ -110,13 +109,6 @@ export const Home = ({navigation}) => {
   );
 };
 
-Home.navigationOptions = {
+
-  header: null,
-  headerStyle: {
-    backgroundColor: 'transparent',
-    borderBottomWidth: 0,
-    height: 0,
-  },
-};
 
 export default Home;

apps/mobile/src/views/Login/index.js

@@ -9,7 +9,6 @@ import {
 import * as Animatable from 'react-native-animatable';
 import {TextInput} from 'react-native-gesture-handler';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {useIsFocused} from 'react-navigation-hooks';
 import {opacity, pv, SIZE, WEIGHT} from '../../common/common';
 import {Header} from '../../components/header';
 import {useTracked} from '../../provider';
@@ -18,7 +17,7 @@ import {eSendEvent} from '../../services/eventManager';
 import {eCloseSideMenu, refreshNotesPage} from '../../services/events';
 import {validatePass, validateUsername} from '../../services/validation';
 import {db, DDS, ToastEvent, getElevation} from '../../utils/utils';
-
+import { useIsFocused } from '@react-navigation/native';
 
 
 
@@ -542,13 +541,4 @@ export const Login = ({navigation}) => {
   );
 };
 
-Login.navigationOptions = {
-  header: null,
-  headerStyle: {
-    backgroundColor: 'transparent',
-    borderBottomWidth: 0,
-    height: 0,
-  },
-};
-
 export default Login;

apps/mobile/src/views/Notebook/index.js

@@ -1,5 +1,4 @@
 import React, {useEffect, useState} from 'react';
-import {useIsFocused} from 'react-navigation-hooks';
 import Container from '../../components/Container';
 import {AddTopicEvent} from '../../components/DialogManager/recievers';
 import {NotebookPlaceHolder} from '../../components/ListPlaceholders';
@@ -8,6 +7,7 @@ import SelectionWrapper from '../../components/SelectionWrapper';
 import SimpleList from '../../components/SimpleList';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
+import { useIsFocused } from '@react-navigation/native';
 import {
   eSendEvent,
   eSubscribeEvent,
@@ -155,8 +155,4 @@ export const Notebook = ({navigation}) => {
   );
 };
 
-Notebook.navigationOptions = {
-  header: null,
-};
-
 export default Notebook;

apps/mobile/src/views/Notes/index.js

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {useIsFocused} from 'react-navigation-hooks';
+import { useIsFocused } from '@react-navigation/native';
 import Container from '../../components/Container';
 import {NotesPlaceHolder} from '../../components/ListPlaceholders';
 import NoteItem from '../../components/NoteItem';
@@ -21,14 +21,14 @@ import {openEditorAnimation} from '../../utils/animations';
 import {db, DDS, editing, ToastEvent} from '../../utils/utils';
 import {sideMenuRef} from '../../utils/refs';
 
-export const Notes = ({navigation}) => {
+export const Notes = ({route,navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, currentEditingNote, colorNotes} = state;
   const allNotes = state.notes;
   const [notes, setNotes] = useState([]);
   const [refreshing, setRefreshing] = useState(false);
   const isFocused = useIsFocused();
-  let params = navigation.state ? navigation.state.params : null;
+  let params = route.params ? route.params : null;
 
   useEffect(() => {
     if (!params) {
@@ -64,24 +64,21 @@ export const Notes = ({navigation}) => {
   }, []);
 
   const init = (data) => {
-    params = navigation.state.params;
+    params = route.params;
     if (data) {
       params = data;
     }
     eSendEvent(eScrollEvent, 0);
     if (params.type === 'tag') {
       let notesInTag = db.notes.tagged(params.tag.title);
-
       setNotes([...notesInTag]);
     } else if (params.type == 'color') {
       let notesInColors = db.notes.colored(params.color.title);
-
       setNotes([...notesInColors]);
     } else {
       let allNotes = db.notebooks
         .notebook(params.notebookId)
         .topics.topic(params.title).all;
-
       if (allNotes && allNotes.length > 0) {
         setNotes([...allNotes]);
       }
@@ -200,8 +197,4 @@ export const Notes = ({navigation}) => {
   );
 };
 
-Notes.navigationOptions = {
-  header: null,
-};
-
 export default Notes;

apps/mobile/src/views/Settings/index.js

@@ -780,8 +780,5 @@ export const Settings = ({navigation}) => {
   );
 };
 
-Settings.navigationOptions = {
-  header: null,
-};
 
 export default Settings;

apps/mobile/src/views/Signup/index.js

@@ -10,7 +10,7 @@ import {
 } from 'react-native';
 import {TextInput} from 'react-native-gesture-handler';
 import QRCode from 'react-native-qrcode-generator';
-import {useIsFocused} from 'react-navigation-hooks';
+import { useIsFocused } from '@react-navigation/native';
 import {opacity, pv, SIZE, WEIGHT, ph} from '../../common/common';
 import {Header} from '../../components/header';
 import {useTracked} from '../../provider';
@@ -704,13 +704,6 @@ export const Signup = ({navigation}) => {
   );
 };
 
-Signup.navigationOptions = {
+
-  header: null,
-  headerStyle: {
-    backgroundColor: 'transparent',
-    borderBottomWidth: 0,
-    height: 0,
-  },
-};
 
 export default Signup;

apps/mobile/src/views/Tags/index.js

@@ -1,6 +1,6 @@
 import React, {useEffect} from 'react';
 import {Text, TouchableOpacity, View} from 'react-native';
-import {useIsFocused} from 'react-navigation-hooks';
+import { useIsFocused } from '@react-navigation/native';
 import {pv, SIZE, WEIGHT} from '../../common/common';
 import Container from '../../components/Container';
 import {TagsPlaceHolder} from '../../components/ListPlaceholders';
@@ -99,8 +99,4 @@ export const Tags = ({navigation}) => {
   );
 };
 
-Tags.navigationOptions = {
-  header: null,
-};
-
 export default Tags;

apps/mobile/src/views/Trash/index.js

@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react';
-import {useIsFocused} from 'react-navigation-hooks';
+import { useIsFocused } from '@react-navigation/native';
 import Container from '../../components/Container';
 import {simpleDialogEvent} from '../../components/DialogManager/recievers';
 import {TEMPLATE_EMPTY_TRASH} from '../../components/DialogManager/templates';
@@ -108,8 +108,4 @@ export const Trash = ({navigation}) => {
   );
 };
 
-Trash.navigationOptions = {
-  header: null,
-};
-
 export default Trash;