Bump version

This is a backport of 81a86fa091 from master.

examples/NavigationPlayground/app.json

@@ -11,7 +11,7 @@
     "splash": {
       "image": "./assets/icons/splash.png"
     },
-    "sdkVersion": "25.0.0",
+    "sdkVersion": "26.0.0",
     "entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
     "packagerOpts": {
       "assetExts": [

examples/NavigationPlayground/js/App.js

@@ -32,6 +32,7 @@ import SimpleStack from './SimpleStack';
 import StackWithHeaderPreset from './StackWithHeaderPreset';
 import StackWithTranslucentHeader from './StackWithTranslucentHeader';
 import SimpleTabs from './SimpleTabs';
+import CustomTabNavigator from './CustomTabNavigator';
 import TabAnimations from './TabAnimations';
 import TabsWithNavigationFocus from './TabsWithNavigationFocus';
 
@@ -72,9 +73,13 @@ const ExampleInfo = {
     name: 'Drawer + Tabs Example',
     description: 'A drawer combined with tabs',
   },
+  CustomTabNavigator: {
+    name: 'Custom Tab Navigator Example',
+    description: 'Extending the tab navigator',
+  },
   CustomTabs: {
-    name: 'Custom Tabs',
-    description: 'Custom tabs with tab router',
+    name: 'Custom Tabs View',
+    description: 'Custom tabs using TabRouter',
   },
   CustomTransitioner: {
     name: 'Custom Transitioner',
@@ -137,6 +142,7 @@ const ExampleRoutes = {
   StacksWithKeys,
   StacksInTabs,
   StacksOverTabs,
+  CustomTabNavigator,
   LinkStack: {
     screen: SimpleStack,
     path: 'people/Jordan',

examples/NavigationPlayground/js/CustomTabNavigator.js

@@ -0,0 +1,201 @@
+/**
+ * @flow
+ */
+
+import type {
+  NavigationScreenProp,
+  NavigationEventSubscription,
+} from 'react-navigation';
+
+import React from 'react';
+import {
+  Button,
+  Platform,
+  ScrollView,
+  StatusBar,
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import { SafeAreaView, TabNavigator } from 'react-navigation';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import SampleText from './SampleText';
+
+const MyNavScreen = ({ navigation, banner }) => (
+  <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
+    <SampleText>{banner}</SampleText>
+    <Button
+      onPress={() => navigation.navigate('Home')}
+      title="Go to home tab"
+    />
+    <Button
+      onPress={() => navigation.navigate('Settings')}
+      title="Go to settings tab"
+    />
+    <Button onPress={() => navigation.goBack(null)} title="Go back" />
+    <StatusBar barStyle="default" />
+  </SafeAreaView>
+);
+
+const MyHomeScreen = ({ navigation }) => (
+  <MyNavScreen banner="Home Tab" navigation={navigation} />
+);
+
+MyHomeScreen.navigationOptions = {
+  tabBarTestIDProps: {
+    testID: 'TEST_ID_HOME',
+    accessibilityLabel: 'TEST_ID_HOME_ACLBL',
+  },
+  tabBarLabel: 'Home',
+  tabBarIcon: ({ tintColor, focused }) => (
+    <Ionicons
+      name={focused ? 'ios-home' : 'ios-home-outline'}
+      size={26}
+      style={{ color: tintColor }}
+    />
+  ),
+};
+
+type MyPeopleScreenProps = {
+  navigation: NavigationScreenProp<*>,
+};
+class MyPeopleScreen extends React.Component<MyPeopleScreenProps> {
+  static navigationOptions = {
+    tabBarLabel: 'People',
+    tabBarIcon: ({ tintColor, focused }) => (
+      <Ionicons
+        name={focused ? 'ios-people' : 'ios-people-outline'}
+        size={26}
+        style={{ color: tintColor }}
+      />
+    ),
+  };
+  render() {
+    const { navigation } = this.props;
+    return <MyNavScreen banner="People Tab" navigation={navigation} />;
+  }
+}
+
+type MyChatScreenProps = {
+  navigation: NavigationScreenProp<*>,
+};
+class MyChatScreen extends React.Component<MyChatScreenProps> {
+  static navigationOptions = {
+    tabBarLabel: 'Chat',
+    tabBarIcon: ({ tintColor, focused }) => (
+      <Ionicons
+        name={focused ? 'ios-chatboxes' : 'ios-chatboxes-outline'}
+        size={26}
+        style={{ color: tintColor }}
+      />
+    ),
+  };
+  render() {
+    const { navigation } = this.props;
+    return <MyNavScreen banner="Chat Tab" navigation={navigation} />;
+  }
+}
+
+const MySettingsScreen = ({ navigation }) => (
+  <MyNavScreen banner="Settings Tab" navigation={navigation} />
+);
+
+MySettingsScreen.navigationOptions = {
+  tabBarLabel: 'Settings',
+  tabBarIcon: ({ tintColor, focused }) => (
+    <Ionicons
+      name={focused ? 'ios-settings' : 'ios-settings-outline'}
+      size={26}
+      style={{ color: tintColor }}
+    />
+  ),
+};
+
+const SimpleTabs = TabNavigator(
+  {
+    Home: {
+      screen: MyHomeScreen,
+    },
+    People: {
+      screen: MyPeopleScreen,
+    },
+    Chat: {
+      screen: MyChatScreen,
+    },
+    Settings: {
+      screen: MySettingsScreen,
+    },
+  },
+  {
+    navigationOptions: {
+      tabBarVisible: false,
+    },
+  }
+);
+
+type SimpleTabsContainerProps = {
+  navigation: NavigationScreenProp<*>,
+};
+
+const TabBarButton = ({ name, navigation }) => {
+  const currentName = navigation.state.routes[navigation.state.index].routeName;
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        navigation.navigate(name);
+      }}
+    >
+      <Text
+        style={{ color: currentName === name ? 'blue' : 'black', fontSize: 32 }}
+      >
+        {name}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+class CustomTabBar extends React.Component<*> {
+  render() {
+    return (
+      <View
+        style={{
+          height: 40,
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          borderTopWidth: StyleSheet.hairlineWidth,
+        }}
+      >
+        <TabBarButton navigation={this.props.navigation} name="Home" />
+        <TabBarButton navigation={this.props.navigation} name="People" />
+        <TabBarButton navigation={this.props.navigation} name="Chat" />
+      </View>
+    );
+  }
+}
+
+class SimpleTabsContainer extends React.Component<SimpleTabsContainerProps> {
+  static router = {
+    ...SimpleTabs.router,
+    getStateForAction(action, lastState) {
+      // You can override the behavior navigation actions here, which are dispatched via navigation.dispatch, or via helpers like navigaiton.navigate.
+
+      // In this case we simply use the default behavior:
+      const newState = SimpleTabs.router.getStateForAction(action, lastState);
+
+      console.log('Tab router action:', action, newState);
+      return newState;
+    },
+  };
+
+  render() {
+    return (
+      <View style={{ flex: 1 }}>
+        <SimpleTabs navigation={this.props.navigation} />
+        <CustomTabBar navigation={this.props.navigation} />
+      </View>
+    );
+  }
+}
+
+export default SimpleTabsContainer;

examples/NavigationPlayground/js/SimpleTabs.js

@@ -52,11 +52,6 @@ type MyPeopleScreenProps = {
   navigation: NavigationScreenProp<*>,
 };
 class MyPeopleScreen extends React.Component<MyPeopleScreenProps> {
-  _s0: NavigationEventSubscription;
-  _s1: NavigationEventSubscription;
-  _s2: NavigationEventSubscription;
-  _s3: NavigationEventSubscription;
-
   static navigationOptions = {
     tabBarLabel: 'People',
     tabBarIcon: ({ tintColor, focused }) => (
@@ -67,21 +62,6 @@ class MyPeopleScreen extends React.Component<MyPeopleScreenProps> {
       />
     ),
   };
-  componentDidMount() {
-    this._s0 = this.props.navigation.addListener('willFocus', this._onEvent);
-    this._s1 = this.props.navigation.addListener('didFocus', this._onEvent);
-    this._s2 = this.props.navigation.addListener('willBlur', this._onEvent);
-    this._s3 = this.props.navigation.addListener('didBlur', this._onEvent);
-  }
-  componentWillUnmount() {
-    this._s0.remove();
-    this._s1.remove();
-    this._s2.remove();
-    this._s3.remove();
-  }
-  _onEvent = a => {
-    console.log('EVENT ON PEOPLE TAB', a.type, a);
-  };
   render() {
     const { navigation } = this.props;
     return <MyNavScreen banner="People Tab" navigation={navigation} />;
@@ -92,11 +72,6 @@ type MyChatScreenProps = {
   navigation: NavigationScreenProp<*>,
 };
 class MyChatScreen extends React.Component<MyChatScreenProps> {
-  _s0: NavigationEventSubscription;
-  _s1: NavigationEventSubscription;
-  _s2: NavigationEventSubscription;
-  _s3: NavigationEventSubscription;
-
   static navigationOptions = {
     tabBarLabel: 'Chat',
     tabBarIcon: ({ tintColor, focused }) => (
@@ -107,21 +82,6 @@ class MyChatScreen extends React.Component<MyChatScreenProps> {
       />
     ),
   };
-  componentDidMount() {
-    this._s0 = this.props.navigation.addListener('willFocus', this._onEvent);
-    this._s1 = this.props.navigation.addListener('didFocus', this._onEvent);
-    this._s2 = this.props.navigation.addListener('willBlur', this._onEvent);
-    this._s3 = this.props.navigation.addListener('didBlur', this._onEvent);
-  }
-  componentWillUnmount() {
-    this._s0.remove();
-    this._s1.remove();
-    this._s2.remove();
-    this._s3.remove();
-  }
-  _onEvent = a => {
-    console.log('EVENT ON CHAT TAB', a.type, a);
-  };
   render() {
     const { navigation } = this.props;
     return <MyNavScreen banner="Chat Tab" navigation={navigation} />;
@@ -171,35 +131,4 @@ const SimpleTabs = TabNavigator(
   }
 );
 
-type SimpleTabsContainerProps = {
-  navigation: NavigationScreenProp<*>,
-};
-
-class SimpleTabsContainer extends React.Component<SimpleTabsContainerProps> {
-  static router = SimpleTabs.router;
-  _s0: NavigationEventSubscription;
-  _s1: NavigationEventSubscription;
-  _s2: NavigationEventSubscription;
-  _s3: NavigationEventSubscription;
-
-  componentDidMount() {
-    this._s0 = this.props.navigation.addListener('willFocus', this._onAction);
-    this._s1 = this.props.navigation.addListener('didFocus', this._onAction);
-    this._s2 = this.props.navigation.addListener('willBlur', this._onAction);
-    this._s3 = this.props.navigation.addListener('didBlur', this._onAction);
-  }
-  componentWillUnmount() {
-    this._s0.remove();
-    this._s1.remove();
-    this._s2.remove();
-    this._s3.remove();
-  }
-  _onAction = a => {
-    console.log('TABS EVENT', a.type, a);
-  };
-  render() {
-    return <SimpleTabs navigation={this.props.navigation} />;
-  }
-}
-
-export default SimpleTabsContainer;
+export default SimpleTabs;

examples/NavigationPlayground/js/StacksInTabs.js

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

examples/NavigationPlayground/js/TabsWithNavigationFocus.js

@@ -4,7 +4,12 @@
 
 import React from 'react';
 import { Button, SafeAreaView, Text } from 'react-native';
-import { TabNavigator, withNavigationFocus } from 'react-navigation';
+import {
+  TabNavigator,
+  TabBarTop,
+  StackNavigator,
+  withNavigationFocus,
+} from 'react-navigation';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import SampleText from './SampleText';
@@ -92,10 +97,35 @@ const TabsWithNavigationFocus = TabNavigator(
     },
   },
   {
-    tabBarPosition: 'bottom',
+    tabBarComponent: TabBarTop,
+    tabBarPosition: 'top',
     animationEnabled: true,
     swipeEnabled: true,
   }
 );
 
-export default TabsWithNavigationFocus;
+const Stack = StackNavigator(
+  {
+    TabsWithNavigationFocus,
+  },
+  {
+    navigationOptions: {
+      headerTitle: 'Navigation focus example',
+      headerLeft: null,
+      headerTitleStyle: {
+        flex: 1,
+        textAlign: 'left',
+        left: 0,
+        right: 0,
+      },
+      headerTintColor: '#fff',
+      headerStyle: {
+        backgroundColor: '#2196f3',
+        borderBottomWidth: 0,
+        elevation: 0,
+      },
+    },
+  }
+);
+
+export default Stack;

examples/NavigationPlayground/package.json

@@ -11,9 +11,9 @@
     "test": "node node_modules/jest/bin/jest.js && flow"
   },
   "dependencies": {
-    "expo": "^25.0.0",
-    "react": "16.2.0",
-    "react-native": "^0.52.0",
+    "expo": "^26.0.0",
+    "react": "16.3.0-alpha.1",
+    "react-native": "^0.54.0",
     "react-native-iphone-x-helper": "^1.0.2",
     "react-navigation": "link:../.."
   },
@@ -22,9 +22,9 @@
     "babel-plugin-transform-remove-console": "^6.9.0",
     "flow-bin": "^0.61.0",
     "jest": "^21.0.1",
-    "jest-expo": "^25.1.0",
+    "jest-expo": "^26.0.0",
     "react-native-scripts": "^1.5.0",
-    "react-test-renderer": "16.0.0"
+    "react-test-renderer": "16.3.0-alpha.1"
   },
   "jest": {
     "preset": "jest-expo",

examples/ReduxExample/package.json

@@ -26,7 +26,7 @@
     "react": "16.2.0",
     "react-native": "^0.52.0",
     "react-navigation": "link:../..",
-    "react-navigation-redux-helpers": "^1.0.0",
+    "react-navigation-redux-helpers": "^1.0.3",
     "react-redux": "^5.0.6",
     "redux": "^3.7.2"
   },

examples/ReduxExample/src/navigators/AppNavigator.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { addNavigationHelpers, StackNavigator } from 'react-navigation';
+import { initializeListeners } from 'react-navigation-redux-helpers';
 
 import LoginScreen from '../components/LoginScreen';
 import MainScreen from '../components/MainScreen';
@@ -20,6 +21,10 @@ class AppWithNavigationState extends React.Component {
     nav: PropTypes.object.isRequired,
   };
 
+  componentDidMount() {
+    initializeListeners('root', this.props.nav);
+  }
+
   render() {
     const { dispatch, nav } = this.props;
     return (

flow/react-navigation.js

@@ -295,7 +295,6 @@ declare module 'react-navigation' {
       } & NavigationScreenRouteConfig);
 
   declare export type NavigationScreenRouteConfig =
-    | NavigationComponent
     | {
         screen: NavigationComponent,
       }
@@ -361,6 +360,7 @@ declare module 'react-navigation' {
     initialRouteParams?: NavigationParams,
     paths?: NavigationPathsConfig,
     navigationOptions?: NavigationScreenConfig<*>,
+    initialRouteKey?: string,
   |};
 
   declare export type NavigationStackViewConfig = {|
@@ -470,7 +470,7 @@ declare module 'react-navigation' {
     type: EventType,
     action: NavigationAction,
     state: NavigationState,
-    lastState: NavigationState,
+    lastState: ?NavigationState,
   };
 
   declare export type NavigationEventCallback = (
@@ -553,7 +553,7 @@ declare module 'react-navigation' {
 
   declare export type NavigationContainerProps<S: {}, O: {}> = $Shape<{
     uriPrefix?: string | RegExp,
-    onNavigationStateChange?: (
+    onNavigationStateChange?: ?(
       NavigationState,
       NavigationState,
       NavigationAction
@@ -724,7 +724,7 @@ declare module 'react-navigation' {
     SET_PARAMS: 'Navigation/SET_PARAMS',
     URI: 'Navigation/URI',
     back: {
-      (payload: { key?: ?string }): NavigationBackAction,
+      (payload?: { key?: ?string }): NavigationBackAction,
       toString: () => string,
     },
     init: {
@@ -925,12 +925,14 @@ declare module 'react-navigation' {
       vertical?: _SafeAreaViewForceInsetValue,
       horizontal?: _SafeAreaViewForceInsetValue,
     },
-    children: React$Node,
+    children?: React$Node,
     style?: AnimatedViewStyleProp,
   };
   declare export var SafeAreaView: React$ComponentType<_SafeAreaViewProps>;
 
-  declare export var Header: React$ComponentType<HeaderProps>;
+  declare export var Header: React$ComponentType<HeaderProps> & {
+    HEIGHT: number,
+  };
 
   declare type _HeaderTitleProps = {
     children: React$Node,
@@ -995,6 +997,8 @@ declare module 'react-navigation' {
     itemsContainerStyle?: ViewStyleProp,
     itemStyle?: ViewStyleProp,
     labelStyle?: TextStyleProp,
+    activeLabelStyle?: TextStyleProp,
+    inactiveLabelStyle?: TextStyleProp,
     iconContainerStyle?: ViewStyleProp,
     drawerPosition: 'left' | 'right',
   };
@@ -1075,7 +1079,7 @@ declare module 'react-navigation' {
   declare export var TabBarBottom: React$ComponentType<_TabBarBottomProps>;
 
   declare type _NavigationInjectedProps = {
-    navigation: NavigationScreenProp<NavigationState>,
+    navigation: NavigationScreenProp<NavigationStateRoute>,
   };
   declare export function withNavigation<T: {}>(
     Component: React$ComponentType<T & _NavigationInjectedProps>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "1.4.0",
+  "version": "1.5.9",
   "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/StackNavigator.js

@@ -11,6 +11,7 @@ import NavigationActions from '../NavigationActions';
 
 export default (routeConfigMap, stackConfig = {}) => {
   const {
+    initialRouteKey,
     initialRouteName,
     initialRouteParams,
     paths,
@@ -25,6 +26,7 @@ export default (routeConfigMap, stackConfig = {}) => {
   } = stackConfig;
 
   const stackRouterConfig = {
+    initialRouteKey,
     initialRouteName,
     initialRouteParams,
     paths,
@@ -47,7 +49,7 @@ export default (routeConfigMap, stackConfig = {}) => {
         onTransitionEnd={(lastTransition, transition) => {
           const { state, dispatch } = props.navigation;
           dispatch(NavigationActions.completeTransition({ key: state.key }));
-          onTransitionEnd && onTransitionEnd();
+          onTransitionEnd && onTransitionEnd(lastTransition, transition);
         }}
       />
     )

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

@@ -224,6 +224,7 @@ exports[`DrawerNavigator renders successfully 1`] = `
                             "color": "#2196f3",
                           },
                           undefined,
+                          undefined,
                         ]
                       }
                     >

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
@@ -147,13 +153,12 @@ exports[`TabNavigator renders successfully 1`] = `
               style={
                 Object {
                   "alignItems": "center",
-                  "bottom": 0,
+                  "alignSelf": "center",
+                  "height": "100%",
                   "justifyContent": "center",
-                  "left": 0,
                   "opacity": 1,
                   "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "width": "100%",
                 }
               }
             />
@@ -162,13 +167,12 @@ exports[`TabNavigator renders successfully 1`] = `
               style={
                 Object {
                   "alignItems": "center",
-                  "bottom": 0,
+                  "alignSelf": "center",
+                  "height": "100%",
                   "justifyContent": "center",
-                  "left": 0,
                   "opacity": 0,
                   "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "width": "100%",
                 }
               }
             />

src/routers/StackRouter.js

@@ -92,11 +92,12 @@ export default (routeConfigs, stackConfig = {}) => {
       ...(action.params || {}),
       ...(initialRouteParams || {}),
     };
+    const { initialRouteKey } = stackConfig;
     route = {
       ...route,
       ...(params ? { params } : {}),
       routeName: initialRouteName,
-      key: action.key || generateKey(),
+      key: action.key || (initialRouteKey || generateKey()),
     };
     return {
       key: 'StackRouterRoot',

src/routers/__tests__/StackRouter-test.js

@@ -576,6 +576,23 @@ describe('StackRouter', () => {
     expect(state2.routes[1].routes[1].routes[1].routeName).toEqual('Corge');
   });
 
+  test('Navigate to initial screen is possible', () => {
+    const TestRouter = StackRouter(
+      {
+        foo: { screen: () => <div /> },
+        bar: { screen: () => <div /> },
+      },
+      { initialRouteKey: 'foo' }
+    );
+    const initState = TestRouter.getStateForAction(NavigationActions.init());
+    const pushedState = TestRouter.getStateForAction(
+      NavigationActions.navigate({ routeName: 'foo', key: 'foo' }),
+      initState
+    );
+    expect(pushedState.index).toEqual(0);
+    expect(pushedState.routes[0].routeName).toEqual('foo');
+  });
+
   test('Navigate with key is idempotent', () => {
     const TestRouter = StackRouter({
       foo: { screen: () => <div /> },

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/DrawerNavigatorItems.js

@@ -21,6 +21,8 @@ const DrawerNavigatorItems = ({
   itemsContainerStyle,
   itemStyle,
   labelStyle,
+  activeLabelStyle,
+  inactiveLabelStyle,
   iconContainerStyle,
   drawerPosition,
 }) => (
@@ -34,6 +36,7 @@ const DrawerNavigatorItems = ({
       const scene = { route, index, focused, tintColor: color };
       const icon = renderIcon(scene);
       const label = getLabel(scene);
+      const extraLabelStyle = focused ? activeLabelStyle : inactiveLabelStyle;
       return (
         <TouchableItem
           key={route.key}
@@ -63,7 +66,9 @@ const DrawerNavigatorItems = ({
                 </View>
               ) : null}
               {typeof label === 'string' ? (
-                <Text style={[styles.label, { color }, labelStyle]}>
+                <Text
+                  style={[styles.label, { color }, labelStyle, extraLabelStyle]}
+                >
                   {label}
                 </Text>
               ) : (

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

@@ -100,6 +100,9 @@ class TabBarBottom extends React.PureComponent {
     if (showIcon === false) {
       return null;
     }
+
+    const horizontal = this._shouldUseHorizontalTabs();
+
     return (
       <TabBarIcon
         position={position}
@@ -108,7 +111,11 @@ class TabBarBottom extends React.PureComponent {
         inactiveTintColor={inactiveTintColor}
         renderIcon={renderIcon}
         scene={scene}
-        style={showLabel && this._shouldUseHorizontalTabs() ? {} : styles.icon}
+        style={[
+          styles.iconWithExplicitHeight,
+          showLabel === false && !horizontal && styles.iconWithoutLabel,
+          showLabel !== false && !horizontal && styles.iconWithLabel,
+        ]}
       />
     );
   };
@@ -286,6 +293,9 @@ class TabBarBottom extends React.PureComponent {
   }
 }
 
+const DEFAULT_HEIGHT = 49;
+const COMPACT_HEIGHT = 29;
+
 const styles = StyleSheet.create({
   tabBar: {
     backgroundColor: '#F7F7F7', // Default background color in iOS 10
@@ -294,10 +304,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   tabBarCompact: {
-    height: 29,
+    height: COMPACT_HEIGHT,
   },
   tabBarRegular: {
-    height: 49,
+    height: DEFAULT_HEIGHT,
   },
   tab: {
     flex: 1,
@@ -311,9 +321,15 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
   },
-  icon: {
+  iconWithoutLabel: {
+    flex: 1,
+  },
+  iconWithLabel: {
     flexGrow: 1,
   },
+  iconWithExplicitHeight: {
+    height: Platform.isPad ? DEFAULT_HEIGHT : COMPACT_HEIGHT,
+  },
   label: {
     textAlign: 'center',
     backgroundColor: 'transparent',

src/views/TabView/TabBarIcon.js

@@ -23,6 +23,7 @@ export default class TabBarIcon extends React.PureComponent {
       inputRange,
       outputRange: inputRange.map(i => (i === index ? 0 : 1)),
     });
+
     // We render the icon twice at the same position on top of each other:
     // active and inactive one, so we can fade between them.
     return (
@@ -54,11 +55,11 @@ const styles = StyleSheet.create({
     // active and inactive one, so we can fade between them:
     // Cover the whole iconContainer:
     position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
+    alignSelf: 'center',
     alignItems: 'center',
     justifyContent: 'center',
+    height: '100%',
+    width: '100%',
+    minWidth: 30,
   },
 });

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
@@ -93,13 +99,12 @@ exports[`TabBarBottom renders successfully 1`] = `
               style={
                 Object {
                   "alignItems": "center",
-                  "bottom": 0,
+                  "alignSelf": "center",
+                  "height": "100%",
                   "justifyContent": "center",
-                  "left": 0,
                   "opacity": 1,
                   "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "width": "100%",
                 }
               }
             />
@@ -108,13 +113,12 @@ exports[`TabBarBottom renders successfully 1`] = `
               style={
                 Object {
                   "alignItems": "center",
-                  "bottom": 0,
+                  "alignSelf": "center",
+                  "height": "100%",
                   "justifyContent": "center",
-                  "left": 0,
                   "opacity": 0,
                   "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "width": "100%",
                 }
               }
             />

src/withCachedChildNavigation.js

@@ -31,7 +31,7 @@ export default function withCachedChildNavigation(Comp) {
       });
     }
 
-    _isRouteFocused = route => () => {
+    _isRouteFocused = route => {
       const { state } = this.props.navigation;
       const focusedRoute = state.routes[state.index];
       return route === focusedRoute;
@@ -58,7 +58,7 @@ export default function withCachedChildNavigation(Comp) {
         this._childNavigationProps[route.key] = addNavigationHelpers({
           dispatch: navigation.dispatch,
           state: route,
-          isFocused: this._isRouteFocused.bind(this, route),
+          isFocused: () => this._isRouteFocused(route),
           addListener: this._childEventSubscribers[route.key],
         });
       });