chore: publish

- @react-navigation/compat@5.0.0-alpha.9
 - @react-navigation/core@5.0.0-alpha.17
 - @react-navigation/drawer@5.0.0-alpha.16
 - @react-navigation/example@5.0.0-alpha.15
 - @react-navigation/material-bottom-tabs@5.0.0-alpha.15
 - @react-navigation/native-stack@5.0.0-alpha.4
 - @react-navigation/native@5.0.0-alpha.13
 - @react-navigation/stack@5.0.0-alpha.28

.circleci/config.yml

@@ -14,11 +14,11 @@ jobs:
           at: ~/project
       - restore_cache:
           keys:
-            - v1-dependencies-{{ checksum "package.json" }}
+            - v1-dependencies-{{ checksum "yarn.lock" }}
             - v1-dependencies-
-      - run: yarn install
+      - run: yarn install --frozen-lockfile
       - save_cache:
-          key: v1-dependencies-{{ checksum "package.json" }}
+          key: v1-dependencies-{{ checksum "yarn.lock" }}
           paths: node_modules
       - persist_to_workspace:
           root: .

.eslintrc.json

@@ -8,6 +8,7 @@
       "@react-navigation/routers",
       "@react-navigation/compat",
       "@react-navigation/stack",
+      "@react-navigation/native-stack",
       "@react-navigation/drawer",
       "@react-navigation/bottom-tabs",
       "@react-navigation/material-top-tabs",

.gitignore

@@ -5,6 +5,8 @@
 .expo
 .gradle
 
+local.properties
+
 /coverage/
 /types/
 /dist/

package.json

