upgrade MoveNote Navigator

apps/mobile/index.js

@@ -1,12 +1,11 @@
 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 (

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

@@ -47,6 +47,7 @@ export const Container = ({
   noSelectionHeader = false,
   headerColor = null,
   type = null,
+  route
 }) => {
   // State
   const [state, dispatch] = useTracked();
@@ -210,6 +211,7 @@ export const Container = ({
               countUp = 0;
               countDown = 0;
             }}
+            route={route}
             headerColor={headerColor}
             navigation={navigation}
             colors={colors}

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

@@ -12,6 +12,7 @@ import MergeEditor from '../MergeEditor';
 import { VaultDialog } from '../VaultDialog';
 import { moveNoteEvent } from './recievers';
 import { TEMPLATE_DELETE, TEMPLATE_PERMANANT_DELETE } from './templates';
+import MoveNoteDialog from '../MoveNoteDialog';
 
 export class DialogManager extends Component {
   constructor(props) {
@@ -287,11 +288,11 @@ export class DialogManager extends Component {
         />
 
         <VaultDialog colors={colors} />
-{/* 
+
         <MoveNoteDialog
           ref={ref => (this.moveNoteDialog = ref)}
           colors={colors}
-        /> */}
+        /> 
 
         <AddTopicDialog
           ref={ref => (this.addTopicsDialog = ref)}

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

@@ -1,8 +1,6 @@
-/* import React from 'react';
+import React, {createRef} from 'react';
 import {Modal, TouchableOpacity, View} from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import {createAppContainer} from 'react-navigation';
-import {createStackNavigator} from 'react-navigation-stack';
 import {ACTIONS} from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {eMoveNoteDialogNavigateBack} from '../../services/events';
@@ -11,69 +9,45 @@ import Folders from '../../views/Folders';
 import Notebook from '../../views/Notebook';
 import Notes from '../../views/Notes';
 import {updateEvent} from '../DialogManager/recievers';
+import {NavigationContainer} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
 
-const fade = props => {
-  const {position, scene} = props;
-
-  const index = scene.index;
-
-  const translateX = 0;
-  const translateY = 0;
-
-  const opacity = position.interpolate({
-    inputRange: [index - 0.7, index, index + 0.7],
-    outputRange: [0.3, 1, 0.3],
-  });
-
-  return {
-    opacity,
-    transform: [{translateX}, {translateY}],
-  };
+const Stack = createStackNavigator();
+const modalNavigatorRef = createRef();
+const ModalNavigator = () => {
+  return (
+    <NavigationContainer independent={true} ref={modalNavigatorRef}>
+      <Stack.Navigator
+        initialRouteName="Folders"
+        screenOptions={{
+          headerShown: false,
+          animationEnabled: false,
+          gestureEnabled: false,
+          cardOverlayEnabled: false,
+          cardShadowEnabled: false,
+        }}>
+        <Stack.Screen
+          name="Folders"
+          component={Folders}
+          initialParams={{
+            title: 'Select Notebook',
+            isMove: true,
+            hideMore: true,
+            canGoBack: true,
+          }}
+        />
+        <Stack.Screen name="Notes" component={Notes} />
+        <Stack.Screen name="Notebook" component={Notebook} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
 };
 
-const ModalNavigator = createStackNavigator(
-  {
-    Folders: {
-      screen: Folders,
-    },
-    Notebook: {
-      screen: Notebook,
-    },
-    Notes: {
-      screen: Notes,
-    },
-  },
-  {
-    initialRouteName: 'Folders',
-    initialRouteParams: {
-      title: 'Select Notebook',
-      isMove: true,
-      hideMore: true,
-      canGoBack: true,
-    },
-    defaultNavigationOptions: {
-      gesturesEnabled: false,
-      headerStyle: {
-        backgroundColor: 'transparent',
-        borderBottomWidth: 0,
-        height: 0,
-      },
-    },
-    transitionConfig: () => ({
-      screenInterpolator: props => {
-        return fade(props);
-      },
-    }),
-  },
-);
-
-const Navigator = createAppContainer(ModalNavigator);
-
 class MoveNoteDialog extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      visible: false,
+      visible: true,
       animated: false,
     };
     this.routeIndex = 0;
@@ -161,12 +135,7 @@ class MoveNoteDialog extends React.Component {
               padding: DDS.isTab ? 8 : 0,
               zIndex: 10,
             }}>
-            <Navigator
-              ref={ref => (this.navigation = ref)}
-              onNavigationStateChange={state => {
-                this.routeIndex = state.index;
-              }}
-            />
+            <ModalNavigator />
           </View>
         </Animatable.View>
       </Modal>
@@ -175,4 +144,3 @@ class MoveNoteDialog extends React.Component {
 }
 
 export default MoveNoteDialog;
- */

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

@@ -32,6 +32,7 @@ export const Header = ({
   navigation = null,
   isLoginNavigator,
   headerColor,
+  route,
 }) => {
   const [state, dispatch] = useTracked();
   const {colors, syncing} = state;
@@ -94,13 +95,13 @@ export const Header = ({
             hitSlop={{top: 20, bottom: 20, left: 50, right: 40}}
             onPress={() => {
               if (navigation && preventDefaultMargins) {
-                if (navigation.state.routeName === 'Folders') {
+                if (route.name === 'Folders') {
                   moveNoteHideEvent();
                 } else {
                   navigation.goBack();
                 }
               } else if (navigation && isLoginNavigator) {
-                if (navigation.state.routeName === 'Login') {
+                if (route.name === 'Login') {
                   eSendEvent(eCloseLoginDialog);
                 } else {
                   navigation.goBack();

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

@@ -35,6 +35,7 @@ export const Folders = ({route, navigation}) => {
   };
 
   useEffect(() => {
+   
     if (isFocused) {
       dispatch({type: ACTIONS.PINNED});
       dispatch({type: ACTIONS.NOTEBOOKS});
@@ -68,6 +69,7 @@ export const Folders = ({route, navigation}) => {
       <NotebookItem
         hideMore={params.hideMore}
         navigation={navigation}
+        route={route}
         customStyle={{
           width: selectionMode ? w - 74 : '100%',
           marginHorizontal: 0,
@@ -97,10 +99,11 @@ export const Folders = ({route, navigation}) => {
   return (
     <Container
       bottomButtonText="Create a new notebook"
-      menu={params.canGoBack ? false : true}
+      menu={route.params.canGoBack ? false : true}
       preventDefaultMargins={preventDefaultMargins}
       heading={params.title}
       canGoBack={params.canGoBack}
+      route={route}
       navigation={navigation}
       placeholder="Search all notebooks"
       data={notebooks}