Release 1.5.13

https://github.com/react-navigation/react-navigation/issues/3992

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

@@ -17,7 +17,11 @@ type MyNavScreenProps = {
   banner: React.Node,
 };
 
-class MyBackButton extends React.Component<any, any> {
+type MyBackButtonProps = {
+  navigation: NavigationScreenProp<*>,
+};
+
+class MyBackButton extends React.Component<MyBackButtonProps, any> {
   render() {
     return <Button onPress={this._navigateBack} title="Custom Back" />;
   }
@@ -142,7 +146,7 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
     const { navigation } = this.props;
     return (
       <MyNavScreen
-        banner={`${navigation.state.params.name}'s Photos`}
+        banner={`${navigation.getParam('name')}'s Photos`}
         navigation={navigation}
       />
     );
@@ -151,9 +155,9 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
 
 const MyProfileScreen = ({ navigation }) => (
   <MyNavScreen
-    banner={`${navigation.state.params.mode === 'edit' ? 'Now Editing ' : ''}${
-      navigation.state.params.name
-    }'s Profile`}
+    banner={`${
+      navigation.getParam('mode') === 'edit' ? 'Now Editing ' : ''
+    }${navigation.getParam('name')}'s Profile`}
     navigation={navigation}
   />
 );

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/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",

flow/react-navigation.js

@@ -491,6 +491,7 @@ declare module 'react-navigation' {
       action?: NavigationNavigateAction
     ) => boolean,
     setParams: (newParams: NavigationParams) => boolean,
+    getParam: (paramName: string, fallback?: any) => any,
     addListener: (
       eventName: string,
       callback: NavigationEventCallback
@@ -721,6 +722,7 @@ declare module 'react-navigation' {
     INIT: 'Navigation/INIT',
     NAVIGATE: 'Navigation/NAVIGATE',
     RESET: 'Navigation/RESET',
+    REPLACE: 'Navigation/REPLACE',
     SET_PARAMS: 'Navigation/SET_PARAMS',
     URI: 'Navigation/URI',
     back: {
@@ -747,6 +749,17 @@ declare module 'react-navigation' {
       }): NavigationResetAction,
       toString: () => string,
     },
+    replace: {
+      (payload: {
+        routeName: string,
+        key: string,
+        newKey?: ?string,
+        params?: ?NavigationParams,
+        action?: ?NavigationNavigateAction,
+        immediate?: ?boolean,
+      }): NavigationReplaceAction,
+      toString: () => string,
+    },
     setParams: {
       (payload: {
         key: string,
@@ -1078,13 +1091,17 @@ declare module 'react-navigation' {
   };
   declare export var TabBarBottom: React$ComponentType<_TabBarBottomProps>;
 
-  declare type _NavigationInjectedProps = {
-    navigation: NavigationScreenProp<NavigationStateRoute>,
-  };
-  declare export function withNavigation<T: {}>(
-    Component: React$ComponentType<T & _NavigationInjectedProps>
-  ): React$ComponentType<T>;
-  declare export function withNavigationFocus<T: {}>(
-    Component: React$ComponentType<T & _NavigationInjectedProps>
-  ): React$ComponentType<T>;
+  declare export function withNavigation<Props: {}>(
+    Component: React$ComponentType<Props>
+  ): React$ComponentType<
+    $Diff<
+      Props,
+      {
+        navigation: NavigationScreenProp<NavigationStateRoute> | void,
+      }
+    >
+  >;
+  declare export function withNavigationFocus<Props: {}>(
+    Component: React$ComponentType<Props>
+  ): React$ComponentType<$Diff<Props, { isFocused: boolean | void }>>;
 }

package.json

@@ -1,14 +1,13 @@
 {
   "name": "react-navigation",
-  "version": "1.5.6",
+  "version": "1.5.13",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "repository": {
     "url": "git@github.com:react-navigation/react-navigation.git",
     "type": "git"
   },
-  "author":
-    "Adam Miskiewicz <adam@sk3vy.com>, Eric Vicenti <ericvicenti@gmail.com>",
+  "author": "Adam Miskiewicz <adam@sk3vy.com>, Eric Vicenti <ericvicenti@gmail.com>",
   "license": "BSD-2-Clause",
   "scripts": {
     "start": "npm run ios",
@@ -22,7 +21,9 @@
     "format": "eslint --fix .",
     "precommit": "lint-staged"
   },
-  "files": ["src"],
+  "files": [
+    "src"
+  ],
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
@@ -32,10 +33,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-lifecycles-compat": "^3.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-safe-area-view": "^0.9.0",
+    "react-native-tab-view": "github:react-navigation/react-native-tab-view"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
@@ -64,13 +65,23 @@
     "notify": true,
     "preset": "react-native",
     "testRegex": "./src/.*\\-test\\.js$",
-    "setupFiles": ["<rootDir>/jest-setup.js"],
+    "setupFiles": [
+      "<rootDir>/jest-setup.js"
+    ],
     "coverageDirectory": "./coverage/",
     "collectCoverage": true,
-    "coverageReporters": ["lcov"],
-    "collectCoverageFrom": ["src/**/*.js"],
-    "coveragePathIgnorePatterns": ["jest-setup.js"],
-    "modulePathIgnorePatterns": ["examples"]
+    "coverageReporters": [
+      "lcov"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.js"
+    ],
+    "coveragePathIgnorePatterns": [
+      "jest-setup.js"
+    ],
+    "modulePathIgnorePatterns": [
+      "examples"
+    ]
   },
   "lint-staged": {
     "*.js": [

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

@@ -138,9 +138,12 @@ exports[`TabNavigator renders successfully 1`] = `
           <View
             style={
               Array [
+                Object {
+                  "height": 29,
+                },
                 false,
                 Object {
-                  "flexGrow": 1,
+                  "flex": 1,
                 },
               ]
             }
@@ -153,6 +156,7 @@ exports[`TabNavigator renders successfully 1`] = `
                   "alignSelf": "center",
                   "height": "100%",
                   "justifyContent": "center",
+                  "minWidth": 30,
                   "opacity": 1,
                   "position": "absolute",
                   "width": "100%",
@@ -167,6 +171,7 @@ exports[`TabNavigator renders successfully 1`] = `
                   "alignSelf": "center",
                   "height": "100%",
                   "justifyContent": "center",
+                  "minWidth": 30,
                   "opacity": 0,
                   "position": "absolute",
                   "width": "100%",

src/routers/SwitchRouter.js

@@ -77,6 +77,10 @@ export default (routeConfigs, config = {}) => {
     },
 
     getNextState(prevState, possibleNextState) {
+      if (!prevState) {
+        return possibleNextState;
+      }
+
       let nextState;
       if (prevState.index !== possibleNextState.index && resetOnBlur) {
         const prevRouteName = prevState.routes[prevState.index].routeName;

src/routers/__tests__/SwitchRouter-test.js

@@ -25,6 +25,20 @@ describe('SwitchRouter', () => {
     expect(state3.routes[0].routes.length).toEqual(1);
   });
 
+  test('sets the next state even if no previous state is provided', () => {
+    const router = getExampleRouter();
+    const initialState = router.getStateForAction({
+      type: NavigationActions.INIT,
+    });
+    const nextState = router.getStateForAction({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'A2',
+    });
+
+    expect(nextState.routes[0].index).toEqual(1);
+    expect(nextState.routes[0].routes.length).toEqual(2);
+  });
+
   test('does not reset the route on unfocus if resetOnBlur is false', () => {
     const router = getExampleRouter({ resetOnBlur: false });
     const state = router.getStateForAction({ type: NavigationActions.INIT });

src/views/Drawer/DrawerSidebar.js

@@ -11,8 +11,9 @@ import invariant from '../../utils/invariant';
  */
 class DrawerSidebar extends React.PureComponent {
   _getScreenOptions = routeKey => {
+    const { drawerCloseRoute } = this.props;
     const DrawerScreen = this.props.router.getComponentForRouteName(
-      'DrawerClose'
+      drawerCloseRoute
     );
     invariant(
       DrawerScreen.router,
@@ -56,7 +57,8 @@ class DrawerSidebar extends React.PureComponent {
   };
 
   _onItemPress = ({ route, focused }) => {
-    this.props.navigation.navigate('DrawerClose');
+    const { drawerCloseRoute } = this.props;
+    this.props.navigation.navigate(drawerCloseRoute);
     if (!focused) {
       let subAction;
       // if the child screen is a StackRouter then always navigate to its first screen (see #1914)

src/views/Drawer/DrawerView.js

@@ -132,17 +132,24 @@ export default class DrawerView extends React.PureComponent {
     return navigationState;
   };
 
-  _renderNavigationView = () => (
-    <DrawerSidebar
-      screenProps={this.props.screenProps}
-      navigation={this._screenNavigationProp}
-      router={this.props.router}
-      contentComponent={this.props.contentComponent}
-      contentOptions={this.props.contentOptions}
-      drawerPosition={this.props.drawerPosition}
-      style={this.props.style}
-    />
-  );
+  _renderNavigationView = () => {
+    const { drawerOpenRoute, drawerCloseRoute, drawerToggleRoute } = this.props;
+
+    return (
+      <DrawerSidebar
+        screenProps={this.props.screenProps}
+        navigation={this._screenNavigationProp}
+        router={this.props.router}
+        contentComponent={this.props.contentComponent}
+        contentOptions={this.props.contentOptions}
+        drawerPosition={this.props.drawerPosition}
+        style={this.props.style}
+        drawerOpenRoute={drawerOpenRoute}
+        drawerCloseRoute={drawerCloseRoute}
+        drawerToggleRoute={drawerToggleRoute}
+      />
+    );
+  };
 
   render() {
     const DrawerScreen = this.props.router.getComponentForRouteName(

src/views/ResourceSavingSceneView.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
-import withLifecyclePolyfill from 'react-lifecycles-compat';
+import { polyfill } from 'react-lifecycles-compat';
 
 import SceneView from './SceneView';
 
@@ -77,4 +77,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default withLifecyclePolyfill(ResourceSavingSceneView);
+export default polyfill(ResourceSavingSceneView);

src/views/TabView/TabBarBottom.js

@@ -112,8 +112,9 @@ class TabBarBottom extends React.PureComponent {
         renderIcon={renderIcon}
         scene={scene}
         style={[
-          horizontal && styles.horizontalIcon,
-          showLabel !== false && !horizontal && styles.icon,
+          styles.iconWithExplicitHeight,
+          showLabel === false && !horizontal && styles.iconWithoutLabel,
+          showLabel !== false && !horizontal && styles.iconWithLabel,
         ]}
       />
     );
@@ -136,7 +137,7 @@ class TabBarBottom extends React.PureComponent {
         maxTabBarItemWidth = flattenedTabStyle.width;
       } else if (
         typeof flattenedTabStyle.width === 'string' &&
-        flattenedTabStyle.endsWith('%')
+        flattenedTabStyle.width.endsWith('%')
       ) {
         const width = parseFloat(flattenedTabStyle.width);
         if (Number.isFinite(width)) {
@@ -146,7 +147,7 @@ class TabBarBottom extends React.PureComponent {
         maxTabBarItemWidth = flattenedTabStyle.maxWidth;
       } else if (
         typeof flattenedTabStyle.maxWidth === 'string' &&
-        flattenedTabStyle.endsWith('%')
+        flattenedTabStyle.width.endsWith('%')
       ) {
         const width = parseFloat(flattenedTabStyle.maxWidth);
         if (Number.isFinite(width)) {
@@ -320,10 +321,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
   },
-  icon: {
-    flexGrow: 1,
+  iconWithoutLabel: {
+    flex: 1,
   },
-  horizontalIcon: {
+  iconWithLabel: {
+    flex: 1,
+  },
+  iconWithExplicitHeight: {
     height: Platform.isPad ? DEFAULT_HEIGHT : COMPACT_HEIGHT,
   },
   label: {

src/views/TabView/TabBarIcon.js

@@ -54,11 +54,12 @@ 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%',
+    minWidth: 30,
   },
 });

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

@@ -84,9 +84,12 @@ exports[`TabBarBottom renders successfully 1`] = `
           <View
             style={
               Array [
+                Object {
+                  "height": 29,
+                },
                 false,
                 Object {
-                  "flexGrow": 1,
+                  "flex": 1,
                 },
               ]
             }
@@ -99,6 +102,7 @@ exports[`TabBarBottom renders successfully 1`] = `
                   "alignSelf": "center",
                   "height": "100%",
                   "justifyContent": "center",
+                  "minWidth": 30,
                   "opacity": 1,
                   "position": "absolute",
                   "width": "100%",
@@ -113,6 +117,7 @@ exports[`TabBarBottom renders successfully 1`] = `
                   "alignSelf": "center",
                   "height": "100%",
                   "justifyContent": "center",
+                  "minWidth": 30,
                   "opacity": 0,
                   "position": "absolute",
                   "width": "100%",