Improvement/react navigation upgrade 5 (#2731)

* Move to new dependencies * move navigation.getparam to route.params * add navigationOptions * Fix dismiss and drawer working * Fix remaining route params * Fix switch navigator and fiat on ramp nav * Fix routename and pop * Remove screen props * Fix deeplink navigation * Fix navigation for inner screens * Ignore navigation warning * Fix get route * Fix showing protect wallet modal * Add route to proptypes * Add more missing proptypes * Update tests * Fix some more navigations * Update collectibles navigatoin * Use useNavigation * Use optional chaining on `dangerouslyGetParent()` * Removing ?? null and ?? undefined * Reorganize nav imports in App/index * Update findRouteNameFromNavigatorState * Remove noop functions * Adding testing for navigation * Add more navigation tests * Add comment explaining the test files * Remove unnecessary boolean casting * Remove unnecessary variable * Remove unnecessary boolean casting * Fixes navigation issues * Fix navigation issues * Fix QR scanner * fixed enroll navigation reset issue * Fix going to wallet view * updated test cases * Fix simple notification * Fix going to onboarding * added snapshots to test * fixed what new modal test * added picker to package.json * yarn clean * yarn update command * snapshot update * removed the dive method on the wrapper * snapshot update * update yarn unit test * commented out cache in build step * Bug/fix nft gesture experience (#2862) * Fix collections modal * Make eslint happy * Clean up modal code TODO: Converting components into hooks will save us from re-renders and from doing things like waiting to focus on inputs * Remove in-house safe area from reusable modal for now * Fix scroll interaction in collectible modal action sheet * Use color from overlay * Add test snap files * Update snapshots and make tests pass * uncommented cache for bitrise Co-authored-by: Pedro Pablo Aste Kompen <[email protected]> Co-authored-by: sethkfman <[email protected]> Co-authored-by: Cal Leung <[email protected]>
MetaMask · Jul 2, 2021 · 30d15c7 · 30d15c7
1 parent 73fcef6
commit 30d15c7
Show file tree

Hide file tree

Showing 158 changed files with 3,220 additions and 2,875 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -20,6 +20,11 @@ module.exports = {
 		waitFor: true,
 		__DEV__: true
 	},
+	settings: {
+		'import/resolver': {
+			typescript: {} // this loads <rootdir>/tsconfig.json to eslint
+		}
+	},
 	rules: {
 		'no-catch-shadow': 0,
 		'no-console': ['warn', { allow: ['warn', 'error'] }],

diff --git a/app/components/Nav/App/__snapshots__/index.test.js.snap b/app/components/Nav/App/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`App should render correctly 1`] = `
-<NavigationContainer
-  theme="light"
-/>
+<ForwardRef(NavigationContainer)>
+  <Navigator />
+</ForwardRef(NavigationContainer)>
 `;
diff --git a/app/components/Nav/App/index.js b/app/components/Nav/App/index.js
@@ -1,8 +1,10 @@
 import React, { PureComponent } from 'react';
-import { createAppContainer, createSwitchNavigator, NavigationActions } from 'react-navigation';
+import Branch from 'react-native-branch';
+import { NavigationContainer, CommonActions } from '@react-navigation/native';
+import { createSwitchNavigator } from '@react-navigation/compat';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
 
-import { createStackNavigator } from 'react-navigation-stack';
-import { createDrawerNavigator } from 'react-navigation-drawer';
 import Login from '../../Views/Login';
 import QRScanner from '../../Views/QRScanner';
 import Onboarding from '../../Views/Onboarding';
@@ -22,121 +24,100 @@ import Main from '../Main';
 import DrawerView from '../../UI/DrawerView';
 import OptinMetrics from '../../UI/OptinMetrics';
 import SimpleWebview from '../../Views/SimpleWebview';
-import DrawerStatusTracker from '../../../core/DrawerStatusTracker';
+
+//import DrawerStatusTracker from '../../../core/DrawerStatusTracker';
 import SharedDeeplinkManager from '../../../core/DeeplinkManager';
 import Engine from '../../../core/Engine';
-import Logger from '../../../util/Logger';
-import Branch from 'react-native-branch';
 import AppConstants from '../../../core/AppConstants';
+import Logger from '../../../util/Logger';
 import { trackErrorAsAnalytics } from '../../../util/analyticsV2';
 
+const Stack = createStackNavigator();
+const Drawer = createDrawerNavigator();
 /**
  * Stack navigator responsible for the onboarding process
  * Create Wallet, Import from Seed and Sync
  */
-const OnboardingNav = createStackNavigator(
-	{
-		Onboarding: {
-			screen: Onboarding
-		},
-		OnboardingCarousel: {
-			screen: OnboardingCarousel
-		},
-		CreateWallet: {
-			screen: CreateWallet
-		},
-		ChoosePassword: {
-			screen: ChoosePassword
-		},
-		AccountBackupStep1: {
-			screen: AccountBackupStep1
-		},
-		AccountBackupStep1B: {
-			screen: AccountBackupStep1B
-		},
-		ManualBackupStep1: {
-			screen: ManualBackupStep1
-		},
-		ManualBackupStep2: {
-			screen: ManualBackupStep2
-		},
-		ManualBackupStep3: {
-			screen: ManualBackupStep3
-		},
-		ImportFromSeed: {
-			screen: ImportFromSeed
-		},
-		OptinMetrics: {
-			screen: OptinMetrics
-		}
-	},
-	{
-		initialRouteName: 'OnboardingCarousel'
-	}
+const OnboardingNav = () => (
+	<Stack.Navigator initialRouteName="OnboardingCarousel">
+		<Stack.Screen name="Onboarding" component={Onboarding} options={Onboarding.navigationOptions} />
+		<Stack.Screen
+			name="OnboardingCarousel"
+			component={OnboardingCarousel}
+			options={OnboardingCarousel.navigationOptions}
+		/>
+		<Stack.Screen name="CreateWallet" component={CreateWallet} options={CreateWallet.navigationOptions} />
+		<Stack.Screen name="ChoosePassword" component={ChoosePassword} options={ChoosePassword.navigationOptions} />
+		<Stack.Screen
+			name="AccountBackupStep1"
+			component={AccountBackupStep1}
+			options={AccountBackupStep1.navigationOptions}
+		/>
+		<Stack.Screen
+			name="AccountBackupStep1B"
+			component={AccountBackupStep1B}
+			options={AccountBackupStep1B.navigationOptions}
+		/>
+		<Stack.Screen
+			name="ManualBackupStep1"
+			component={ManualBackupStep1}
+			options={ManualBackupStep1.navigationOptions}
+		/>
+		<Stack.Screen
+			name="ManualBackupStep2"
+			component={ManualBackupStep2}
+			options={ManualBackupStep2.navigationOptions}
+		/>
+		<Stack.Screen
+			name="ManualBackupStep3"
+			component={ManualBackupStep3}
+			options={ManualBackupStep3.navigationOptions}
+		/>
+		<Stack.Screen name="ImportFromSeed" component={ImportFromSeed} options={ImportFromSeed.navigationOptions} />
+		<Stack.Screen name="OptinMetrics" component={OptinMetrics} options={OptinMetrics.navigationOptions} />
+	</Stack.Navigator>
 );
 
 /**
  * Parent Stack navigator that allows the
  * child OnboardingNav navigator to push modals on top of it
  */
-const OnboardingRootNav = createStackNavigator(
-	{
-		OnboardingNav: {
-			screen: OnboardingNav,
-			navigationOptions: {
-				header: null
-			}
-		},
-		SyncWithExtensionSuccess: {
-			screen: SyncWithExtensionSuccess
-		},
-		QRScanner: {
-			screen: QRScanner,
-			navigationOptions: {
-				header: null
-			}
-		},
-		Webview: {
-			screen: createStackNavigator(
-				{
-					SimpleWebview: {
-						screen: SimpleWebview
-					}
-				},
-				{
-					mode: 'modal'
-				}
-			),
-			navigationOptions: {
-				header: null
-			}
-		}
-	},
-	{
-		mode: 'modal'
-	}
+const SimpleWebviewScreen = () => (
+	<Stack.Navigator mode={'modal'}>
+		<Stack.Screen name="SimpleWebview" component={SimpleWebview} options={SimpleWebview.navigationOptions} />
+	</Stack.Navigator>
+);
+
+const OnboardingRootNav = () => (
+	<Stack.Navigator mode="modal" screenOptions={{ headerShown: false }}>
+		<Stack.Screen name="OnboardingNav" component={OnboardingNav} />
+		<Stack.Screen name="SyncWithExtensionSuccess" component={SyncWithExtensionSuccess} />
+		<Stack.Screen name="QRScanner" component={QRScanner} header={null} />
+		<Stack.Screen name="Webview" header={null} component={SimpleWebviewScreen} />
+	</Stack.Navigator>
 );
 
 /**
  * Main app navigator which handles all the screens
  * after the user is already onboarded
  */
-const HomeNav = createDrawerNavigator(
-	{
-		Main: {
-			screen: Main
-		}
-	},
-	{
-		contentComponent: DrawerView,
-		drawerWidth: 315,
-		overlayColor: 'rgba(0, 0, 0, 0.5)'
-	}
+
+const HomeNav = () => (
+	<Drawer.Navigator
+		drawerContent={props => <DrawerView {...props} />}
+		// eslint-disable-next-line
+		drawerStyle={{
+			backgroundColor: 'rgba(0, 0, 0, 0.5)',
+			width: 315
+		}}
+	>
+		<Drawer.Screen name="Main" component={Main} />
+	</Drawer.Navigator>
 );
 
+// Is this necessary?
 /**
  * Drawer status tracking
- */
 const defaultGetStateForAction = HomeNav.router.getStateForAction;
 DrawerStatusTracker.init();
 HomeNav.router.getStateForAction = (action, state) => {
@@ -150,11 +131,13 @@ HomeNav.router.getStateForAction = (action, state) => {
 
 	return defaultGetStateForAction(action, state);
 };
+*/
 
 /**
  * Top level switch navigator which decides
  * which top level view to show
  */
+
 const AppNavigator = createSwitchNavigator(
 	{
 		Entry,
@@ -169,15 +152,13 @@ const AppNavigator = createSwitchNavigator(
 	}
 );
 
-const AppContainer = createAppContainer(AppNavigator);
-
 class App extends PureComponent {
 	unsubscribeFromBranch;
 
 	componentDidMount = () => {
 		SharedDeeplinkManager.init({
-			navigate: (routeName, opts) => {
-				this.navigator.dispatch(NavigationActions.navigate({ routeName, params: opts }));
+			navigate: (name, opts) => {
+				this.navigator.dispatch(CommonActions.navigate({ name, params: opts }));
 			}
 		});
 		if (!this.unsubscribeFromBranch) {
@@ -213,11 +194,13 @@ class App extends PureComponent {
 
 	render() {
 		return (
-			<AppContainer
+			<NavigationContainer
 				ref={nav => {
 					this.navigator = nav;
 				}}
-			/>
+			>
+				<AppNavigator />
+			</NavigationContainer>
 		);
 	}
 }