Bump to patch version 1.0.3

This problem was found and fixed by @matthargett and @jayphelps in #3397. I’m just rebasing and cleaning a few things up

examples/NavigationPlayground/.babelrc

@@ -6,6 +6,11 @@
     "development": {
       "plugins": [
         "transform-react-jsx-source"
+      ],
+    },
+    "production": {
+      "plugins": [
+        "transform-remove-console"
       ]
     }
   }

examples/NavigationPlayground/js/App.js

@@ -25,6 +25,7 @@ import TabsInDrawer from './TabsInDrawer';
 import ModalStack from './ModalStack';
 import StacksInTabs from './StacksInTabs';
 import StacksOverTabs from './StacksOverTabs';
+import StacksWithKeys from './StacksWithKeys';
 import SimpleStack from './SimpleStack';
 import SimpleTabs from './SimpleTabs';
 import TabAnimations from './TabAnimations';
@@ -76,6 +77,10 @@ const ExampleInfo = {
     name: 'Stacks over Tabs',
     description: 'Nested stack navigation that pushes on top of tabs',
   },
+  StacksWithKeys: {
+    name: 'Link in Stack with keys',
+    description: 'Use keys to link between screens',
+  },
   LinkStack: {
     name: 'Link in Stack',
     description: 'Deep linking into a route in stack',
@@ -114,6 +119,9 @@ const ExampleRoutes = {
   ModalStack: {
     screen: ModalStack,
   },
+  StacksWithKeys: {
+    screen: StacksWithKeys,
+  },
   StacksInTabs: {
     screen: StacksInTabs,
   },

examples/NavigationPlayground/js/ModalStack.js

@@ -8,7 +8,7 @@ import { SafeAreaView, StackNavigator } from 'react-navigation';
 import SampleText from './SampleText';
 
 const MyNavScreen = ({ navigation, banner }) => (
-  <ScrollView contentInsetAdjustmentBehavior="automatic">
+  <ScrollView>
     <SafeAreaView
       forceInset={{
         top: navigation.state.routeName === 'HeaderTest' ? 'always' : 'never',

examples/NavigationPlayground/js/SimpleStack.js

@@ -9,7 +9,7 @@ import type {
 
 import * as React from 'react';
 import { Button, ScrollView, StatusBar } from 'react-native';
-import { StackNavigator, SafeAreaView } from 'react-navigation';
+import { StackNavigator, SafeAreaView, withNavigation } from 'react-navigation';
 import SampleText from './SampleText';
 
 type MyNavScreenProps = {
@@ -17,6 +17,20 @@ type MyNavScreenProps = {
   banner: React.Node,
 };
 
+class MyBackButton extends React.Component<any, any> {
+  render() {
+    return (
+      <Button onPress={this._navigateBack} title="Custom Back" />
+    );
+  }
+
+  _navigateBack = () => {
+    this.props.navigation.goBack(null);
+  }
+}
+
+const MyBackButtonWithNavigation = withNavigation(MyBackButton);
+
 class MyNavScreen extends React.Component<MyNavScreenProps> {
   render() {
     const { navigation, banner } = this.props;
@@ -94,6 +108,7 @@ type MyPhotosScreenProps = {
 class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   static navigationOptions = {
     title: 'Photos',
+    headerLeft: <MyBackButtonWithNavigation />
   };
   _s0: NavigationEventSubscription;
   _s1: NavigationEventSubscription;

examples/NavigationPlayground/js/StacksWithKeys.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Button, StatusBar, Text, View } from 'react-native';
+import { StackNavigator } from 'react-navigation';
+
+class HomeScreen extends React.Component<any, any> {
+  render() {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>Home</Text>
+        <Button
+          title="Navigate to 'Profile' with key 'A'"
+          onPress={() =>
+            this.props.navigation.navigate({
+              routeName: 'Profile',
+              key: 'A',
+              params: { homeKey: this.props.navigation.state.key },
+            })
+          }
+        />
+        <StatusBar barStyle="default" />
+      </View>
+    );
+  }
+}
+
+class ProfileScreen extends React.Component<any, any> {
+  render() {
+    const { homeKey } = this.props.navigation.state.params;
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>Profile</Text>
+        <Button
+          title="Navigate to 'Settings' with key 'B'"
+          onPress={() =>
+            this.props.navigation.navigate({
+              routeName: 'Settings',
+              key: 'B',
+              params: { homeKey },
+            })
+          }
+        />
+        <Button
+          title={`Navigate back to 'Home' with key ${homeKey}`}
+          onPress={() =>
+            this.props.navigation.navigate({ routeName: 'Home', key: homeKey })
+          }
+        />
+      </View>
+    );
+  }
+}
+
+class SettingsScreen extends React.Component<any, any> {
+  render() {
+    const { homeKey } = this.props.navigation.state.params;
+
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>Settings</Text>
+        <Button
+          title={`Navigate back to 'Home' with key ${homeKey}`}
+          onPress={() =>
+            this.props.navigation.navigate({ routeName: 'Home', key: homeKey })
+          }
+        />
+        <Button
+          title="Navigate back to 'Profile' with key 'A'"
+          onPress={() =>
+            this.props.navigation.navigate({
+              routeName: 'Profile',
+              key: 'A'
+            })
+          }
+        />
+      </View>
+    );
+  }
+}
+
+const Stack = StackNavigator(
+  {
+    Home: {
+      screen: HomeScreen,
+    },
+    Profile: {
+      screen: ProfileScreen,
+    },
+    Settings: {
+      screen: SettingsScreen,
+    },
+  },
+  {
+    headerMode: 'none',
+  }
+);
+
+export default Stack;

examples/NavigationPlayground/package.json

@@ -17,6 +17,7 @@
     "react-navigation": "link:../.."
   },
   "devDependencies": {
+    "babel-plugin-transform-remove-console": "^6.9.0",
     "babel-jest": "^21.0.0",
     "flow-bin": "^0.61.0",
     "jest": "^21.0.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "repository": {
@@ -33,6 +33,7 @@
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.5.10",
     "react-native-drawer-layout-polyfill": "^1.3.2",
+    "react-native-safe-area-view": "^0.6.0",
     "react-native-tab-view": "^0.0.74"
   },
   "devDependencies": {

src/navigators/DrawerNavigator.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Dimensions, Platform, ScrollView } from 'react-native';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import createNavigator from './createNavigator';
 import createNavigationContainer from '../createNavigationContainer';
@@ -7,7 +8,6 @@ import TabRouter from '../routers/TabRouter';
 import DrawerScreen from '../views/Drawer/DrawerScreen';
 import DrawerView from '../views/Drawer/DrawerView';
 import DrawerItems from '../views/Drawer/DrawerNavigatorItems';
-import SafeAreaView from '../views/SafeAreaView';
 
 // A stack navigators props are the intersection between
 // the base navigator props (navgiation, screenProps, etc)

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

@@ -140,6 +140,7 @@ exports[`DrawerNavigator renders successfully 1`] = `
           <View
             collapsable={undefined}
             onLayout={[Function]}
+            pointerEvents="box-none"
             style={
               Object {
                 "paddingBottom": 0,
@@ -187,6 +188,7 @@ exports[`DrawerNavigator renders successfully 1`] = `
                 <View
                   collapsable={undefined}
                   onLayout={[Function]}
+                  pointerEvents="box-none"
                   style={
                     Object {
                       "backgroundColor": "rgba(0, 0, 0, .04)",

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

@@ -108,7 +108,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
             "key": "StackRouterRoot",
             "routes": Array [
               Object {
-                "key": "Init-id-0-1",
+                "key": "id-0-1",
                 "routeName": "Home",
               },
             ],
@@ -133,6 +133,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
       <View
         collapsable={undefined}
         onLayout={[Function]}
+        pointerEvents="box-none"
         style={
           Object {
             "backgroundColor": "#F7F7F7",
@@ -346,7 +347,7 @@ exports[`StackNavigator renders successfully 1`] = `
             "key": "StackRouterRoot",
             "routes": Array [
               Object {
-                "key": "Init-id-0-0",
+                "key": "id-0-0",
                 "routeName": "Home",
               },
             ],
@@ -371,6 +372,7 @@ exports[`StackNavigator renders successfully 1`] = `
       <View
         collapsable={undefined}
         onLayout={[Function]}
+        pointerEvents="box-none"
         style={
           Object {
             "backgroundColor": "#F7F7F7",

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

@@ -71,6 +71,7 @@ exports[`TabNavigator renders successfully 1`] = `
     <View
       collapsable={undefined}
       onLayout={[Function]}
+      pointerEvents="box-none"
       style={
         Object {
           "backgroundColor": "#F7F7F7",

src/react-navigation.js

@@ -51,7 +51,7 @@ module.exports = {
     return require('./views/CardStack/Card').default;
   },
   get SafeAreaView() {
-    return require('./views/SafeAreaView').default;
+    return require('react-native-safe-area-view').default;
   },
 
   // Header

src/routers/StackRouter.js

@@ -101,23 +101,32 @@ export default (routeConfigs, stackConfig = {}) => {
       // Set up the initial state if needed
       if (!state) {
         let route = {};
-        if (
-          behavesLikePushAction(action) &&
-          childRouters[action.routeName] !== undefined
-        ) {
+        const childRouter = childRouters[action.routeName];
+        // This is a push-like action, and childRouter will be a router or null if we are responsible for this routeName
+        if (behavesLikePushAction(action) && childRouter !== undefined) {
+          let childState = {};
+          // The router is null for normal leaf routes
+          if (childRouter !== null) {
+            const childAction =
+              action.action ||
+              NavigationActions.init({ params: action.params });
+            childState = childRouter.getStateForAction(childAction);
+          }
           return {
             key: 'StackRouterRoot',
             isTransitioning: false,
             index: 0,
             routes: [
               {
-                routeName: action.routeName,
                 params: action.params,
-                key: `Init-${generateKey()}`,
+                ...childState,
+                key: action.key || generateKey(),
+                routeName: action.routeName,
               },
             ],
           };
         }
+
         if (initialChildRouter) {
           route = initialChildRouter.getStateForAction(
             NavigationActions.navigate({
@@ -135,11 +144,10 @@ export default (routeConfigs, stackConfig = {}) => {
         };
         route = {
           ...route,
-          routeName: initialRouteName,
-          key: `Init-${generateKey()}`,
           ...(params ? { params } : {}),
+          routeName: initialRouteName,
+          key: action.key || generateKey(),
         };
-        // eslint-disable-next-line no-param-reassign
         state = {
           key: 'StackRouterRoot',
           isTransitioning: false,
@@ -206,8 +214,8 @@ export default (routeConfigs, stackConfig = {}) => {
             params: action.params,
             // merge the child state in this order to allow params override
             ...childState,
-            key: action.newKey || generateKey(),
             routeName: action.routeName,
+            key: action.newKey || generateKey(),
           };
           return { ...state, routes };
         }
@@ -235,7 +243,10 @@ export default (routeConfigs, stackConfig = {}) => {
             if (state.index === lastRouteIndex && !action.params) {
               return state;
             }
-            const routes = [...state.routes];
+
+            // Remove the now unused routes at the tail of the routes array
+            const routes = state.routes.slice(0, lastRouteIndex + 1);
+
             // Apply params if provided, otherwise leave route identity intact
             if (action.params) {
               const route = state.routes.find(r => r.key === action.key);
@@ -259,7 +270,7 @@ export default (routeConfigs, stackConfig = {}) => {
             };
           }
         }
-        const key = action.key || generateKey();
+
         if (childRouter) {
           const childAction =
             action.action || NavigationActions.init({ params: action.params });
@@ -267,14 +278,14 @@ export default (routeConfigs, stackConfig = {}) => {
             params: action.params,
             // merge the child state in this order to allow params override
             ...childRouter.getStateForAction(childAction),
-            key,
             routeName: action.routeName,
+            key: action.key || generateKey(),
           };
         } else {
           route = {
             params: action.params,
-            key,
             routeName: action.routeName,
+            key: action.key || generateKey(),
           };
         }
         return {
@@ -326,11 +337,12 @@ export default (routeConfigs, stackConfig = {}) => {
               routeToPush = navigatedChildRoute;
             }
             if (routeToPush) {
-              return StateUtils.push(state, {
+              const route = {
                 ...routeToPush,
-                key: generateKey(),
                 routeName: childRouterName,
-              });
+                key: action.key || generateKey(),
+              };
+              return StateUtils.push(state, route);
             }
           }
         }
@@ -369,20 +381,16 @@ export default (routeConfigs, stackConfig = {}) => {
           ...state,
           routes: resetAction.actions.map(childAction => {
             const router = childRouters[childAction.routeName];
+            let childState = {};
             if (router) {
-              return {
-                ...childAction,
-                ...router.getStateForAction(childAction),
-                routeName: childAction.routeName,
-                key: generateKey(),
-              };
+              childState = router.getStateForAction(childAction);
             }
-            const route = {
-              ...childAction,
-              key: generateKey(),
+            return {
+              params: childAction.params,
+              ...childState,
+              routeName: childAction.routeName,
+              key: childAction.key || generateKey(),
             };
-            delete route.type;
-            return route;
           }),
           index: action.index,
         };

src/routers/TabRouter.js

@@ -6,6 +6,13 @@ import NavigationActions from '../NavigationActions';
 import validateRouteConfigMap from './validateRouteConfigMap';
 import getScreenConfigDeprecated from './getScreenConfigDeprecated';
 
+function childrenUpdateWithoutSwitchingIndex(actionType) {
+  return [
+    NavigationActions.SET_PARAMS,
+    NavigationActions.COMPLETE_TRANSITION,
+  ].includes(actionType);
+}
+
 export default (routeConfigs, config = {}) => {
   // Fail fast on invalid route definitions
   validateRouteConfigMap(routeConfigs);
@@ -213,9 +220,13 @@ export default (routeConfigs, config = {}) => {
       });
       // console.log(`${order.join('-')}: Processed other tabs:`, {lastIndex: state.index, index});
 
-      // keep active tab index if action type is SET_PARAMS
-      index =
-        action.type === NavigationActions.SET_PARAMS ? state.index : index;
+      // Nested routers can be updated after switching tabs with actions such as SET_PARAMS
+      // and COMPLETE_TRANSITION.
+      // NOTE: This may be problematic with custom routers because we whitelist the actions
+      // that can be handled by child routers without automatically changing index.
+      if (childrenUpdateWithoutSwitchingIndex(action.type)) {
+        index = state.index;
+      }
 
       if (index !== state.index || routes !== state.routes) {
         return {

src/routers/__tests__/Routers-test.js

@@ -7,13 +7,18 @@ import TabRouter from '../TabRouter';
 
 import NavigationActions from '../../NavigationActions';
 import addNavigationHelpers from '../../addNavigationHelpers';
+import { _TESTING_ONLY_normalize_keys } from '../KeyGenerator';
+
+beforeEach(() => {
+  _TESTING_ONLY_normalize_keys();
+});
 
 const ROUTERS = {
   TabRouter,
   StackRouter,
 };
 
-const dummyEventSubscriber = (name: string, handler: (*) => void) => ({
+const dummyEventSubscriber = (name, handler) => ({
   remove: () => {},
 });
 
@@ -105,8 +110,8 @@ test('Handles no-op actions with tabs within stack router', () => {
     type: NavigationActions.NAVIGATE,
     routeName: 'Qux',
   });
-  expect(state1.routes[0].key).toEqual('Init-id-0-0');
-  expect(state2.routes[0].key).toEqual('Init-id-0-1');
+  expect(state1.routes[0].key).toEqual('id-0');
+  expect(state2.routes[0].key).toEqual('id-1');
   state1.routes[0].key = state2.routes[0].key;
   expect(state1).toEqual(state2);
   const state3 = TestRouter.getStateForAction(
@@ -134,7 +139,7 @@ test('Handles deep action', () => {
     key: 'StackRouterRoot',
     routes: [
       {
-        key: 'Init-id-0-2',
+        key: 'id-0',
         routeName: 'Bar',
       },
     ],
@@ -174,8 +179,8 @@ test('Supports lazily-evaluated getScreen', () => {
     immediate: true,
     routeName: 'Qux',
   });
-  expect(state1.routes[0].key).toEqual('Init-id-0-4');
-  expect(state2.routes[0].key).toEqual('Init-id-0-5');
+  expect(state1.routes[0].key).toEqual('id-0');
+  expect(state2.routes[0].key).toEqual('id-1');
   state1.routes[0].key = state2.routes[0].key;
   expect(state1).toEqual(state2);
   const state3 = TestRouter.getStateForAction(
@@ -188,3 +193,60 @@ test('Supports lazily-evaluated getScreen', () => {
   );
   expect(state2).toEqual(state3);
 });
+
+test('Does not switch tab index when TabRouter child handles COMPLETE_NAVIGATION or SET_PARAMS', () => {
+  const FooStackNavigator = () => <div />;
+  const BarView = () => <div />;
+  FooStackNavigator.router = StackRouter({
+    Foo: {
+      screen: BarView,
+    },
+    Bar: {
+      screen: BarView,
+    },
+  });
+
+  const TestRouter = TabRouter({
+    Zap: { screen: FooStackNavigator },
+    Zoo: { screen: FooStackNavigator },
+  });
+
+  const state1 = TestRouter.getStateForAction({ type: NavigationActions.INIT });
+
+  // Navigate to the second screen in the first tab
+  const state2 = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Bar',
+    },
+    state1
+  );
+
+  // Switch tabs
+  const state3 = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Zoo',
+    },
+    state2
+  );
+
+  const stateAfterCompleteTransition = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.COMPLETE_TRANSITION,
+      key: state2.routes[0].key,
+    },
+    state3
+  );
+  const stateAfterSetParams = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.SET_PARAMS,
+      key: state1.routes[0].routes[0].key,
+      params: { key: 'value' },
+    },
+    state3
+  );
+
+  expect(stateAfterCompleteTransition.index).toEqual(1);
+  expect(stateAfterSetParams.index).toEqual(1);
+});

src/routers/__tests__/StackRouter-test.js

@@ -355,7 +355,7 @@ describe('StackRouter', () => {
       index: 0,
       isTransitioning: false,
       key: 'StackRouterRoot',
-      routes: [{ key: 'Init-id-0', routeName: 'foo' }],
+      routes: [{ key: 'id-0', routeName: 'foo' }],
     });
     const pushedState = TestRouter.getStateForAction(
       NavigationActions.navigate({ routeName: 'qux' }),
@@ -553,6 +553,37 @@ describe('StackRouter', () => {
     }).toThrow();
   });
 
+  test('Navigate backwards with key removes leading routes', () => {
+    const TestRouter = StackRouter({
+      foo: { screen: () => <div /> },
+      bar: { screen: () => <div /> },
+    });
+    const initState = TestRouter.getStateForAction(NavigationActions.init());
+    const pushedState = TestRouter.getStateForAction(
+      NavigationActions.navigate({ routeName: 'bar', key: 'a' }),
+      initState
+    );
+    const pushedTwiceState = TestRouter.getStateForAction(
+      NavigationActions.navigate({ routeName: 'bar', key: 'b`' }),
+      pushedState
+    );
+    const pushedThriceState = TestRouter.getStateForAction(
+      NavigationActions.navigate({ routeName: 'foo', key: 'c`' }),
+      pushedTwiceState
+    );
+    expect(pushedThriceState.routes.length).toEqual(4);
+
+    const navigatedBackToFirstRouteState = TestRouter.getStateForAction(
+      NavigationActions.navigate({
+        routeName: 'foo',
+        key: pushedThriceState.routes[0].key,
+      }),
+      pushedThriceState
+    );
+    expect(navigatedBackToFirstRouteState.index).toEqual(0);
+    expect(navigatedBackToFirstRouteState.routes.length).toEqual(1);
+  });
+
   test('Handle basic stack logic for plain components', () => {
     const FooScreen = () => <div />;
     const BarScreen = () => <div />;
@@ -571,7 +602,7 @@ describe('StackRouter', () => {
       key: 'StackRouterRoot',
       routes: [
         {
-          key: 'Init-id-0',
+          key: 'id-0',
           routeName: 'Foo',
         },
       ],
@@ -599,7 +630,7 @@ describe('StackRouter', () => {
       key: 'StackRouterRoot',
       routes: [
         {
-          key: 'Init-id-0',
+          key: 'id-0',
           routeName: 'Foo',
         },
       ],
@@ -696,7 +727,7 @@ describe('StackRouter', () => {
       key: 'StackRouterRoot',
       routes: [
         {
-          key: 'Init-id-0',
+          key: 'id-0',
           routeName: 'Foo',
         },
       ],
@@ -724,7 +755,7 @@ describe('StackRouter', () => {
       key: 'StackRouterRoot',
       routes: [
         {
-          key: 'Init-id-0',
+          key: 'id-0',
           routeName: 'Foo',
         },
       ],
@@ -798,7 +829,7 @@ describe('StackRouter', () => {
       key: 'StackRouterRoot',
       routes: [
         {
-          key: 'Init-id-0',
+          key: 'id-0',
           routeName: 'Bar',
         },
       ],
@@ -907,14 +938,14 @@ describe('StackRouter', () => {
       {
         type: NavigationActions.SET_PARAMS,
         params: { name: 'foobar' },
-        key: 'Init-id-0',
+        key: 'id-0',
       },
       state
     );
     expect(state2 && state2.index).toEqual(0);
     expect(state2 && state2.routes[0].routes[0].routes).toEqual([
       {
-        key: 'Init-id-0',
+        key: 'id-0',
         routeName: 'Quux',
         params: { name: 'foobar' },
       },
@@ -1133,6 +1164,126 @@ describe('StackRouter', () => {
     ]);
   });
 
+  test('Handles the navigate action with params and nested StackRouter as a first action', () => {
+    const state = TestStackRouter.getStateForAction({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'main',
+      params: {
+        code: 'test',
+        foo: 'bar',
+      },
+      action: {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'profile',
+        params: {
+          id: '4',
+          code: 'test',
+          foo: 'bar',
+        },
+        action: {
+          type: NavigationActions.NAVIGATE,
+          routeName: 'list',
+          params: {
+            id: '10259959195',
+            code: 'test',
+            foo: 'bar',
+          },
+        },
+      },
+    });
+
+    expect(state).toEqual({
+      index: 0,
+      isTransitioning: false,
+      key: 'StackRouterRoot',
+      routes: [
+        {
+          index: 0,
+          isTransitioning: false,
+          key: 'id-2',
+          params: { code: 'test', foo: 'bar' },
+          routeName: 'main',
+          routes: [
+            {
+              index: 0,
+              isTransitioning: false,
+              key: 'id-1',
+              params: { code: 'test', foo: 'bar', id: '4' },
+              routeName: 'profile',
+              routes: [
+                {
+                  key: 'id-0',
+                  params: { code: 'test', foo: 'bar', id: '10259959195' },
+                  routeName: 'list',
+                  type: undefined,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    const state2 = TestStackRouter.getStateForAction({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'main',
+      params: {
+        code: '',
+        foo: 'bar',
+      },
+      action: {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'profile',
+        params: {
+          id: '4',
+          code: '',
+          foo: 'bar',
+        },
+        action: {
+          type: NavigationActions.NAVIGATE,
+          routeName: 'list',
+          params: {
+            id: '10259959195',
+            code: '',
+            foo: 'bar',
+          },
+        },
+      },
+    });
+
+    expect(state2).toEqual({
+      index: 0,
+      isTransitioning: false,
+      key: 'StackRouterRoot',
+      routes: [
+        {
+          index: 0,
+          isTransitioning: false,
+          key: 'id-5',
+          params: { code: '', foo: 'bar' },
+          routeName: 'main',
+          routes: [
+            {
+              index: 0,
+              isTransitioning: false,
+              key: 'id-4',
+              params: { code: '', foo: 'bar', id: '4' },
+              routeName: 'profile',
+              routes: [
+                {
+                  key: 'id-3',
+                  params: { code: '', foo: 'bar', id: '10259959195' },
+                  routeName: 'list',
+                  type: undefined,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+  });
+
   test('Handles the navigate action with params and nested TabRouter', () => {
     const ChildNavigator = () => <div />;
     ChildNavigator.router = TabRouter({

src/views/CardStack/CardStack.js

@@ -206,132 +206,137 @@ class CardStack extends React.Component {
     const { options } = this._getScreenDetails(scene);
     const gestureDirectionInverted = options.gestureDirection === 'inverted';
 
-    const responder = PanResponder.create({
-      onPanResponderTerminate: () => {
-        this._isResponding = false;
-        this._reset(index, 0);
-      },
-      onPanResponderGrant: () => {
-        position.stopAnimation(value => {
-          this._isResponding = true;
-          this._gestureStartValue = value;
-        });
-      },
-      onMoveShouldSetPanResponder: (event, gesture) => {
-        if (index !== scene.index) {
-          return false;
-        }
-        const immediateIndex =
-          this._immediateIndex == null ? index : this._immediateIndex;
-        const currentDragDistance = gesture[isVertical ? 'dy' : 'dx'];
-        const currentDragPosition =
-          event.nativeEvent[isVertical ? 'pageY' : 'pageX'];
-        const axisLength = isVertical
-          ? layout.height.__getValue()
-          : layout.width.__getValue();
-        const axisHasBeenMeasured = !!axisLength;
-
-        // Measure the distance from the touch to the edge of the screen
-        const screenEdgeDistance = gestureDirectionInverted
-          ? axisLength - (currentDragPosition - currentDragDistance)
-          : currentDragPosition - currentDragDistance;
-        // Compare to the gesture distance relavant to card or modal
-        const {
-          gestureResponseDistance: userGestureResponseDistance = {},
-        } = this._getScreenDetails(scene).options;
-        const gestureResponseDistance = isVertical
-          ? userGestureResponseDistance.vertical ||
-            GESTURE_RESPONSE_DISTANCE_VERTICAL
-          : userGestureResponseDistance.horizontal ||
-            GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
-        // GESTURE_RESPONSE_DISTANCE is about 25 or 30. Or 135 for modals
-        if (screenEdgeDistance > gestureResponseDistance) {
-          // Reject touches that started in the middle of the screen
-          return false;
-        }
-
-        const hasDraggedEnough =
-          Math.abs(currentDragDistance) > RESPOND_THRESHOLD;
-
-        const isOnFirstCard = immediateIndex === 0;
-        const shouldSetResponder =
-          hasDraggedEnough && axisHasBeenMeasured && !isOnFirstCard;
-        return shouldSetResponder;
-      },
-      onPanResponderMove: (event, gesture) => {
-        // Handle the moving touches for our granted responder
-        const startValue = this._gestureStartValue;
-        const axis = isVertical ? 'dy' : 'dx';
-        const axisDistance = isVertical
-          ? layout.height.__getValue()
-          : layout.width.__getValue();
-        const currentValue =
-          (I18nManager.isRTL && axis === 'dx') !== gestureDirectionInverted
-            ? startValue + gesture[axis] / axisDistance
-            : startValue - gesture[axis] / axisDistance;
-        const value = clamp(index - 1, currentValue, index);
-        position.setValue(value);
-      },
-      onPanResponderTerminationRequest: () =>
-        // Returning false will prevent other views from becoming responder while
-        // the navigation view is the responder (mid-gesture)
-        false,
-      onPanResponderRelease: (event, gesture) => {
-        if (!this._isResponding) {
-          return;
-        }
-        this._isResponding = false;
-
-        const immediateIndex =
-          this._immediateIndex == null ? index : this._immediateIndex;
-
-        // Calculate animate duration according to gesture speed and moved distance
-        const axisDistance = isVertical
-          ? layout.height.__getValue()
-          : layout.width.__getValue();
-        const movementDirection = gestureDirectionInverted ? -1 : 1;
-        const movedDistance =
-          movementDirection * gesture[isVertical ? 'dy' : 'dx'];
-        const gestureVelocity =
-          movementDirection * gesture[isVertical ? 'vy' : 'vx'];
-        const defaultVelocity = axisDistance / ANIMATION_DURATION;
-        const velocity = Math.max(Math.abs(gestureVelocity), defaultVelocity);
-        const resetDuration = gestureDirectionInverted
-          ? (axisDistance - movedDistance) / velocity
-          : movedDistance / velocity;
-        const goBackDuration = gestureDirectionInverted
-          ? movedDistance / velocity
-          : (axisDistance - movedDistance) / velocity;
-
-        // To asyncronously get the current animated value, we need to run stopAnimation:
-        position.stopAnimation(value => {
-          // If the speed of the gesture release is significant, use that as the indication
-          // of intent
-          if (gestureVelocity < -0.5) {
-            this._reset(immediateIndex, resetDuration);
-            return;
-          }
-          if (gestureVelocity > 0.5) {
-            this._goBack(immediateIndex, goBackDuration);
-            return;
-          }
-
-          // Then filter based on the distance the screen was moved. Over a third of the way swiped,
-          // and the back will happen.
-          if (value <= index - POSITION_THRESHOLD) {
-            this._goBack(immediateIndex, goBackDuration);
-          } else {
-            this._reset(immediateIndex, resetDuration);
-          }
-        });
-      },
-    });
-
     const gesturesEnabled =
       typeof options.gesturesEnabled === 'boolean'
         ? options.gesturesEnabled
         : Platform.OS === 'ios';
 
+    const responder = !gesturesEnabled
+      ? null
+      : PanResponder.create({
+          onPanResponderTerminate: () => {
+            this._isResponding = false;
+            this._reset(index, 0);
+          },
+          onPanResponderGrant: () => {
+            position.stopAnimation(value => {
+              this._isResponding = true;
+              this._gestureStartValue = value;
+            });
+          },
+          onMoveShouldSetPanResponder: (event, gesture) => {
+            if (index !== scene.index) {
+              return false;
+            }
+            const immediateIndex =
+              this._immediateIndex == null ? index : this._immediateIndex;
+            const currentDragDistance = gesture[isVertical ? 'dy' : 'dx'];
+            const currentDragPosition =
+              event.nativeEvent[isVertical ? 'pageY' : 'pageX'];
+            const axisLength = isVertical
+              ? layout.height.__getValue()
+              : layout.width.__getValue();
+            const axisHasBeenMeasured = !!axisLength;
+
+            // Measure the distance from the touch to the edge of the screen
+            const screenEdgeDistance = gestureDirectionInverted
+              ? axisLength - (currentDragPosition - currentDragDistance)
+              : currentDragPosition - currentDragDistance;
+            // Compare to the gesture distance relavant to card or modal
+            const {
+              gestureResponseDistance: userGestureResponseDistance = {},
+            } = this._getScreenDetails(scene).options;
+            const gestureResponseDistance = isVertical
+              ? userGestureResponseDistance.vertical ||
+                GESTURE_RESPONSE_DISTANCE_VERTICAL
+              : userGestureResponseDistance.horizontal ||
+                GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
+            // GESTURE_RESPONSE_DISTANCE is about 25 or 30. Or 135 for modals
+            if (screenEdgeDistance > gestureResponseDistance) {
+              // Reject touches that started in the middle of the screen
+              return false;
+            }
+
+            const hasDraggedEnough =
+              Math.abs(currentDragDistance) > RESPOND_THRESHOLD;
+
+            const isOnFirstCard = immediateIndex === 0;
+            const shouldSetResponder =
+              hasDraggedEnough && axisHasBeenMeasured && !isOnFirstCard;
+            return shouldSetResponder;
+          },
+          onPanResponderMove: (event, gesture) => {
+            // Handle the moving touches for our granted responder
+            const startValue = this._gestureStartValue;
+            const axis = isVertical ? 'dy' : 'dx';
+            const axisDistance = isVertical
+              ? layout.height.__getValue()
+              : layout.width.__getValue();
+            const currentValue =
+              (I18nManager.isRTL && axis === 'dx') !== gestureDirectionInverted
+                ? startValue + gesture[axis] / axisDistance
+                : startValue - gesture[axis] / axisDistance;
+            const value = clamp(index - 1, currentValue, index);
+            position.setValue(value);
+          },
+          onPanResponderTerminationRequest: () =>
+            // Returning false will prevent other views from becoming responder while
+            // the navigation view is the responder (mid-gesture)
+            false,
+          onPanResponderRelease: (event, gesture) => {
+            if (!this._isResponding) {
+              return;
+            }
+            this._isResponding = false;
+
+            const immediateIndex =
+              this._immediateIndex == null ? index : this._immediateIndex;
+
+            // Calculate animate duration according to gesture speed and moved distance
+            const axisDistance = isVertical
+              ? layout.height.__getValue()
+              : layout.width.__getValue();
+            const movementDirection = gestureDirectionInverted ? -1 : 1;
+            const movedDistance =
+              movementDirection * gesture[isVertical ? 'dy' : 'dx'];
+            const gestureVelocity =
+              movementDirection * gesture[isVertical ? 'vy' : 'vx'];
+            const defaultVelocity = axisDistance / ANIMATION_DURATION;
+            const velocity = Math.max(
+              Math.abs(gestureVelocity),
+              defaultVelocity
+            );
+            const resetDuration = gestureDirectionInverted
+              ? (axisDistance - movedDistance) / velocity
+              : movedDistance / velocity;
+            const goBackDuration = gestureDirectionInverted
+              ? movedDistance / velocity
+              : (axisDistance - movedDistance) / velocity;
+
+            // To asyncronously get the current animated value, we need to run stopAnimation:
+            position.stopAnimation(value => {
+              // If the speed of the gesture release is significant, use that as the indication
+              // of intent
+              if (gestureVelocity < -0.5) {
+                this._reset(immediateIndex, resetDuration);
+                return;
+              }
+              if (gestureVelocity > 0.5) {
+                this._goBack(immediateIndex, goBackDuration);
+                return;
+              }
+
+              // Then filter based on the distance the screen was moved. Over a third of the way swiped,
+              // and the back will happen.
+              if (value <= index - POSITION_THRESHOLD) {
+                this._goBack(immediateIndex, goBackDuration);
+              } else {
+                this._reset(immediateIndex, resetDuration);
+              }
+            });
+          },
+        });
+
     const handlers = gesturesEnabled ? responder.panHandlers : {};
     const containerStyle = [
       styles.container,

src/views/Drawer/DrawerNavigatorItems.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, Platform, StyleSheet } from 'react-native';
+import SafeAreaView from 'react-native-safe-area-view';
 
-import SafeAreaView from '../SafeAreaView';
 import TouchableItem from '../TouchableItem';
 
 /**

src/views/Drawer/DrawerSidebar.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import withCachedChildNavigation from '../../withCachedChildNavigation';
 import NavigationActions from '../../NavigationActions';
 import invariant from '../../utils/invariant';
 
-import SafeAreaView from '../SafeAreaView';
-
 /**
  * Component that renders the sidebar screen of the drawer.
  */

src/views/Header/Header.js

@@ -8,11 +8,11 @@ import {
   View,
   ViewPropTypes,
 } from 'react-native';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import HeaderTitle from './HeaderTitle';
 import HeaderBackButton from './HeaderBackButton';
 import HeaderStyleInterpolator from './HeaderStyleInterpolator';
-import SafeAreaView from '../SafeAreaView';
 import withOrientation from '../withOrientation';
 
 const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
@@ -262,7 +262,11 @@ class Header extends React.PureComponent {
     let appBar;
 
     if (this.props.mode === 'float') {
-      const scenesProps = this.props.scenes.map(scene => ({
+      const scenesByIndex = {};
+      this.props.scenes.forEach(scene => {
+        scenesByIndex[scene.index] = scene;
+      });
+      const scenesProps = Object.values(scenesByIndex).map(scene => ({
         position: this.props.position,
         progress: this.props.progress,
         scene,

src/views/SafeAreaView.js

@@ -1,316 +0,0 @@
-import React, { Component } from 'react';
-import {
-  DeviceInfo,
-  Dimensions,
-  InteractionManager,
-  NativeModules,
-  Platform,
-  StyleSheet,
-  Animated,
-} from 'react-native';
-import withOrientation from './withOrientation';
-
-// See https://mydevice.io/devices/ for device dimensions
-const X_WIDTH = 375;
-const X_HEIGHT = 812;
-const PAD_WIDTH = 768;
-const PAD_HEIGHT = 1024;
-
-const { height: D_HEIGHT, width: D_WIDTH } = Dimensions.get('window');
-
-const { PlatformConstants = {} } = NativeModules;
-const { minor = 0 } = PlatformConstants.reactNativeVersion || {};
-
-const isIPhoneX = (() => {
-  if (Platform.OS === 'web') return false;
-
-  if (minor >= 50) {
-    return DeviceInfo.isIPhoneX_deprecated;
-  }
-
-  return (
-    Platform.OS === 'ios' &&
-    ((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) ||
-      (D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT))
-  );
-})();
-
-const isIPad = (() => {
-  if (Platform.OS !== 'ios' || isIPhoneX) return false;
-
-  // if portrait and width is smaller than iPad width
-  if (D_HEIGHT > D_WIDTH && D_WIDTH < PAD_WIDTH) {
-    return false;
-  }
-
-  // if landscape and height is smaller that iPad height
-  if (D_WIDTH > D_HEIGHT && D_HEIGHT < PAD_WIDTH) {
-    return false;
-  }
-
-  return true;
-})();
-
-let _customStatusBarHeight = null;
-const statusBarHeight = isLandscape => {
-  if (_customStatusBarHeight !== null) {
-    return _customStatusBarHeight;
-  }
-
-  /**
-   * This is a temporary workaround because we don't have a way to detect
-   * if the status bar is translucent or opaque. If opaque, we don't need to
-   * factor in the height here; if translucent (content renders under it) then
-   * we do.
-   */
-  if (Platform.OS === 'android') {
-    if (global.Expo) {
-      return global.Expo.Constants.statusBarHeight;
-    } else {
-      return 0;
-    }
-  }
-
-  if (isIPhoneX) {
-    return isLandscape ? 0 : 44;
-  }
-
-  if (isIPad) {
-    return 20;
-  }
-
-  return isLandscape ? 0 : 20;
-};
-
-const doubleFromPercentString = percent => {
-  if (!percent.includes('%')) {
-    return 0;
-  }
-
-  const dbl = parseFloat(percent) / 100;
-
-  if (isNaN(dbl)) return 0;
-
-  return dbl;
-};
-
-class SafeView extends Component {
-  static setStatusBarHeight = height => {
-    _customStatusBarHeight = height;
-  };
-
-  state = {
-    touchesTop: true,
-    touchesBottom: true,
-    touchesLeft: true,
-    touchesRight: true,
-    orientation: null,
-    viewWidth: 0,
-    viewHeight: 0,
-  };
-
-  componentDidMount() {
-    InteractionManager.runAfterInteractions(() => {
-      this._onLayout();
-    });
-  }
-
-  componentWillReceiveProps() {
-    this._onLayout();
-  }
-
-  render() {
-    const { forceInset = false, isLandscape, children, style } = this.props;
-
-    const safeAreaStyle = this._getSafeAreaStyle();
-
-    return (
-      <Animated.View
-        ref={c => (this.view = c)}
-        onLayout={this._onLayout}
-        style={safeAreaStyle}
-      >
-        {this.props.children}
-      </Animated.View>
-    );
-  }
-
-  _onLayout = () => {
-    if (!this.view) return;
-
-    const { isLandscape } = this.props;
-    const { orientation } = this.state;
-    const newOrientation = isLandscape ? 'landscape' : 'portrait';
-    if (orientation && orientation === newOrientation) {
-      return;
-    }
-
-    const WIDTH = isLandscape ? X_HEIGHT : X_WIDTH;
-    const HEIGHT = isLandscape ? X_WIDTH : X_HEIGHT;
-
-    this.view._component.measureInWindow((winX, winY, winWidth, winHeight) => {
-      let realY = winY;
-      let realX = winX;
-
-      if (realY >= HEIGHT) {
-        realY = realY % HEIGHT;
-      } else if (realY < 0) {
-        realY = realY % HEIGHT + HEIGHT;
-      }
-
-      if (realX >= WIDTH) {
-        realX = realX % WIDTH;
-      } else if (realX < 0) {
-        realX = realX % WIDTH + WIDTH;
-      }
-
-      const touchesTop = realY === 0;
-      const touchesBottom = realY + winHeight >= HEIGHT;
-      const touchesLeft = realX === 0;
-      const touchesRight = realX + winWidth >= WIDTH;
-
-      this.setState({
-        touchesTop,
-        touchesBottom,
-        touchesLeft,
-        touchesRight,
-        orientation: newOrientation,
-        viewWidth: winWidth,
-        viewHeight: winHeight,
-      });
-    });
-  };
-
-  _getSafeAreaStyle = () => {
-    const { touchesTop, touchesBottom, touchesLeft, touchesRight } = this.state;
-    const { forceInset, isLandscape } = this.props;
-
-    const {
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      viewStyle,
-    } = this._getViewStyles();
-
-    const style = {
-      ...viewStyle,
-      paddingTop: touchesTop ? this._getInset('top') : 0,
-      paddingBottom: touchesBottom ? this._getInset('bottom') : 0,
-      paddingLeft: touchesLeft ? this._getInset('left') : 0,
-      paddingRight: touchesRight ? this._getInset('right') : 0,
-    };
-
-    if (forceInset) {
-      Object.keys(forceInset).forEach(key => {
-        let inset = forceInset[key];
-
-        if (inset === 'always') {
-          inset = this._getInset(key);
-        }
-
-        if (inset === 'never') {
-          inset = 0;
-        }
-
-        switch (key) {
-          case 'horizontal': {
-            style.paddingLeft = inset;
-            style.paddingRight = inset;
-            break;
-          }
-          case 'vertical': {
-            style.paddingTop = inset;
-            style.paddingBottom = inset;
-            break;
-          }
-          case 'left':
-          case 'right':
-          case 'top':
-          case 'bottom': {
-            const padding = `padding${key[0].toUpperCase()}${key.slice(1)}`;
-            style[padding] = inset;
-            break;
-          }
-        }
-      });
-    }
-
-    // new height/width should only include padding from insets
-    // height/width should not be affected by padding from style obj
-    if (style.height && typeof style.height === 'number') {
-      style.height += style.paddingTop + style.paddingBottom;
-    }
-
-    if (style.width && typeof style.width === 'number') {
-      style.width += style.paddingLeft + style.paddingRight;
-    }
-
-    style.paddingTop = Math.max(style.paddingTop, paddingTop);
-    style.paddingBottom = Math.max(style.paddingBottom, paddingBottom);
-    style.paddingLeft = Math.max(style.paddingLeft, paddingLeft);
-    style.paddingRight = Math.max(style.paddingRight, paddingRight);
-
-    return style;
-  };
-
-  _getViewStyles = () => {
-    const { viewWidth } = this.state;
-    // get padding values from style to add back in after insets are determined
-    // default precedence: padding[Side] -> vertical | horizontal -> padding -> 0
-    let {
-      padding = 0,
-      paddingVertical = padding,
-      paddingHorizontal = padding,
-      paddingTop = paddingVertical,
-      paddingBottom = paddingVertical,
-      paddingLeft = paddingHorizontal,
-      paddingRight = paddingHorizontal,
-      ...viewStyle
-    } = StyleSheet.flatten(this.props.style || {});
-
-    if (typeof paddingTop !== 'number') {
-      paddingTop = doubleFromPercentString(paddingTop) * viewWidth;
-    }
-
-    if (typeof paddingBottom !== 'number') {
-      paddingBottom = doubleFromPercentString(paddingBottom) * viewWidth;
-    }
-
-    if (typeof paddingLeft !== 'number') {
-      paddingLeft = doubleFromPercentString(paddingLeft) * viewWidth;
-    }
-
-    if (typeof paddingRight !== 'number') {
-      paddingRight = doubleFromPercentString(paddingRight) * viewWidth;
-    }
-
-    return {
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      viewStyle,
-    };
-  };
-
-  _getInset = key => {
-    const { isLandscape } = this.props;
-    switch (key) {
-      case 'horizontal':
-      case 'right':
-      case 'left': {
-        return isLandscape ? (isIPhoneX ? 44 : 0) : 0;
-      }
-      case 'vertical':
-      case 'top': {
-        return statusBarHeight(isLandscape);
-      }
-      case 'bottom': {
-        return isIPhoneX ? (isLandscape ? 24 : 34) : 0;
-      }
-    }
-  };
-}
-
-export default withOrientation(SafeView);

src/views/TabView/TabBarBottom.js

@@ -7,8 +7,9 @@ import {
   Platform,
   Keyboard,
 } from 'react-native';
+import SafeAreaView from 'react-native-safe-area-view';
+
 import TabBarIcon from './TabBarIcon';
-import SafeAreaView from '../SafeAreaView';
 import withOrientation from '../withOrientation';
 
 const majorVersion = parseInt(Platform.Version, 10);

src/views/TabView/TabView.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { View, StyleSheet, Platform } from 'react-native';
 import { TabViewAnimated, TabViewPagerPan } from 'react-native-tab-view';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import SceneView from '../SceneView';
 import withCachedChildNavigation from '../../withCachedChildNavigation';
-import SafeAreaView from '../SafeAreaView';
 
 class TabView extends React.PureComponent {
   static defaultProps = {

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

@@ -27,6 +27,7 @@ exports[`TabBarBottom renders successfully 1`] = `
     <View
       collapsable={undefined}
       onLayout={[Function]}
+      pointerEvents="box-none"
       style={
         Object {
           "backgroundColor": "#F7F7F7",

src/views/withNavigation.js

@@ -3,16 +3,25 @@ import propTypes from 'prop-types';
 import hoistStatics from 'hoist-non-react-statics';
 
 export default function withNavigation(Component) {
-  const componentWithNavigation = (props, { navigation }) => (
-    <Component {...props} navigation={navigation} />
-  );
+  class ComponentWithNavigation extends React.Component {
+    static displayName = `withNavigation(${Component.displayName ||
+      Component.name})`;
 
-  const displayName = Component.displayName || Component.name;
-  componentWithNavigation.displayName = `withNavigation(${displayName})`;
+    static contextTypes = {
+      navigation: propTypes.object.isRequired,
+    };
 
-  componentWithNavigation.contextTypes = {
-    navigation: propTypes.object.isRequired,
-  };
+    render() {
+      const { navigation } = this.context;
+      return (
+        <Component
+          {...this.props}
+          navigation={navigation}
+          ref={this.props.onRef}
+        />
+      );
+    }
+  }
 
-  return hoistStatics(componentWithNavigation, Component);
+  return hoistStatics(ComponentWithNavigation, Component);
 }

yarn.lock

@@ -2512,7 +2512,7 @@ hoek@4.x.x:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
 
-hoist-non-react-statics@^2.2.0:
+hoist-non-react-statics@^2.2.0, hoist-non-react-statics@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz#343db84c6018c650778898240135a1420ee22ce0"
 
@@ -4416,6 +4416,12 @@ react-native-drawer-layout@1.3.2:
   dependencies:
     react-native-dismiss-keyboard "1.0.0"
 
+react-native-safe-area-view@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.6.0.tgz#ce01eb27905a77780219537e0f53fe9c783a8b3d"
+  dependencies:
+    hoist-non-react-statics "^2.3.1"
+
 react-native-tab-view@^0.0.74:
   version "0.0.74"
   resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.74.tgz#62c0c882d9232b461ce181d440d683b4f99d1bd8"