Release 1.5.8

This is a backport of 81a86fa091 from master.

examples/NavigationPlayground/js/StacksInTabs.js

@@ -119,6 +119,9 @@ const StacksInTabs = TabNavigator(
     tabBarPosition: 'bottom',
     animationEnabled: false,
     swipeEnabled: false,
+    tabBarOptions: {
+      showLabel: false,
+    },
   }
 );
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "1.5.2",
+  "version": "1.5.8",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "repository": {
@@ -32,9 +32,10 @@
     "hoist-non-react-statics": "^2.2.0",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.5.10",
+    "react-lifecycles-compat": "^1.0.2",
     "react-native-drawer-layout-polyfill": "^1.3.2",
     "react-native-safe-area-view": "^0.7.0",
-    "react-native-tab-view": "^0.0.74"
+    "react-native-tab-view": "github:react-navigation/react-native-tab-view"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",

src/navigators/__tests__/__snapshots__/TabNavigator-test.js.snap

@@ -137,9 +137,15 @@ exports[`TabNavigator renders successfully 1`] = `
         >
           <View
             style={
-              Object {
-                "flexGrow": 1,
-              }
+              Array [
+                Object {
+                  "height": 29,
+                },
+                false,
+                Object {
+                  "flexGrow": 1,
+                },
+              ]
             }
           >
             <View

src/views/CardStack/CardStack.js

@@ -110,7 +110,7 @@ class CardStack extends React.Component {
   }
 
   _isRouteFocused = route => {
-    const { state } = this.props.navigation;
+    const { transitionProps: { navigation: { state } } } = this.props;
     const focusedRoute = state.routes[state.index];
     return route === focusedRoute;
   };
@@ -129,7 +129,7 @@ class CardStack extends React.Component {
       const screenNavigation = addNavigationHelpers({
         dispatch: navigation.dispatch,
         state: scene.route,
-        isFocused: this._isRouteFocused.bind(this, scene.route),
+        isFocused: () => this._isRouteFocused(scene.route),
         addListener: this._childEventSubscribers[scene.route.key],
       });
       screenDetails = {

src/views/Drawer/DrawerView.js

@@ -108,7 +108,7 @@ export default class DrawerView extends React.PureComponent {
     this._screenNavigationProp = addNavigationHelpers({
       dispatch: navigation.dispatch,
       state: navigationState,
-      isFocused: this._isRouteFocused.bind(this, navigationState),
+      isFocused: () => this._isRouteFocused(navigationState),
       addListener: this._childEventSubscribers[navigationState.key],
     });
   };

src/views/ResourceSavingSceneView.js

@@ -1,40 +1,33 @@
 import React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
+import withLifecyclePolyfill from 'react-lifecycles-compat';
 
 import SceneView from './SceneView';
 
 const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view out of its container
 
-export default class ResourceSavingSceneView extends React.PureComponent {
+class ResourceSavingSceneView extends React.PureComponent {
   constructor(props) {
     super();
 
-    const key = props.childNavigation.state.key;
-    const focusedIndex = props.navigation.state.index;
-    const focusedKey = props.navigation.state.routes[focusedIndex].key;
-    const isFocused = key === focusedKey;
-
     this.state = {
-      awake: props.lazy ? isFocused : true,
-      visible: isFocused,
+      awake: props.lazy ? props.isFocused : true,
     };
   }
 
-  componentWillMount() {
-    this._actionListener = this.props.navigation.addListener(
-      'action',
-      this._onAction
-    );
-  }
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.isFocused && !prevState.awake) {
+      return { awake: true };
+    }
 
-  componentWillUnmount() {
-    this._actionListener.remove();
+    return null;
   }
 
   render() {
-    const { awake, visible } = this.state;
+    const { awake } = this.state;
     const {
+      isFocused,
       childNavigation,
       navigation,
       removeClippedSubviews,
@@ -49,12 +42,12 @@ export default class ResourceSavingSceneView extends React.PureComponent {
         removeClippedSubviews={
           Platform.OS === 'android'
             ? removeClippedSubviews
-            : !visible && removeClippedSubviews
+            : !isFocused && removeClippedSubviews
         }
       >
         <View
           style={
-            this._mustAlwaysBeVisible() || visible
+            this._mustAlwaysBeVisible() || isFocused
               ? styles.innerAttached
               : styles.innerDetached
           }
@@ -68,33 +61,6 @@ export default class ResourceSavingSceneView extends React.PureComponent {
   _mustAlwaysBeVisible = () => {
     return this.props.animationEnabled || this.props.swipeEnabled;
   };
-
-  _onAction = payload => {
-    // We do not care about transition complete events, they won't actually change the state
-    if (
-      payload.action.type == 'Navigation/COMPLETE_TRANSITION' ||
-      !payload.state
-    ) {
-      return;
-    }
-
-    const { routes, index } = payload.state;
-    const key = this.props.childNavigation.state.key;
-
-    if (routes[index].key === key) {
-      if (!this.state.visible) {
-        let nextState = { visible: true };
-        if (!this.state.awake) {
-          nextState.awake = true;
-        }
-        this.setState(nextState);
-      }
-    } else {
-      if (this.state.visible) {
-        this.setState({ visible: false });
-      }
-    }
-  };
 }
 
 const styles = StyleSheet.create({
@@ -110,3 +76,5 @@ const styles = StyleSheet.create({
     top: FAR_FAR_AWAY,
   },
 });
+
+export default withLifecyclePolyfill(ResourceSavingSceneView);

src/views/TabView/TabBarBottom.js

@@ -101,6 +101,8 @@ class TabBarBottom extends React.PureComponent {
       return null;
     }
 
+    const horizontal = this._shouldUseHorizontalTabs();
+
     return (
       <TabBarIcon
         position={position}
@@ -109,11 +111,11 @@ class TabBarBottom extends React.PureComponent {
         inactiveTintColor={inactiveTintColor}
         renderIcon={renderIcon}
         scene={scene}
-        style={
-          showLabel && this._shouldUseHorizontalTabs()
-            ? styles.horizontalIcon
-            : styles.icon
-        }
+        style={[
+          styles.iconWithExplicitHeight,
+          showLabel === false && !horizontal && styles.iconWithoutLabel,
+          showLabel !== false && !horizontal && styles.iconWithLabel,
+        ]}
       />
     );
   };
@@ -319,10 +321,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
   },
-  icon: {
+  iconWithoutLabel: {
+    flex: 1,
+  },
+  iconWithLabel: {
     flexGrow: 1,
   },
-  horizontalIcon: {
+  iconWithExplicitHeight: {
     height: Platform.isPad ? DEFAULT_HEIGHT : COMPACT_HEIGHT,
   },
   label: {

src/views/TabView/TabBarIcon.js

@@ -54,11 +54,11 @@ const styles = StyleSheet.create({
     // We render the icon twice at the same position on top of each other:
     // active and inactive one, so we can fade between them:
     // Cover the whole iconContainer:
-    alignItems: 'center',
-    alignSelf: 'center',
-    height: '100%',
-    justifyContent: 'center',
     position: 'absolute',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
     width: '100%',
   },
 });

src/views/TabView/TabView.js

@@ -22,7 +22,10 @@ class TabView extends React.PureComponent {
   };
 
   _renderScene = ({ route }) => {
-    const { screenProps } = this.props;
+    const { screenProps, navigation } = this.props;
+    const focusedIndex = navigation.state.index;
+    const focusedKey = navigation.state.routes[focusedIndex].key;
+    const key = route.key;
     const childNavigation = this.props.childNavigationProps[route.key];
     const TabComponent = this.props.router.getComponentForRouteName(
       route.routeName
@@ -31,6 +34,7 @@ class TabView extends React.PureComponent {
     return (
       <ResourceSavingSceneView
         lazy={this.props.lazy}
+        isFocused={focusedKey === key}
         removeClippedSubViews={this.props.removeClippedSubviews}
         animationEnabled={this.props.animationEnabled}
         swipeEnabled={this.props.swipeEnabled}

src/views/__tests__/__snapshots__/TabView-test.js.snap

@@ -83,9 +83,15 @@ exports[`TabBarBottom renders successfully 1`] = `
         >
           <View
             style={
-              Object {
-                "flexGrow": 1,
-              }
+              Array [
+                Object {
+                  "height": 29,
+                },
+                false,
+                Object {
+                  "flexGrow": 1,
+                },
+              ]
             }
           >
             <View