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

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,

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() {