fix: use react-lifecycles-compat for async mode compatibility

react-navigation · Aug 18, 2019 · c436433 · c436433
1 parent 8f2d6aa
commit c436433
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 19 deletions.
diff --git a/packages/bottom-tabs/README.md b/packages/bottom-tabs/README.md
@@ -35,7 +35,7 @@ You can install another package, `react-navigation-material-bottom-tabs`, to use
 - `createMaterialBottomTabNavigator`: Material design themed animated bottom tabs, from [react-native-paper](https://callstack.github.io/react-native-paper/bottom-navigation.html).
 
 ```js
-import createMaterialBottomTabNavigator from 'react-navigation-material-bottom-tabs/createMaterialBottomTabNavigator';
+import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
 
 export default createMaterialBottomTabNavigator({
   Album: { screen: Album },

diff --git a/packages/bottom-tabs/package.json b/packages/bottom-tabs/package.json
@@ -40,7 +40,7 @@
   "dependencies": {
     "hoist-non-react-statics": "^2.5.0",
     "prop-types": "^15.6.0",
-    "react-lifecycles-compat": "^1.0.2",
+    "react-lifecycles-compat": "^3.0.4",
     "react-native-safe-area-view": "^0.7.0",
     "react-native-tab-view": "~0.0.78"
   },

diff --git a/packages/bottom-tabs/src/navigators/createBottomTabNavigator.js b/packages/bottom-tabs/src/navigators/createBottomTabNavigator.js
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
+import { polyfill } from 'react-lifecycles-compat';
 import createTabNavigator, {
   type InjectedProps,
 } from '../utils/createTabNavigator';
@@ -18,24 +19,21 @@ type State = {
 };
 
 class TabNavigationView extends React.PureComponent<Props, State> {
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const { index } = nextProps.navigation.state;
+
+    return {
+      // Set the current tab to be loaded if it was not loaded before
+      loaded: prevState.loaded.includes(index)
+        ? prevState.loaded
+        : [...prevState.loaded, index],
+    };
+  }
+
   state = {
     loaded: [this.props.navigation.state.index],
   };
 
-  componentWillReceiveProps(nextProps) {
-    if (
-      nextProps.navigation.state.index !== this.props.navigation.state.index
-    ) {
-      const { index } = nextProps.navigation.state;
-
-      this.setState(state => ({
-        loaded: state.loaded.includes(index)
-          ? state.loaded
-          : [...state.loaded, index],
-      }));
-    }
-  }
-
   _getLabel = ({ route, focused, tintColor }) => {
     const label = this.props.getLabelText({ route });
 
@@ -124,6 +122,8 @@ class TabNavigationView extends React.PureComponent<Props, State> {
   }
 }
 
+polyfill(TabNavigationView);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

diff --git a/packages/bottom-tabs/src/utils/createTabNavigator.js b/packages/bottom-tabs/src/utils/createTabNavigator.js
@@ -87,9 +87,11 @@ export default function createTabNavigator(TabView: React.ComponentType<*>) {
 
     _handleIndexChange = index => {
       const { navigation } = this.props;
-      navigation.dispatch(NavigationActions.navigate({
-        routeName: navigation.state.routes[index].routeName,
-      }));
+      navigation.dispatch(
+        NavigationActions.navigate({
+          routeName: navigation.state.routes[index].routeName,
+        })
+      );
     };
 
     render() {

diff --git a/packages/bottom-tabs/yarn.lock b/packages/bottom-tabs/yarn.lock
@@ -4400,6 +4400,10 @@ react-lifecycles-compat@^3, react-lifecycles-compat@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.2.tgz#7279047275bd727a912e25f734c0559527e84eff"
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
 [email protected]:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/react-native-dismiss-keyboard/-/react-native-dismiss-keyboard-1.0.0.tgz#32886242b3f2317e121f3aeb9b0a585e2b879b49"
@@ -4444,6 +4448,12 @@ react-native-tab-view@~0.0.77:
   dependencies:
     prop-types "^15.6.0"
 
+react-native-tab-view@~0.0.78:
+  version "0.0.78"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.78.tgz#9b90730d89cbd34a03f0e0ab10e74ca7af945560"
+  dependencies:
+    prop-types "^15.6.0"
+
 [email protected]:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-4.4.2.tgz#090f42ee0396c4cc4eae0ddaa518028ba8df40c7"