Upgrade react-navigation to 6.x

babel.config.js

@@ -26,7 +26,9 @@ const webpack = {
 
 const metro = {
     presets: [require('metro-react-native-babel-preset')],
-    plugins: [],
+    plugins: [
+        'react-native-reanimated/plugin',
+    ],
 };
 
 module.exports = ({caller}) => {

config/webpack/webpack.common.js

@@ -13,6 +13,7 @@ const platformExclude = platform === 'web' ? new RegExp(/\.desktop\.js$/) : new
 
 const includeModules = [
     'react-native-animatable',
+    'react-native-reanimated',
     'react-native-picker-select',
     'react-native-web',
     '@react-native-picker',

ios/Podfile.lock

@@ -421,8 +421,35 @@ PODS:
     - RNFBApp
   - RNGestureHandler (1.9.0):
     - React-Core
-  - RNReanimated (1.13.2):
+  - RNReanimated (2.1.0):
+    - DoubleConversion
+    - FBLazyVector
+    - FBReactNativeSpec
+    - Folly
+    - glog
+    - RCTRequired
+    - RCTTypeSafety
+    - React
+    - React-callinvoker
     - React-Core
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector
+    - React-RCTActionSheet
+    - React-RCTAnimation
+    - React-RCTBlob
+    - React-RCTImage
+    - React-RCTLinking
+    - React-RCTNetwork
+    - React-RCTSettings
+    - React-RCTText
+    - React-RCTVibration
+    - ReactCommon/turbomodule/core
+    - Yoga
   - RNScreens (2.17.1):
     - React-Core
   - RNSVG (12.1.0):
@@ -697,7 +724,7 @@ SPEC CHECKSUMS:
   RNFBApp: 7eacc7da7ab19f96c05e434017d44a9f09410da8
   RNFBCrashlytics: 4870c14cf8833053b6b5648911abefe1923854d2
   RNGestureHandler: 9b7e605a741412e20e13c512738a31bd1611759b
-  RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
+  RNReanimated: 70f662b5232dd5d19ccff581e919a54ea73df51c
   RNScreens: b6c9607e6fe47c1b6e2f1910d2acd46dd7ecea3a
   RNSVG: ce9d996113475209013317e48b05c21ee988d42e
   urbanairship-react-native: dfb6dc22b2f41ccaadd636b73d51b448cd1b2bbc

package.json

@@ -41,18 +41,18 @@
     "@react-native-community/async-storage": "^1.11.0",
     "@react-native-community/cli": "4.13.1",
     "@react-native-community/clipboard": "^1.5.1",
-    "@react-native-community/masked-view": "^0.1.10",
     "@react-native-community/netinfo": "^5.9.10",
     "@react-native-community/progress-bar-android": "^1.0.4",
     "@react-native-community/progress-view": "^1.2.3",
     "@react-native-firebase/analytics": "^7.6.7",
     "@react-native-firebase/app": "^8.4.5",
     "@react-native-firebase/crashlytics": "^8.4.9",
+    "@react-native-masked-view/masked-view": "^0.2.4",
     "@react-native-picker/picker": "^1.9.11",
     "@react-navigation/compat": "^5.3.15",
-    "@react-navigation/drawer": "5.12.5",
-    "@react-navigation/native": "5.9.2",
-    "@react-navigation/stack": "5.14.2",
+    "@react-navigation/drawer": "^6.0.0-next.10",
+    "@react-navigation/native": "^6.0.0-next.8",
+    "@react-navigation/stack": "^6.0.0-next.17",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "dotenv": "^8.2.0",
     "electron-context-menu": "^2.3.0",
@@ -82,7 +82,7 @@
     "react-native-onyx": "git+https://github.com/Expensify/react-native-onyx.git#586c76e7b90dbbde051d7ec7adbc4d53b2d51cd1",
     "react-native-pdf": "^6.2.2",
     "react-native-picker-select": "8.0.4",
-    "react-native-reanimated": "1.13.2",
+    "react-native-reanimated": "^2.1.0",
     "react-native-render-html": "^6.0.0-alpha.10",
     "react-native-safe-area-context": "^3.1.4",
     "react-native-screens": "2.17.1",

src/components/withDrawerState.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {useIsDrawerOpen} from '@react-navigation/drawer';
+import {useDrawerStatus} from '@react-navigation/drawer';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
 
 export const withDrawerPropTypes = {
@@ -9,13 +9,13 @@ export const withDrawerPropTypes = {
 
 export default function withDrawerState(WrappedComponent) {
     const HOC_Wrapper = (props) => {
-        const isDrawerOpen = useIsDrawerOpen();
+        const drawerStatus = useDrawerStatus();
 
         return (
             <WrappedComponent
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
-                isDrawerOpen={isDrawerOpen}
+                isDrawerOpen={drawerStatus === 'open'}
             />
         );
     };

src/libs/Navigation/AppNavigator/MainDrawerNavigator.js

@@ -56,17 +56,18 @@ const MainDrawerNavigator = (props) => {
     return (
         <Drawer.Navigator
             openByDefault={props.isSmallScreenWidth}
-            drawerType={getNavigationDrawerType(props.isSmallScreenWidth)}
-            drawerStyle={getNavigationDrawerStyle(
-                props.windowWidth,
-                props.isSmallScreenWidth,
-            )}
             sceneContainerStyle={styles.navigationSceneContainer}
-            edgeWidth={500}
-            drawerContent={() => <SidebarScreen />}
+            drawerContent={(props) => <SidebarScreen {...props} />}
             screenOptions={{
                 cardStyle: styles.navigationScreenCardStyle,
                 headerShown: false,
+                drawerType: getNavigationDrawerType(props.isSmallScreenWidth),
+                drawerStyle: getNavigationDrawerStyle(
+                    props.windowWidth,
+                    props.isSmallScreenWidth,
+                ),
+                swipeEdgeWidth: 500,
+                swipeEnabled: true,
             }}
         >
             <Drawer.Screen

src/libs/Navigation/linkTo.js

@@ -23,7 +23,7 @@ export default function linkTo(navigation, path) {
 
     // Traverse up to get the root navigation
     // eslint-disable-next-line no-cond-assign
-    while ((current = root.dangerouslyGetParent())) {
+    while ((current = root.getParent())) {
         root = current;
     }