Bugfix: Native stack navigation related issues (#361)

* fix navigation / camera issues * clean up * more clean up * rename param * fix android * fix naming
rainbow-me · Feb 13, 2020 · 1d5a130 · 1d5a130
1 parent 31800fa
commit 1d5a130
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 24 deletions.
diff --git a/src/screens/CurrencySelectModal.js b/src/screens/CurrencySelectModal.js
@@ -40,7 +40,6 @@ export const CurrencySelectionTypes = {
 
 class CurrencySelectModal extends Component {
   static propTypes = {
-    isFocused: PropTypes.bool,
     navigation: PropTypes.object,
     sortedUniswapAssets: PropTypes.array,
     transitionPosition: PropTypes.object,
@@ -67,11 +66,14 @@ class CurrencySelectModal extends Component {
     const currentAssetsUniqueId = buildUniqueIdForListData(currentAssets);
     const nextAssetsUniqueId = buildUniqueIdForListData(nextAssets);
     const isNewAssets = currentAssetsUniqueId !== nextAssetsUniqueId;
+    const isFocused = this.props.navigation.getParam('focused', false);
+    const willBeFocused = nextProps.navigation.getParam('focused', false);
 
-    const isNewProps = isNewValueForObjectPaths(this.props, nextProps, [
-      'isFocused',
-      'type',
-    ]);
+    const isNewProps = isNewValueForObjectPaths(
+      { ...this.props, isFocused },
+      { ...nextProps, isFocused: willBeFocused },
+      ['isFocused', 'type']
+    );
 
     const isNewState = isNewValueForObjectPaths(this.state, nextState, [
       'searchQuery',
@@ -142,7 +144,6 @@ class CurrencySelectModal extends Component {
   render = () => {
     const {
       uniswapAssetsInWallet,
-      isFocused,
       sortedUniswapAssets,
       transitionPosition,
       type,
@@ -164,6 +165,7 @@ class CurrencySelectModal extends Component {
     }
 
     const listItems = filterList(assets, searchQuery, 'uniqueId');
+    const isFocused = this.props.navigation.getParam('focused', false);
 
     return (
       <KeyboardFixedOpenLayout>

diff --git a/src/screens/QRScannerScreenWithData.js b/src/screens/QRScannerScreenWithData.js
@@ -34,17 +34,19 @@ class QRScannerScreenWithData extends Component {
   };
 
   componentDidUpdate = (prevProps, prevState) => {
-    if (this.props.isFocused && !prevProps.isFocused) {
+    const wasFocused = prevProps.navigation.getParam('focused', false);
+    const isFocused = this.props.navigation.getParam('focused', false);
+
+    if (isFocused && !wasFocused) {
       Permissions.request('camera').then(permission => {
         const isCameraAuthorized = permission === 'authorized';
-
         if (prevState.isCameraAuthorized !== isCameraAuthorized) {
           this.setState({ isCameraAuthorized });
         }
       });
 
       // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({ enableScanning: true });
+      !this.state.enableScanning && this.setState({ enableScanning: true });
     }
   };
 
@@ -103,17 +105,22 @@ class QRScannerScreenWithData extends Component {
     });
   };
 
-  render = () => (
-    <QRScannerScreen
-      {...this.props}
-      {...this.state}
-      enableScanning={this.state.enableScanning && this.props.isFocused}
-      onPressBackButton={this.handlePressBackButton}
-      onPressPasteSessionUri={this.handlePressPasteSessionUri}
-      onScanSuccess={this.handleScanSuccess}
-      onSheetLayout={this.handleSheetLayout}
-    />
-  );
+  render = () => {
+    const isFocused = this.props.navigation.getParam('focused', false);
+
+    return (
+      <QRScannerScreen
+        {...this.props}
+        {...this.state}
+        isFocused={isFocused}
+        enableScanning={this.state.enableScanning && isFocused}
+        onPressBackButton={this.handlePressBackButton}
+        onPressPasteSessionUri={this.handlePressPasteSessionUri}
+        onScanSuccess={this.handleScanSuccess}
+        onSheetLayout={this.handleSheetLayout}
+      />
+    );
+  };
 }
 
 export default compose(

diff --git a/src/screens/Routes/Routes.android.js b/src/screens/Routes/Routes.android.js
@@ -2,7 +2,7 @@ import analytics from '@segment/analytics-react-native';
 import { get, omit } from 'lodash';
 import React from 'react';
 import { StatusBar } from 'react-native';
-import { createAppContainer } from 'react-navigation';
+import { createAppContainer, NavigationActions } from 'react-navigation';
 import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
 import ViewPagerAdapter from 'react-native-tab-view-viewpager-adapter';
 // eslint-disable-next-line import/no-unresolved
@@ -219,13 +219,52 @@ const AppContainerWithAnalytics = React.forwardRef((props, ref) => (
       const { params, routeName } = Navigation.getActiveRoute(currentState);
       const prevRouteName = Navigation.getActiveRouteName(prevState);
       // native stack rn does not support onTransitionEnd and onTransitionStart
+      // Set focus manually on route changes
+      if (prevRouteName !== routeName) {
+        Navigation.handleAction(
+          NavigationActions.setParams({
+            key: routeName,
+            params: { focused: true },
+          })
+        );
+
+        Navigation.handleAction(
+          NavigationActions.setParams({
+            key: prevRouteName,
+            params: { focused: false },
+          })
+        );
+      }
+
+      if (
+        prevRouteName !== 'QRScannerScreen' &&
+        routeName === 'QRScannerScreen'
+      ) {
+        StatusBar.setBarStyle('light-content');
+      }
+
+      if (
+        prevRouteName === 'QRScannerScreen' &&
+        routeName !== 'QRScannerScreen'
+      ) {
+        StatusBar.setBarStyle('dark-content');
+      }
+
       if (
         prevRouteName === 'ImportSeedPhraseSheet' &&
         (routeName === 'ProfileScreen' || routeName === 'WalletScreen')
       ) {
         StatusBar.setBarStyle('dark-content');
       }
 
+      if (prevRouteName === 'WalletScreen' && routeName === 'SendSheet') {
+        StatusBar.setBarStyle('light-content');
+      }
+
+      if (prevRouteName === 'SendSheet' && routeName === 'WalletScreen') {
+        StatusBar.setBarStyle('dark-content');
+      }
+
       if (routeName === 'SettingsModal') {
         let subRoute = get(params, 'section.title');
         if (subRoute === 'Settings') subRoute = null;
@@ -235,7 +274,7 @@ const AppContainerWithAnalytics = React.forwardRef((props, ref) => (
       }
 
       if (routeName !== prevRouteName) {
-        let paramsToTrack = {};
+        let paramsToTrack = null;
 
         if (
           prevRouteName === 'MainExchangeScreen' &&

diff --git a/src/screens/Routes/Routes.ios.js b/src/screens/Routes/Routes.ios.js
@@ -2,7 +2,7 @@ import analytics from '@segment/analytics-react-native';
 import { get, omit } from 'lodash';
 import React from 'react';
 import { StatusBar } from 'react-native';
-import { createAppContainer } from 'react-navigation';
+import { createAppContainer, NavigationActions } from 'react-navigation';
 import { createMaterialTopTabNavigator } from 'react-navigation-tabs-v1';
 // eslint-disable-next-line import/no-unresolved
 import { enableScreens } from 'react-native-screens';
@@ -261,6 +261,37 @@ const AppContainerWithAnalytics = React.forwardRef((props, ref) => (
       const { params, routeName } = Navigation.getActiveRoute(currentState);
       const prevRouteName = Navigation.getActiveRouteName(prevState);
       // native stack rn does not support onTransitionEnd and onTransitionStart
+      // Set focus manually on route changes
+      if (prevRouteName !== routeName) {
+        Navigation.handleAction(
+          NavigationActions.setParams({
+            key: routeName,
+            params: { focused: true },
+          })
+        );
+
+        Navigation.handleAction(
+          NavigationActions.setParams({
+            key: prevRouteName,
+            params: { focused: false },
+          })
+        );
+      }
+
+      if (
+        prevRouteName !== 'QRScannerScreen' &&
+        routeName === 'QRScannerScreen'
+      ) {
+        StatusBar.setBarStyle('light-content');
+      }
+
+      if (
+        prevRouteName === 'QRScannerScreen' &&
+        routeName !== 'QRScannerScreen'
+      ) {
+        StatusBar.setBarStyle('dark-content');
+      }
+
       if (
         prevRouteName === 'ImportSeedPhraseSheet' &&
         (routeName === 'ProfileScreen' || routeName === 'WalletScreen')

diff --git a/src/screens/WalletScreen.js b/src/screens/WalletScreen.js
@@ -52,6 +52,7 @@ class WalletScreen extends Component {
     try {
       await this.props.initializeWallet();
       const keyboardheight = await getKeyboardHeight();
+
       if (keyboardheight) {
         this.props.setKeyboardHeight(keyboardheight);
       }
@@ -61,7 +62,7 @@ class WalletScreen extends Component {
   };
 
   shouldComponentUpdate = nextProps =>
-    nextProps.navigation.isFocused() &&
+    nextProps.navigation.getParam('focused', true) &&
     isNewValueForObjectPaths(this.props, nextProps, [
       'fetchingAssets',
       'fetchingUniqueTokens',