@@ -41,8 +41,8 @@
     "typescript": "^3.6.3"
   },
   "resolutions": {
-    "react": "16.10.1",
+    "react": "~16.8.3",
-    "react-native": "0.59.10"
+    "react-native": "~0.59.10"
   },
   "husky": {
     "hooks": {

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.13...@react-navigation/bottom-tabs@5.0.0-alpha.14) (2019-10-15)
+
+
+### Bug Fixes
+
+* improve keyboard handling with bottom tab bar ([42beb66](https://github.com/react-navigation/navigation-ex/commit/42beb66))
+* make it possible to run the example on web ([7a901af](https://github.com/react-navigation/navigation-ex/commit/7a901af))
+
+
+### Features
+
+* initial version of native stack ([#102](https://github.com/react-navigation/navigation-ex/issues/102)) ([ba3f718](https://github.com/react-navigation/navigation-ex/commit/ba3f718))
+
+
+
+
+
+# [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.12...@react-navigation/bottom-tabs@5.0.0-alpha.13) (2019-10-06)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.11...@react-navigation/bottom-tabs@5.0.0-alpha.12) (2019-10-03)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs

packages/bottom-tabs/README.md

@@ -37,8 +37,13 @@ cd ..
 ## Usage
 
 ```js
+import { MaterialCommunityIcons } from 'react-native-vector-icons';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
+const getTabBarIcon = name => ({ color, size }) => (
+  <MaterialCommunityIcons name={name} color={color} size={size} />
+);
+
 const BottomTabs = createBottomTabNavigator();
 
 export default function App() {
@@ -49,7 +54,7 @@ export default function App() {
         component={Article}
         options={{
           tabBarLabel: 'Article',
-          tabBarIcon: 'chrome-reader-mode',
+          tabBarIcon: getTabBarIcon('file-document-box'),
         }}
       />
       <BottomTabs.Screen
@@ -57,7 +62,7 @@ export default function App() {
         component={Chat}
         options={{
           tabBarLabel: 'Chat',
-          tabBarIcon: 'chat-bubble',
+          tabBarIcon: getTabBarIcon('message-reply'),
         }}
       />
       <BottomTabs.Screen
@@ -65,7 +70,7 @@ export default function App() {
         component={Contacts}
         options={{
           tabBarLabel: 'Contacts',
-          tabBarIcon: 'contacts',
+          tabBarIcon: getTabBarIcon('contacts'),
         }}
       />
     </BottomTabs.Navigator>

packages/bottom-tabs/package.json

@@ -10,7 +10,7 @@
     "android",
     "tab"
   ],
-  "version": "5.0.0-alpha.12",
+  "version": "5.0.0-alpha.14",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -40,8 +40,8 @@
     "@types/react": "^16.9.4",
     "@types/react-native": "^0.60.17",
     "del-cli": "^3.0.0",
-    "react": "16.10.1",
+    "react": "~16.8.3",
-    "react-native": "0.59.10",
+    "react-native": "~0.59.10",
     "react-native-safe-area-context": "^0.3.6",
     "typescript": "^3.6.3"
   },

packages/bottom-tabs/src/types.tsx

@@ -66,26 +66,26 @@ export type BottomTabNavigationOptions = {
 
   /**
    * Title string of a tab displayed in the tab bar or React Element
-   * or a function that given { focused: boolean, tintColor: string } returns a React.Node, to display in tab bar.
+   * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar.
    * When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section.
    */
   tabBarLabel?:
     | React.ReactNode
     | ((props: {
         focused: boolean;
-        tintColor: string;
+        color: string;
-        horizontal: boolean;
+        size: number;
       }) => React.ReactNode);
 
   /**
-   * React Element or a function that given { focused: boolean, tintColor: string } returns a React.Node, to display in the tab bar.
+   * React Element or a function that given { focused: boolean, color: string } returns a React.Node, to display in the tab bar.
    */
   tabBarIcon?:
     | React.ReactNode
     | ((props: {
         focused: boolean;
-        tintColor: string;
+        color: string;
-        horizontal: boolean;
+        size: number;
       }) => React.ReactNode);
 
   /**
@@ -139,7 +139,7 @@ export type BottomTabNavigationConfig = {
 
 export type BottomTabBarOptions = {
   /**
-   * Whether the tab bar gets hidden when the keyboard is shown.
+   * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
    */
   keyboardHidesTabBar?: boolean;
   /**
@@ -220,7 +220,7 @@ export type BottomTabBarProps = BottomTabBarOptions & {
   }) =>
     | ((scene: {
         focused: boolean;
-        tintColor: string;
+        color: string;
         orientation: 'horizontal' | 'vertical';
       }) => React.ReactNode | undefined)
     | React.ReactNode;
@@ -228,8 +228,8 @@ export type BottomTabBarProps = BottomTabBarOptions & {
   renderIcon: (props: {
     route: Route<string>;
     focused: boolean;
-    tintColor: string;
+    color: string;
-    horizontal: boolean;
+    size: number;
   }) => React.ReactNode;
   activeTintColor: string;
   inactiveTintColor: string;

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  View,
   Animated,
   StyleSheet,
   Keyboard,
@@ -32,7 +33,7 @@ const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
 
 export default class TabBarBottom extends React.Component<Props, State> {
   static defaultProps = {
-    keyboardHidesTabBar: true,
+    keyboardHidesTabBar: false,
     activeTintColor: '#007AFF',
     activeBackgroundColor: 'transparent',
     inactiveTintColor: '#8E8E93',
@@ -82,7 +83,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
     this.setState({ keyboard: true }, () =>
       Animated.timing(this.state.visible, {
         toValue: 0,
-        duration: 150,
+        duration: 200,
         useNativeDriver: true,
       }).start()
     );
@@ -90,10 +91,12 @@ export default class TabBarBottom extends React.Component<Props, State> {
   private handleKeyboardHide = () =>
     Animated.timing(this.state.visible, {
       toValue: 1,
-      duration: 100,
+      duration: 250,
       useNativeDriver: true,
-    }).start(() => {
+    }).start(({ finished }) => {
-      this.setState({ keyboard: false });
+      if (finished) {
+        this.setState({ keyboard: false });
+      }
     });
 
   private handleLayout = (e: LayoutChangeEvent) => {
@@ -134,7 +137,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
 
     const label = this.props.getLabelText({ route });
     const horizontal = this.shouldUseHorizontalLabels();
-    const tintColor = focused ? activeTintColor : inactiveTintColor;
+    const color = focused ? activeTintColor : inactiveTintColor;
 
     if (typeof label === 'string') {
       return (
@@ -142,7 +145,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
           numberOfLines={1}
           style={[
             styles.label,
-            { color: tintColor },
+            { color },
             showIcon && horizontal ? styles.labelBeside : styles.labelBeneath,
             labelStyle,
           ]}
@@ -156,7 +159,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
     if (typeof label === 'function') {
       return label({
         focused,
-        tintColor,
+        color,
         orientation: horizontal ? 'horizontal' : 'vertical',
       });
     }
@@ -191,7 +194,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
     return (
       <TabBarIcon
         route={route}
-        horizontal={horizontal}
+        size={horizontal ? 17 : 24}
         activeOpacity={activeOpacity}
         inactiveOpacity={inactiveOpacity}
         activeTintColor={activeTintColor}
@@ -305,58 +308,59 @@ export default class TabBarBottom extends React.Component<Props, State> {
             pointerEvents={
               keyboardHidesTabBar && this.state.keyboard ? 'none' : 'auto'
             }
-            onLayout={this.handleLayout}
           >
-            {routes.map((route, index) => {
+            <View style={styles.content} onLayout={this.handleLayout}>
-              const focused = index === state.index;
+              {routes.map((route, index) => {
-              const scene = { route, focused };
+                const focused = index === state.index;
-              const accessibilityLabel = getAccessibilityLabel({
+                const scene = { route, focused };
-                route,
+                const accessibilityLabel = getAccessibilityLabel({
-              });
+                  route,
+                });
 
-              const accessibilityRole = getAccessibilityRole({
+                const accessibilityRole = getAccessibilityRole({
-                route,
+                  route,
-              });
+                });
 
-              const accessibilityStates = getAccessibilityStates(scene);
+                const accessibilityStates = getAccessibilityStates(scene);
 
-              const testID = getTestID({ route });
+                const testID = getTestID({ route });
 
-              const backgroundColor = focused
+                const backgroundColor = focused
-                ? activeBackgroundColor
+                  ? activeBackgroundColor
-                : inactiveBackgroundColor;
+                  : inactiveBackgroundColor;
 
-              const ButtonComponent =
+                const ButtonComponent =
-                getButtonComponent({ route }) ||
+                  getButtonComponent({ route }) ||
-                TouchableWithoutFeedbackWrapper;
+                  TouchableWithoutFeedbackWrapper;
 
-              return (
+                return (
-                <NavigationContext.Provider
+                  <NavigationContext.Provider
-                  key={route.key}
+                    key={route.key}
-                  value={descriptors[route.key].navigation}
+                    value={descriptors[route.key].navigation}
-                >
-                  <ButtonComponent
-                    onPress={() => onTabPress({ route })}
-                    onLongPress={() => onTabLongPress({ route })}
-                    testID={testID}
-                    accessibilityLabel={accessibilityLabel}
-                    accessibilityRole={accessibilityRole}
-                    accessibilityStates={accessibilityStates}
-                    style={[
-                      styles.tab,
-                      { backgroundColor },
-                      this.shouldUseHorizontalLabels()
-                        ? styles.tabLandscape
-                        : styles.tabPortrait,
-                      tabStyle,
-                    ]}
                   >
-                    {this.renderIcon(scene)}
+                    <ButtonComponent
-                    {this.renderLabel(scene)}
+                      onPress={() => onTabPress({ route })}
-                  </ButtonComponent>
+                      onLongPress={() => onTabLongPress({ route })}
-                </NavigationContext.Provider>
+                      testID={testID}
-              );
+                      accessibilityLabel={accessibilityLabel}
-            })}
+                      accessibilityRole={accessibilityRole}
+                      accessibilityStates={accessibilityStates}
+                      style={[
+                        styles.tab,
+                        { backgroundColor },
+                        this.shouldUseHorizontalLabels()
+                          ? styles.tabLandscape
+                          : styles.tabPortrait,
+                        tabStyle,
+                      ]}
+                    >
+                      {this.renderIcon(scene)}
+                      {this.renderLabel(scene)}
+                    </ButtonComponent>
+                  </NavigationContext.Provider>
+                );
+              })}
+            </View>
           </Animated.View>
         )}
       </SafeAreaConsumer>
@@ -375,9 +379,12 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
     borderTopWidth: StyleSheet.hairlineWidth,
     borderTopColor: 'rgba(0, 0, 0, .3)',
-    flexDirection: 'row',
     elevation: 8,
   },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+  },
   tab: {
     flex: 1,
     alignItems: isIos ? 'center' : 'stretch',

packages/bottom-tabs/src/views/BottomTabView.tsx

@@ -64,13 +64,13 @@ export default class BottomTabView extends React.Component<Props, State> {
   private renderIcon = ({
     route,
     focused,
-    tintColor,
+    color,
-    horizontal,
+    size,
   }: {
     route: Route<string>;
     focused: boolean;
-    tintColor: string;
+    color: string;
-    horizontal: boolean;
+    size: number;
   }) => {
     const { descriptors } = this.props;
     const descriptor = descriptors[route.key];
@@ -78,7 +78,7 @@ export default class BottomTabView extends React.Component<Props, State> {
 
     if (options.tabBarIcon) {
       return typeof options.tabBarIcon === 'function'
-        ? options.tabBarIcon({ focused, tintColor, horizontal })
+        ? options.tabBarIcon({ focused, color, size })
         : options.tabBarIcon;
     }
 

packages/bottom-tabs/src/views/TabBarIcon.tsx

@@ -4,7 +4,7 @@ import { Route } from '@react-navigation/core';
 
 type Props = {
   route: Route<string>;
-  horizontal: boolean;
+  size: number;
   activeOpacity: number;
   inactiveOpacity: number;
   activeTintColor: string;
@@ -12,8 +12,8 @@ type Props = {
   renderIcon: (props: {
     route: Route<string>;
     focused: boolean;
-    tintColor: string;
+    color: string;
-    horizontal: boolean;
+    size: number;
   }) => React.ReactNode;
   style: StyleProp<ViewStyle>;
 };
@@ -25,7 +25,7 @@ export default function TabBarIcon({
   activeTintColor,
   inactiveTintColor,
   renderIcon,
-  horizontal,
+  size,
   style,
 }: Props) {
   // We render the icon twice at the same position on top of each other:
@@ -36,16 +36,16 @@ export default function TabBarIcon({
         {renderIcon({
           route,
           focused: true,
-          horizontal,
+          size,
-          tintColor: activeTintColor,
+          color: activeTintColor,
         })}
       </View>
       <View style={[styles.icon, { opacity: inactiveOpacity }]}>
         {renderIcon({
           route,
           focused: false,
-          horizontal,
+          size,
-          tintColor: inactiveTintColor,
+          color: inactiveTintColor,
         })}
       </View>
     </View>

packages/compat/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.8...@react-navigation/compat@5.0.0-alpha.9) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.7...@react-navigation/compat@5.0.0-alpha.8) (2019-10-15)
+
+
+### Features
+
+* initial version of native stack ([#102](https://github.com/react-navigation/navigation-ex/issues/102)) ([ba3f718](https://github.com/react-navigation/navigation-ex/commit/ba3f718))
+
+
+
+
+
+# [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.6...@react-navigation/compat@5.0.0-alpha.7) (2019-10-06)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 # [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.5...@react-navigation/compat@5.0.0-alpha.6) (2019-10-03)
 
 **Note:** Version bump only for package @react-navigation/compat

packages/compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.0.0-alpha.6",
+  "version": "5.0.0-alpha.9",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -28,12 +28,12 @@
   },
   "devDependencies": {
     "@types/react": "^16.9.4",
-    "react": "^16.10.1",
+    "react": "~16.8.3",
     "typescript": "^3.6.3"
   },
   "peerDependencies": {
     "@react-navigation/core": "^5.0.0-alpha.0",
-    "react": "^16.10.1"
+    "react": "~16.8.3"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/compat/src/createCompatNavigatorFactory.tsx

@@ -49,7 +49,7 @@ export default function createCompatNavigatorFactory<
     navigationConfig: Partial<Omit<NavigationConfig, 'screenOptions'>> & {
       order?: Array<Extract<keyof ParamList, string>>;
       defaultNavigationOptions?: ScreenOptions;
-      navigationOptions?: { [key: string]: any };
+      navigationOptions?: Record<string, any>;
     } = {}
   ) => {
     const Pair = createNavigator();

packages/core/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.16...@react-navigation/core@5.0.0-alpha.17) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.15...@react-navigation/core@5.0.0-alpha.16) (2019-10-18)
+
+
+### Bug Fixes
+
+* rehydrate state before using it ([3e92e22](https://github.com/react-navigation/navigation-ex/commit/3e92e22))
+
+
+### Features
+
+* make it easier to navigate to a specific route in navigator ([#114](https://github.com/react-navigation/navigation-ex/issues/114)) ([a543f1b](https://github.com/react-navigation/navigation-ex/commit/a543f1b)), closes [#90](https://github.com/react-navigation/navigation-ex/issues/90)
+
+
+
+
+
+# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.14...@react-navigation/core@5.0.0-alpha.15) (2019-10-15)
+
+
+### Features
+
+* initial version of native stack ([#102](https://github.com/react-navigation/navigation-ex/issues/102)) ([ba3f718](https://github.com/react-navigation/navigation-ex/commit/ba3f718))
+
+
+
+
+
+# [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.13...@react-navigation/core@5.0.0-alpha.14) (2019-10-06)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
 # [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.12...@react-navigation/core@5.0.0-alpha.13) (2019-10-03)
 
 **Note:** Version bump only for package @react-navigation/core

packages/core/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.13",
+  "version": "5.0.0-alpha.17",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     "@types/react": "^16.9.4",
     "@types/shortid": "^0.0.29",
     "del-cli": "^3.0.0",
-    "react": "^16.10.1",
+    "react": "~16.8.3",
     "react-native-testing-library": "^1.9.1",
-    "react-test-renderer": "16.10.1",
+    "react-test-renderer": "~16.8.3",
     "typescript": "^3.6.3"
   },
   "peerDependencies": {
-    "react": "^16.10.1"
+    "react": "~16.8.3"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/core/src/__tests__/__fixtures__/MockRouter.tsx

@@ -108,7 +108,24 @@ export default function MockRouter(options: DefaultRouterOptions) {
             return null;
           }
 
-          return { ...state, index };
+          return {
+            ...state,
+            index,
+            routes:
+              action.payload.params !== undefined
+                ? state.routes.map((route, i) =>
+                    i === index
+                      ? {
+                          ...route,
+                          params: {
+                            ...route.params,
+                            ...action.payload.params,
+                          },
+                        }
+                      : route
+                  )
+                : state.routes,
+          };
         }
 
         default:

packages/core/src/__tests__/index.test.tsx

@@ -5,7 +5,7 @@ import NavigationContainer from '../NavigationContainer';
 import useNavigationBuilder from '../useNavigationBuilder';
 import useNavigation from '../useNavigation';
 import MockRouter, { MockRouterKey } from './__fixtures__/MockRouter';
-import { NavigationState } from '../types';
+import { NavigationState, NavigationContainerRef } from '../types';
 
 beforeEach(() => (MockRouterKey.current = 0));
 
@@ -523,6 +523,80 @@ it('handles change in route names', () => {
   });
 });
 
+it('navigates to nested child in a navigator', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const TestComponent = ({ route }: any): any =>
+    `[${route.name}, ${JSON.stringify(route.params)}]`;
+
+  const onStateChange = jest.fn();
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const element = render(
+    <NavigationContainer ref={navigation} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">
+          {() => (
+            <TestNavigator>
+              <Screen name="foo-a" component={TestComponent} />
+              <Screen name="foo-b" component={TestComponent} />
+            </TestNavigator>
+          )}
+        </Screen>
+        <Screen name="bar">
+          {() => (
+            <TestNavigator initialRouteName="bar-a">
+              <Screen
+                name="bar-a"
+                component={TestComponent}
+                initialParams={{ lol: 'why' }}
+              />
+              <Screen
+                name="bar-b"
+                component={TestComponent}
+                initialParams={{ some: 'stuff' }}
+              />
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(element).toMatchInlineSnapshot(`"[foo-a, undefined]"`);
+
+  act(
+    () =>
+      navigation.current &&
+      navigation.current.navigate('bar', {
+        screen: 'bar-b',
+        params: { test: 42 },
+      })
+  );
+
+  expect(element).toMatchInlineSnapshot(
+    `"[bar-b, {\\"some\\":\\"stuff\\",\\"test\\":42}]"`
+  );
+
+  act(
+    () =>
+      navigation.current &&
+      navigation.current.navigate('bar', {
+        screen: 'bar-a',
+        params: { whoa: 'test' },
+      })
+  );
+
+  expect(element).toMatchInlineSnapshot(
+    `"[bar-a, {\\"lol\\":\\"why\\",\\"whoa\\":\\"test\\"}]"`
+  );
+});
+
 it('gives access to internal state', () => {
   const TestNavigator = (props: any): any => {
     const { state, descriptors } = useNavigationBuilder(MockRouter, props);

packages/core/src/getPathFromState.tsx

@@ -3,7 +3,7 @@ import { NavigationState, PartialState, Route } from './types';
 
 type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>;
 
-type StringifyConfig = { [key: string]: (value: any) => string };
+type StringifyConfig = Record<string, (value: any) => string>;
 
 type Options = {
   [routeName: string]: string | { path: string; stringify?: StringifyConfig };

packages/core/src/getStateFromPath.tsx

@@ -2,7 +2,7 @@ import escape from 'escape-string-regexp';
 import queryString from 'query-string';
 import { NavigationState, PartialState } from './types';
 
-type ParseConfig = { [key: string]: (value: string) => any };
+type ParseConfig = Record<string, (value: string) => any>;
 
 type Options = {
   [routeName: string]: string | { path: string; parse?: ParseConfig };
@@ -78,7 +78,7 @@ export default function getStateFromPath(
           .filter(p => p.startsWith(':'));
 
         if (paramPatterns.length) {
-          params = paramPatterns.reduce<{ [key: string]: any }>((acc, p, i) => {
+          params = paramPatterns.reduce<Record<string, any>>((acc, p, i) => {
             const key = p.replace(/^:/, '');
             const value = match[i + 1]; // The param segments start from index 1 in the regex match result
 

packages/core/src/types.tsx

@@ -189,7 +189,7 @@ export type Router<
   actionCreators?: ActionCreators<Action>;
 };
 
-export type ParamListBase = { [key: string]: object | undefined };
+export type ParamListBase = Record<string, object | undefined>;
 
 export type EventMapBase = {
   focus: undefined;
@@ -215,7 +215,7 @@ export type EventListenerCallback<EventName extends string, Data> = (
   e: EventArg<EventName, Data>
 ) => void;
 
-export type EventConsumer<EventMap extends { [key: string]: any }> = {
+export type EventConsumer<EventMap extends Record<string, any>> = {
   /**
    * Subscribe to events from the parent navigator.
    *
@@ -232,7 +232,7 @@ export type EventConsumer<EventMap extends { [key: string]: any }> = {
   ): void;
 };
 
-export type EventEmitter<EventMap extends { [key: string]: any }> = {
+export type EventEmitter<EventMap extends Record<string, any>> = {
   /**
    * Emit an event to child screens.
    *
@@ -349,7 +349,7 @@ type NavigationHelpersCommon<
 
 export type NavigationHelpers<
   ParamList extends ParamListBase,
-  EventMap extends { [key: string]: any } = {}
+  EventMap extends Record<string, any> = {}
 > = NavigationHelpersCommon<ParamList> &
   EventEmitter<EventMap> & {
     /**
@@ -376,7 +376,7 @@ export type NavigationProp<
   RouteName extends keyof ParamList = string,
   State extends NavigationState = NavigationState,
   ScreenOptions extends object = {},
-  EventMap extends { [key: string]: any } = {}
+  EventMap extends Record<string, any> = {}
 > = NavigationHelpersCommon<ParamList, State> & {
   /**
    * Update the param object for the route.
@@ -468,7 +468,7 @@ export type Descriptor<
   RouteName extends keyof ParamList = string,
   State extends NavigationState = NavigationState,
   ScreenOptions extends object = {},
-  EventMap extends { [key: string]: any } = {}
+  EventMap extends Record<string, any> = {}
 > = {
   /**
    * Render the component associated with this route.

packages/core/src/useDescriptors.tsx

@@ -20,7 +20,7 @@ import {
 
 type Options<State extends NavigationState, ScreenOptions extends object> = {
   state: State;
-  screens: { [key: string]: RouteConfig<ParamListBase, string, ScreenOptions> };
+  screens: Record<string, RouteConfig<ParamListBase, string, ScreenOptions>>;
   navigation: NavigationHelpers<ParamListBase>;
   screenOptions?:
     | ScreenOptions
@@ -68,7 +68,7 @@ export default function useDescriptors<
   router,
   emitter,
 }: Options<State, ScreenOptions>) {
-  const [options, setOptions] = React.useState<{ [key: string]: object }>({});
+  const [options, setOptions] = React.useState<Record<string, object>>({});
   const { trackAction } = React.useContext(NavigationBuilderContext);
 
   const context = React.useMemo(

packages/core/src/useEventEmitter.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { EventEmitter, EventConsumer, EventArg } from './types';
 
-export type NavigationEventEmitter = EventEmitter<{ [key: string]: any }> & {
+export type NavigationEventEmitter = EventEmitter<Record<string, any>> & {
-  create: (target: string) => EventConsumer<{ [key: string]: any }>;
+  create: (target: string) => EventConsumer<Record<string, any>>;
 };
 
 type Listeners = Array<(data: any) => void>;
@@ -11,9 +11,7 @@ type Listeners = Array<(data: any) => void>;
  * Hook to manage the event system used by the navigator to notify screens of various events.
  */
 export default function useEventEmitter(): NavigationEventEmitter {
-  const listeners = React.useRef<{
+  const listeners = React.useRef<Record<string, Record<string, Listeners>>>({});
-    [key: string]: { [key: string]: Listeners };
-  }>({});
 
   const create = React.useCallback((target: string) => {
     const removeListener = (type: string, callback: (data: any) => void) => {

packages/core/src/useNavigationBuilder.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { NavigationStateContext } from './NavigationContainer';
+import NavigationRouteContext from './NavigationRouteContext';
 import Screen from './Screen';
+import { navigate } from './CommonActions';
 import useEventEmitter from './useEventEmitter';
 import useRegisterNavigator from './useRegisterNavigator';
 import useDescriptors from './useDescriptors';
@@ -30,6 +32,13 @@ import useOnGetState from './useOnGetState';
 // eslint-disable-next-line babel/no-unused-expressions
 PrivateValueStore;
 
+type NavigatorRoute = {
+  params?: {
+    screen?: string;
+    params?: object;
+  };
+};
+
 /**
  * Compare two arrays with primitive values as the content.
  * We need to make sure that both values and order match.
@@ -89,39 +98,66 @@ export default function useNavigationBuilder<
   State extends NavigationState,
   RouterOptions extends DefaultRouterOptions,
   ScreenOptions extends object,
-  EventMap extends { [key: string]: any }
+  EventMap extends Record<string, any>
 >(
   createRouter: RouterFactory<State, any, RouterOptions>,
   options: DefaultNavigatorOptions<ScreenOptions> & RouterOptions
 ) {
   useRegisterNavigator();
 
+  const route = React.useContext(NavigationRouteContext) as (
+    | NavigatorRoute
+    | undefined);
+
+  const previousRouteRef = React.useRef(route);
+
+  React.useEffect(() => {
+    previousRouteRef.current = route;
+  }, [route]);
+
   const { children, ...rest } = options;
   const { current: router } = React.useRef<Router<State, any>>(
-    createRouter((rest as unknown) as RouterOptions)
+    createRouter({
+      ...((rest as unknown) as RouterOptions),
+      ...(route && route.params && typeof route.params.screen === 'string'
+        ? { initialRouteName: route.params.screen }
+        : null),
+    })
   );
 
-  const screens = getRouteConfigsFromChildren<ScreenOptions>(children).reduce(
+  const screens = getRouteConfigsFromChildren<ScreenOptions>(children).reduce<
-    (acc, curr) => {
+    Record<string, RouteConfig<ParamListBase, string, ScreenOptions>>
-      if (curr.name in acc) {
+  >((acc, curr) => {
-        throw new Error(
+    if (curr.name in acc) {
-          `A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named '${curr.name}')`
+      throw new Error(
-        );
+        `A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named '${curr.name}')`
-      }
+      );
+    }
 
-      acc[curr.name] = curr;
+    acc[curr.name] = curr;
-      return acc;
+    return acc;
-    },
+  }, {});
-    {} as { [key: string]: RouteConfig<ParamListBase, string, ScreenOptions> }
-  );
 
   const routeNames = Object.keys(screens);
-  const routeParamList = routeNames.reduce(
+  const routeParamList = routeNames.reduce<Record<string, object | undefined>>(
     (acc, curr) => {
-      acc[curr] = screens[curr].initialParams;
+      const { initialParams } = screens[curr];
+      const initialParamsFromParams =
+        route && route.params && route.params.screen === curr
+          ? route.params.params
+          : undefined;
+
+      acc[curr] =
+        initialParams !== undefined || initialParamsFromParams !== undefined
+          ? {
+              ...initialParams,
+              ...initialParamsFromParams,
+            }
+          : undefined;
+
       return acc;
     },
-    {} as { [key: string]: object | undefined }
+    {}
   );
 
   if (!routeNames.length) {
@@ -175,28 +211,53 @@ export default function useNavigationBuilder<
       ? (initializedStateRef.current as State)
       : (currentState as State);
 
+  let nextState: State = state;
+
   if (!isArrayEqual(state.routeNames, routeNames)) {
     // When the list of route names change, the router should handle it to remove invalid routes
-    const nextState = router.getStateForRouteNamesChange(state, {
+    nextState = router.getStateForRouteNamesChange(state, {
       routeNames,
       routeParamList,
     });
-
-    if (state !== nextState) {
-      // If the state needs to be updated, we'll schedule an update with React
-      // setState in render seems hacky, but that's how React docs implement getDerivedPropsFromState
-      // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
-      performTransaction(() => {
-        setState(nextState);
-      });
-    }
-
-    // The up-to-date state will come in next render, but we don't need to wait for it
-    // We can't use the outdated state since the screens have changed, which will cause error due to mismatched config
-    // So we override the state objec we return to use the latest state as soon as possible
-    state = nextState;
   }
 
+  if (
+    previousRouteRef.current &&
+    route &&
+    route.params &&
+    typeof route.params.screen === 'string' &&
+    route.params !== previousRouteRef.current.params
+  ) {
+    // If the route was updated with new name and/or params, we should navigate there
+    // The update should be limited to current navigator only, so we call the router manually
+    const updatedState = router.getStateForAction(
+      state,
+      navigate(route.params.screen, route.params.params)
+    );
+
+    nextState =
+      updatedState !== null
+        ? router.getRehydratedState(updatedState, {
+            routeNames,
+            routeParamList,
+          })
+        : state;
+  }
+
+  if (state !== nextState) {
+    // If the state needs to be updated, we'll schedule an update with React
+    // setState in render seems hacky, but that's how React docs implement getDerivedPropsFromState
+    // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
+    performTransaction(() => {
+      setState(nextState);
+    });
+  }
+
+  // The up-to-date state will come in next render, but we don't need to wait for it
+  // We can't use the outdated state since the screens have changed, which will cause error due to mismatched config
+  // So we override the state objec we return to use the latest state as soon as possible
+  state = nextState;
+
   React.useEffect(() => {
     return () => {
       // We need to clean up state for this navigator on unmount

packages/core/src/useNavigationCache.tsx

@@ -18,7 +18,7 @@ type Options<State extends NavigationState> = {
   navigation: NavigationHelpers<ParamListBase> &
     Partial<NavigationProp<ParamListBase, string, any, any, any>>;
   setOptions: (
-    cb: (options: { [key: string]: object }) => { [key: string]: object }
+    cb: (options: Record<string, object>) => Record<string, object>
   ) => void;
   router: Router<State, NavigationAction>;
   emitter: NavigationEventEmitter;
@@ -89,13 +89,13 @@ export default function useNavigationCache<
           );
         };
 
-        const helpers = Object.keys(actions).reduce(
+        const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
           (acc, name) => {
             // @ts-ignore
             acc[name] = (...args: any) => dispatch(actions[name](...args));
             return acc;
           },
-          {} as { [key: string]: () => void }
+          {}
         );
 
         acc[route.key] = {

packages/core/src/useNavigationHelpers.tsx

@@ -35,7 +35,7 @@ type Options<State extends NavigationState, Action extends NavigationAction> = {
 export default function useNavigationHelpers<
   State extends NavigationState,
   Action extends NavigationAction,
-  EventMap extends { [key: string]: any }
+  EventMap extends Record<string, any>
 >({ onAction, getState, emitter, router }: Options<State, Action>) {
   const resetRoot = React.useContext(ResetRootContext);
   const parentNavigationHelpers = React.useContext(NavigationContext);
@@ -55,13 +55,13 @@ export default function useNavigationHelpers<
       ...CommonActions,
     };
 
-    const helpers = Object.keys(actions).reduce(
+    const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
       (acc, name) => {
         // @ts-ignore
         acc[name] = (...args: any) => dispatch(actions[name](...args));
         return acc;
       },
-      {} as { [key: string]: () => void }
+      {}
     );
 
     return {

packages/drawer/CHANGELOG.md

@@ -3,6 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.15...@react-navigation/drawer@5.0.0-alpha.16) (2019-10-22)
+
+
+### Bug Fixes
+
+* navigation drawer sometimes not closing when pressed outside ([0d8cdc8](https://github.com/react-navigation/navigation-ex/commit/0d8cdc8))
+
+
+
+
+
+# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.14...@react-navigation/drawer@5.0.0-alpha.15) (2019-10-17)
+
+
+### Bug Fixes
+
+* fix passing content options in drawer ([cab6160](https://github.com/react-navigation/navigation-ex/commit/cab6160))
+
+
+
+
+
+# [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.13...@react-navigation/drawer@5.0.0-alpha.14) (2019-10-15)
+
+
+### Bug Fixes
+
+* add flex: 1 to drawer content ([2b57702](https://github.com/react-navigation/navigation-ex/commit/2b57702))
+* fix content component not rendering in drawer ([0a5fb3e](https://github.com/react-navigation/navigation-ex/commit/0a5fb3e))
+
+
+### Features
+
+* initial version of native stack ([#102](https://github.com/react-navigation/navigation-ex/issues/102)) ([ba3f718](https://github.com/react-navigation/navigation-ex/commit/ba3f718))
+
+
+
+
+
+# [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.12...@react-navigation/drawer@5.0.0-alpha.13) (2019-10-06)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
 # [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.11...@react-navigation/drawer@5.0.0-alpha.12) (2019-10-03)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/package.json

@@ -11,7 +11,7 @@
     "material",
     "drawer"
   ],
-  "version": "5.0.0-alpha.12",
+  "version": "5.0.0-alpha.16",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -41,12 +41,12 @@
     "@types/react": "^16.9.4",
     "@types/react-native": "^0.60.17",
     "del-cli": "^3.0.0",
-    "react": "16.10.1",
+    "react": "~16.8.3",
-    "react-native": "0.59.10",
+    "react-native": "~0.59.10",
     "react-native-gesture-handler": "^1.3.0",
     "react-native-reanimated": "^1.3.0",
     "react-native-safe-area-context": "^0.3.6",
-    "react-native-screens": "^1.0.0-alpha.22",
+    "react-native-screens": "^2.0.0-alpha.5",
     "typescript": "^3.6.3"
   },
   "peerDependencies": {
@@ -56,7 +56,7 @@
     "react-native-gesture-handler": "^1.0.0",
     "react-native-reanimated": "^1.0.0",
     "react-native-safe-area-context": "^0.3.6",
-    "react-native-screens": "^1.0.0-alpha.0"
+    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.0"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/drawer/src/index.tsx

@@ -8,8 +8,9 @@ export {
 /**
  * Views
  */
-export { default as DrawerNavigatorItems } from './views/DrawerNavigatorItems';
+export { default as DrawerItem } from './views/DrawerItem';
-export { default as DrawerSidebar } from './views/DrawerSidebar';
+export { default as DrawerItemList } from './views/DrawerItemList';
+export { default as DrawerContent } from './views/DrawerContent';
 export { default as DrawerView } from './views/DrawerView';
 
 /**
@@ -23,5 +24,6 @@ export { default as DrawerGestureContext } from './utils/DrawerGestureContext';
 export {
   DrawerNavigationOptions,
   DrawerNavigationProp,
-  DrawerNavigationItemsProps,
+  DrawerContentOptions,
+  DrawerContentComponentProps,
 } from './types';

packages/drawer/src/types.tsx

@@ -12,16 +12,11 @@ import { PanGestureHandler } from 'react-native-gesture-handler';
 
 export type Scene = {
   route: Route<string>;
-  index: number;
   focused: boolean;
-  tintColor?: string;
+  color?: string;
 };
 
-export type DrawerNavigationConfig = {
+export type DrawerNavigationConfig<T = DrawerContentOptions> = {
-  /**
-   * Custom background color for the drawer. Defaults to `white`.
-   */
-  drawerBackgroundColor: string;
   /**
    * Position of the drawer on the screen. Defaults to `left`.
    */
@@ -33,11 +28,6 @@ export type DrawerNavigationConfig = {
    * - `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
    */
   drawerType: 'front' | 'back' | 'slide';
-  /**
-   * Number or a function which returns the width of the drawer.
-   * If a function is provided, it'll be called again when the screen's dimensions change.
-   */
-  drawerWidth: number | (() => number);
   /**
    * How far from the edge of the screen the swipe gesture should activate.
    */
@@ -82,49 +72,51 @@ export type DrawerNavigationConfig = {
    * Custom component used to render as the content of the drawer, for example, navigation items.
    * Defaults to `DrawerItems`.
    */
-  contentComponent: React.ComponentType<ContentComponentProps>;
+  contentComponent: React.ComponentType<DrawerContentComponentProps<T>>;
   /**
    * Options for the content component which will be passed as props.
    */
-  contentOptions?: object;
+  contentOptions?: T;
   /**
    * Style object for the component wrapping the screen content.
    */
   sceneContainerStyle?: StyleProp<ViewStyle>;
-  style?: StyleProp<ViewStyle>;
+  /**
+   * Style object for the drawer component.
+   * You can pass a custom background color for a drawer or a custom width here.
+   */
+  drawerStyle?: StyleProp<ViewStyle>;
 };
 
 export type DrawerNavigationOptions = {
   title?: string;
   drawerLabel?:
     | string
-    | ((props: { tintColor?: string; focused: boolean }) => React.ReactElement);
+    | ((props: { color: string; focused: boolean }) => React.ReactNode);
   drawerIcon?: (props: {
-    tintColor?: string;
+    color: string;
+    size: number;
     focused: boolean;
-  }) => React.ReactElement;
+  }) => React.ReactNode;
   drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open';
 };
 
-export type ContentComponentProps = DrawerNavigationItemsProps & {
+export type DrawerContentComponentProps<T = DrawerContentOptions> = T & {
+  state: DrawerNavigationState;
   navigation: NavigationHelpers<ParamListBase>;
-  descriptors: { [key: string]: any };
+  descriptors: DrawerDescriptorMap;
   /**
    * Animated node which represents the current progress of the drawer's open state.
    * `0` is closed, `1` is open.
    */
-  drawerOpenProgress: Animated.Node<number>;
+  progress: Animated.Node<number>;
+  /**
+   * Position of the drawer on the screen.
+   */
+  drawerPosition: 'left' | 'right';
 };
 
-export type DrawerNavigationItemsProps = {
+export type DrawerContentOptions = {
-  /**
-   * The array of routes, can be modified or overridden to control what's shown in the drawer.
-   */
-  items: Route<string>[];
-  /**
-   * Route key identifying the currently active route.
-   */
-  activeItemKey?: string | null;
   /**
    * Color for the icon and label in the active item in the drawer.
    */
@@ -141,37 +133,22 @@ export type DrawerNavigationItemsProps = {
    * Background color for the inactive items in the drawer.
    */
   inactiveBackgroundColor?: string;
-  /**
-   * Style object for the content section.
-   */
-  itemsContainerStyle?: ViewStyle;
   /**
    * Style object for the single item, which can contain an icon and/or a label.
    */
   itemStyle?: StyleProp<ViewStyle>;
   /**
-   * Style object to overwrite `Text` style inside content section which renders a label.
+   * Style object to apply to the `Text` inside content section which renders a label.
    */
   labelStyle?: StyleProp<TextStyle>;
   /**
-   * Style object to overwrite `Text` style of the active label.
+   * Style object for the content section.
    */
-  activeLabelStyle?: StyleProp<TextStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
   /**
-   * Style object to overwrite `Text` style of the inactive label.
+   * Style object for the wrapper view.
    */
-  inactiveLabelStyle?: StyleProp<TextStyle>;
+  style?: StyleProp<ViewStyle>;
-  /**
-   * Style object for the wrapper `View` of the icon.
-   */
-  iconContainerStyle?: StyleProp<ViewStyle>;
-  /**
-   * Position of the drawer on the screen.
-   */
-  drawerPosition: 'left' | 'right';
-  getLabel: (scene: Scene) => React.ReactNode;
-  renderIcon: (scene: Scene) => React.ReactNode;
-  onItemPress: (scene: { route: Route<string>; focused: boolean }) => void;
 };
 
 export type DrawerNavigationEventMap = {

packages/drawer/src/views/Drawer.tsx

@@ -428,7 +428,14 @@ export default class DrawerView extends React.PureComponent<Props> {
         x: this.touchX,
         translationX: this.gestureX,
         velocityX: this.velocityX,
-        state: this.gestureState,
+      },
+    },
+  ]);
+
+  private handleGestureStateChange = event([
+    {
+      nativeEvent: {
+        state: (s: Animated.Value<number>) => set(this.gestureState, s),
       },
     },
   ]);
@@ -519,7 +526,7 @@ export default class DrawerView extends React.PureComponent<Props> {
         activeOffsetX={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
         failOffsetY={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
         onGestureEvent={this.handleGestureEvent}
-        onHandlerStateChange={this.handleGestureEvent}
+        onHandlerStateChange={this.handleGestureStateChange}
         hitSlop={hitSlop}
         enabled={!locked}
         {...gestureHandlerProps}

packages/drawer/src/views/DrawerContent.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { useSafeArea } from 'react-native-safe-area-context';
+import DrawerItemList from './DrawerItemList';
+import { DrawerContentComponentProps } from '../types';
+
+export default function DrawerContent({
+  contentContainerStyle,
+  style,
+  drawerPosition,
+  ...rest
+}: DrawerContentComponentProps) {
+  const insets = useSafeArea();
+
+  return (
+    <ScrollView
+      contentContainerStyle={[
+        {
+          paddingTop: insets.top + 4,
+          paddingLeft: drawerPosition === 'left' ? insets.left : 0,
+          paddingRight: drawerPosition === 'right' ? insets.right : 0,
+        },
+        contentContainerStyle,
+      ]}
+      style={[styles.container, style]}
+    >
+      <DrawerItemList {...rest} />
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

packages/drawer/src/views/DrawerItem.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import {
+  Text,
+  View,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import TouchableItem from './TouchableItem';
+
+type Props = {
+  /**
+   * The label text of the item.
+   */
+  label:
+    | string
+    | ((props: { focused: boolean; color: string }) => React.ReactNode);
+  /**
+   * Icon to display for the `DrawerItem`.
+   */
+  icon?: (props: {
+    focused: boolean;
+    size: number;
+    color: string;
+  }) => React.ReactNode;
+  /**
+   * Whether to highlight the drawer item as active.
+   */
+  focused?: boolean;
+  /**
+   * Function to execute on press.
+   */
+  onPress: () => void;
+  /**
+   * Color for the icon and label when the item is active.
+   */
+  activeTintColor?: string;
+  /**
+   * Color for the icon and label when the item is inactive.
+   */
+  inactiveTintColor?: string;
+  /**
+   * Background color for item when its active.
+   */
+  activeBackgroundColor?: string;
+  /**
+   * Background color for item when its inactive.
+   */
+  inactiveBackgroundColor?: string;
+  /**
+   * Style object for the label element.
+   */
+  labelStyle?: StyleProp<TextStyle>;
+  /**
+   * Style object for the wrapper element.
+   */
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * A component used to show an action item with an icon and a label in a navigation drawer.
+ */
+export default function DrawerItem({
+  icon,
+  label,
+  focused = false,
+  activeTintColor = '#6200ee',
+  inactiveTintColor = 'rgba(0, 0, 0, .68)',
+  activeBackgroundColor = 'rgba(98, 0, 238, 0.12)',
+  inactiveBackgroundColor = 'transparent',
+  style,
+  onPress,
+  ...rest
+}: Props) {
+  const { borderRadius = 4 } = StyleSheet.flatten(style || {});
+  const color = focused ? activeTintColor : inactiveTintColor;
+  const backgroundColor = focused
+    ? activeBackgroundColor
+    : inactiveBackgroundColor;
+
+  const iconNode = icon ? icon({ size: 24, focused, color }) : null;
+
+  return (
+    <View
+      collapsable={false}
+      {...rest}
+      style={[styles.container, { borderRadius, backgroundColor }, style]}
+    >
+      <TouchableItem
+        borderless
+        delayPressIn={0}
+        onPress={onPress}
+        style={[styles.wrapper, { borderRadius }]}
+        accessibilityTraits={focused ? ['button', 'selected'] : 'button'}
+        accessibilityComponentType="button"
+        accessibilityRole="button"
+        accessibilityStates={focused ? ['selected'] : []}
+      >
+        <React.Fragment>
+          {iconNode}
+          {typeof label === 'function' ? (
+            label({ color, focused })
+          ) : (
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.label,
+                {
+                  color,
+                  fontWeight: '500',
+                  marginLeft: iconNode ? 32 : 0,
+                  marginVertical: 5,
+                },
+              ]}
+            >
+              {label}
+            </Text>
+          )}
+        </React.Fragment>
+      </TouchableItem>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: 10,
+    marginVertical: 4,
+  },
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+  },
+  label: {
+    marginRight: 32,
+  },
+});

packages/drawer/src/views/DrawerItemList.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { CommonActions } from '@react-navigation/core';
+import {
+  DrawerActions,
+  DrawerNavigationState,
+} from '@react-navigation/routers';
+import DrawerItem from './DrawerItem';
+import {
+  DrawerNavigationHelpers,
+  DrawerDescriptorMap,
+  DrawerContentOptions,
+} from '../types';
+
+type Props = Omit<DrawerContentOptions, 'contentContainerStyle' | 'style'> & {
+  state: DrawerNavigationState;
+  navigation: DrawerNavigationHelpers;
+  descriptors: DrawerDescriptorMap;
+};
+
+/**
+ * Component that renders the navigation list in the drawer.
+ */
+export default function DrawerItemList({
+  state,
+  navigation,
+  descriptors,
+  activeTintColor,
+  inactiveTintColor,
+  activeBackgroundColor,
+  inactiveBackgroundColor,
+  itemStyle,
+  labelStyle,
+}: Props) {
+  return (state.routes.map((route, i) => {
+    const focused = i === state.index;
+    const { title, drawerLabel, drawerIcon } = descriptors[route.key].options;
+
+    return (
+      <DrawerItem
+        key={route.key}
+        label={
+          drawerLabel !== undefined
+            ? drawerLabel
+            : title !== undefined
+            ? title
+            : route.name
+        }
+        icon={drawerIcon}
+        focused={focused}
+        activeTintColor={activeTintColor}
+        inactiveTintColor={inactiveTintColor}
+        activeBackgroundColor={activeBackgroundColor}
+        inactiveBackgroundColor={inactiveBackgroundColor}
+        labelStyle={labelStyle}
+        style={itemStyle}
+        onPress={() => {
+          navigation.dispatch({
+            ...(focused
+              ? DrawerActions.closeDrawer()
+              : CommonActions.navigate(route.name)),
+            target: state.key,
+          });
+        }}
+      />
+    );
+  }) as React.ReactNode) as React.ReactElement;
+}

packages/drawer/src/views/DrawerNavigatorItems.tsx

@@ -1,129 +0,0 @@
-import * as React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { useSafeArea } from 'react-native-safe-area-context';
-
-import TouchableItem from './TouchableItem';
-import { DrawerNavigationItemsProps } from '../types';
-
-/**
- * Component that renders the navigation list in the drawer.
- */
-const DrawerNavigatorItems = ({
-  items,
-  activeItemKey,
-  activeTintColor,
-  activeBackgroundColor,
-  inactiveTintColor,
-  inactiveBackgroundColor,
-  getLabel,
-  renderIcon,
-  onItemPress,
-  itemsContainerStyle,
-  itemStyle,
-  labelStyle,
-  activeLabelStyle,
-  inactiveLabelStyle,
-  iconContainerStyle,
-  drawerPosition,
-}: DrawerNavigationItemsProps) => {
-  const insets = useSafeArea();
-
-  return (
-    <View style={[styles.container, itemsContainerStyle]}>
-      {items.map((route, index: number) => {
-        const focused = activeItemKey === route.key;
-        const color = focused ? activeTintColor : inactiveTintColor;
-        const backgroundColor = focused
-          ? activeBackgroundColor
-          : inactiveBackgroundColor;
-        const scene = { route, index, focused, tintColor: color };
-        const icon = renderIcon(scene);
-        const label = getLabel(scene);
-        const accessibilityLabel =
-          typeof label === 'string' ? label : undefined;
-        const extraLabelStyle = focused ? activeLabelStyle : inactiveLabelStyle;
-
-        return (
-          <TouchableItem
-            key={route.key}
-            accessible
-            accessibilityLabel={accessibilityLabel}
-            onPress={() => {
-              onItemPress({ route, focused });
-            }}
-            delayPressIn={0}
-          >
-            <View
-              style={[
-                {
-                  backgroundColor,
-                  marginLeft: drawerPosition === 'left' ? insets.left : 0,
-                  marginRight: drawerPosition === 'right' ? insets.right : 0,
-                },
-                styles.item,
-                itemStyle,
-              ]}
-            >
-              {icon ? (
-                <View
-                  style={[
-                    styles.icon,
-                    focused ? null : styles.inactiveIcon,
-                    iconContainerStyle,
-                  ]}
-                >
-                  {icon}
-                </View>
-              ) : null}
-              {typeof label === 'string' ? (
-                <Text
-                  style={[styles.label, { color }, labelStyle, extraLabelStyle]}
-                >
-                  {label}
-                </Text>
-              ) : (
-                label
-              )}
-            </View>
-          </TouchableItem>
-        );
-      })}
-    </View>
-  );
-};
-
-/* Material design specs - https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-specs */
-DrawerNavigatorItems.defaultProps = {
-  activeTintColor: '#2196f3',
-  activeBackgroundColor: 'rgba(0, 0, 0, .04)',
-  inactiveTintColor: 'rgba(0, 0, 0, .87)',
-  inactiveBackgroundColor: 'transparent',
-};
-
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 4,
-  },
-  item: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  icon: {
-    marginHorizontal: 16,
-    width: 24,
-    alignItems: 'center',
-  },
-  inactiveIcon: {
-    /*
-     * Icons have 0.54 opacity according to guidelines
-     * 100/87 * 54 ~= 62
-     */
-    opacity: 0.62,
-  },
-  label: {
-    margin: 16,
-    fontWeight: 'bold',
-  },
-});
-
-export default DrawerNavigatorItems;

packages/drawer/src/views/DrawerSidebar.tsx

@@ -1,128 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View, ViewStyle, StyleProp } from 'react-native';
-import Animated from 'react-native-reanimated';
-import { Route, CommonActions } from '@react-navigation/core';
-import {
-  DrawerActions,
-  DrawerNavigationState,
-} from '@react-navigation/routers';
-
-import {
-  Scene,
-  ContentComponentProps,
-  DrawerDescriptorMap,
-  DrawerNavigationHelpers,
-} from '../types';
-
-type Props = {
-  contentComponent?: React.ComponentType<ContentComponentProps>;
-  contentOptions?: object;
-  state: DrawerNavigationState;
-  navigation: DrawerNavigationHelpers;
-  descriptors: DrawerDescriptorMap;
-  drawerOpenProgress: Animated.Node<number>;
-  drawerPosition: 'left' | 'right';
-  style?: StyleProp<ViewStyle>;
-};
-
-/**
- * Component that renders the sidebar screen of the drawer.
- */
-class DrawerSidebar extends React.PureComponent<Props> {
-  private getScreenOptions = (routeKey: string) => {
-    const descriptor = this.props.descriptors[routeKey];
-
-    if (!descriptor.options) {
-      throw new Error(
-        'Cannot access screen descriptor options from drawer sidebar'
-      );
-    }
-
-    return descriptor.options;
-  };
-
-  private getLabel = ({ focused, tintColor, route }: Scene) => {
-    const { drawerLabel, title } = this.getScreenOptions(route.key);
-    if (drawerLabel) {
-      return typeof drawerLabel === 'function'
-        ? drawerLabel({ tintColor, focused })
-        : drawerLabel;
-    }
-
-    if (typeof title === 'string') {
-      return title;
-    }
-
-    return route.name;
-  };
-
-  private renderIcon = ({ focused, tintColor, route }: Scene) => {
-    const { drawerIcon } = this.getScreenOptions(route.key);
-    if (drawerIcon) {
-      return typeof drawerIcon === 'function'
-        ? drawerIcon({ tintColor, focused })
-        : drawerIcon;
-    }
-    return null;
-  };
-
-  private handleItemPress = ({
-    route,
-    focused,
-  }: {
-    route: Route<string>;
-    focused: boolean;
-  }) => {
-    const { state, navigation } = this.props;
-
-    navigation.dispatch({
-      ...(focused
-        ? DrawerActions.closeDrawer()
-        : CommonActions.navigate(route.name)),
-      target: state.key,
-    });
-  };
-
-  render() {
-    const ContentComponent = this.props.contentComponent;
-
-    if (!ContentComponent) {
-      return null;
-    }
-
-    const { state } = this.props;
-
-    if (typeof state.index !== 'number') {
-      throw new Error(
-        'The index of the route should be state in the navigation state'
-      );
-    }
-
-    return (
-      <View style={[styles.container, this.props.style]}>
-        <ContentComponent
-          {...this.props.contentOptions}
-          navigation={this.props.navigation}
-          descriptors={this.props.descriptors}
-          drawerOpenProgress={this.props.drawerOpenProgress}
-          items={state.routes}
-          activeItemKey={
-            state.routes[state.index] ? state.routes[state.index].key : null
-          }
-          getLabel={this.getLabel}
-          renderIcon={this.renderIcon}
-          onItemPress={this.handleItemPress}
-          drawerPosition={this.props.drawerPosition}
-        />
-      </View>
-    );
-  }
-}
-
-export default DrawerSidebar;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});

packages/drawer/src/views/DrawerView.tsx

@@ -1,30 +1,35 @@
 import * as React from 'react';
-import { Dimensions, StyleSheet, I18nManager, Platform } from 'react-native';
+import {
-import { SafeAreaProvider, useSafeArea } from 'react-native-safe-area-context';
+  Dimensions,
+  StyleSheet,
+  I18nManager,
+  Platform,
+  ScaledSize,
+} from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
-import { PanGestureHandler, ScrollView } from 'react-native-gesture-handler';
+import { PanGestureHandler } from 'react-native-gesture-handler';
 import {
   DrawerNavigationState,
   DrawerActions,
 } from '@react-navigation/routers';
 
-import DrawerSidebar from './DrawerSidebar';
 import DrawerGestureContext from '../utils/DrawerGestureContext';
 import ResourceSavingScene from './ResourceSavingScene';
-import DrawerNavigatorItems from './DrawerNavigatorItems';
+import DrawerContent from './DrawerContent';
 import Drawer from './Drawer';
 import {
   DrawerDescriptorMap,
   DrawerNavigationConfig,
-  ContentComponentProps,
   DrawerNavigationHelpers,
 } from '../types';
 
-type Props = DrawerNavigationConfig & {
+type Props = Omit<DrawerNavigationConfig, 'overlayColor'> & {
   state: DrawerNavigationState;
   navigation: DrawerNavigationHelpers;
   descriptors: DrawerDescriptorMap;
+  overlayColor: string;
 };
 
 type State = {
@@ -32,17 +37,25 @@ type State = {
   drawerWidth: number;
 };
 
-const DefaultContentComponent = (props: ContentComponentProps) => {
+const getDefaultDrawerWidth = ({
-  const insets = useSafeArea();
+  height,
+  width,
+}: {
+  height: number;
+  width: number;
+}) => {
+  /*
+   * Default drawer width is screen width - header height
+   * with a max width of 280 on mobile and 320 on tablet
+   * https://material.io/guidelines/patterns/navigation-drawer.html
+   */
+  const smallerAxisSize = Math.min(height, width);
+  const isLandscape = width > height;
+  const isTablet = smallerAxisSize >= 600;
+  const appBarHeight = Platform.OS === 'ios' ? (isLandscape ? 32 : 44) : 56;
+  const maxWidth = isTablet ? 320 : 280;
 
-  return (
+  return Math.min(smallerAxisSize - appBarHeight, maxWidth);
-    <ScrollView
-      alwaysBounceVertical={false}
-      contentContainerStyle={{ marginTop: insets.top }}
-    >
-      <DrawerNavigatorItems {...props} />
-    </ScrollView>
-  );
 };
 
 /**
@@ -51,25 +64,10 @@ const DefaultContentComponent = (props: ContentComponentProps) => {
 export default class DrawerView extends React.PureComponent<Props, State> {
   static defaultProps = {
     lazy: true,
-    drawerWidth: () => {
+    contentComponent: DrawerContent,
-      /*
-       * Default drawer width is screen width - header height
-       * with a max width of 280 on mobile and 320 on tablet
-       * https://material.io/guidelines/patterns/navigation-drawer.html
-       */
-      const { height, width } = Dimensions.get('window');
-      const smallerAxisSize = Math.min(height, width);
-      const isLandscape = width > height;
-      const isTablet = smallerAxisSize >= 600;
-      const appBarHeight = Platform.OS === 'ios' ? (isLandscape ? 32 : 44) : 56;
-      const maxWidth = isTablet ? 320 : 280;
-
-      return Math.min(smallerAxisSize - appBarHeight, maxWidth);
-    },
-    contentComponent: DefaultContentComponent,
     drawerPosition: I18nManager.isRTL ? 'right' : 'left',
     keyboardDismissMode: 'on-drag',
-    drawerBackgroundColor: 'white',
+    overlayColor: 'rgba(0, 0, 0, 0.5)',
     drawerType: 'front',
     hideStatusBar: false,
     statusBarAnimation: 'slide',
@@ -88,10 +86,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
 
   state: State = {
     loaded: [this.props.state.index],
-    drawerWidth:
+    drawerWidth: getDefaultDrawerWidth(Dimensions.get('window')),
-      typeof this.props.drawerWidth === 'function'
-        ? this.props.drawerWidth()
-        : this.props.drawerWidth,
   };
 
   componentDidMount() {
@@ -126,11 +121,8 @@ export default class DrawerView extends React.PureComponent<Props, State> {
     navigation.emit({ type: 'drawerClose' });
   };
 
-  private updateWidth = () => {
+  private updateWidth = ({ window }: { window: ScaledSize }) => {
-    const drawerWidth =
+    const drawerWidth = getDefaultDrawerWidth(window);
-      typeof this.props.drawerWidth === 'function'
-        ? this.props.drawerWidth()
-        : this.props.drawerWidth;
 
     if (this.state.drawerWidth !== drawerWidth) {
       this.setState({ drawerWidth });
@@ -138,7 +130,25 @@ export default class DrawerView extends React.PureComponent<Props, State> {
   };
 
   private renderNavigationView = ({ progress }: any) => {
-    return <DrawerSidebar drawerOpenProgress={progress} {...this.props} />;
+    const {
+      state,
+      navigation,
+      descriptors,
+      drawerPosition,
+      contentComponent: ContentComponent,
+      contentOptions,
+    } = this.props;
+
+    return (
+      <ContentComponent
+        progress={progress}
+        state={state}
+        navigation={navigation}
+        descriptors={descriptors}
+        drawerPosition={drawerPosition}
+        {...contentOptions}
+      />
+    );
   };
 
   private renderContent = () => {
@@ -192,9 +202,9 @@ export default class DrawerView extends React.PureComponent<Props, State> {
       descriptors,
       drawerType,
       drawerPosition,
-      drawerBackgroundColor,
       overlayColor,
       sceneContainerStyle,
+      drawerStyle,
       edgeWidth,
       minSwipeDistance,
       hideStatusBar,
@@ -202,6 +212,8 @@ export default class DrawerView extends React.PureComponent<Props, State> {
       gestureHandlerProps,
     } = this.props;
 
+    const { drawerWidth } = this.state;
+
     const activeKey = state.routes[state.index].key;
     const { drawerLockMode } = descriptors[activeKey].options;
 
@@ -228,13 +240,8 @@ export default class DrawerView extends React.PureComponent<Props, State> {
             drawerType={drawerType}
             drawerPosition={drawerPosition}
             sceneContainerStyle={sceneContainerStyle}
-            drawerStyle={{
+            drawerStyle={[{ width: drawerWidth }, drawerStyle]}
-              backgroundColor: drawerBackgroundColor || 'white',
+            overlayStyle={{ backgroundColor: overlayColor }}
-              width: this.state.drawerWidth,
-            }}
-            overlayStyle={{
-              backgroundColor: overlayColor || 'rgba(0, 0, 0, 0.5)',
-            }}
             swipeEdgeWidth={edgeWidth}
             swipeDistanceThreshold={minSwipeDistance}
             hideStatusBar={hideStatusBar}

packages/example/CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.15](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.14...@react-navigation/example@5.0.0-alpha.15) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.14](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.13...@react-navigation/example@5.0.0-alpha.14) (2019-10-17)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.12...@react-navigation/example@5.0.0-alpha.13) (2019-10-15)
+
+
+### Bug Fixes
+
+* block GH interactions in Native Stack example ([#126](https://github.com/react-navigation/navigation-ex/issues/126)) ([386d1c0](https://github.com/react-navigation/navigation-ex/commit/386d1c0))
+* make it possible to run the example on web ([7a901af](https://github.com/react-navigation/navigation-ex/commit/7a901af))
+
+
+### Features
+
+* initial version of native stack ([#102](https://github.com/react-navigation/navigation-ex/issues/102)) ([ba3f718](https://github.com/react-navigation/navigation-ex/commit/ba3f718))
+
+
+
+
+
+# [5.0.0-alpha.12](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.11...@react-navigation/example@5.0.0-alpha.12) (2019-10-06)
+
+
+### Features
+
+* drop header: null in favor of more explitit headerShown option ([ba6b6ae](https://github.com/satya164/navigation-ex/commit/ba6b6ae))
+
+
+
+
+
+# [5.0.0-alpha.11](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.10...@react-navigation/example@5.0.0-alpha.11) (2019-10-03)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
 # [5.0.0-alpha.10](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.9...@react-navigation/example@5.0.0-alpha.10) (2019-10-03)
 
 **Note:** Version bump only for package @react-navigation/example

packages/example/android/app/app.iml

@@ -151,6 +151,7 @@
     <orderEntry type="library" name="Gradle: com.facebook.soloader:soloader:0.6.0@aar" level="project" />
     <orderEntry type="library" name="Gradle: io.nlopez.smartlocation:library:3.2.11@aar" level="project" />
     <orderEntry type="library" name="Gradle: com.facebook.fresco:fbcore:1.10.0@aar" level="project" />
+    <orderEntry type="module" module-name="react-native-screens" />
     <orderEntry type="module" module-name="react-native-reanimated" />
     <orderEntry type="module" module-name="react-native-gesture-handler" />
     <orderEntry type="module" module-name="expo-permissions" />

packages/example/android/app/build.gradle

@@ -139,6 +139,8 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-safe-area-context')
+    implementation project(':react-native-screens')
     implementation project(':react-native-reanimated')
     implementation project(':react-native-gesture-handler')
     implementation fileTree(dir: "libs", include: ["*.jar"])

packages/example/android/app/src/main/java/com/reactnavigationexample/MainApplication.java

@@ -3,6 +3,8 @@ package com.reactnavigationexample;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
+import com.swmansion.rnscreens.RNScreensPackage;
 import com.swmansion.reanimated.ReanimatedPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
@@ -39,6 +41,8 @@ public class MainApplication extends Application implements ReactApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+          new SafeAreaContextPackage(),
+          new RNScreensPackage(),
           new ReanimatedPackage(),
           new RNGestureHandlerPackage(),
           new ModuleRegistryAdapter(mModuleRegistryProvider)

packages/example/android/gradle.properties

@@ -16,3 +16,6 @@
 # This option should only be used with decoupled projects. More details, visit
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
+
+android.useAndroidX=true
+android.enableJetifier=true

packages/example/android/local.properties

@@ -1,8 +0,0 @@
-## This file must *NOT* be checked into Version Control Systems,
-# as it contains information specific to your local configuration.
-#
-# Location of the SDK. This is only used by Gradle.
-# For customization when using a Version Control System, please read the
-# header note.
-#Wed Sep 18 15:42:44 CEST 2019
-sdk.dir=/Users/osdnk/Library/Android/sdk

packages/example/android/settings.gradle

@@ -1,4 +1,8 @@
 apply from: '../node_modules/react-native-unimodules/gradle.groovy'
+include ':react-native-safe-area-context'
+project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')
+include ':react-native-screens'
+project(':react-native-screens').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-screens/android')
 include ':react-native-reanimated'
 project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-reanimated/android')
 includeUnimodulesProjects()

packages/example/ios/Podfile

@@ -28,6 +28,9 @@ target 'ReactNavigationExample' do
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
   pod 'RNGestureHandler', :podspec => '../node_modules/react-native-gesture-handler/RNGestureHandler.podspec'
   pod 'RNReanimated', :podspec => '../node_modules/react-native-reanimated/RNReanimated.podspec'
+  pod 'RNScreens', :podspec => '../node_modules/react-native-screens/RNScreens.podspec'
 
   use_unimodules!
+  pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'
+
 end

packages/example/ios/Podfile.lock

@@ -1,31 +1,31 @@
 PODS:
   - boost-for-react-native (1.63.0)
   - DoubleConversion (1.1.6)
-  - EXAppLoaderProvider (6.0.0)
+  - EXAppLoaderProvider (7.0.0)
-  - EXConstants (6.0.0):
+  - EXConstants (7.0.0):
     - UMConstantsInterface
     - UMCore
-  - EXFileSystem (6.0.2):
+  - EXFileSystem (7.0.0):
     - UMCore
     - UMFileSystemInterface
-  - EXFont (6.0.1):
+  - EXFont (7.0.0):
     - UMCore
     - UMFontInterface
-  - EXKeepAwake (6.0.0):
+  - EXKeepAwake (7.0.0):
     - UMCore
-  - EXLinearGradient (6.0.0):
+  - EXLinearGradient (7.0.0):
     - UMCore
-  - EXLocation (6.0.0):
+  - EXLocation (7.0.0):
     - UMCore
     - UMPermissionsInterface
     - UMTaskManagerInterface
-  - EXPermissions (6.0.0):
+  - EXPermissions (7.0.0):
     - UMCore
     - UMPermissionsInterface
-  - EXSQLite (6.0.0):
+  - EXSQLite (7.0.0):
     - UMCore
     - UMFileSystemInterface
-  - EXWebBrowser (6.0.0):
+  - EXWebBrowser (7.0.1):
     - UMCore
   - Folly (2018.10.22.00):
     - boost-for-react-native
@@ -34,6 +34,8 @@ PODS:
   - glog (0.3.5)
   - React (0.59.10):
     - React/Core (= 0.59.10)
+  - react-native-safe-area-context (0.3.6):
+    - React
   - React/Core (0.59.10):
     - yoga (= 0.59.10.React)
   - React/CxxBridge (0.59.10):
@@ -89,23 +91,25 @@ PODS:
     - React/RCTBlob
   - RNGestureHandler (1.3.0):
     - React
-  - RNReanimated (1.1.0):
+  - RNReanimated (1.2.0):
     - React
-  - UMBarCodeScannerInterface (3.0.0)
+  - RNScreens (2.0.0-alpha.4):
-  - UMCameraInterface (3.0.0)
+    - React
-  - UMConstantsInterface (3.0.0)
+  - UMBarCodeScannerInterface (4.0.0)
-  - UMCore (3.0.2)
+  - UMCameraInterface (4.0.0)
-  - UMFaceDetectorInterface (3.0.0)
+  - UMConstantsInterface (4.0.0)
-  - UMFileSystemInterface (3.0.0)
+  - UMCore (4.0.0)
-  - UMFontInterface (3.0.0)
+  - UMFaceDetectorInterface (4.0.0)
-  - UMImageLoaderInterface (3.0.0)
+  - UMFileSystemInterface (4.0.0)
-  - UMPermissionsInterface (3.0.0)
+  - UMFontInterface (4.0.0)
-  - UMReactNativeAdapter (3.0.0):
+  - UMImageLoaderInterface (4.0.0)
+  - UMPermissionsInterface (4.0.0)
+  - UMReactNativeAdapter (5.0.0-alpha.0):
     - React
     - UMCore
     - UMFontInterface
-  - UMSensorsInterface (3.0.0)
+  - UMSensorsInterface (4.0.0)
-  - UMTaskManagerInterface (3.0.0)
+  - UMTaskManagerInterface (4.0.0)
   - yoga (0.59.10.React)
 
 DEPENDENCIES:
@@ -122,6 +126,7 @@ DEPENDENCIES:
   - EXWebBrowser (from `../node_modules/expo-web-browser/ios`)
   - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React/Core (from `../node_modules/react-native`)
   - React/CxxBridge (from `../node_modules/react-native`)
   - React/DevSupport (from `../node_modules/react-native`)
@@ -138,6 +143,7 @@ DEPENDENCIES:
   - React/RCTWebSocket (from `../node_modules/react-native`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler/RNGestureHandler.podspec`)
   - RNReanimated (from `../node_modules/react-native-reanimated/RNReanimated.podspec`)
+  - RNScreens (from `../node_modules/react-native-screens/RNScreens.podspec`)
   - UMBarCodeScannerInterface (from `../node_modules/unimodules-barcode-scanner-interface/ios`)
   - UMCameraInterface (from `../node_modules/unimodules-camera-interface/ios`)
   - UMConstantsInterface (from `../node_modules/unimodules-constants-interface/ios`)
@@ -147,7 +153,7 @@ DEPENDENCIES:
   - UMFontInterface (from `../node_modules/unimodules-font-interface/ios`)
   - UMImageLoaderInterface (from `../node_modules/unimodules-image-loader-interface/ios`)
   - UMPermissionsInterface (from `../node_modules/unimodules-permissions-interface/ios`)
-  - "UMReactNativeAdapter (from `../node_modules/@unimodules/react-native-adapter/ios`)"
+  - "UMReactNativeAdapter (from `../node_modules/react-native-unimodules/node_modules/@unimodules/react-native-adapter/ios`)"
   - UMSensorsInterface (from `../node_modules/unimodules-sensors-interface/ios`)
   - UMTaskManagerInterface (from `../node_modules/unimodules-task-manager-interface/ios`)
   - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -195,10 +201,14 @@ EXTERNAL SOURCES:
     :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
   React:
     :path: "../node_modules/react-native"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   RNGestureHandler:
     :podspec: "../node_modules/react-native-gesture-handler/RNGestureHandler.podspec"
   RNReanimated:
     :podspec: "../node_modules/react-native-reanimated/RNReanimated.podspec"
+  RNScreens:
+    :podspec: "../node_modules/react-native-screens/RNScreens.podspec"
   UMBarCodeScannerInterface:
     :path: !ruby/object:Pathname
     path: "../node_modules/unimodules-barcode-scanner-interface/ios"
@@ -228,7 +238,7 @@ EXTERNAL SOURCES:
     path: "../node_modules/unimodules-permissions-interface/ios"
   UMReactNativeAdapter:
     :path: !ruby/object:Pathname
-    path: "../node_modules/@unimodules/react-native-adapter/ios"
+    path: "../node_modules/react-native-unimodules/node_modules/@unimodules/react-native-adapter/ios"
   UMSensorsInterface:
     :path: !ruby/object:Pathname
     path: "../node_modules/unimodules-sensors-interface/ios"
@@ -241,35 +251,37 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   DoubleConversion: bb338842f62ab1d708ceb63ec3d999f0f3d98ecd
-  EXAppLoaderProvider: 7a8185228d8ba9e689a0e2d6d957fe9bdd49c8a0
+  EXAppLoaderProvider: 5d348813a9cf09b03bbe5b8b55437bc1bfbddbd1
-  EXConstants: 5d81e84ca71b9a552529889cc798b4a04e9e22b3
+  EXConstants: 31e5318521be6175009af6ccd3e97dedf39da96a
-  EXFileSystem: 091907902fcec9f9182b656fdead41a82f30986a
+  EXFileSystem: 7e53a2c30a2eb6987ba6d5158ab908f947523228
-  EXFont: c862449210fc86aa11d24a202cb22c71a0d39609
+  EXFont: 71d07dc5d2153db7d1a23f1e0cc1b6341d55c432
-  EXKeepAwake: e7cb6516675052b12a7d23291e33078b4239653a
+  EXKeepAwake: d4caf9a1a7691126ade4ca0b76592e93250a8f29
-  EXLinearGradient: 40781b77e58f844c8dc4ad310dc9755b4d3792a7
+  EXLinearGradient: ebfd46cb98a46330213e4945b96227d98f624054
-  EXLocation: 4eb76115832f08b1e78003b335c210e18fa60424
+  EXLocation: 452a1d9edceb1b93deb86fd785236606d33742dd
-  EXPermissions: 99e52dc3e5f8e55153f1958004f6df2a30a1f2f5
+  EXPermissions: df10ad83df2f6b647aec304619354f8ab48d5f63
-  EXSQLite: 8dab6a5ab1b78be7925073d6071eb22095d4dda6
+  EXSQLite: ddc1e6727bd7d36e649f07590fe3ae5511c1f039
-  EXWebBrowser: def838b95aa9d396f9ce71ace4e614ee16e7ee30
+  EXWebBrowser: 18924c3d2a3a1aa95d413672f058beff589c80f4
   Folly: de497beb10f102453a1afa9edbf8cf8a251890de
   glog: aefd1eb5dda2ab95ba0938556f34b98e2da3a60d
   React: 36d0768f9e93be2473b37e7fa64f92c1d5341eef
+  react-native-safe-area-context: e380a6f783ccaec848e2f3cc8eb205a62362950d
   RNGestureHandler: 5329a942fce3d41c68b84c2c2276ce06a696d8b0
-  RNReanimated: 7a52c90473b5e81c13408d40d797b98387eaddde
+  RNReanimated: 1b52415c4302f198cb581282a0166690bad62c43
-  UMBarCodeScannerInterface: 84ea2d6b58ff0dc27ef9b68bab71286be18ee020
+  RNScreens: 84be1a2369a580beb2fea0755cc62ef16b83fffe
-  UMCameraInterface: 26b26005d1756a0d5f4f04f1e168e39ea9154535
+  UMBarCodeScannerInterface: d5a6fdc98ed6241225b0a8432a7f4e2b397668bc
-  UMConstantsInterface: 038bacb19de12b6fd328c589122c8dc977cccf61
+  UMCameraInterface: 68870a3197fee85bd5afca5609ba4a5b7257d19d
-  UMCore: 733094f43f7244c60ce1f0592d00013ed68fa52c
+  UMConstantsInterface: d25b8e8887ca7aaf568c06caf08f4d40734ee4ef
-  UMFaceDetectorInterface: c9c3ae4cb045421283667a1698c2f31331f55e3f
+  UMCore: 402cee150324974974f5c32b5404d8af65e4cff5
-  UMFileSystemInterface: e9adc71027017de38eaf7d05fa58b2848ecb3797
+  UMFaceDetectorInterface: 7b4f1a92f0c726b58b086296048efe193b570678
-  UMFontInterface: f0c5846977ee8a93d7cfa8ae7e666772c727d195
+  UMFileSystemInterface: aadb9a67aa6470d7ebc06cf04dc54fee6781ac48
-  UMImageLoaderInterface: 36e54e570acc4d720856f03ceebc441f73ea472c
+  UMFontInterface: 2d3c128285086bbed3d2a650f1d698323ef3b25a
-  UMPermissionsInterface: 938d010c74c43fcefc9bb990633a7c5a1631267e
+  UMImageLoaderInterface: 2829a7571a12d2e754c73c55ffe7e327d8402c7d
-  UMReactNativeAdapter: 131ea2b944ade8035f0b54c6570c405f6000548d
+  UMPermissionsInterface: b6a6e96db0f4011a25aaca14e6022529dd3d6e4e
-  UMSensorsInterface: 0ed023ce9b96f2ca6fada7bda05b7760da60b293
+  UMReactNativeAdapter: e93109c6de5ea830d4a78d08f3a65b8d33a143a3
-  UMTaskManagerInterface: 8664abd37a00715727e60df9ecd65e42ba47b548
+  UMSensorsInterface: cf59dd7602764a2419e00167429be3e4be39c61d
+  UMTaskManagerInterface: 1e70fe58b872355f0ecb44fb81bb1a16484047f0
   yoga: 684513b14b03201579ba3cee20218c9d1298b0cc
 
-PODFILE CHECKSUM: 41592ff50a43d56f905dbf9c7eded4b358264eba
+PODFILE CHECKSUM: 1276a2dd000c142ccc03272023bb8a6b2d5b9933
 
 COCOAPODS: 1.7.5

packages/example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/example",
   "description": "Demo app to showcase various functionality of React Navigation",
-  "version": "5.0.0-alpha.10",
+  "version": "5.0.0-alpha.15",
   "private": true,
   "workspaces": {
     "nohoist": [
@@ -11,9 +11,11 @@
   },
   "scripts": {
     "start": "expo start",
+    "web": "expo start --web",
     "native": "react-native start",
     "android": "react-native run-android",
-    "ios": "react-native run-ios"
+    "ios": "react-native run-ios",
+    "postinstall": "jetify"
   },
   "dependencies": {
     "@expo/vector-icons": "^10.0.0",
@@ -21,26 +23,29 @@
     "expo": "^35.0.0",
     "expo-asset": "~7.0.0",
     "query-string": "^6.8.3",
-    "react": "^16.10.1",
+    "react": "~16.8.3",
-    "react-dom": "^16.10.1",
+    "react-dom": "~16.8.3",
-    "react-native": "^0.61.2",
+    "react-native": "~0.59.10",
     "react-native-gesture-handler": "~1.3.0",
-    "react-native-paper": "^3.0.0-alpha.3",
+    "react-native-paper": "^3.0.0-alpha.7",
     "react-native-reanimated": "~1.2.0",
     "react-native-safe-area-context": "~0.3.6",
-    "react-native-screens": "~1.0.0-alpha.23",
+    "react-native-screens": "^2.0.0-alpha.5",
     "react-native-tab-view": "2.10.0",
     "react-native-unimodules": "^0.7.0-rc.1",
+    "react-native-web": "^0.11.7",
     "scheduler": "^0.16.1",
     "shortid": "^2.2.15",
     "use-subscription": "^1.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",
+    "@expo/webpack-config": "^0.7.12",
     "@types/react": "^16.9.4",
-    "@types/react-native": "^0.60.17",
+    "@types/react-native": "^0.60.19",
     "babel-preset-expo": "^7.0.0",
-    "expo-cli": "^3.1.2",
+    "expo-cli": "^3.3.0",
+    "jetifier": "^1.6.4",
     "typescript": "^3.6.3"
   }
 }

packages/example/src/Screens/AuthFlow.tsx

@@ -14,11 +14,13 @@ type AuthStackParams = {
   'sign-in': undefined;
 };
 
-const SplashScreen = () => (
+const SplashScreen = () => {
-  <View style={styles.content}>
+  return (
-    <ActivityIndicator />
+    <View style={styles.content}>
-  </View>
+      <ActivityIndicator />
-);
+    </View>
+  );
+};
 
 const SignInScreen = ({
   setUserToken,
@@ -74,7 +76,7 @@ export default function SimpleStackScreen({ navigation }: Props) {
   }, []);
 
   navigation.setOptions({
-    header: null,
+    headerShown: false,
   });
 
   return (

packages/example/src/Screens/BottomTabs.tsx

@@ -1,21 +1,24 @@
 import * as React from 'react';
-import { MaterialIcons } from '@expo/vector-icons';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-// @ts-ignore
+import TouchableBounce from '../Shared/TouchableBounce';
-import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
 import Chat from '../Shared/Chat';
 import SimpleStackScreen from './SimpleStack';
 
 const getTabBarIcon = (name: string) => ({
-  tintColor,
+  color,
   horizontal,
 }: {
-  tintColor: string;
+  color: string;
   horizontal: boolean;
 }) => (
-  <MaterialIcons name={name} color={tintColor} size={horizontal ? 17 : 24} />
+  <MaterialCommunityIcons
+    name={name}
+    color={color}
+    size={horizontal ? 17 : 24}
+  />
 );
 
 type BottomTabParams = {
@@ -34,7 +37,7 @@ export default function BottomTabsScreen() {
         name="article"
         options={{
           title: 'Article',
-          tabBarIcon: getTabBarIcon('chrome-reader-mode'),
+          tabBarIcon: getTabBarIcon('file-document-box'),
           tabBarButtonComponent: TouchableBounce,
         }}
       >
@@ -47,7 +50,7 @@ export default function BottomTabsScreen() {
         component={Chat}
         options={{
           title: 'Chat',
-          tabBarIcon: getTabBarIcon('chat-bubble'),
+          tabBarIcon: getTabBarIcon('message-reply'),
           tabBarButtonComponent: TouchableBounce,
         }}
       />
@@ -65,7 +68,7 @@ export default function BottomTabsScreen() {
         component={Albums}
         options={{
           title: 'Albums',
-          tabBarIcon: getTabBarIcon('photo-album'),
+          tabBarIcon: getTabBarIcon('image-album'),
           tabBarButtonComponent: TouchableBounce,
         }}
       />

packages/example/src/Screens/CompatAPI.tsx

@@ -19,27 +19,29 @@ type CompatStackParams = {
 
 const ArticleScreen: CompatScreenType<
   StackNavigationProp<CompatStackParams, 'Article'>
-> = ({ navigation }) => (
+> = ({ navigation }) => {
-  <React.Fragment>
+  return (
-    <View style={styles.buttons}>
+    <React.Fragment>
-      <Button
+      <View style={styles.buttons}>
-        mode="contained"
+        <Button
-        onPress={() => navigation.push('Album')}
+          mode="contained"
-        style={styles.button}
+          onPress={() => navigation.push('Album')}
-      >
+          style={styles.button}
-        Push album
+        >
-      </Button>
+          Push album
-      <Button
+        </Button>
-        mode="outlined"
+        <Button
-        onPress={() => navigation.goBack()}
+          mode="outlined"
-        style={styles.button}
+          onPress={() => navigation.goBack()}
-      >
+          style={styles.button}
-        Go back
+        >
-      </Button>
+          Go back
-    </View>
+        </Button>
-    <Article author={{ name: navigation.getParam('author') }} />
+      </View>
-  </React.Fragment>
+      <Article author={{ name: navigation.getParam('author') }} />
-);
+    </React.Fragment>
+  );
+};
 
 ArticleScreen.navigationOptions = ({ navigation }) => ({
   title: `Article by ${navigation.getParam('author')}`,
@@ -47,27 +49,29 @@ ArticleScreen.navigationOptions = ({ navigation }) => ({
 
 const AlbumsScreen: CompatScreenType<
   StackNavigationProp<CompatStackParams>
-> = ({ navigation }) => (
+> = ({ navigation }) => {
-  <React.Fragment>
+  return (
-    <View style={styles.buttons}>
+    <React.Fragment>
-      <Button
+      <View style={styles.buttons}>
-        mode="contained"
+        <Button
-        onPress={() => navigation.push('Article', { author: 'Babel fish' })}
+          mode="contained"
-        style={styles.button}
+          onPress={() => navigation.push('Article', { author: 'Babel fish' })}
-      >
+          style={styles.button}
-        Push article
+        >
-      </Button>
+          Push article
-      <Button
+        </Button>
-        mode="outlined"
+        <Button
-        onPress={() => navigation.goBack()}
+          mode="outlined"
-        style={styles.button}
+          onPress={() => navigation.goBack()}
-      >
+          style={styles.button}
-        Go back
+        >
-      </Button>
+          Go back
-    </View>
+        </Button>
-    <Albums />
+      </View>
-  </React.Fragment>
+      <Albums />
-);
+    </React.Fragment>
+  );
+};
 
 const CompatStack = createCompatNavigatorFactory(createStackNavigator)<
   StackNavigationProp<CompatStackParams>
@@ -92,7 +96,7 @@ export default function CompatStackScreen({
   navigation: StackNavigationProp<{}>;
 }) {
   navigation.setOptions({
-    header: null,
+    headerShown: false,
   });
 
   return <CompatStack />;

packages/example/src/Screens/MaterialBottomTabs.tsx

@@ -24,7 +24,7 @@ export default function MaterialBottomTabsScreen() {
         name="article"
         options={{
           tabBarLabel: 'Article',
-          tabBarIcon: 'chrome-reader-mode',
+          tabBarIcon: 'file-document-box',
           tabBarColor: '#C9E7F8',
         }}
       >
@@ -37,7 +37,7 @@ export default function MaterialBottomTabsScreen() {
         component={Chat}
         options={{
           tabBarLabel: 'Chat',
-          tabBarIcon: 'chat-bubble',
+          tabBarIcon: 'message-reply',
           tabBarColor: '#9FD5C9',
           tabBarBadge: true,
         }}
@@ -56,7 +56,7 @@ export default function MaterialBottomTabsScreen() {
         component={Albums}
         options={{
           tabBarLabel: 'Albums',
-          tabBarIcon: 'photo-album',
+          tabBarIcon: 'image-album',
           tabBarColor: '#FAD4D6',
         }}
       />

packages/example/src/Screens/ModalPresentationStack.tsx

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Button } from 'react-native-paper';
+import { useSafeArea } from 'react-native-safe-area-context';
+import { RouteProp, ParamListBase } from '@react-navigation/core';
+import {
+  createStackNavigator,
+  StackNavigationProp,
+  TransitionPresets,
+} from '@react-navigation/stack';
+import Article from '../Shared/Article';
+import Albums from '../Shared/Albums';
+
+type SimpleStackParams = {
+  article: { author: string };
+  album: undefined;
+};
+
+type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
+
+const ArticleScreen = ({
+  navigation,
+  route,
+}: {
+  navigation: SimpleStackNavigation;
+  route: RouteProp<SimpleStackParams, 'article'>;
+}) => {
+  const insets = useSafeArea();
+
+  return (
+    <React.Fragment>
+      <View style={[styles.buttons, { marginTop: insets.top }]}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('album')}
+          style={styles.button}
+        >
+          Push album
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Article author={{ name: route.params.author }} />
+    </React.Fragment>
+  );
+};
+
+const AlbumsScreen = ({
+  navigation,
+}: {
+  navigation: SimpleStackNavigation;
+}) => {
+  const insets = useSafeArea();
+
+  return (
+    <React.Fragment>
+      <View style={[styles.buttons, { marginTop: insets.top }]}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('article', { author: 'Babel fish' })}
+          style={styles.button}
+        >
+          Push article
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Albums />
+    </React.Fragment>
+  );
+};
+
+const ModalPresentationStack = createStackNavigator<SimpleStackParams>();
+
+type Props = {
+  options?: React.ComponentProps<typeof ModalPresentationStack.Navigator>;
+  navigation: StackNavigationProp<ParamListBase>;
+};
+
+export default function SimpleStackScreen({ navigation, options }: Props) {
+  navigation.setOptions({
+    headerShown: false,
+  });
+
+  return (
+    <ModalPresentationStack.Navigator
+      mode="modal"
+      headerMode="none"
+      screenOptions={{
+        ...TransitionPresets.ModalPresentationIOS,
+        cardOverlayEnabled: true,
+        gestureEnabled: true,
+      }}
+      {...options}
+    >
+      <ModalPresentationStack.Screen
+        name="article"
+        component={ArticleScreen}
+        options={({ route }) => ({
+          title: `Article by ${route.params.author}`,
+        })}
+        initialParams={{ author: 'Gandalf' }}
+      />
+      <ModalPresentationStack.Screen
+        name="album"
+        component={AlbumsScreen}
+        options={{ title: 'Album' }}
+      />
+    </ModalPresentationStack.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+});

packages/example/src/Screens/NativeStack.expo.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+export default function NativeStack() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Currently not supported on Expo :(</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#eceff1',
+  },
+  text: {
+    fontSize: 16,
+    color: '#999',
+  },
+});

packages/example/src/Screens/NativeStack.tsx

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Button } from 'react-native-paper';
+// eslint-disable-next-line import/no-unresolved
+import { useScreens } from 'react-native-screens';
+import {
+  RouteProp,
+  ParamListBase,
+  useFocusEffect,
+} from '@react-navigation/core';
+import { DrawerNavigationProp } from '@react-navigation/drawer';
+import { StackNavigationProp } from '@react-navigation/stack';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+import Article from '../Shared/Article';
+import Albums from '../Shared/Albums';
+
+type NativeStackParams = {
+  article: { author: string };
+  album: undefined;
+};
+
+type NativeStackNavigation = NativeStackNavigationProp<NativeStackParams>;
+
+const ArticleScreen = ({
+  navigation,
+  route,
+}: {
+  navigation: NativeStackNavigation;
+  route: RouteProp<NativeStackParams, 'article'>;
+}) => (
+  <React.Fragment>
+    <View style={styles.buttons}>
+      <Button
+        mode="contained"
+        onPress={() => navigation.push('album')}
+        style={styles.button}
+      >
+        Push album
+      </Button>
+      <Button
+        mode="outlined"
+        onPress={() => navigation.goBack()}
+        style={styles.button}
+      >
+        Go back
+      </Button>
+    </View>
+    <Article author={{ name: route.params.author }} />
+  </React.Fragment>
+);
+
+const AlbumsScreen = ({
+  navigation,
+}: {
+  navigation: NativeStackNavigation;
+}) => (
+  <React.Fragment>
+    <View style={styles.buttons}>
+      <Button
+        mode="contained"
+        onPress={() => navigation.push('article', { author: 'Babel fish' })}
+        style={styles.button}
+      >
+        Push article
+      </Button>
+      <Button
+        mode="outlined"
+        onPress={() => navigation.goBack()}
+        style={styles.button}
+      >
+        Go back
+      </Button>
+    </View>
+    <Albums />
+  </React.Fragment>
+);
+
+const NativeStack = createNativeStackNavigator<NativeStackParams>();
+
+type Props = {
+  navigation: StackNavigationProp<ParamListBase>;
+};
+
+export default function NativeStackScreen({ navigation }: Props) {
+  navigation.setOptions({
+    headerShown: false,
+  });
+
+  useFocusEffect(
+    React.useCallback(() => {
+      const drawer = navigation.dangerouslyGetParent() as DrawerNavigationProp<
+        ParamListBase
+      >;
+
+      navigation.setOptions({ gestureEnabled: false });
+      drawer.setOptions({ drawerLockMode: 'locked-closed' });
+
+      return () => {
+        navigation.setOptions({ gestureEnabled: true });
+        drawer.setOptions({ drawerLockMode: 'unlocked' });
+      };
+    }, [navigation])
+  );
+
+  return (
+    <NativeStack.Navigator>
+      <NativeStack.Screen
+        name="article"
+        component={ArticleScreen}
+        options={({ route }) => ({
+          title: `Article by ${route.params.author}`,
+        })}
+        initialParams={{ author: 'Gandalf' }}
+      />
+      <NativeStack.Screen
+        name="album"
+        component={AlbumsScreen}
+        options={{ title: 'Album' }}
+      />
+    </NativeStack.Navigator>
+  );
+}
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+useScreens(true);
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+});

packages/example/src/Screens/SimpleStack.tsx

@@ -5,6 +5,7 @@ import { RouteProp, ParamListBase } from '@react-navigation/core';
 import {
   createStackNavigator,
   StackNavigationProp,
+  StackNavigationOptions,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
@@ -22,64 +23,68 @@ const ArticleScreen = ({
 }: {
   navigation: SimpleStackNavigation;
   route: RouteProp<SimpleStackParams, 'article'>;
-}) => (
+}) => {
-  <React.Fragment>
+  return (
-    <View style={styles.buttons}>
+    <React.Fragment>
-      <Button
+      <View style={styles.buttons}>
-        mode="contained"
+        <Button
-        onPress={() => navigation.push('album')}
+          mode="contained"
-        style={styles.button}
+          onPress={() => navigation.push('album')}
-      >
+          style={styles.button}
-        Push album
+        >
-      </Button>
+          Push album
-      <Button
+        </Button>
-        mode="outlined"
+        <Button
-        onPress={() => navigation.goBack()}
+          mode="outlined"
-        style={styles.button}
+          onPress={() => navigation.goBack()}
-      >
+          style={styles.button}
-        Go back
+        >
-      </Button>
+          Go back
-    </View>
+        </Button>
-    <Article author={{ name: route.params.author }} />
+      </View>
-  </React.Fragment>
+      <Article author={{ name: route.params.author }} />
-);
+    </React.Fragment>
+  );
+};
 
 const AlbumsScreen = ({
   navigation,
 }: {
   navigation: SimpleStackNavigation;
-}) => (
+}) => {
-  <React.Fragment>
+  return (
-    <View style={styles.buttons}>
+    <React.Fragment>
-      <Button
+      <View style={styles.buttons}>
-        mode="contained"
+        <Button
-        onPress={() => navigation.push('article', { author: 'Babel fish' })}
+          mode="contained"
-        style={styles.button}
+          onPress={() => navigation.push('article', { author: 'Babel fish' })}
-      >
+          style={styles.button}
-        Push article
+        >
-      </Button>
+          Push article
-      <Button
+        </Button>
-        mode="outlined"
+        <Button
-        onPress={() => navigation.goBack()}
+          mode="outlined"
-        style={styles.button}
+          onPress={() => navigation.goBack()}
-      >
+          style={styles.button}
-        Go back
+        >
-      </Button>
+          Go back
-    </View>
+        </Button>
-    <Albums />
+      </View>
-  </React.Fragment>
+      <Albums />
-);
+    </React.Fragment>
+  );
+};
 
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
 type Props = {
-  options?: React.ComponentProps<typeof SimpleStack.Navigator>;
+  options?: StackNavigationOptions;
   navigation: StackNavigationProp<ParamListBase>;
 };
 
 export default function SimpleStackScreen({ navigation, options }: Props) {
   navigation.setOptions({
-    header: null,
+    headerShown: false,
   });
 
   return (

packages/example/src/Shared/Albums.tsx

@@ -28,6 +28,10 @@ export default function Albums() {
         // eslint-disable-next-line react/no-array-index-key
         <Image key={i} source={source} style={styles.cover} />
       ))}
+      {COVERS.map((source, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Image key={i + 'F'} source={source} style={styles.cover} />
+      ))}
     </ScrollView>
   );
 }

packages/example/src/Shared/TouchableBounce.native.tsx

@@ -0,0 +1,4 @@
+// @ts-ignore
+import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce';
+
+export default TouchableBounce;

packages/example/src/Shared/TouchableBounce.tsx

@@ -0,0 +1,3 @@
+import { TouchableOpacity } from 'react-native';
+
+export default TouchableOpacity;

packages/example/src/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ScrollView, AsyncStorage, YellowBox } from 'react-native';
-import LinkingPrefixes from './LinkingPrefixes';
+import { MaterialIcons } from '@expo/vector-icons';
 import { Appbar, List } from 'react-native-paper';
 import { Asset } from 'expo-asset';
 import {
@@ -22,8 +22,11 @@ import {
   StackNavigationProp,
 } from '@react-navigation/stack';
 
-import SimpleStackScreen from './Screens/SimpleStack';
+import LinkingPrefixes from './LinkingPrefixes';
-import BottomTabsScreen from './Screens/BottomTabs';
+import SimpleStack from './Screens/SimpleStack';
+import NativeStack from './Screens/NativeStack';
+import ModalPresentationStack from './Screens/ModalPresentationStack';
+import BottomTabs from './Screens/BottomTabs';
 import MaterialTopTabsScreen from './Screens/MaterialTopTabs';
 import MaterialBottomTabs from './Screens/MaterialBottomTabs';
 import AuthFlow from './Screens/AuthFlow';
@@ -32,31 +35,37 @@ import CompatAPI from './Screens/CompatAPI';
 YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
 
 type RootDrawerParamList = {
-  root: undefined;
+  Root: undefined;
+  Another: undefined;
 };
 
 type RootStackParamList = {
-  home: undefined;
+  Home: undefined;
 } & {
   [P in keyof typeof SCREENS]: undefined;
 };
 
 const SCREENS = {
-  'simple-stack': { title: 'Simple Stack', component: SimpleStackScreen },
+  SimpleStack: { title: 'Simple Stack', component: SimpleStack },
-  'bottom-tabs': { title: 'Bottom Tabs', component: BottomTabsScreen },
+  NativeStack: { title: 'Native Stack', component: NativeStack },
-  'material-top-tabs': {
+  ModalPresentationStack: {
+    title: 'Modal Presentation Stack',
+    component: ModalPresentationStack,
+  },
+  BottomTabs: { title: 'Bottom Tabs', component: BottomTabs },
+  MaterialTopTabs: {
     title: 'Material Top Tabs',
     component: MaterialTopTabsScreen,
   },
-  'material-bottom-tabs': {
+  MaterialBottomTabs: {
     title: 'Material Bottom Tabs',
     component: MaterialBottomTabs,
   },
-  'auth-flow': {
+  AuthFlow: {
     title: 'Auth Flow',
     component: AuthFlow,
   },
-  'compat-api': {
+  CompatAPI: {
     title: 'Compat Layer',
     component: CompatAPI,
   },
@@ -134,7 +143,15 @@ export default function App() {
       }
     >
       <Drawer.Navigator>
-        <Drawer.Screen name="root" options={{ title: 'Examples' }}>
+        <Drawer.Screen
+          name="Root"
+          options={{
+            title: 'Examples',
+            drawerIcon: ({ size, color }) => (
+              <MaterialIcons size={size} color={color} name="folder" />
+            ),
+          }}
+        >
           {({
             navigation,
           }: {
@@ -142,7 +159,7 @@ export default function App() {
           }) => (
             <Stack.Navigator>
               <Stack.Screen
-                name="home"
+                name="Home"
                 options={{
                   title: 'Examples',
                   headerLeft: () => (

packages/example/webpack.config.js

@@ -0,0 +1,50 @@
+const path = require('path');
+const fs = require('fs');
+const createExpoWebpackConfigAsync = require('@expo/webpack-config');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+
+module.exports = async function(env, argv) {
+  const config = await createExpoWebpackConfigAsync(env, argv);
+
+  config.module.rules.push({
+    test: /\.(js|ts|tsx)$/,
+    include: /packages\/.+/,
+    use: 'babel-loader',
+  });
+
+  config.resolve.plugins = config.resolve.plugins.filter(
+    p => !(p instanceof ModuleScopePlugin)
+  );
+
+  config.resolve.alias['react'] = path.resolve(
+    __dirname,
+    'node_modules',
+    'react'
+  );
+  config.resolve.alias['react-native'] = path.resolve(
+    __dirname,
+    'node_modules',
+    'react-native-web'
+  );
+  config.resolve.alias['react-native-web'] = path.resolve(
+    __dirname,
+    'node_modules',
+    'react-native-web'
+  );
+
+  config.resolve.alias[
+    '@expo/vector-icons/MaterialCommunityIcons'
+  ] = require.resolve('@expo/vector-icons/MaterialCommunityIcons');
+
+  fs.readdirSync(path.join(__dirname, '..')).forEach(name => {
+    config.resolve.alias[`@react-navigation/${name}`] = path.resolve(
+      __dirname,
+      '..',
+      name,
+      'src'
+    );
+  });
+
+  return config;
+};

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.14...@react-navigation/material-bottom-tabs@5.0.0-alpha.15) (2019-10-22)
+
+
+### Bug Fixes
+
+* navigation drawer sometimes not closing when pressed outside ([0d8cdc8](https://github.com/react-navigation/navigation-ex/commit/0d8cdc8))
+
+
+
+
+
+# [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.13...@react-navigation/material-bottom-tabs@5.0.0-alpha.14) (2019-10-17)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.12...@react-navigation/material-bottom-tabs@5.0.0-alpha.13) (2019-10-15)
+
+
+### Bug Fixes
+
+* make it possible to run the example on web ([7a901af](https://github.com/react-navigation/navigation-ex/commit/7a901af))
+
+
+### Features
+
+* initial version of native stack ([#102](https://github.com/react-navigation/navigation-ex/issues/102)) ([ba3f718](https://github.com/react-navigation/navigation-ex/commit/ba3f718))
+
+
+
+
+
+# [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.11...@react-navigation/material-bottom-tabs@5.0.0-alpha.12) (2019-10-06)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.10...@react-navigation/material-bottom-tabs@5.0.0-alpha.11) (2019-10-03)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/README.md

@@ -27,7 +27,7 @@ export default function App() {
         component={Article}
         options={{
           tabBarLabel: 'Article',
-          tabBarIcon: 'chrome-reader-mode',
+          tabBarIcon: 'file-document-box',
         }}
       />
       <MaterialBottomTabs.Screen
@@ -35,7 +35,7 @@ export default function App() {
         component={Chat}
         options={{
           tabBarLabel: 'Chat',
-          tabBarIcon: 'chat-bubble',
+          tabBarIcon: 'message-reply',
         }}
       />
       <MaterialBottomTabs.Screen
@@ -51,7 +51,7 @@ export default function App() {
         component={Albums}
         options={{
           tabBarLabel: 'Albums',
-          tabBarIcon: 'photo-album',
+          tabBarIcon: 'image-album',
         }}
       />
     </MaterialBottomTabs.Navigator>

packages/material-bottom-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.11",
+  "version": "5.0.0-alpha.15",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -42,9 +42,9 @@
     "@types/react-native": "^0.60.17",
     "@types/react-native-vector-icons": "^6.4.4",
     "del-cli": "^3.0.0",
-    "react": "16.10.1",
+    "react": "~16.8.3",
-    "react-native": "0.59.10",
+    "react-native": "~0.59.10",
-    "react-native-paper": "^3.0.0-alpha.3",
+    "react-native-paper": "^3.0.0-alpha.7",
     "react-native-vector-icons": "^6.6.0",
     "typescript": "^3.6.3"
   },
@@ -52,7 +52,7 @@
     "@react-navigation/core": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
-    "react-native-paper": "^3.0.0-alpha.3",
+    "react-native-paper": "^3.0.0-alpha.0",
     "react-native-vector-icons": "^6.0.0"
   },
   "@react-native-community/bob": {

packages/material-bottom-tabs/src/types.tsx

@@ -60,7 +60,7 @@ export type MaterialBottomTabNavigationOptions = {
 
   /**
    * String referring to an icon in the `MaterialCommunityIcons` set, or a
-   * function that given { focused: boolean, tintColor: string } returns a React.Node to display in the navigation bar.
+   * function that given { focused: boolean, color: string } returns a React.Node to display in the navigation bar.
    */
   tabBarIcon?:
     | string
@@ -96,6 +96,16 @@ export type MaterialBottomTabDescriptorMap = {
 export type MaterialBottomTabNavigationConfig = Partial<
   Omit<
     React.ComponentProps<typeof BottomNavigation>,
-    'navigationState' | 'onIndexChange' | 'renderScene'
+    | 'navigationState'
+    | 'onIndexChange'
+    | 'onTabPress'
+    | 'renderScene'
+    | 'renderLabel'
+    | 'renderIcon'
+    | 'getAccessibilityLabel'
+    | 'getBadge'
+    | 'getColor'
+    | 'getLabelText'
+    | 'getTestID'
   >
 >;

packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { BottomNavigation } from 'react-native-paper';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialIcons';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { Route } from '@react-navigation/core';
 import { TabNavigationState, TabActions } from '@react-navigation/routers';
 
 import {
@@ -17,7 +16,7 @@ type Props = MaterialBottomTabNavigationConfig & {
   descriptors: MaterialBottomTabDescriptorMap;
 };
 
-type Scene = { route: Route<string> };
+type Scene = { route: { key: string } };
 
 export default class MaterialBottomTabView extends React.PureComponent<Props> {
   private getColor = ({ route }: Scene) => {
@@ -35,7 +34,7 @@ export default class MaterialBottomTabView extends React.PureComponent<Props> {
       ? options.tabBarLabel
       : typeof options.title === 'string'
       ? options.title
-      : route.name;
+      : ((route as any) as { name: string }).name;
   };
 
   private getAccessibilityLabel = ({ route }: Scene) => {
@@ -49,9 +48,9 @@ export default class MaterialBottomTabView extends React.PureComponent<Props> {
     const label = this.getLabelText({ route });
 
     if (typeof label === 'string') {
-      return `${label}, tab, ${state.routes.indexOf(route) + 1} of ${
+      return `${label}, tab, ${state.routes.findIndex(
-        state.routes.length
+        r => r.key === route.key
-      }`;
+      ) + 1} of ${state.routes.length}`;
     }
 
     return undefined;
@@ -75,7 +74,7 @@ export default class MaterialBottomTabView extends React.PureComponent<Props> {
     focused,
     color,
   }: {
-    route: Route<string>;
+    route: { key: string };
     focused: boolean;
     color: string;
   }) => {

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.11...@react-navigation/material-top-tabs@5.0.0-alpha.12) (2019-10-15)
+
+
+### Features
+
+* initial version of native stack ([#102](https://github.com/react-navigation/navigation-ex/issues/102)) ([ba3f718](https://github.com/react-navigation/navigation-ex/commit/ba3f718))
+
+
+
+
+
+# [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.10...@react-navigation/material-top-tabs@5.0.0-alpha.11) (2019-10-06)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 # [5.0.0-alpha.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.9...@react-navigation/material-top-tabs@5.0.0-alpha.10) (2019-10-03)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.10",
+  "version": "5.0.0-alpha.12",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -41,8 +41,8 @@
     "@types/react": "^16.9.4",
     "@types/react-native": "^0.60.17",
     "del-cli": "^3.0.0",
-    "react": "16.10.1",
+    "react": "~16.8.3",
-    "react-native": "^0.59.8",
+    "react-native": "~0.59.10",
     "react-native-gesture-handler": "^1.3.0",
     "react-native-reanimated": "^1.3.0",
     "react-native-tab-view": "^2.10.0",

packages/material-top-tabs/src/types.tsx

@@ -64,19 +64,19 @@ export type MaterialTopTabNavigationOptions = {
 
   /**
    * Title string of a tab displayed in the tab bar or React Element
-   * or a function that given { focused: boolean, tintColor: string } returns a React.Node, to display in tab bar.
+   * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar.
    * When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section.
    */
   tabBarLabel?:
     | React.ReactNode
-    | ((props: { focused: boolean; tintColor: string }) => React.ReactNode);
+    | ((props: { focused: boolean; color: string }) => React.ReactNode);
 
   /**
-   * React Element or a function that given { focused: boolean, tintColor: string } returns a React.Node, to display in the tab bar.
+   * React Element or a function that given { focused: boolean, color: string } returns a React.Node, to display in the tab bar.
    */
   tabBarIcon?:
     | React.ReactNode
-    | ((props: { focused: boolean; tintColor: string }) => React.ReactNode);
+    | ((props: { focused: boolean; color: string }) => React.ReactNode);
 
   /**
    * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
@@ -196,7 +196,7 @@ export type MaterialTopTabBarProps = MaterialTopTabBarOptions &
     getLabelText: (props: {
       route: Route<string>;
     }) =>
-      | ((scene: { focused: boolean; tintColor: string }) => React.ReactNode)
+      | ((scene: { focused: boolean; color: string }) => React.ReactNode)
       | React.ReactNode;
     getAccessibilityLabel: (props: {
       route: Route<string>;

packages/material-top-tabs/src/views/MaterialTopTabBar.tsx

@@ -53,7 +53,7 @@ export default class TabBarTop extends React.PureComponent<
     }
 
     if (typeof label === 'function') {
-      return label({ focused, tintColor: color });
+      return label({ focused, color });
     }
 
     return label;
@@ -79,7 +79,7 @@ export default class TabBarTop extends React.PureComponent<
     if (options.tabBarIcon !== undefined) {
       const icon =
         typeof options.tabBarIcon === 'function'
-          ? options.tabBarIcon({ focused, tintColor: color })
+          ? options.tabBarIcon({ focused, color })
           : options.tabBarIcon;
 
       return <View style={[styles.icon, iconStyle]}>{icon}</View>;

packages/native-stack/CHANGELOG.md

@@ -0,0 +1,50 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.3...@react-navigation/native-stack@5.0.0-alpha.4) (2019-10-22)
+
+
+### Features
+
+* **native-stack:** add support for large title attributes ([#135](https://github.com/react-navigation/navigation-ex/issues/135)) ([6cf1a04](https://github.com/react-navigation/navigation-ex/commit/6cf1a04))
+
+
+
+
+
+# [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.2...@react-navigation/native-stack@5.0.0-alpha.3) (2019-10-18)
+
+
+### Bug Fixes
+
+* remove top margin when header is hidden in native stack. fixes [#131](https://github.com/react-navigation/navigation-ex/issues/131) ([fb726ee](https://github.com/react-navigation/navigation-ex/commit/fb726ee))
+
+
+
+
+
+# [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.1...@react-navigation/native-stack@5.0.0-alpha.2) (2019-10-18)
+
+
+### Bug Fixes
+
+* fix header font size config in native stack ([#128](https://github.com/react-navigation/navigation-ex/issues/128)) ([477c088](https://github.com/react-navigation/navigation-ex/commit/477c088))
+
+
+
+
+
+# 5.0.0-alpha.1 (2019-10-15)
+
+
+### Bug Fixes
+
+* increase hitSlop of back button on Android ([c7da1e4](https://github.com/react-navigation/navigation-ex/commit/c7da1e4))
+* update supported options for native stack ([b71f4e5](https://github.com/react-navigation/navigation-ex/commit/b71f4e5))
+
+
+### Features
+
+* initial version of native stack ([#102](https://github.com/react-navigation/navigation-ex/issues/102)) ([ba3f718](https://github.com/react-navigation/navigation-ex/commit/ba3f718))

packages/native-stack/README.md

@@ -0,0 +1,64 @@
+# `@react-navigation/native-stack`
+
+Stack navigator for React Native using native primitives for navigation. Uses [`react-native-screens`](https://github.com/kmagiera/react-native-screens) under the hood.
+
+Expo is currently not supported as it includes an older version of `react-native-screens`.
+
+## Installation
+
+Open a Terminal in your project's folder and run,
+
+```sh
+yarn add @react-navigation/core @react-navigation/native-stack
+```
+
+Now we need to install [`react-native-screens`](https://github.com/kmagiera/react-native-screens).
+
+```sh
+yarn add react-native-screens
+```
+
+To complete the linking on iOS, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
+
+```sh
+cd ios
+pod install
+cd ..
+```
+
+To finalize installation of `react-native-screens` for Android, add the following two lines to dependencies section in `android/app/build.gradle`:
+
+```gradle
+implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
+implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
+```
+
+Make sure to enable `react-native-screens`. This needs to be done before our app renders. To do it, add the following code in your entry file (e.g. `App.js`):
+
+```js
+import { useScreens } from 'react-native-screens';
+
+useScreens();
+```
+
+## Usage
+
+```js
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="home" component={Home} options={{ title: 'Home' }} />
+      <Stack.Screen name="feed" component={Feed} options={{ title: 'Feed' }} />
+      <Stack.Screen
+        name="profile"
+        component={Profile}
+        options={{ title: 'Profile' }}
+      />
+    </Stack.Navigator>
+  );
+}
+```

packages/native-stack/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@react-navigation/native-stack",
+  "description": "Native stack navigator component for iOS and Android",
+  "keywords": [
+    "react",
+    "react-native",
+    "react-navigation"
+  ],
+  "version": "5.0.0-alpha.4",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-navigation/navigation-ex.git",
+    "directory": "packages/native-stack"
+  },
+  "main": "lib/commonjs/index.js",
+  "react-native": "src/index.tsx",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/native-stack/src/index.d.ts",
+  "files": [
+    "src",
+    "lib"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepare": "bob build",
+    "clean": "del lib"
+  },
+  "dependencies": {
+    "@react-navigation/routers": "^5.0.0-alpha.9"
+  },
+  "devDependencies": {
+    "@react-native-community/bob": "^0.7.0",
+    "del-cli": "^2.0.0",
+    "react-native-screens": "^2.0.0-alpha.5",
+    "typescript": "^3.5.3"
+  },
+  "peerDependencies": {
+    "@react-navigation/core": "^5.0.0-alpha.0",
+    "react": "*",
+    "react-native": "*",
+    "react-native-screens": "^2.0.0-alpha.5"
+  },
+  "@react-native-community/bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  }
+}

packages/native-stack/src/index.tsx

@@ -0,0 +1,14 @@
+/**
+ * Navigators
+ */
+export {
+  default as createNativeStackNavigator,
+} from './navigators/createNativeStackNavigator';
+
+/**
+ * Types
+ */
+export {
+  NativeStackNavigationOptions,
+  NativeStackNavigationProp,
+} from './types';

packages/native-stack/src/navigators/createNativeStackNavigator.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { createNavigator, useNavigationBuilder } from '@react-navigation/core';
+
+import {
+  StackRouter,
+  StackNavigationState,
+  StackRouterOptions,
+} from '@react-navigation/routers';
+
+import {
+  screensEnabled,
+  // eslint-disable-next-line import/no-unresolved
+} from 'react-native-screens';
+import StackView from '../views/StackView';
+import {
+  NativeStackNavigatorProps,
+  NativeStackNavigationOptions,
+} from '../types';
+
+function NativeStackNavigator(props: NativeStackNavigatorProps) {
+  if (!screensEnabled()) {
+    throw new Error(
+      'Native stack is only available if React Native Screens is enabled.'
+    );
+  }
+
+  const { initialRouteName, children, screenOptions, ...rest } = props;
+  const { state, descriptors, navigation } = useNavigationBuilder<
+    StackNavigationState,
+    StackRouterOptions,
+    NativeStackNavigationOptions,
+    {}
+  >(StackRouter, {
+    initialRouteName,
+    children,
+    screenOptions,
+  });
+
+  return (
+    <StackView
+      state={state}
+      navigation={navigation}
+      descriptors={descriptors}
+      {...rest}
+    />
+  );
+}
+
+export default createNavigator<
+  NativeStackNavigationOptions,
+  typeof NativeStackNavigator
+>(NativeStackNavigator);

packages/native-stack/src/types.tsx

@@ -0,0 +1,191 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import {
+  DefaultNavigatorOptions,
+  Descriptor,
+  NavigationHelpers,
+  NavigationProp,
+  ParamListBase,
+} from '@react-navigation/core';
+import {
+  StackNavigationState,
+  StackRouterOptions,
+} from '@react-navigation/routers';
+
+export type NativeStackNavigationProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string
+> = NavigationProp<
+  ParamList,
+  RouteName,
+  StackNavigationState,
+  NativeStackNavigationOptions,
+  {}
+> & {
+  /**
+   * Push a new screen onto the stack.
+   *
+   * @param name Name of the route for the tab.
+   * @param [params] Params object for the route.
+   */
+  push<RouteName extends keyof ParamList>(
+    ...args: ParamList[RouteName] extends (undefined | any)
+      ? [RouteName] | [RouteName, ParamList[RouteName]]
+      : [RouteName, ParamList[RouteName]]
+  ): void;
+
+  /**
+   * Pop a screen from the stack.
+   */
+  pop(count?: number): void;
+
+  /**
+   * Pop to the first route in the stack, dismissing all other screens.
+   */
+  popToTop(): void;
+};
+
+export type NativeStackNavigationHelpers = NavigationHelpers<ParamListBase, {}>;
+
+export type NativeStackNavigationConfig = {};
+
+export type NativeStackNavigationOptions = {
+  /**
+   * String that can be displayed in the header as a fallback for `headerTitle`.
+   */
+  title?: string;
+  /**
+   * String to display in the header as title. Defaults to scene `title`.
+   */
+  headerTitle?: string;
+  /**
+   * Title to display in the back button.
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  headerBackTitle?: string;
+  /**
+   * Whether to show the header.
+   */
+  headerShown?: boolean;
+  /**
+   * Boolean indicating whether the navigation bar is translucent.
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  headerTranslucent?: boolean;
+  /**
+   * Boolean to set native property to prefer large title header (like in iOS setting).
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  headerLargeTitle?: boolean;
+  /**
+   * Function which returns a React Element to display on the right side of the header.
+   */
+  headerRight?: () => React.ReactNode;
+  /**
+   * Tint color for the header. Changes the color of back button and title.
+   */
+  headerTintColor?: string;
+  /**
+   * Boolean indicating whether to hide the back button in header.
+   * Only supported on Android.
+   *
+   * @platform android
+   */
+  headerHideBackButton?: boolean;
+  /**
+   * Boolean indicating whether to hide the elevation shadow on the header.
+   * Only supported on Android.
+   *
+   * @platform android
+   */
+  headerHideShadow?: boolean;
+  /**
+   * Style object for header title. Supported properties:
+   * - backgroundColor
+   */
+  headerStyle?: {
+    backgroundColor?: string;
+  };
+  /**
+   * Style object for header title. Supported properties:
+   * - fontFamily
+   * - fontSize
+   * - color
+   */
+  headerTitleStyle?: {
+    fontFamily?: string;
+    fontSize?: number;
+    color?: string;
+  };
+  /**
+   * Style object for header large title. Supported properties:
+   * - fontFamily
+   * - fontSize
+   *
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  headerLargeTitleStyle?: {
+    fontFamily?: string;
+    fontSize?: number;
+  };
+  /**
+   * Style object for header back title. Supported properties:
+   * - fontFamily
+   * - fontSize
+   *
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  headerBackTitleStyle?: {
+    fontFamily?: string;
+    fontSize?: number;
+  };
+  /**
+   * Style object for the scene content.
+   */
+  contentStyle?: StyleProp<ViewStyle>;
+  /**
+   * Whether you can use gestures to dismiss this screen. Defaults to `true`.
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  gestureEnabled?: boolean;
+  /**
+   * How should the screen be presented.
+   */
+  presentation?: 'modal' | 'transparentModal' | 'push';
+  /**
+   * How should the screen should be animated.
+   * Only supported on Android.
+   *
+   * @platform android
+   */
+  animation?: 'default' | 'fade' | 'none';
+};
+
+export type NativeStackNavigatorProps = DefaultNavigatorOptions<
+  NativeStackNavigationOptions
+> &
+  StackRouterOptions &
+  NativeStackNavigationConfig;
+
+export type NativeStackDescriptor = Descriptor<
+  ParamListBase,
+  string,
+  StackNavigationState,
+  NativeStackNavigationOptions
+>;
+
+export type NativeStackDescriptorMap = {
+  [key: string]: NativeStackDescriptor;
+};

packages/native-stack/src/views/HeaderConfig.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import {
+  // @ts-ignore
+  ScreenStackHeaderConfig,
+  // @ts-ignore
+  ScreenStackHeaderRightView,
+  // eslint-disable-next-line import/no-unresolved
+} from 'react-native-screens';
+import { Route } from '@react-navigation/core';
+import { NativeStackNavigationOptions } from '../types';
+
+type Props = NativeStackNavigationOptions & {
+  route: Route<string>;
+};
+
+export default function HeaderConfig(props: Props) {
+  const {
+    route,
+    title,
+    headerRight,
+    headerTitle,
+    headerBackTitle,
+    headerHideBackButton,
+    headerHideShadow,
+    headerTintColor,
+    headerLargeTitle,
+    headerTranslucent,
+    headerStyle = {},
+    headerTitleStyle = {},
+    headerLargeTitleStyle = {},
+    headerBackTitleStyle = {},
+    headerShown,
+    gestureEnabled,
+  } = props;
+
+  return (
+    <ScreenStackHeaderConfig
+      hidden={headerShown === false}
+      translucent={headerTranslucent === true}
+      hideShadow={headerHideShadow}
+      hideBackButton={headerHideBackButton}
+      title={
+        headerTitle !== undefined
+          ? headerTitle
+          : title !== undefined
+          ? title
+          : route.name
+      }
+      titleFontFamily={headerTitleStyle.fontFamily}
+      titleFontSize={headerTitleStyle.fontSize}
+      titleColor={
+        headerTitleStyle.color !== undefined
+          ? headerTitleStyle.color
+          : headerTintColor
+      }
+      backTitle={headerBackTitle}
+      backTitleFontFamily={headerBackTitleStyle.fontFamily}
+      backTitleFontSize={headerBackTitleStyle.fontSize}
+      color={headerTintColor}
+      gestureEnabled={gestureEnabled === undefined ? true : gestureEnabled}
+      largeTitle={headerLargeTitle}
+      largeTitleFontFamily={headerLargeTitleStyle.fontFamily}
+      largeTitleFontSize={headerLargeTitleStyle.fontSize}
+      backgroundColor={headerStyle.backgroundColor}
+    >
+      {headerRight !== undefined ? (
+        <ScreenStackHeaderRightView>{headerRight()}</ScreenStackHeaderRightView>
+      ) : null}
+    </ScreenStackHeaderConfig>
+  );
+}

packages/native-stack/src/views/StackView.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
+import { StackNavigationState, StackActions } from '@react-navigation/routers';
+
+import {
+  // @ts-ignore
+  ScreenStack,
+  Screen,
+  // eslint-disable-next-line import/no-unresolved
+} from 'react-native-screens';
+import HeaderConfig from './HeaderConfig';
+import {
+  NativeStackNavigationHelpers,
+  NativeStackDescriptorMap,
+} from '../types';
+
+type Props = {
+  state: StackNavigationState;
+  navigation: NativeStackNavigationHelpers;
+  descriptors: NativeStackDescriptorMap;
+};
+
+export default function StackView({ state, navigation, descriptors }: Props) {
+  return (
+    <ScreenStack style={styles.scenes}>
+      {state.routes.map(route => {
+        const { options, render: renderScene } = descriptors[route.key];
+        const { presentation = 'push', animation, contentStyle } = options;
+
+        return (
+          // @ts-ignore
+          <Screen
+            key={route.key}
+            style={StyleSheet.absoluteFill}
+            stackPresentation={presentation}
+            stackAnimation={animation}
+            onDismissed={() => {
+              navigation.dispatch({
+                ...StackActions.pop(),
+                source: route.key,
+                target: state.key,
+              });
+            }}
+          >
+            <HeaderConfig {...options} route={route} />
+            <View
+              style={[
+                styles.content,
+                {
+                  marginTop:
+                    Platform.OS === 'android' && options.headerShown !== false
+                      ? 56
+                      : 0,
+                },
+                contentStyle,
+              ]}
+            >
+              {renderScene()}
+            </View>
+          </Screen>
+        );
+      })}
+    </ScreenStack>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    backgroundColor: '#eee',
+  },
+  scenes: {
+    flex: 1,
+  },
+});

packages/native-stack/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig"
+}

packages/native/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.12...@react-navigation/native@5.0.0-alpha.13) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.11...@react-navigation/native@5.0.0-alpha.12) (2019-10-15)
+
+
+### Features
+
+* initial version of native stack ([#102](https://github.com/react-navigation/navigation-ex/issues/102)) ([ba3f718](https://github.com/react-navigation/navigation-ex/commit/ba3f718))
+
+
+
+
+
+# [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.10...@react-navigation/native@5.0.0-alpha.11) (2019-10-06)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 # [5.0.0-alpha.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.9...@react-navigation/native@5.0.0-alpha.10) (2019-10-03)
 
 **Note:** Version bump only for package @react-navigation/native

packages/native/package.json

@@ -7,7 +7,7 @@
     "ios",
     "android"
   ],
-  "version": "5.0.0-alpha.10",
+  "version": "5.0.0-alpha.13",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,8 +34,8 @@
     "@types/react": "^16.9.4",
     "@types/react-native": "^0.60.17",
     "del-cli": "^3.0.0",
-    "react": "16.10.1",
+    "react": "~16.8.3",
-    "react-native": "0.59.10",
+    "react-native": "~0.59.10",
     "typescript": "^3.6.3"
   },
   "peerDependencies": {

packages/native/src/useLinking.tsx

@@ -10,7 +10,7 @@ import {
 type Config = {
   [routeName: string]:
     | string
-    | { path: string; parse?: { [key: string]: (value: string) => any } };
+    | { path: string; parse?: Record<string, (value: string) => any> };
 };
 
 type Options = {

packages/stack/CHANGELOG.md

@@ -3,6 +3,95 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.27...@react-navigation/stack@5.0.0-alpha.28) (2019-10-22)
+
+
+### Bug Fixes
+
+* don't fire onOpen when screen is unmounting ([#137](https://github.com/react-navigation/navigation-ex/issues/137)) ([f22abb7](https://github.com/react-navigation/navigation-ex/commit/f22abb7)), closes [#136](https://github.com/react-navigation/navigation-ex/issues/136)
+* don't keep unfocused header backgrounds visible ([031c4d2](https://github.com/react-navigation/navigation-ex/commit/031c4d2))
+
+
+
+
+
+# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.26...@react-navigation/stack@5.0.0-alpha.27) (2019-10-18)
+
+
+### Features
+
+* add an option to override safe area insets ([300791a](https://github.com/react-navigation/navigation-ex/commit/300791a))
+
+
+
+
+
+# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.25...@react-navigation/stack@5.0.0-alpha.26) (2019-10-17)
+
+
+### Bug Fixes
+
+* don't fade incoming background when fading header ([#127](https://github.com/react-navigation/navigation-ex/issues/127)) ([c6d0c19](https://github.com/react-navigation/navigation-ex/commit/c6d0c19))
+* fix incorrect type ([731cf7d](https://github.com/react-navigation/navigation-ex/commit/731cf7d))
+* use header height from style if specified ([442b95d](https://github.com/react-navigation/navigation-ex/commit/442b95d))
+
+
+
+
+
+# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.24...@react-navigation/stack@5.0.0-alpha.25) (2019-10-15)
+
+
+### Bug Fixes
+
+* don't ignore descriptors change ([9d9fe31](https://github.com/react-navigation/navigation-ex/commit/9d9fe31))
+* increase hitSlop of back button on Android ([c7da1e4](https://github.com/react-navigation/navigation-ex/commit/c7da1e4))
+* interpolation in iOS modal presentation ([b32cda2](https://github.com/react-navigation/navigation-ex/commit/b32cda2))
+* make modal presentation mode fullscreen on landscape ([#124](https://github.com/react-navigation/navigation-ex/issues/124)) ([e789846](https://github.com/react-navigation/navigation-ex/commit/e789846))
+
+
+### Features
+
+* add a headerTitleAlign option to center or left align title ([6a0ca90](https://github.com/react-navigation/navigation-ex/commit/6a0ca90))
+* export TransitionSpecs ([708dde0](https://github.com/react-navigation/navigation-ex/commit/708dde0))
+* initial version of native stack ([#102](https://github.com/react-navigation/navigation-ex/issues/102)) ([ba3f718](https://github.com/react-navigation/navigation-ex/commit/ba3f718))
+
+
+
+
+
+# [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.23...@react-navigation/stack@5.0.0-alpha.24) (2019-10-06)
+
+
+### Bug Fixes
+
+* actually expose gestureVelocityImpact in the public API ([16079d1](https://github.com/react-navigation/navigation-ex/commit/16079d1))
+* don't recompute if routes didn't change ([615b523](https://github.com/react-navigation/navigation-ex/commit/615b523))
+* handling vertical gesture in RTL ([#122](https://github.com/react-navigation/navigation-ex/issues/122)) ([a27ade8](https://github.com/react-navigation/navigation-ex/commit/a27ade8))
+* use next screen's animation when not focused. fixes [#87](https://github.com/react-navigation/navigation-ex/issues/87) ([b4a7681](https://github.com/react-navigation/navigation-ex/commit/b4a7681))
+
+
+### Features
+
+* add gestureVelocityImpact as a prop for stack ([#123](https://github.com/react-navigation/navigation-ex/issues/123)) ([8294efc](https://github.com/react-navigation/navigation-ex/commit/8294efc))
+* drop header: null in favor of more explitit headerShown option ([ba6b6ae](https://github.com/react-navigation/navigation-ex/commit/ba6b6ae))
+
+
+
+
+
+# [5.0.0-alpha.23](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.22...@react-navigation/stack@5.0.0-alpha.23) (2019-10-03)
+
+
+### Bug Fixes
+
+* fix passing insets to interpolator ([6f5f4b7](https://github.com/react-navigation/navigation-ex/commit/6f5f4b7))
+* fix vertical gesture ([a7c4a4d](https://github.com/react-navigation/navigation-ex/commit/a7c4a4d))
+
+
+
+
+
 # [5.0.0-alpha.22](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.21...@react-navigation/stack@5.0.0-alpha.22) (2019-10-03)
 
 **Note:** Version bump only for package @react-navigation/stack

packages/stack/README.md

@@ -1,6 +1,6 @@
 # `@react-navigation/stack`
 
-Bottom tab navigator for React Navigation following iOS design guidelines.
+Stack navigator for React Navigation.
 
 ## Installation
 

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.22",
+  "version": "5.0.0-alpha.28",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -41,12 +41,12 @@
     "@types/react": "^16.9.4",
     "@types/react-native": "^0.60.17",
     "del-cli": "^3.0.0",
-    "react": "16.10.1",
+    "react": "~16.8.3",
-    "react-native": "0.59.10",
+    "react-native": "~0.59.10",
     "react-native-gesture-handler": "^1.3.0",
     "react-native-reanimated": "^1.3.0",
     "react-native-safe-area-context": "^0.3.6",
-    "react-native-screens": "^1.0.0-alpha.22",
+    "react-native-screens": "^2.0.0-alpha.5",
     "typescript": "^3.6.3"
   },
   "peerDependencies": {
@@ -57,7 +57,7 @@
     "react-native-gesture-handler": "^1.0.0",
     "react-native-reanimated": "^1.0.0",
     "react-native-safe-area-context": "^0.3.6",
-    "react-native-screens": "^1.0.0-alpha.0"
+    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.0"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -85,7 +85,8 @@ export function forModalPresentationIOS({
   layouts: { screen },
   insets,
 }: StackCardInterpolationProps): StackCardInterpolatedStyle {
-  const topOffset = 10;
+  const isLandscape = screen.width > screen.height;
+  const topOffset = isLandscape ? 0 : 10;
   const statusBarHeight = insets.top;
   const aspectRatio = screen.height / screen.width;
 
@@ -101,22 +102,29 @@ export function forModalPresentationIOS({
   });
 
   const overlayOpacity = interpolate(progress, {
-    inputRange: [0, 1, 2],
+    inputRange: [0, 1, 1.0001, 2],
-    outputRange: [0, 0.3, 1],
+    outputRange: [0, 0.3, 1, 1],
   });
 
-  const scale = interpolate(progress, {
+  const scale = isLandscape
-    inputRange: [0, 1, 2],
+    ? 1
-    outputRange: [1, 1, screen.width ? 1 - (topOffset * 2) / screen.width : 1],
+    : interpolate(progress, {
-  });
+        inputRange: [0, 1, 2],
+        outputRange: [
+          1,
+          1,
+          screen.width ? 1 - (topOffset * 2) / screen.width : 1,
+        ],
+      });
 
-  const borderRadius =
+  const borderRadius = isLandscape
-    index === 0
+    ? 0
-      ? interpolate(progress, {
+    : index === 0
-          inputRange: [0, 1, 2],
+    ? interpolate(progress, {
-          outputRange: [0, 0, 10],
+        inputRange: [0, 1, 2],
-        })
+        outputRange: [0, 0, 10],
-      : 10;
+      })
+    : 10;
 
   return {
     cardStyle: {

packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -109,7 +109,12 @@ export function forFade({
     leftButtonStyle: { opacity },
     rightButtonStyle: { opacity },
     titleStyle: { opacity },
-    backgroundStyle: { opacity },
+    backgroundStyle: {
+      opacity: interpolate(progress, {
+        inputRange: [0, 1, 1.9, 2],
+        outputRange: [0, 1, 1, 0],
+      }),
+    },
   };
 }
 

packages/stack/src/index.tsx

@@ -1,5 +1,6 @@
 import * as CardStyleInterpolators from './TransitionConfigs/CardStyleInterpolators';
 import * as HeaderStyleInterpolators from './TransitionConfigs/HeaderStyleInterpolators';
+import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
 import * as TransitionPresets from './TransitionConfigs/TransitionPresets';
 
 /**
@@ -24,7 +25,12 @@ export { default as HeaderBackButton } from './views/Header/HeaderBackButton';
 /**
  * Transition presets
  */
-export { CardStyleInterpolators, HeaderStyleInterpolators, TransitionPresets };
+export {
+  CardStyleInterpolators,
+  HeaderStyleInterpolators,
+  TransitionSpecs,
+  TransitionPresets,
+};
 
 /**
  * Utilities

packages/stack/src/types.tsx

@@ -5,6 +5,7 @@ import {
   LayoutChangeEvent,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { EdgeInsets } from 'react-native-safe-area-context';
 import {
   NavigationProp,
   ParamListBase,
@@ -107,6 +108,11 @@ export type StackHeaderOptions = {
    * The title string is passed in `children`.
    */
   headerTitle?: string | ((props: StackHeaderTitleProps) => React.ReactNode);
+  /**
+   * How to align the the header title.
+   * Defaults to `center` on iOS and `left` on Android.
+   */
+  headerTitleAlign?: 'left' | 'center';
   /**
    * Style object for the title component.
    */
@@ -202,6 +208,10 @@ export type StackHeaderProps = {
    * Layout of the screen.
    */
   layout: Layout;
+  /**
+   * Safe area insets to use in the header, e.g. to apply extra spacing for statusbar and notch.
+   */
+  insets: EdgeInsets;
   /**
    * Object representing the current scene, such as the route object and animation progress.
    */
@@ -241,7 +251,12 @@ export type StackNavigationOptions = StackHeaderOptions &
      * Function that given `HeaderProps` returns a React Element to display as a header.
      * Setting to `null` hides header.
      */
-    header?: null | ((props: StackHeaderProps) => React.ReactNode);
+    header?: (props: StackHeaderProps) => React.ReactNode;
+    /**
+     * Whether to show the header. The header is shown by default unless `headerMode` was set to `none`.
+     * Setting this to `false` hides the header.
+     */
+    headerShown?: boolean;
     /**
      * Whether a shadow is visible for the card during transitions. Defaults to `true`.
      */
@@ -287,6 +302,22 @@ export type StackNavigationOptions = StackHeaderOptions &
        */
       horizontal?: number;
     };
+    /**
+     * Number which determines the relevance of velocity for the gesture.
+     * Defaults to 0.3.
+     */
+    gestureVelocityImpact?: number;
+    /**
+     * Safe area insets for the screen. This is used to avoid elements like notch and status bar.
+     * By default, the device's safe area insets are automatically detected. You can override the behavior with this option.
+     * For example, to remove the extra spacing for status bar, pass `safeAreaInsets: { top: 0 }`.
+     */
+    safeAreaInsets?: {
+      top?: number;
+      right?: number;
+      bottom?: number;
+      left?: number;
+    };
   };
 
 export type StackNavigationConfig = {

packages/stack/src/views/Header/Header.tsx

@@ -1,15 +1,19 @@
 import * as React from 'react';
 import { StackActions } from '@react-navigation/routers';
-import { useSafeArea } from 'react-native-safe-area-context';
 
 import HeaderSegment from './HeaderSegment';
 import { StackHeaderProps, StackHeaderTitleProps } from '../../types';
 import HeaderTitle from './HeaderTitle';
 
 export default React.memo(function Header(props: StackHeaderProps) {
-  const insets = useSafeArea();
+  const {
-
+    scene,
-  const { scene, previous, layout, navigation, styleInterpolator } = props;
+    previous,
+    layout,
+    insets,
+    navigation,
+    styleInterpolator,
+  } = props;
   const { options } = scene.descriptor;
   const title =
     typeof options.headerTitle !== 'function' &&

packages/stack/src/views/Header/HeaderBackButton.tsx

@@ -170,7 +170,7 @@ class HeaderBackButton extends React.Component<Props, State> {
         style={[styles.container, disabled && styles.disabled]}
         hitSlop={Platform.select({
           ios: undefined,
-          default: { top: 8, right: 8, bottom: 8, left: 8 },
+          default: { top: 16, right: 16, bottom: 16, left: 16 },
         })}
         borderless
       >

packages/stack/src/views/Header/HeaderContainer.tsx

@@ -6,6 +6,7 @@ import {
   ParamListBase,
 } from '@react-navigation/core';
 import { StackNavigationState } from '@react-navigation/routers';
+import { EdgeInsets } from 'react-native-safe-area-context';
 
 import Header from './Header';
 import { forStatic } from '../../TransitionConfigs/HeaderStyleInterpolators';
@@ -19,6 +20,7 @@ import {
 export type Props = {
   mode: 'float' | 'screen';
   layout: Layout;
+  insets: EdgeInsets;
   scenes: Array<Scene<Route<string>> | undefined>;
   state: StackNavigationState;
   getPreviousRoute: (props: {
@@ -36,6 +38,7 @@ export default function HeaderContainer({
   mode,
   scenes,
   layout,
+  insets,
   state,
   getPreviousRoute,
   onContentHeightChange,
@@ -77,16 +80,17 @@ export default function HeaderContainer({
         const isHeaderStatic =
           mode === 'float'
             ? (previousScene &&
-                previousScene.descriptor.options.header === null &&
+                previousScene.descriptor.options.headerShown === false &&
                 // We still need to animate when coming back from next scene
                 // A hacky way to check this is if the next scene exists
                 !nextScene) ||
-              (nextScene && nextScene.descriptor.options.header === null)
+              (nextScene && nextScene.descriptor.options.headerShown === false)
             : false;
 
         const props = {
           mode,
           layout,
+          insets,
           scene,
           previous,
           navigation: scene.descriptor.navigation as StackNavigationProp<
@@ -121,13 +125,13 @@ export default function HeaderContainer({
                   : null
               }
             >
-              {options.header !== undefined ? (
+              {options.headerShown !== false ? (
-                options.header === null ? null : (
+                options.header !== undefined ? (
                   options.header(props)
+                ) : (
+                  <Header {...props} />
                 )
-              ) : (
+              ) : null}
-                <Header {...props} />
-              )}
             </View>
           </NavigationContext.Provider>
         );

packages/stack/src/views/Header/HeaderSegment.tsx

@@ -42,7 +42,7 @@ type State = {
   leftLabelLayout?: Layout;
 };
 
-const warnIfHeaderStylesDefined = (styles: { [key: string]: any }) => {
+const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
   Object.keys(styles).forEach(styleProp => {
     const value = styles[styleProp];
 
@@ -141,6 +141,10 @@ export default class HeaderSegment extends React.Component<Props, State> {
       leftLabel: previousTitle,
       onGoBack,
       headerTitle,
+      headerTitleAlign = Platform.select({
+        ios: 'center',
+        default: 'left',
+      }),
       headerLeft: left = onGoBack
         ? (props: StackHeaderLeftButtonProps) => <HeaderBackButton {...props} />
         : undefined,
@@ -324,11 +328,10 @@ export default class HeaderSegment extends React.Component<Props, State> {
             <Animated.View
               pointerEvents="box-none"
               style={[
-                Platform.select({
+                headerTitleAlign === 'left' && {
-                  ios: null,
+                  position: 'absolute',
-                  default: { left: leftButton ? 72 : 16 },
+                  left: leftButton ? 72 : 16,
-                }),
+                },
-                styles.title,
                 titleStyle,
                 titleContainerStyle,
               ]}
@@ -384,8 +387,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'flex-end',
   },
-  title: Platform.select({
-    ios: {},
-    default: { position: 'absolute' },
-  }),
 });

packages/stack/src/views/Stack/Card.tsx

@@ -14,6 +14,10 @@ import {
   PanGestureHandler,
   State as GestureState,
 } from 'react-native-gesture-handler';
+import { EdgeInsets } from 'react-native-safe-area-context';
+import PointerEventsView from './PointerEventsView';
+import memoize from '../../utils/memoize';
+import StackGestureContext from '../../utils/StackGestureContext';
 import {
   TransitionSpec,
   StackCardStyleInterpolator,
@@ -21,9 +25,6 @@ import {
   SpringConfig,
   TimingConfig,
 } from '../../types';
-import memoize from '../../utils/memoize';
-import StackGestureContext from '../../utils/StackGestureContext';
-import PointerEventsView from './PointerEventsView';
 
 type Props = ViewProps & {
   index: number;
@@ -33,6 +34,7 @@ type Props = ViewProps & {
   next?: Animated.Node<number>;
   current: Animated.Value<number>;
   layout: Layout;
+  insets: EdgeInsets;
   gestureDirection: 'horizontal' | 'vertical';
   onOpen: (isFinished: boolean) => void;
   onClose: (isFinished: boolean) => void;
@@ -48,6 +50,7 @@ type Props = ViewProps & {
     vertical?: number;
     horizontal?: number;
   };
+  gestureVelocityImpact: number;
   transitionSpec: {
     open: TransitionSpec;
     close: TransitionSpec;
@@ -86,7 +89,7 @@ const MINUS_ONE_NODE = UNSET_NODE;
 const DIRECTION_VERTICAL = -1;
 const DIRECTION_HORIZONTAL = 1;
 
-const SWIPE_VELOCITY_IMPACT = 0.3;
+const GESTURE_VELOCITY_IMPACT = 0.3;
 
 /**
  * The distance of touch start from the edge of the screen where the gesture will be recognized
@@ -228,10 +231,16 @@ export default class Card extends React.Component<Props> {
     overlayEnabled: Platform.OS !== 'ios',
     shadowEnabled: true,
     gestureEnabled: true,
+    gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
   };
 
   componentDidUpdate(prevProps: Props) {
-    const { layout, gestureDirection, closing } = this.props;
+    const {
+      layout,
+      gestureDirection,
+      gestureVelocityImpact,
+      closing,
+    } = this.props;
     const { width, height } = layout;
 
     if (width !== prevProps.layout.width) {
@@ -242,6 +251,10 @@ export default class Card extends React.Component<Props> {
       this.layout.height.setValue(height);
     }
 
+    if (gestureVelocityImpact !== prevProps.gestureVelocityImpact) {
+      this.gestureVelocityImpact.setValue(gestureVelocityImpact);
+    }
+
     if (gestureDirection !== prevProps.gestureDirection) {
       this.direction.setValue(
         gestureDirection === 'vertical'
@@ -268,16 +281,11 @@ export default class Card extends React.Component<Props> {
     // during running. However, we need to invoke listener onClose
     // manually in this case
     if (this.isRunningAnimation || this.noAnimationStartedSoFar) {
-      if (this.isVisibleValue) {
+      this.props.onClose(false);
-        this.props.onOpen(false);
-      } else {
-        this.props.onClose(false);
-      }
     }
   }
 
   private isVisible = new Value<Binary>(TRUE);
-  private isVisibleValue: Binary = TRUE;
   private nextIsVisible = new Value<Binary | -1>(UNSET);
 
   private isClosing = new Value<Binary>(FALSE);
@@ -297,7 +305,11 @@ export default class Card extends React.Component<Props> {
     height: new Value(this.props.layout.height),
   };
 
-  openingSpecConfig =
+  private gestureVelocityImpact = new Value<number>(
+    this.props.gestureVelocityImpact
+  );
+
+  private openingSpecConfig =
     this.props.transitionSpec.open.animation === 'timing'
       ? transformTimingConfigToAnimatedValues(
           this.props.transitionSpec.open.config
@@ -306,7 +318,7 @@ export default class Card extends React.Component<Props> {
           this.props.transitionSpec.open.config
         );
 
-  closingSpecConfig =
+  private closingSpecConfig =
     this.props.transitionSpec.close.animation === 'timing'
       ? transformTimingConfigToAnimatedValues(
           this.props.transitionSpec.close.config
@@ -368,7 +380,11 @@ export default class Card extends React.Component<Props> {
       this.props.index,
       this.props.current,
       this.props.next,
-      this.props.layout
+      this.props.layout,
+      this.props.insets.top,
+      this.props.insets.right,
+      this.props.insets.bottom,
+      this.props.insets.left
     );
   };
 
@@ -471,18 +487,19 @@ export default class Card extends React.Component<Props> {
 
   private extrapolatedPosition = add(
     this.gesture,
-    multiply(this.velocity, SWIPE_VELOCITY_IMPACT)
+    multiply(this.velocity, this.gestureVelocityImpact)
   );
 
   private exec = [
-    cond(
+    set(
-      eq(this.direction, DIRECTION_HORIZONTAL),
+      this.gesture,
-      set(
+      cond(
-        this.gesture,
+        eq(this.direction, DIRECTION_HORIZONTAL),
         multiply(
           this.gestureUntraversed,
           I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
-        )
+        ),
+        this.gestureUntraversed
       )
     ),
     set(
@@ -512,19 +529,9 @@ export default class Card extends React.Component<Props> {
     ),
   ];
 
-  private changeVisiblityExec = onChange(
-    this.isVisible,
-    call([this.isVisible], ([isVisible]) => (this.isVisibleValue = isVisible))
-  );
-
   private execNoGesture = block([
     ...this.exec,
     this.runTransition(this.isVisible),
-    onChange(
-      this.isVisible,
-      call([this.isVisible], ([isVisible]) => (this.isVisibleValue = isVisible))
-    ),
-    this.changeVisiblityExec,
   ]);
 
   private execWithGesture = block([
@@ -577,9 +584,13 @@ export default class Card extends React.Component<Props> {
                 cond(
                   this.distance,
                   divide(
-                    multiply(
+                    cond(
-                      this.gestureUntraversed,
+                      eq(this.direction, DIRECTION_HORIZONTAL),
-                      I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
+                      multiply(
+                        this.gestureUntraversed,
+                        I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
+                      ),
+                      this.gestureUntraversed
                     ),
                     this.distance
                   ),
@@ -629,7 +640,6 @@ export default class Card extends React.Component<Props> {
         ),
       ]
     ),
-    this.changeVisiblityExec,
   ]);
 
   private handleGestureEventHorizontal = Animated.event([
@@ -645,8 +655,8 @@ export default class Card extends React.Component<Props> {
   private handleGestureEventVertical = Animated.event([
     {
       nativeEvent: {
-        translationY: this.gesture,
+        translationY: this.gestureUntraversed,
-        velocityY: this.velocity,
+        velocityY: this.velocityUntraversed,
         state: this.gestureState,
       },
     },
@@ -661,7 +671,11 @@ export default class Card extends React.Component<Props> {
       index: number,
       current: Animated.Node<number>,
       next: Animated.Node<number> | undefined,
-      layout: Layout
+      layout: Layout,
+      insetTop: number,
+      insetRight: number,
+      insetBottom: number,
+      insetLeft: number
     ) =>
       styleInterpolator({
         index,
@@ -672,10 +686,10 @@ export default class Card extends React.Component<Props> {
           screen: layout,
         },
         insets: {
-          top: 0,
+          top: insetTop,
-          right: 0,
+          right: insetRight,
-          bottom: 0,
+          bottom: insetBottom,
-          left: 0,
+          left: insetLeft,
         },
       })
   );
@@ -689,7 +703,11 @@ export default class Card extends React.Component<Props> {
     this.props.index,
     this.props.current,
     this.props.next,
-    this.props.layout
+    this.props.layout,
+    this.props.insets.top,
+    this.props.insets.right,
+    this.props.insets.bottom,
+    this.props.insets.left
   );
 
   private gestureActivationCriteria() {
@@ -739,6 +757,7 @@ export default class Card extends React.Component<Props> {
       current,
       next,
       layout,
+      insets,
       overlayEnabled,
       shadowEnabled,
       gestureEnabled,
@@ -755,7 +774,11 @@ export default class Card extends React.Component<Props> {
         index,
         current,
         next,
-        layout
+        layout,
+        insets.top,
+        insets.right,
+        insets.bottom,
+        insets.left
       );
     }
 

packages/stack/src/views/Stack/Stack.tsx

@@ -42,8 +42,8 @@ type Props = {
   navigation: StackNavigationHelpers;
   descriptors: StackDescriptorMap;
   routes: Route<string>[];
-  openingRoutes: string[];
+  openingRouteKeys: string[];
-  closingRoutes: string[];
+  closingRouteKeys: string[];
   onGoBack: (props: { route: Route<string> }) => void;
   onOpenRoute: (props: { route: Route<string> }) => void;
   onCloseRoute: (props: { route: Route<string> }) => void;
@@ -65,7 +65,7 @@ type State = {
   scenes: Scene<Route<string>>[];
   progress: ProgressValues;
   layout: Layout;
-  floatingHeaderHeights: { [key: string]: number };
+  floatingHeaderHeights: Record<string, number>;
 };
 
 const dimensions = Dimensions.get('window');
@@ -117,19 +117,22 @@ const FALLBACK_DESCRIPTOR = Object.freeze({ options: {} });
 const getFloatingHeaderHeights = (
   routes: Route<string>[],
   insets: EdgeInsets,
+  descriptors: StackDescriptorMap,
   layout: Layout,
-  previous: { [key: string]: number }
+  previous: Record<string, number>
 ) => {
   const defaultHeaderHeight = getDefaultHeaderHeight(layout, insets);
 
-  return routes.reduce(
+  return routes.reduce<Record<string, number>>((acc, curr) => {
-    (acc, curr) => {
+    const { options = {} } = descriptors[curr.key] || {};
-      acc[curr.key] = previous[curr.key] || defaultHeaderHeight;
+    const { height = previous[curr.key] } = StyleSheet.flatten(
+      options.headerStyle || {}
+    );
 
-      return acc;
+    acc[curr.key] = typeof height === 'number' ? height : defaultHeaderHeight;
-    },
+
-    {} as { [key: string]: number }
+    return acc;
-  );
+  }, {});
 };
 
 export default class Stack extends React.Component<Props, State> {
@@ -141,24 +144,21 @@ export default class Stack extends React.Component<Props, State> {
       return null;
     }
 
-    const progress = props.routes.reduce(
+    const progress = props.routes.reduce<ProgressValues>((acc, curr) => {
-      (acc, curr) => {
+      const descriptor = props.descriptors[curr.key];
-        const descriptor = props.descriptors[curr.key];
 
-        acc[curr.key] =
+      acc[curr.key] =
-          state.progress[curr.key] ||
+        state.progress[curr.key] ||
-          new Animated.Value(
+        new Animated.Value(
-            props.openingRoutes.includes(curr.key) &&
+          props.openingRouteKeys.includes(curr.key) &&
-            descriptor &&
+          descriptor &&
-            descriptor.options.animationEnabled !== false
+          descriptor.options.animationEnabled !== false
-              ? 0
+            ? 0
-              : 1
+            : 1
-          );
+        );
 
-        return acc;
+      return acc;
-      },
+    }, {});
-      {} as ProgressValues
-    );
 
     return {
       routes: props.routes,
@@ -205,6 +205,7 @@ export default class Stack extends React.Component<Props, State> {
       floatingHeaderHeights: getFloatingHeaderHeights(
         props.routes,
         props.insets,
+        state.descriptors,
         state.layout,
         state.floatingHeaderHeights
       ),
@@ -237,15 +238,16 @@ export default class Stack extends React.Component<Props, State> {
 
     const layout = { width, height };
 
-    this.setState({
+    this.setState(state => ({
       layout,
       floatingHeaderHeights: getFloatingHeaderHeights(
         this.props.routes,
         this.props.insets,
+        state.descriptors,
         layout,
         {}
       ),
-    });
+    }));
   };
 
   private handleFloatingHeaderLayout = ({
@@ -292,11 +294,12 @@ export default class Stack extends React.Component<Props, State> {
   render() {
     const {
       mode,
+      insets,
       descriptors,
       state,
       navigation,
       routes,
-      closingRoutes,
+      closingRouteKeys,
       onOpenRoute,
       onCloseRoute,
       onGoBack,
@@ -326,6 +329,13 @@ export default class Stack extends React.Component<Props, State> {
       };
     }
 
+    const {
+      top = insets.top,
+      right = insets.right,
+      bottom = insets.bottom,
+      left = insets.left,
+    } = focusedOptions.safeAreaInsets || {};
+
     return (
       <React.Fragment>
         <MaybeScreenContainer
@@ -337,7 +347,6 @@ export default class Stack extends React.Component<Props, State> {
             const focused = focusedRoute.key === route.key;
             const current = progress[route.key];
             const scene = scenes[index];
-            const descriptor = scene.descriptor;
             const next = self[index + 1]
               ? progress[self[index + 1].key]
               : ANIMATED_ONE;
@@ -353,21 +362,62 @@ export default class Stack extends React.Component<Props, State> {
                 : 0;
 
             const {
-              header,
+              safeAreaInsets,
+              headerShown,
               headerTransparent,
               cardTransparent,
               cardShadowEnabled,
               cardOverlayEnabled,
               cardStyle,
               gestureResponseDistance,
+              gestureVelocityImpact,
               gestureDirection = defaultTransitionPreset.gestureDirection,
               transitionSpec = defaultTransitionPreset.transitionSpec,
               cardStyleInterpolator = defaultTransitionPreset.cardStyleInterpolator,
               headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
-            } = descriptor
+            } = scene.descriptor
-              ? descriptor.options
+              ? scene.descriptor.options
               : ({} as StackNavigationOptions);
 
+            let transitionConfig = {
+              transitionSpec,
+              cardStyleInterpolator,
+              headerStyleInterpolator,
+            };
+
+            // When a screen is not the last, it should use next screen's transition config
+            // Many transitions also animate the previous screen, so using 2 different transitions doesn't look right
+            // For example combining a slide and a modal transition would look wrong otherwise
+            // With this approach, combining different transition styles in the same navigator mostly looks right
+            // This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
+            // but majority of the transitions look alright
+            if (index !== self.length - 1) {
+              const nextScene = scenes[index + 1];
+
+              if (nextScene) {
+                const {
+                  transitionSpec = defaultTransitionPreset.transitionSpec,
+                  cardStyleInterpolator = defaultTransitionPreset.cardStyleInterpolator,
+                  headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
+                } = nextScene.descriptor
+                  ? nextScene.descriptor.options
+                  : ({} as StackNavigationOptions);
+
+                transitionConfig = {
+                  transitionSpec,
+                  cardStyleInterpolator,
+                  headerStyleInterpolator,
+                };
+              }
+            }
+
+            const {
+              top: safeAreaInsetTop = insets.top,
+              right: safeAreaInsetRight = insets.right,
+              bottom: safeAreaInsetBottom = insets.bottom,
+              left: safeAreaInsetLeft = insets.left,
+            } = safeAreaInsets || {};
+
             return (
               <MaybeScreen
                 key={route.key}
@@ -380,26 +430,29 @@ export default class Stack extends React.Component<Props, State> {
                   index={index}
                   active={index === self.length - 1}
                   focused={focused}
-                  closing={closingRoutes.includes(route.key)}
+                  closing={closingRouteKeys.includes(route.key)}
                   layout={layout}
                   current={current}
                   scene={scene}
                   previousScene={scenes[index - 1]}
                   navigation={navigation}
                   state={state}
+                  safeAreaInsetTop={safeAreaInsetTop}
+                  safeAreaInsetRight={safeAreaInsetRight}
+                  safeAreaInsetBottom={safeAreaInsetBottom}
+                  safeAreaInsetLeft={safeAreaInsetLeft}
                   cardTransparent={cardTransparent}
                   cardOverlayEnabled={cardOverlayEnabled}
                   cardShadowEnabled={cardShadowEnabled}
                   cardStyle={cardStyle}
-                  gestureEnabled={index !== 0 && getGesturesEnabled({ route })}
                   onPageChangeStart={onPageChangeStart}
                   onPageChangeConfirm={onPageChangeConfirm}
                   onPageChangeCancel={onPageChangeCancel}
                   gestureResponseDistance={gestureResponseDistance}
                   floatingHeaderHeight={floatingHeaderHeights[route.key]}
-                  hasCustomHeader={header === null}
                   getPreviousRoute={getPreviousRoute}
                   headerMode={headerMode}
+                  headerShown={headerShown}
                   headerTransparent={headerTransparent}
                   renderHeader={renderHeader}
                   renderScene={renderScene}
@@ -408,10 +461,10 @@ export default class Stack extends React.Component<Props, State> {
                   onTransitionStart={this.handleTransitionStart}
                   onTransitionEnd={this.handleTransitionEnd}
                   onGoBack={onGoBack}
+                  gestureEnabled={index !== 0 && getGesturesEnabled({ route })}
+                  gestureVelocityImpact={gestureVelocityImpact}
                   gestureDirection={gestureDirection}
-                  transitionSpec={transitionSpec}
+                  {...transitionConfig}
-                  cardStyleInterpolator={cardStyleInterpolator}
-                  headerStyleInterpolator={headerStyleInterpolator}
                 />
               </MaybeScreen>
             );
@@ -421,6 +474,7 @@ export default class Stack extends React.Component<Props, State> {
           ? renderHeader({
               mode: 'float',
               layout,
+              insets: { top, right, bottom, left },
               scenes,
               state,
               getPreviousRoute,

packages/stack/src/views/Stack/StackItem.tsx

@@ -24,11 +24,14 @@ type Props = TransitionPreset & {
   scene: Scene<Route<string>>;
   state: StackNavigationState;
   navigation: StackNavigationHelpers;
+  safeAreaInsetTop: number;
+  safeAreaInsetRight: number;
+  safeAreaInsetBottom: number;
+  safeAreaInsetLeft: number;
   cardTransparent?: boolean;
   cardOverlayEnabled?: boolean;
   cardShadowEnabled?: boolean;
   cardStyle?: StyleProp<ViewStyle>;
-  gestureEnabled?: boolean;
   getPreviousRoute: (props: {
     route: Route<string>;
   }) => Route<string> | undefined;
@@ -45,14 +48,16 @@ type Props = TransitionPreset & {
   onPageChangeStart?: () => void;
   onPageChangeConfirm?: () => void;
   onPageChangeCancel?: () => void;
+  gestureEnabled?: boolean;
   gestureResponseDistance?: {
     vertical?: number;
     horizontal?: number;
   };
+  gestureVelocityImpact?: number;
   headerMode: StackHeaderMode;
+  headerShown?: boolean;
   headerTransparent?: boolean;
   floatingHeaderHeight: number;
-  hasCustomHeader: boolean;
 };
 
 export default class StackItem extends React.PureComponent<Props> {
@@ -100,16 +105,21 @@ export default class StackItem extends React.PureComponent<Props> {
       state,
       scene,
       previousScene,
+      safeAreaInsetTop,
+      safeAreaInsetRight,
+      safeAreaInsetBottom,
+      safeAreaInsetLeft,
       cardTransparent,
       cardOverlayEnabled,
       cardShadowEnabled,
       cardStyle,
-      gestureEnabled,
       onPageChangeStart,
       onPageChangeCancel,
+      gestureEnabled,
       gestureResponseDistance,
+      gestureVelocityImpact,
       floatingHeaderHeight,
-      hasCustomHeader,
+      headerShown,
       getPreviousRoute,
       headerMode,
       headerTransparent,
@@ -121,6 +131,13 @@ export default class StackItem extends React.PureComponent<Props> {
       headerStyleInterpolator,
     } = this.props;
 
+    const insets = {
+      top: safeAreaInsetTop,
+      right: safeAreaInsetRight,
+      bottom: safeAreaInsetBottom,
+      left: safeAreaInsetLeft,
+    };
+
     return (
       <Card
         index={index}
@@ -128,6 +145,7 @@ export default class StackItem extends React.PureComponent<Props> {
         transparent={cardTransparent}
         gestureDirection={gestureDirection}
         layout={layout}
+        insets={insets}
         current={current}
         next={scene.progress.next}
         closing={closing}
@@ -135,18 +153,19 @@ export default class StackItem extends React.PureComponent<Props> {
         onClose={this.handleClose}
         overlayEnabled={cardOverlayEnabled}
         shadowEnabled={cardShadowEnabled}
-        gestureEnabled={gestureEnabled}
         onTransitionStart={this.handleTransitionStart}
         onGestureBegin={onPageChangeStart}
         onGestureCanceled={onPageChangeCancel}
+        gestureEnabled={gestureEnabled}
         gestureResponseDistance={gestureResponseDistance}
+        gestureVelocityImpact={gestureVelocityImpact}
         transitionSpec={transitionSpec}
         styleInterpolator={cardStyleInterpolator}
         accessibilityElementsHidden={!focused}
         importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
         pointerEvents="box-none"
         containerStyle={
-          headerMode === 'float' && !headerTransparent && !hasCustomHeader
+          headerMode === 'float' && !headerTransparent && headerShown !== false
             ? { marginTop: floatingHeaderHeight }
             : null
         }
@@ -161,6 +180,7 @@ export default class StackItem extends React.PureComponent<Props> {
             ? renderHeader({
                 mode: 'screen',
                 layout,
+                insets,
                 scenes: [previousScene, scene],
                 state,
                 getPreviousRoute,

packages/stack/src/views/Stack/StackView.tsx

@@ -30,12 +30,16 @@ type Props = StackNavigationConfig & {
 type State = {
   // Local copy of the routes which are actually rendered
   routes: Route<string>[];
+  // Previous routes, to compare whether routes have changed or not
+  previousRoutes: Route<string>[];
+  // Previous descriptors, to compare whether descriptors have changed or not
+  previousDescriptors: StackDescriptorMap;
   // List of routes being opened, we need to animate pushing of these new routes
-  opening: string[];
+  openingRouteKeys: string[];
   // List of routes being closed, we need to animate popping of these routes
-  closing: string[];
+  closingRouteKeys: string[];
   // List of routes being replaced, we need to keep a copy until the new route animates in
-  replacing: string[];
+  replacingRouteKeys: string[];
   // Since the local routes can vary from the routes from props, we need to keep the descriptors for old routes
   // Otherwise we won't be able to access the options for routes that were removed
   descriptors: StackDescriptorMap;
@@ -46,6 +50,28 @@ class StackView extends React.Component<Props, State> {
     props: Readonly<Props>,
     state: Readonly<State>
   ) {
+    // If there was no change in routes, we don't need to compute anything
+    if (props.state.routes === state.previousRoutes && state.routes.length) {
+      if (props.descriptors !== state.previousDescriptors) {
+        const descriptors = state.routes.reduce<StackDescriptorMap>(
+          (acc, route) => {
+            acc[route.key] =
+              props.descriptors[route.key] || state.descriptors[route.key];
+
+            return acc;
+          },
+          {}
+        );
+
+        return {
+          previousDescriptors: props.descriptors,
+          descriptors,
+        };
+      }
+
+      return null;
+    }
+
     // Here we determine which routes were added or removed to animate them
     // We keep a copy of the route being removed in local state to be able to animate it
 
@@ -56,31 +82,23 @@ class StackView extends React.Component<Props, State> {
           props.state.routes.slice(0, props.state.index + 1)
         : props.state.routes;
 
-    if (props.state.index < props.state.routes.length - 1) {
-      console.warn(
-        'StackRouter provided invalid state, index should always be the last route in the stack.'
-      );
-    }
-
-    // If there was no change in routes, we don't need to compute anything
-    if (routes === state.routes || !state.routes.length) {
-      return {
-        routes,
-        descriptors: props.descriptors,
-      };
-    }
-
     // Now we need to determine which routes were added and removed
-    let { opening, closing, replacing } = state;
+    let {
+      openingRouteKeys,
+      closingRouteKeys,
+      replacingRouteKeys,
+      previousRoutes,
+    } = state;
 
-    const previousRoutes = state.routes.filter(
+    const previousFocusedRoute = previousRoutes[previousRoutes.length - 1] as
-      route => !closing.includes(route.key) && !replacing.includes(route.key)
+      | Route<string>
-    );
+      | undefined;
-
-    const previousFocusedRoute = previousRoutes[previousRoutes.length - 1];
     const nextFocusedRoute = routes[routes.length - 1];
 
-    if (previousFocusedRoute.key !== nextFocusedRoute.key) {
+    if (
+      previousFocusedRoute &&
+      previousFocusedRoute.key !== nextFocusedRoute.key
+    ) {
       // We only need to animate routes if the focused route changed
       // Animating previous routes won't be visible coz the focused route is on top of everything
 
@@ -99,22 +117,33 @@ class StackView extends React.Component<Props, State> {
 
         if (
           isAnimationEnabled(nextFocusedRoute) &&
-          !opening.includes(nextFocusedRoute.key)
+          !openingRouteKeys.includes(nextFocusedRoute.key)
         ) {
           // In this case, we need to animate pushing the focused route
           // We don't care about animating any other added routes because they won't be visible
-          opening = [...opening, nextFocusedRoute.key];
+          openingRouteKeys = [...openingRouteKeys, nextFocusedRoute.key];
 
-          closing = closing.filter(key => key !== nextFocusedRoute.key);
+          closingRouteKeys = closingRouteKeys.filter(
-          replacing = replacing.filter(key => key !== nextFocusedRoute.key);
+            key => key !== nextFocusedRoute.key
+          );
+          replacingRouteKeys = replacingRouteKeys.filter(
+            key => key !== nextFocusedRoute.key
+          );
 
           if (!routes.find(r => r.key === previousFocusedRoute.key)) {
             // The previous focused route isn't present in state, we treat this as a replace
 
-            replacing = [...replacing, previousFocusedRoute.key];
+            replacingRouteKeys = [
+              ...replacingRouteKeys,
+              previousFocusedRoute.key,
+            ];
 
-            opening = opening.filter(key => key !== previousFocusedRoute.key);
+            openingRouteKeys = openingRouteKeys.filter(
-            closing = closing.filter(key => key !== previousFocusedRoute.key);
+              key => key !== previousFocusedRoute.key
+            );
+            closingRouteKeys = closingRouteKeys.filter(
+              key => key !== previousFocusedRoute.key
+            );
 
             // Keep the old route in state because it's visible under the new route, and removing it will feel abrupt
             // We need to insert it just before the focused one (the route being pushed)
@@ -128,14 +157,18 @@ class StackView extends React.Component<Props, State> {
 
         if (
           isAnimationEnabled(previousFocusedRoute) &&
-          !closing.includes(previousFocusedRoute.key)
+          !closingRouteKeys.includes(previousFocusedRoute.key)
         ) {
           // Sometimes a route can be closed before the opening animation finishes
           // So we also need to remove it from the opening list
-          closing = [...closing, previousFocusedRoute.key];
+          closingRouteKeys = [...closingRouteKeys, previousFocusedRoute.key];
 
-          opening = opening.filter(key => key !== previousFocusedRoute.key);
+          openingRouteKeys = openingRouteKeys.filter(
-          replacing = replacing.filter(key => key !== previousFocusedRoute.key);
+            key => key !== previousFocusedRoute.key
+          );
+          replacingRouteKeys = replacingRouteKeys.filter(
+            key => key !== previousFocusedRoute.key
+          );
 
           // Keep a copy of route being removed in the state to be able to animate it
           routes = [...routes, previousFocusedRoute];
@@ -145,14 +178,15 @@ class StackView extends React.Component<Props, State> {
         // i.e. the currently focused route already existed and the previously focused route still exists
         // We don't know how to animate this
       }
-    } else {
+    } else if (replacingRouteKeys.length || closingRouteKeys.length) {
       // Keep the routes we are closing or replacing
       routes = routes.slice();
       routes.splice(
         routes.length - 1,
         0,
         ...state.routes.filter(
-          ({ key }) => replacing.includes(key) || closing.includes(key)
+          ({ key }) =>
+            replacingRouteKeys.includes(key) || closingRouteKeys.includes(key)
         )
       );
     }
@@ -161,30 +195,31 @@ class StackView extends React.Component<Props, State> {
       throw new Error(`There should always be at least one route.`);
     }
 
-    const descriptors = routes.reduce(
+    const descriptors = routes.reduce<StackDescriptorMap>((acc, route) => {
-      (acc, route) => {
+      acc[route.key] =
-        acc[route.key] =
+        props.descriptors[route.key] || state.descriptors[route.key];
-          props.descriptors[route.key] || state.descriptors[route.key];
 
-        return acc;
+      return acc;
-      },
+    }, {});
-      {} as StackDescriptorMap
-    );
 
     return {
       routes,
-      opening,
+      previousRoutes: props.state.routes,
-      closing,
+      previousDescriptors: props.descriptors,
-      replacing,
+      openingRouteKeys,
+      closingRouteKeys,
+      replacingRouteKeys,
       descriptors,
     };
   }
 
   state: State = {
     routes: [],
-    opening: [],
+    previousRoutes: [],
-    closing: [],
+    previousDescriptors: {},
-    replacing: [],
+    openingRouteKeys: [],
+    closingRouteKeys: [],
+    replacingRouteKeys: [],
     descriptors: {},
   };
 
@@ -209,11 +244,12 @@ class StackView extends React.Component<Props, State> {
   };
 
   private getPreviousRoute = ({ route }: { route: Route<string> }) => {
-    const { closing, replacing } = this.state;
+    const { closingRouteKeys, replacingRouteKeys } = this.state;
     const routes = this.state.routes.filter(
       r =>
         r.key === route.key ||
-        (!closing.includes(r.key) && !replacing.includes(r.key))
+        (!closingRouteKeys.includes(r.key) &&
+          !replacingRouteKeys.includes(r.key))
     );
     const index = routes.findIndex(r => r.key === route.key);
 
@@ -249,12 +285,12 @@ class StackView extends React.Component<Props, State> {
 
   private handleOpenRoute = ({ route }: { route: Route<string> }) => {
     this.setState(state => ({
-      routes: state.replacing.length
+      routes: state.replacingRouteKeys.length
-        ? state.routes.filter(r => !state.replacing.includes(r.key))
+        ? state.routes.filter(r => !state.replacingRouteKeys.includes(r.key))
         : state.routes,
-      opening: state.opening.filter(key => key !== route.key),
+      openingRouteKeys: state.openingRouteKeys.filter(key => key !== route.key),
-      closing: state.closing.filter(key => key !== route.key),
+      closingRouteKeys: state.closingRouteKeys.filter(key => key !== route.key),
-      replacing: [],
+      replacingRouteKeys: [],
     }));
   };
 
@@ -265,8 +301,8 @@ class StackView extends React.Component<Props, State> {
     // @ts-ignore
     this.setState(state => ({
       routes: state.routes.filter(r => r.key !== route.key),
-      opening: state.opening.filter(key => key !== route.key),
+      openingRouteKeys: state.openingRouteKeys.filter(key => key !== route.key),
-      closing: state.closing.filter(key => key !== route.key),
+      closingRouteKeys: state.closingRouteKeys.filter(key => key !== route.key),
     }));
   };
 
@@ -281,7 +317,12 @@ class StackView extends React.Component<Props, State> {
       ...rest
     } = this.props;
 
-    const { routes, descriptors, opening, closing } = this.state;
+    const {
+      routes,
+      descriptors,
+      openingRouteKeys,
+      closingRouteKeys,
+    } = this.state;
 
     const headerMode =
       mode !== 'modal' && Platform.OS === 'ios' ? 'float' : 'screen';
@@ -296,8 +337,8 @@ class StackView extends React.Component<Props, State> {
               getPreviousRoute={this.getPreviousRoute}
               getGesturesEnabled={this.getGesturesEnabled}
               routes={routes}
-              openingRoutes={opening}
+              openingRouteKeys={openingRouteKeys}
-              closingRoutes={closing}
+              closingRouteKeys={closingRouteKeys}
               onGoBack={this.handleGoBack}
               onOpenRoute={this.handleOpenRoute}
               onCloseRoute={this.handleCloseRoute}

yarn.lock

@@ -864,12 +864,11 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@callstack/react-theme-provider@^3.0.2":
+"@callstack/react-theme-provider@^3.0.5":
-  version "3.0.3"
+  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.3.tgz#f964dda28cd6e731c3fbcf916b0579c6f9fb2db7"
+  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.5.tgz#a173e455e9603c9c45357a3b6ace1273086527ca"
-  integrity sha512-B+9JBK7zsND/AdVkjwHvbb4cR05fJofLFG30hOeoXke8WkKAWN36yFljauAhI8qwlXlGFGZMYE1wQvsqBSccrA==
+  integrity sha512-Iec+ybWN0FvNj87sD3oWo/49edGUP0UOSdMnzCJEFJIDYr992ECIuOV89burAAh2/ibPCxgLiK6dmgv2mO/8Tg==
   dependencies:
-    "@types/hoist-non-react-statics" "^3.3.1"
     deepmerge "^3.2.0"
     hoist-non-react-statics "^3.3.0"
 
@@ -1097,23 +1096,23 @@
     mv "~2"
     safe-json-stringify "~1"
 
-"@expo/config@^2.1.5", "@expo/config@^2.1.6":
+"@expo/config@^2.2.0":
-  version "2.1.6"
+  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@expo/config/-/config-2.1.6.tgz#05144899e1438d7f125f5115c473f514ad8b39b9"
+  resolved "https://registry.yarnpkg.com/@expo/config/-/config-2.2.0.tgz#48febdc56cf44bbcd7a3ccca6d246c4e66151db3"
-  integrity sha512-P2tIT9rs2ljE8nC2cOclnlJtDdAhtnDsixHal4n3vGLzWHSJ6M/Zaa/F4BwoOBRe0D/+lB11P9vs85aFYWw3uw==
+  integrity sha512-QW01ga/M3z4jXqDCqdPlUflOHoBznb2saOFNeW9kVNhiSyh4Qv0yBekXcPNTQ9xPuYoOlGxMqh/uqKBimMYyuQ==
   dependencies:
-    "@expo/json-file" "^8.1.12"
+    "@expo/json-file" "^8.2.0"
     find-yarn-workspace-root "^1.2.1"
     fs-extra "^7.0.1"
     resolve-from "^5.0.0"
     slugify "^1.3.4"
 
-"@expo/dev-tools@^0.6.2":
+"@expo/dev-tools@^0.6.6":
-  version "0.6.4"
+  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/@expo/dev-tools/-/dev-tools-0.6.4.tgz#7c282ae434a36b94ef678ed8f4f9a0b0f7b88f01"
+  resolved "https://registry.yarnpkg.com/@expo/dev-tools/-/dev-tools-0.6.6.tgz#6ea36ff2ddf8d40efc68e9f235d63e446979a90c"
-  integrity sha512-5ePx75GnGYCRRZgEOqK7aH7VzWKR9/rYXEUHuw/2EeDYVQv7VGkwtzqnEgLWrnJFxnQK90UDHI6R4H9lHXJyOQ==
+  integrity sha512-UF6GKNSBigwmwyt9y4niHyKemcq2inChnpKwJKL9kJJ4BiPGPheqswhMxZasNeyh4ds2vQmjU8jvUjQOsKDRsw==
   dependencies:
-    "@expo/config" "^2.1.6"
+    "@expo/config" "^2.2.0"
     base64url "3.0.1"
     express "4.16.4"
     freeport-async "1.1.1"
@@ -1133,10 +1132,10 @@
   optionalDependencies:
     sharp-cli "1.10.0"
 
-"@expo/json-file@^8.1.12", "@expo/json-file@^8.1.12-alpha.0":
+"@expo/json-file@^8.2.0":
-  version "8.1.12"
+  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@expo/json-file/-/json-file-8.1.12.tgz#f7128f0fc63f2726efd85a27e3c2e31193148d6c"
+  resolved "https://registry.yarnpkg.com/@expo/json-file/-/json-file-8.2.0.tgz#efb82b9a4e092aadb629451e60d0893369b7689e"
-  integrity sha512-TSn31UGQ5N40c5a4uyruxw0JAY40CUjjXdH5YeUyBSX1wqOth4YujHnGCuHyKH1ViSQQ+qinN2OpT+2294GV3g==
+  integrity sha512-Kr2zkZiPmBWq19yt36G9z24CXs4L3QHhHLJtDRvIcP53ErDlZ4yj4RqCmt1T00YezOcfwk1QMOcSzbEQX1qZxA==
   dependencies:
     "@babel/code-frame" "^7.0.0-beta.44"
     fs-extra "^8.0.1"
@@ -1261,15 +1260,15 @@
   dependencies:
     cross-spawn "^6.0.5"
 
-"@expo/traveling-fastlane-darwin@1.9.11":
+"@expo/traveling-fastlane-darwin@1.10.0":
-  version "1.9.11"
+  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@expo/traveling-fastlane-darwin/-/traveling-fastlane-darwin-1.9.11.tgz#9064cfe3c266d5dc12fcc1fbed5acadc3f965870"
+  resolved "https://registry.yarnpkg.com/@expo/traveling-fastlane-darwin/-/traveling-fastlane-darwin-1.10.0.tgz#d7d250fdcc485263d29c9a4e524370fc2c9be5e9"
-  integrity sha512-nvZSe2FI8cFcv27uosrmjIhfwbuClG+rbMe9OswsdhIVaJkYvF8LN8gIJ/Fsi2S+20GQizxjC11DFq++MOCm+w==
+  integrity sha512-Ry9gHhDIPjSnP5lvtUcR7LoE5vU2Ngn893B22PYEk1RuwJG5m7ezKSGyXjs3W1WVUvPW/2+ikF1YjrNyPAIrqQ==
 
-"@expo/traveling-fastlane-linux@1.9.11":
+"@expo/traveling-fastlane-linux@1.10.0":
-  version "1.9.11"
+  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@expo/traveling-fastlane-linux/-/traveling-fastlane-linux-1.9.11.tgz#a26a94c0e4b118130da27a7edb3410d67706b81b"
+  resolved "https://registry.yarnpkg.com/@expo/traveling-fastlane-linux/-/traveling-fastlane-linux-1.10.0.tgz#ef3914a34f290bcc4d60dd1e1d090bb11c32a4bd"
-  integrity sha512-xCHnqKfwWYygQfRbi9MGNSG28EHKDtzMB+QDklSH1GeD90TA0beAjlNF+Z+KPxj28s3WZlQr9yw1AqBS7aipcw==
+  integrity sha512-+9Mjvs9m15Meexp00A2JDXLfQHwcgua1dI0ldqVboHblzTACTMvXrfHmewxBoIBLZ45c1lLuIHD7+3UAnBHVCA==
 
 "@expo/vector-icons@^10.0.0", "@expo/vector-icons@^10.0.2":
   version "10.0.5"
@@ -1278,15 +1277,15 @@
   dependencies:
     lodash "^4.17.4"
 
-"@expo/webpack-config@^0.7.8":
+"@expo/webpack-config@^0.7.12":
-  version "0.7.9"
+  version "0.7.12"
-  resolved "https://registry.yarnpkg.com/@expo/webpack-config/-/webpack-config-0.7.9.tgz#507ca5144efcc893553a867e60092d5d6ae0ebb2"
+  resolved "https://registry.yarnpkg.com/@expo/webpack-config/-/webpack-config-0.7.12.tgz#5b31e51b906101df81196c8519d2b23d97fff226"
-  integrity sha512-8nImzNpmJvk50MitmEEvZEZYMBjB5ivj/Tk3qlwe1+stwk9RWs0BkqE68ZUb6puEm+59PvhX4K6G0A434hH0gg==
+  integrity sha512-FIMtCZMvmJ37wTBXIfetCcdGb/h4f4ivYfRRbfCPK9jXFuUVIyKK5+V6Oc47AmMt49eFl7uAJUnkyvhgPmG0QA==
   dependencies:
     "@babel/core" "^7.0.0"
     "@babel/runtime" "^7.3.4"
-    "@expo/config" "^2.1.6"
+    "@expo/config" "^2.2.0"
-    "@expo/webpack-pwa-manifest-plugin" "^1.2.6"
+    "@expo/webpack-pwa-manifest-plugin" "^1.2.7"
     "@types/yup" "^0.26.24"
     babel-loader "^8.0.5"
     brotli-webpack-plugin "^1.1.0"
@@ -1321,12 +1320,12 @@
     workbox-webpack-plugin "^3.6.3"
     yup "^0.27.0"
 
-"@expo/webpack-pwa-manifest-plugin@^1.2.6":
+"@expo/webpack-pwa-manifest-plugin@^1.2.7":
-  version "1.2.6"
+  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/@expo/webpack-pwa-manifest-plugin/-/webpack-pwa-manifest-plugin-1.2.6.tgz#095a51bc9d69502e5436ac258c2ebfed6514666b"
+  resolved "https://registry.yarnpkg.com/@expo/webpack-pwa-manifest-plugin/-/webpack-pwa-manifest-plugin-1.2.7.tgz#cfee555f53ccc2745f9a2ed5185803ed8735292d"
-  integrity sha512-GO2LiqOr/dS8xlDP5lpNqbWxqh/2eUn0QJ4neX7Y+psI+Eg9kAOrxAWDNOFAtaSo+lpLfT+hB/7DzXbWZ3FWHw==
+  integrity sha512-TdLXFYr4i8nNj/IbbU9DsL4Nxg3D0iGaakkNIscC3rcwphO2yLXQXqsbtIIP/9NU8EIzmC3VoeBN9IqUYd1AoQ==
   dependencies:
-    "@expo/config" "^2.1.6"
+    "@expo/config" "^2.2.0"
     "@expo/image-utils" "^0.2.6"
     is-color "^1.0.2"
     mime "^2.4.0"
@@ -1344,20 +1343,20 @@
     pouchdb-collections "^1.0.1"
     tiny-queue "^0.2.1"
 
-"@expo/xdl@^56.2.4":
+"@expo/xdl@^56.3.0":
-  version "56.2.6"
+  version "56.3.0"
-  resolved "https://registry.yarnpkg.com/@expo/xdl/-/xdl-56.2.6.tgz#c2bf2cf45f1798c318551df45235801a97dc3038"
+  resolved "https://registry.yarnpkg.com/@expo/xdl/-/xdl-56.3.0.tgz#cd7b04b1be76f11b513a6d3322525cb195df2e0f"
-  integrity sha512-5scnyNmJk1I9iin2BXj/RIs4gwSrWGTIYbabEsUiywepv9LnjpleAELR9K7negpw6lL8nnkHcUxvMIhUrA3h8Q==
+  integrity sha512-XCouU2dtIKRERnC46P0MRDNw7FC8Hl8J31IM2jlE2B3IDBvs9F+qyXKBYpw0Ne+XIUJzY7PefQLpbRc3O2C4eQ==
   dependencies:
     "@expo/bunyan" "3.0.2"
-    "@expo/config" "^2.1.6"
+    "@expo/config" "^2.2.0"
     "@expo/image-utils" "^0.2.6"
-    "@expo/json-file" "^8.1.12"
+    "@expo/json-file" "^8.2.0"
     "@expo/ngrok" "2.4.3"
     "@expo/osascript" "^2.0.6-alpha.0"
     "@expo/schemer" "^1.2.8"
     "@expo/spawn-async" "1.5.0"
-    "@expo/webpack-config" "^0.7.8"
+    "@expo/webpack-config" "^0.7.12"
     "@types/webpack" "^4.32.1"
     "@types/webpack-dev-server" "^3.1.7"
     analytics-node "3.3.0"
@@ -1381,6 +1380,7 @@
     idx "2.4.0"
     indent-string "3.2.0"
     inquirer "5.2.0"
+    internal-ip "4.3.0"
     invariant "2.2.4"
     joi "14.0.4"
     latest-version "5.1.0"
@@ -2266,18 +2266,18 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@nodelib/fs.scandir@2.1.2":
+"@nodelib/fs.scandir@2.1.3":
-  version "2.1.2"
+  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.2.tgz#1f981cd5b83e85cfdeb386fc693d4baab392fa54"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
-  integrity sha512-wrIBsjA5pl13f0RN4Zx4FNWmU71lv03meGKnqRUoCyan17s4V3WL92f3w3AIuWbNnpcrQyFBU5qMavJoB8d27w==
+  integrity sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==
   dependencies:
-    "@nodelib/fs.stat" "2.0.2"
+    "@nodelib/fs.stat" "2.0.3"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@2.0.2", "@nodelib/fs.stat@^2.0.1":
+"@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.1":
-  version "2.0.2"
+  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.2.tgz#2762aea8fe78ea256860182dcb52d61ee4b8fda6"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3"
-  integrity sha512-z8+wGWV2dgUhLqrtRYa03yDx4HWMvXKi1z8g3m2JyxAx8F7xk74asqPk5LAETjqDSGLFML/6CDl0+yFunSYicw==
+  integrity sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==
 
 "@nodelib/fs.stat@^1.1.2":
   version "1.1.3"
@@ -2285,11 +2285,11 @@
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
 "@nodelib/fs.walk@^1.2.1":
-  version "1.2.3"
+  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.3.tgz#a555dc256acaf00c62b0db29529028dd4d4cb141"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz#011b9202a70a6366e436ca5c065844528ab04976"
-  integrity sha512-l6t8xEhfK9Sa4YO5mIRdau7XSOADfmh3jCr0evNHdY+HNkW6xuQhgMH7D73VV6WpZOagrW0UludvMTiifiwTfA==
+  integrity sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==
   dependencies:
-    "@nodelib/fs.scandir" "2.1.2"
+    "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
 "@octokit/endpoint@^5.1.0":
@@ -2327,9 +2327,9 @@
     universal-user-agent "^4.0.0"
 
 "@octokit/rest@^16.28.4":
-  version "16.30.1"
+  version "16.30.2"
-  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-16.30.1.tgz#03e6dfb93e9a9cd2b3bacb95c49a8c7923f42ad0"
+  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-16.30.2.tgz#da379a6f4f7e7e152733d38a9cba21da5c76ef7c"
-  integrity sha512-1n2QzTbbaBXNLpx7WHlcsSMdJvxSdKmerXQm+bMYlKDbQM19uq446ZpGs7Ynq5SsdLj1usIfgJ9gJf4LtcWkDw==
+  integrity sha512-6YN4N/uWjjBUx4TNfWAxkrzCy1i7M4agdHs2g/sOTdSY/Va3T1v/f/ME5EnNfd64AMpBWee6rcLHQe5fki89lg==
   dependencies:
     "@octokit/request" "^5.0.0"
     "@octokit/request-error" "^1.0.2"
@@ -2529,14 +2529,6 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/hoist-non-react-statics@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
-  dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-
 "@types/http-proxy-middleware@*":
   version "0.19.3"
   resolved "https://registry.yarnpkg.com/@types/http-proxy-middleware/-/http-proxy-middleware-0.19.3.tgz#b2eb96fbc0f9ac7250b5d9c4c53aade049497d03"
@@ -2618,9 +2610,9 @@
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
 "@types/node@*", "@types/node@^12.0.2":
-  version "12.7.10"
+  version "12.7.11"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.7.10.tgz#942c128c37b5d780aff5441fd457cd7ffdc18b36"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.7.11.tgz#be879b52031cfb5d295b047f5462d8ef1a716446"
-  integrity sha512-ObiPa43kJCkgjG+7usRCoxWhqKCmT5JWvi+8bg54KMkP2CvTliYLmKR9uHLaz+51JDOX/8MjWc6Xz18xHTs7XQ==
+  integrity sha512-Otxmr2rrZLKRYIybtdG/sgeO+tHY20GxeDjcGmUnmmlCWyEnv2a2x1ZXBo3BTec4OiTXMQCiazB8NMBf0iRlFw==
 
 "@types/node@^9.4.6":
   version "9.6.52"
@@ -2661,17 +2653,25 @@
     "@types/react-native" "*"
 
 "@types/react-native@*", "@types/react-native@^0.60.17":
-  version "0.60.17"
+  version "0.60.18"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.17.tgz#3a4c2f3ebe1942fb267bba9374f0533c0ece261c"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.18.tgz#00cee391af17f2f1c0936c2143ffbd97c65fddfb"
-  integrity sha512-dvPdLYxrU74bU14GvGV+f1EMjyD6L2iDenEzDfUBWhxn7KKRgkWb289r2EIN+10XqvRP+H7YBgl+AoEHEfkcTA==
+  integrity sha512-l/mZQ6r1Y3Owokp00wGZDTiSSkCbGGNscAsuc2ZFa86p1nBmYGot/a5tYvWrw1mRSbUqYb0/J/NqQZwoGoB+3A==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/react" "*"
+
+"@types/react-native@^0.60.19":
+  version "0.60.19"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.19.tgz#4d58516f9e981c3f477ad48727331e31a0792aae"
+  integrity sha512-1Qq1EQn/bi7dnsdrZJu0f9MK18KZrEmLGMfw3V9Im5As4uwFUTCIkD4LnFJkfQtRvtJQN1cOQri6MTqT7d9fkg==
   dependencies:
     "@types/prop-types" "*"
     "@types/react" "*"
 
 "@types/react@*", "@types/react@^16.9.4":
-  version "16.9.4"
+  version "16.9.5"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.4.tgz#de8cf5e5e2838659fb78fa93181078469eeb19fc"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.5.tgz#079dabd918b19b32118c25fd00a786bb6d0d5e51"
-  integrity sha512-ItGNmJvQ0IvWt8rbk5PLdpdQhvBVxAaXI9hDlx7UMd8Ie1iMIuwMNiKeTfmVN517CdplpyXvA22X4zm4jGGZnw==
+  integrity sha512-jQ12VMiFOWYlp+j66dghOWcmDDwhca0bnlcTxS4Qz/fh5gi6wpaZDthPEu/Gc/YlAuO87vbiUXL8qKstFvuOaA==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
@@ -3140,12 +3140,12 @@ agentkeepalive@^3.4.1:
     humanize-ms "^1.2.1"
 
 aggregate-error@^3.0.0:
-  version "3.0.0"
+  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.0.0.tgz#5b5a3c95e9095f311c9ab16c19fb4f3527cd3f79"
+  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.0.1.tgz#db2fe7246e536f40d9b5442a39e117d7dd6a24e0"
-  integrity sha512-yKD9kEoJIR+2IFqhMwayIBgheLYbB3PS2OBhWae1L/ODTd/JF/30cW0bc9TqzRL3k4U41Dieu3BF4I29p8xesA==
+  integrity sha512-quoaXsZ9/BLNae5yiNoUz+Nhkwz83GhWwtYFglcjEQB2NDHCIpApbqXxIFnm4Pq/Nvhrsq5sYJFyohrrxnTGAA==
   dependencies:
     clean-stack "^2.0.0"
-    indent-string "^3.2.0"
+    indent-string "^4.0.0"
 
 ajv-errors@^1.0.0:
   version "1.0.1"
@@ -3401,7 +3401,7 @@ array-filter@~0.0.0:
   resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
   integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw=
 
-array-find-index@^1.0.1:
+array-find-index@^1.0.1, array-find-index@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
   integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
@@ -5134,7 +5134,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.6.3:
+create-react-class@^15.6.2, create-react-class@^15.6.3:
   version "15.6.3"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
   integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
@@ -5203,6 +5203,14 @@ css-declaration-sorter@^4.0.1:
     postcss "^7.0.1"
     timsort "^0.3.0"
 
+css-in-js-utils@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
+  integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+    isobject "^3.0.1"
+
 css-loader@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-2.1.1.tgz#d8254f72e412bb2238bb44dd674ffbef497333ea"
@@ -5507,6 +5515,13 @@ dedent@^0.7.0:
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
 
+deep-assign@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/deep-assign/-/deep-assign-3.0.0.tgz#c8e4c4d401cba25550a2f0f486a2e75bc5f219a2"
+  integrity sha512-YX2i9XjJ7h5q/aQ/IM9PEwEnDqETAIYbggmdDB3HLTlSgo1CxPsj6pvhPG68rq6SVE0+p+6Ywsm5fTYNrYtBWw==
+  dependencies:
+    is-obj "^1.0.0"
+
 deep-diff@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-1.0.2.tgz#afd3d1f749115be965e89c63edc7abb1506b9c26"
@@ -5606,6 +5621,14 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
+del-cli@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/del-cli/-/del-cli-2.0.0.tgz#e9a778398863c26796d85409b9891f98b0122cd1"
+  integrity sha512-IREsO6mjSTxxvWLKMMUi1G0izhqEBx7qeDkOJ6H3+TJl8gQl6x5C5hK4Sm1GJ51KodUMR6O7HuIhnF24Edua3g==
+  dependencies:
+    del "^4.1.1"
+    meow "^5.0.0"
+
 del-cli@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/del-cli/-/del-cli-3.0.0.tgz#327a15d4c18d6b7e5c849a53ef0d17901bc28197"
@@ -5626,7 +5649,7 @@ del@^3.0.0:
     pify "^3.0.0"
     rimraf "^2.2.8"
 
-del@^4.1.0:
+del@^4.1.0, del@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"
   integrity sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==
@@ -5706,6 +5729,11 @@ detect-indent@^5.0.0:
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
   integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=
 
+detect-indent@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
+  integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
+
 detect-libc@^1.0.2, detect-libc@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
@@ -5716,6 +5744,11 @@ detect-newline@^2.1.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
 
+detect-newline@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.0.0.tgz#8ae477c089e51872c264531cd6547719c0b86b2f"
+  integrity sha512-JAP22dVPAqvhdRFFxK1G5GViIokyUn0UWXRNW0ztK96fsqi9cuM8w8ESbSk+T2w5OVorcMcL6m7yUg1RrX+2CA==
+
 detect-node@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
@@ -6052,7 +6085,7 @@ errorhandler@^1.5.0:
     accepts "~1.3.7"
     escape-html "~1.0.3"
 
-es-abstract@^1.11.0, es-abstract@^1.12.0, es-abstract@^1.5.1, es-abstract@^1.7.0:
+es-abstract@^1.12.0, es-abstract@^1.15.0, es-abstract@^1.5.1, es-abstract@^1.7.0:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.15.0.tgz#8884928ec7e40a79e3c9bc812d37d10c8b24cc57"
   integrity sha512-bhkEqWJ2t2lMeaJDuk7okMkJWI/yqgH/EoGwpcvv0XW9RWQsRspI4wt6xuyuvMvvQE3gg/D9HXppgk21w78GyQ==
@@ -6230,9 +6263,9 @@ eslint-plugin-prettier@^3.1.1:
     prettier-linter-helpers "^1.0.0"
 
 eslint-plugin-react-hooks@^2.1.0:
-  version "2.1.1"
+  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.1.1.tgz#b416390b642113f444ee175b667c3222a045a98e"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.1.2.tgz#1358d2acb2c5e02b7e90c37e611ac258a488e3a7"
-  integrity sha512-AYitPYzwHyKpZKpzMH5sCkld68vP8wn29Lq716h4jk1ll9Gp4BBFoPq/iCjBBT35eXFJvOPjgMlvhIXFB0OhXg==
+  integrity sha512-ZR+AyesAUGxJAyTFlF3MbzeVHAcQTFQt1fFVe5o0dzY/HFoj1dgQDMoIkiM+ltN/HhlHBYX4JpJwYonjxsyQMA==
 
 eslint-plugin-react-native-globals@^0.1.1:
   version "0.1.2"
@@ -6562,18 +6595,18 @@ expo-asset@~7.0.0:
     path-browserify "^1.0.0"
     url-parse "^1.4.4"
 
-expo-cli@^3.1.2:
+expo-cli@^3.3.0:
-  version "3.1.2"
+  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/expo-cli/-/expo-cli-3.1.2.tgz#6b2bf82da5693b141ed1d148e54f7ebe49528a93"
+  resolved "https://registry.yarnpkg.com/expo-cli/-/expo-cli-3.3.0.tgz#8ee8ff5d3addc5386b321f5534306236813c1bd3"
-  integrity sha512-z5Nb5IiI43B7wZugLh4yj2FoN+aSUNLA6xrxZCltZJGdwJcwa/EC6PQv55qQe5jo/4SBk15iQCfCS5AQRfKyrw==
+  integrity sha512-+3XThHXJdFSnm+eG3A44Myxb+K3i39tYyvtFVPsZcGCHBWFQQ2eepBzQyJlcnjRhe5/ElDMLrACAsV+9P5XB1Q==
   dependencies:
     "@expo/bunyan" "3.0.2"
-    "@expo/config" "^2.1.5"
+    "@expo/config" "^2.2.0"
-    "@expo/dev-tools" "^0.6.2"
+    "@expo/dev-tools" "^0.6.6"
-    "@expo/json-file" "^8.1.12-alpha.0"
+    "@expo/json-file" "^8.2.0"
     "@expo/simple-spinner" "1.0.2"
     "@expo/spawn-async" "1.5.0"
-    "@expo/xdl" "^56.2.4"
+    "@expo/xdl" "^56.3.0"
     "@types/untildify" "^3.0.0"
     ansi-regex "^4.1.0"
     axios "0.19.0"
@@ -6585,6 +6618,8 @@ expo-cli@^3.1.2:
     commander "2.17.1"
     dateformat "3.0.3"
     delay-async "1.2.0"
+    detect-indent "^6.0.0"
+    detect-newline "^3.0.0"
     enquirer "2.1.1"
     envinfo "5.10.0"
     es6-error "3.2.0"
@@ -6615,8 +6650,8 @@ expo-cli@^3.1.2:
     validator "10.5.0"
     wordwrap "1.0.0"
   optionalDependencies:
-    "@expo/traveling-fastlane-darwin" "1.9.11"
+    "@expo/traveling-fastlane-darwin" "1.10.0"
-    "@expo/traveling-fastlane-linux" "1.9.11"
+    "@expo/traveling-fastlane-linux" "1.10.0"
 
 expo-constants@~7.0.0:
   version "7.0.0"
@@ -7427,9 +7462,9 @@ get-caller-file@^2.0.1:
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
 get-own-enumerable-property-symbols@^3.0.0:
-  version "3.0.0"
+  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz#b877b49a5c16aefac3655f2ed2ea5b684df8d203"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.1.tgz#6f7764f88ea11e0b514bd9bd860a132259992ca4"
-  integrity sha512-CIJYJC4GGF06TakLg8z4GQKvDsx9EMspVxOYih7LerEL/WosUnFIww45CGfxfeKHqlg3twgUrYRT1O3WQqjGCg==
+  integrity sha512-09/VS4iek66Dh2bctjRkowueRJbY1JDGR1L/zRxO1Qk8Uxs6PnqaNSqalpizPT+CDjre3hnEsuzvhgomz9qYrA==
 
 get-pkg-repo@^1.0.0:
   version "1.4.0"
@@ -8194,6 +8229,11 @@ husky@^3.0.8:
     run-node "^1.0.0"
     slash "^3.0.0"
 
+hyphenate-style-name@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
+  integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
+
 iconv-lite@0.4.23:
   version "0.4.23"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
@@ -8312,12 +8352,12 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
-indent-string@3.2.0, indent-string@^3.0.0, indent-string@^3.2.0:
+indent-string@3.2.0, indent-string@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
   integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
 
-indent-string@4.0.0:
+indent-string@4.0.0, indent-string@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
@@ -8386,6 +8426,13 @@ init-package-json@^1.10.3:
     validate-npm-package-license "^3.0.1"
     validate-npm-package-name "^3.0.0"
 
+inline-style-prefixer@^5.0.3:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-5.1.0.tgz#cb63195f9456dcda25cf59743e45c4d9815b0811"
+  integrity sha512-giteQHPMrApQOSjNSjteO5ZGSGMRf9gas14fRy2lg2buSc1nRnj6o6xuNds5cMTKrkncyrTu3gJn/yflFMVdmg==
+  dependencies:
+    css-in-js-utils "^2.0.0"
+
 inquirer@5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-5.2.0.tgz#db350c2b73daca77ff1243962e9f22f099685726"
@@ -8463,7 +8510,7 @@ inquirer@^6.2.0, inquirer@^6.2.2, inquirer@^6.4.1:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-internal-ip@^4.0.0:
+internal-ip@4.3.0, internal-ip@^4.0.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
   integrity sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==
@@ -9416,7 +9463,7 @@ jest@^24.8.0:
     import-local "^2.0.0"
     jest-cli "^24.9.0"
 
-jetifier@^1.0.0-beta04.2:
+jetifier@^1.0.0-beta04.2, jetifier@^1.6.4:
   version "1.6.4"
   resolved "https://registry.yarnpkg.com/jetifier/-/jetifier-1.6.4.tgz#6159db8e275d97980d26162897a0648b6d4a3222"
   integrity sha512-+f/4OLeqY8RAmXnonI1ffeY1DR8kMNJPhv5WMFehchf7U71cjMQVKkOz1n6asz6kfVoAqKNWJz1A/18i18AcXA==
@@ -11209,6 +11256,11 @@ nopt@^4.0.1:
     abbrev "1"
     osenv "^0.1.4"
 
+normalize-css-color@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/normalize-css-color/-/normalize-css-color-1.0.2.tgz#02991e97cccec6623fe573afbbf0de6a1f3e9f8d"
+  integrity sha1-Apkel8zOxmI/5XOvu/Deah8+n40=
+
 normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5, normalize-package-data@^2.4.0, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -11428,14 +11480,14 @@ object.entries@^1.1.0:
     has "^1.0.3"
 
 object.fromentries@^2.0.0:
-  version "2.0.0"
+  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.0.tgz#49a543d92151f8277b3ac9600f1e930b189d30ab"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.1.tgz#050f077855c7af8ae6649f45c80b16ee2d31e704"
-  integrity sha512-9iLiI6H083uiqUuvzyY6qrlmc/Gz8hLQFOcb/Ri/0xXFkSNS3ctV+CbE6yM2+AnkYfOB3dGjdzC0wrMLIhQICA==
+  integrity sha512-PUQv8Hbg3j2QX0IQYv3iAGCbGcu4yY4KQ92/dhA4sFSixBmSmp13UpDLs6jGK8rBtbmhNNIK99LD2k293jpiGA==
   dependencies:
-    define-properties "^1.1.2"
+    define-properties "^1.1.3"
-    es-abstract "^1.11.0"
+    es-abstract "^1.15.0"
     function-bind "^1.1.1"
-    has "^1.0.1"
+    has "^1.0.3"
 
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
@@ -13006,15 +13058,15 @@ react-devtools-core@^3.6.0:
     shell-quote "^1.6.1"
     ws "^3.3.1"
 
-react-dom@^16.10.1:
+react-dom@~16.8.3:
-  version "16.10.1"
+  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.10.1.tgz#479a6511ba34a429273c213cbc2a9ac4d296dac1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
-  integrity sha512-SmM4ZW0uug0rn95U8uqr52I7UdNf6wdGLeXDmNLfg3y5q5H9eAbdjF5ubQc3bjDyRrvdAB2IKG7X0GzSpnn5Mg==
+  integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.16.1"
+    scheduler "^0.13.6"
 
 react-error-overlay@^6.0.1:
   version "6.0.3"
@@ -13022,9 +13074,9 @@ react-error-overlay@^6.0.1:
   integrity sha512-bOUvMWFQVk5oz8Ded9Xb7WVdEi3QGLC8tH7HmYP0Fdp4Bn3qw0tRFmr5TW6mvahzvmrK4a6bqWGfCevBflP+Xw==
 
 react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
-  version "16.10.1"
+  version "16.10.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.1.tgz#0612786bf19df406502d935494f0450b40b8294f"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab"
-  integrity sha512-BXUMf9sIOPXXZWqr7+c5SeOKJykyVr2u0UDzEf4LNGc6taGkQe1A9DFD07umCIXz45RLr9oAAwZbAJ0Pkknfaw==
+  integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==
 
 react-native-branch@~3.0.1:
   version "3.0.1"
@@ -13050,12 +13102,12 @@ react-native-gesture-handler@~1.3.0:
     invariant "^2.2.2"
     prop-types "^15.5.10"
 
-react-native-paper@^3.0.0-alpha.3:
+react-native-paper@^3.0.0-alpha.7:
-  version "3.0.0-alpha.5"
+  version "3.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-3.0.0-alpha.5.tgz#2a3e23c52ec717d7c6a1df1e7adc1005611b08a2"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-3.0.0-alpha.7.tgz#fbbfe5dc9ef8dbd18932786aa3d7f0479501538b"
-  integrity sha512-LSsmhCIo2EgT9azd1usjBmfGBgNkKOMdHWkFJnwmGrXo/JMxhlD/KMt+GRTz4ZjFWmJu3GO635ihYleSJhW6Mg==
+  integrity sha512-tjqewrUMnucLM4yqMiVtCOnrqilnvDDNr2guIImwsUpJ6HWaJKBEFKqB25SEdMvuo88MWSdA0gyRNtS3WRpS3w==
   dependencies:
-    "@callstack/react-theme-provider" "^3.0.2"
+    "@callstack/react-theme-provider" "^3.0.5"
     color "^3.1.2"
     react-native-safe-area-view "^0.12.0"
 
@@ -13081,10 +13133,10 @@ react-native-safe-area-view@^0.12.0:
   dependencies:
     hoist-non-react-statics "^2.3.1"
 
-react-native-screens@^1.0.0-alpha.22, react-native-screens@~1.0.0-alpha.23:
+react-native-screens@^2.0.0-alpha.5:
-  version "1.0.0-alpha.23"
+  version "2.0.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.23.tgz#25d7ea4d11bda4fcde2d1da7ae50271c6aa636e0"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.5.tgz#5b6a72df959d31ffaf7045cd5eb753477e80689b"
-  integrity sha512-tOxHGQUN83MTmQB4ghoQkibqOdGiX4JQEmeyEv96MKWO/x8T2PJv84ECUos9hD3blPRQwVwSpAid1PPPhrVEaw==
+  integrity sha512-uKVc+JYEC59Dz2RPBI4tnaIB8W6T0dHGY6PjUtvkvaBmZBjfxhpezd3m2t8o913Xarx6EvT2maSH8816+MNJnw==
   dependencies:
     debounce "^1.2.0"
 
@@ -13138,7 +13190,23 @@ react-native-view-shot@2.6.0:
   resolved "https://registry.yarnpkg.com/react-native-view-shot/-/react-native-view-shot-2.6.0.tgz#3b23675826f67658366352c4b97b59a6aded2f43"
   integrity sha512-yO9vWi/11m2hEJl8FrW1SMeVzFfPtMKh20MUInGqlsL0H8Ya2JGGlFfrBzx1KiFR2hFb5OdsTLYNtcVZtJ6pLQ==
 
-react-native@0.59.10, react-native@^0.59.8, react-native@^0.61.2:
+react-native-web@^0.11.7:
+  version "0.11.7"
+  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.11.7.tgz#d173d5a9b58db23b6d442c4bc4c81e9939adac23"
+  integrity sha512-w1KAxX2FYLS2GAi3w3BnEZg/IUu7FdgHnLmFKHplRnHMV3u1OPB2EVA7ndNdfu7ds4Rn2OZjSXoNh6F61g3gkA==
+  dependencies:
+    array-find-index "^1.0.2"
+    create-react-class "^15.6.2"
+    debounce "^1.2.0"
+    deep-assign "^3.0.0"
+    fbjs "^1.0.0"
+    hyphenate-style-name "^1.0.2"
+    inline-style-prefixer "^5.0.3"
+    normalize-css-color "^1.0.2"
+    prop-types "^15.6.0"
+    react-timer-mixin "^0.13.4"
+
+react-native@~0.59.10:
   version "0.59.10"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.59.10.tgz#352f381e382f93a0403be499c9e384bf51c2591c"
   integrity sha512-guB9YW+pBqS1dnfZ4ntzjINopiCUAbdmshU2wMWD1W32fRczLAopi/7Q2iHKP8LTCdxuYZV3fa9Mew5PSuANAw==
@@ -13202,15 +13270,20 @@ react-proxy@^1.1.7:
     lodash "^4.6.1"
     react-deep-force-update "^1.0.0"
 
-react-test-renderer@16.10.1:
+react-test-renderer@~16.8.3:
-  version "16.10.1"
+  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.10.1.tgz#75b8e8ce152e00eadd303e9fa514a2ca917ee049"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.6.tgz#188d8029b8c39c786f998aa3efd3ffe7642d5ba1"
-  integrity sha512-VT8nd7XrrUV7MQPxeIuH7WstfrK2A8kgcMwGUtVXa0ja+CiYkxdmLYNjwX1L7irRF7ydzJJWiSLsQf2xBj4Xaw==
+  integrity sha512-H2srzU5IWYT6cZXof6AhUcx/wEyJddQ8l7cLM/F7gDXYyPr4oq+vCIxJYXVGhId1J706sqziAjuOEjyNkfgoEw==
   dependencies:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
     react-is "^16.8.6"
-    scheduler "^0.16.1"
+    scheduler "^0.13.6"
+
+react-timer-mixin@^0.13.4:
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
+  integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
 
 react-transform-hmr@^1.0.4:
   version "1.0.4"
@@ -13220,14 +13293,15 @@ react-transform-hmr@^1.0.4:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
-react@16.10.1, react@^16.10.1:
+react@~16.8.3:
-  version "16.10.1"
+  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.10.1.tgz#967c1e71a2767dfa699e6ba702a00483e3b0573f"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
-  integrity sha512-2bisHwMhxQ3XQz4LiJJwG3360pY965pTl/MRrZYxIBKVj4fOHoDs5aZAkYXGxDRO1Li+SyjTAilQEbOmtQJHzA==
+  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
+    scheduler "^0.13.6"
 
 read-chunk@2.1.0:
   version "2.1.0"
@@ -13939,10 +14013,18 @@ sax@~1.1.1:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.1.6.tgz#5d616be8a5e607d54e114afae55b7eaf2fcc3240"
   integrity sha1-XWFr6KXmB9VOEUr65Vt+ry/MMkA=
 
+scheduler@^0.13.6:
+  version "0.13.6"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
+  integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 scheduler@^0.16.1:
-  version "0.16.1"
+  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.16.1.tgz#a6fb6ddec12dc2119176e6eb54ecfe69a9eba8df"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.16.2.tgz#f74cd9d33eff6fc554edfb79864868e4819132c1"
-  integrity sha512-MIuie7SgsqMYOdCXVFZa8SKoNorJZUWHW8dPgto7uEHn1lX3fg2Gu0TzgK8USj76uxV7vB5eRMnZs/cdEHg+cg==
+  integrity sha512-BqYVWqwz6s1wZMhjFvLfVR5WXP7ZY32M/wYPo04CcuPM7XZEbV2TBNW7Z0UkguPTl0dWMA59VbNXxK6q+pHItg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -15348,7 +15430,7 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^3.6.3:
+typescript@^3.5.3, typescript@^3.6.3:
   version "3.6.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.6.3.tgz#fea942fabb20f7e1ca7164ff626f1a9f3f70b4da"
   integrity sha512-N7bceJL1CtRQ2RiG0AQME13ksR7DiuQh/QehubYcghzv20tnh+MQnQIuJddTmsbqYj+dztchykemz0zFzlvdQw==