chore: publish

- @react-navigation/bottom-tabs@5.0.0-alpha.19
 - @react-navigation/native-stack@5.0.0-alpha.10

.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: .

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,57 @@
 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.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.18...@react-navigation/bottom-tabs@5.0.0-alpha.19) (2019-11-04)
+
+
+### Bug Fixes
+
+* fix default BottomTabBar button ([#161](https://github.com/react-navigation/navigation-ex/issues/161)) ([22cb675](https://github.com/react-navigation/navigation-ex/commit/22cb675))
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.17...@react-navigation/bottom-tabs@5.0.0-alpha.18) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.16...@react-navigation/bottom-tabs@5.0.0-alpha.17) (2019-10-30)
+
+
+### Bug Fixes
+
+* hide inactive pages from screen reader in tabs ([#148](https://github.com/react-navigation/navigation-ex/issues/148)) ([58f7115](https://github.com/react-navigation/navigation-ex/commit/58f7115))
+
+
+### Features
+
+* add an 'unmountInactiveScreens' option ([12d597f](https://github.com/react-navigation/navigation-ex/commit/12d597f))
+
+
+
+
+
+# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.15...@react-navigation/bottom-tabs@5.0.0-alpha.16) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.14...@react-navigation/bottom-tabs@5.0.0-alpha.15) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [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)
 
 

packages/bottom-tabs/package.json

@@ -10,7 +10,7 @@
     "android",
     "tab"
   ],
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.19",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@react-navigation/routers": "^5.0.0-alpha.12"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",

packages/bottom-tabs/src/types.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  TouchableWithoutFeedbackProps,
   AccessibilityRole,
   AccessibilityStates,
   StyleProp,
@@ -71,11 +72,7 @@ export type BottomTabNavigationOptions = {
    */
   tabBarLabel?:
     | React.ReactNode
-    | ((props: {
-        focused: boolean;
-        color: string;
-        size: number;
-      }) => React.ReactNode);
+    | ((props: { focused: boolean; color: string }) => React.ReactNode);
 
   /**
    * React Element or a function that given { focused: boolean, color: string } returns a React.Node, to display in the tab bar.
@@ -105,9 +102,10 @@ export type BottomTabNavigationOptions = {
   tabBarVisible?: boolean;
 
   /**
-   * Buttton component to render for the tab items instead of the default `TouchableWithoutFeedback`
+   * Function which returns a React element to render as the tab bar button.
+   * Renders `TouchableWithoutFeedback` by default.
    */
-  tabBarButtonComponent?: React.ComponentType<any>;
+  tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
 };
 
 export type BottomTabDescriptor = Descriptor<
@@ -128,9 +126,14 @@ export type BottomTabNavigationConfig = {
    */
   lazy?: boolean;
   /**
-   * Custom tab bar component.
+   * Whether a screen should be unmounted when navigating away from it.
+   * Defaults to `false`.
    */
-  tabBarComponent?: React.ComponentType<BottomTabBarProps>;
+  unmountInactiveScreens?: boolean;
+  /**
+   * Function that returns a React element to display as the tab bar.
+   */
+  tabBar?: (props: BottomTabBarProps) => React.ReactNode;
   /**
    * Options for the tab bar which will be passed as props to the tab bar component.
    */
@@ -212,25 +215,26 @@ export type BottomTabBarProps = BottomTabBarOptions & {
     route: Route<string>;
     focused: boolean;
   }) => AccessibilityStates[];
-  getButtonComponent: (props: {
-    route: Route<string>;
-  }) => React.ComponentType<any> | undefined;
   getLabelText: (props: {
     route: Route<string>;
   }) =>
     | ((scene: {
         focused: boolean;
         color: string;
-        orientation: 'horizontal' | 'vertical';
       }) => React.ReactNode | undefined)
     | React.ReactNode;
   getTestID: (props: { route: Route<string> }) => string | undefined;
+  renderButton: (
+    props: { route: Route<string> } & BottomTabBarButtonProps
+  ) => React.ReactNode;
   renderIcon: (props: {
     route: Route<string>;
     focused: boolean;
     color: string;
     size: number;
   }) => React.ReactNode;
-  activeTintColor: string;
-  inactiveTintColor: string;
+};
+
+export type BottomTabBarButtonProps = TouchableWithoutFeedbackProps & {
+  children: React.ReactNode;
 };

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

@@ -13,7 +13,6 @@ import { Route, NavigationContext } from '@react-navigation/core';
 import { SafeAreaConsumer } from 'react-native-safe-area-context';
 
 import TabBarIcon from './TabBarIcon';
-import TouchableWithoutFeedbackWrapper from './TouchableWithoutFeedbackWrapper';
 import { BottomTabBarProps } from '../types';
 
 type State = {
@@ -23,7 +22,10 @@ type State = {
   visible: Animated.Value;
 };
 
-type Props = BottomTabBarProps;
+type Props = BottomTabBarProps & {
+  activeTintColor: string;
+  inactiveTintColor: string;
+};
 
 const majorVersion = parseInt(Platform.Version as string, 10);
 const isIos = Platform.OS === 'ios';
@@ -157,11 +159,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
     }
 
     if (typeof label === 'function') {
-      return label({
-        focused,
-        color,
-        orientation: horizontal ? 'horizontal' : 'vertical',
-      });
+      return label({ focused, color });
     }
 
     return label;
@@ -266,7 +264,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
       getAccessibilityLabel,
       getAccessibilityRole,
       getAccessibilityStates,
-      getButtonComponent,
+      renderButton,
       getTestID,
       style,
       tabStyle,
@@ -329,34 +327,34 @@ export default class TabBarBottom extends React.Component<Props, State> {
                   ? activeBackgroundColor
                   : inactiveBackgroundColor;
 
-                const ButtonComponent =
-                  getButtonComponent({ route }) ||
-                  TouchableWithoutFeedbackWrapper;
-
                 return (
                   <NavigationContext.Provider
                     key={route.key}
                     value={descriptors[route.key].navigation}
                   >
-                    <ButtonComponent
-                      onPress={() => onTabPress({ route })}
-                      onLongPress={() => onTabLongPress({ route })}
-                      testID={testID}
-                      accessibilityLabel={accessibilityLabel}
-                      accessibilityRole={accessibilityRole}
-                      accessibilityStates={accessibilityStates}
-                      style={[
+                    {renderButton({
+                      route,
+                      onPress: () => onTabPress({ route }),
+                      onLongPress: () => onTabLongPress({ route }),
+                      testID,
+                      accessibilityLabel,
+                      accessibilityRole,
+                      accessibilityStates,
+                      style: [
                         styles.tab,
                         { backgroundColor },
                         this.shouldUseHorizontalLabels()
                           ? styles.tabLandscape
                           : styles.tabPortrait,
                         tabStyle,
-                      ]}
-                    >
-                      {this.renderIcon(scene)}
-                      {this.renderLabel(scene)}
-                    </ButtonComponent>
+                      ],
+                      children: (
+                        <React.Fragment>
+                          {this.renderIcon(scene)}
+                          {this.renderLabel(scene)}
+                        </React.Fragment>
+                      ),
+                    })}
                   </NavigationContext.Provider>
                 );
               })}

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

@@ -1,23 +1,27 @@
 import * as React from 'react';
 import {
   View,
+  TouchableWithoutFeedback,
   StyleSheet,
   AccessibilityRole,
   AccessibilityStates,
 } from 'react-native';
+
 import { Route, CommonActions } from '@react-navigation/core';
 import { TabNavigationState } from '@react-navigation/routers';
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
+import ResourceSavingScene from './ResourceSavingScene';
 import BottomTabBar from './BottomTabBar';
 import {
   BottomTabNavigationConfig,
   BottomTabDescriptorMap,
   BottomTabNavigationHelpers,
+  BottomTabBarProps,
+  BottomTabBarButtonProps,
 } from '../types';
-import ResourceSavingScene from './ResourceSavingScene';
 
 type Props = BottomTabNavigationConfig & {
   state: TabNavigationState;
@@ -49,16 +53,25 @@ export default class BottomTabView extends React.Component<Props, State> {
     loaded: [this.props.state.index],
   };
 
-  private getButtonComponent = ({ route }: { route: Route<string> }) => {
+  private renderButton = ({
+    route,
+    children,
+    style,
+    ...rest
+  }: { route: Route<string> } & BottomTabBarButtonProps) => {
     const { descriptors } = this.props;
     const descriptor = descriptors[route.key];
     const options = descriptor.options;
 
-    if (options.tabBarButtonComponent) {
-      return options.tabBarButtonComponent;
+    if (options.tabBarButton) {
+      return options.tabBarButton({ children, style, ...rest });
     }
 
-    return undefined;
+    return (
+      <TouchableWithoutFeedback {...rest}>
+        <View style={style}>{children}</View>
+      </TouchableWithoutFeedback>
+    );
   };
 
   private renderIcon = ({
@@ -159,7 +172,7 @@ export default class BottomTabView extends React.Component<Props, State> {
 
   private renderTabBar = () => {
     const {
-      tabBarComponent: TabBarComponent = BottomTabBar,
+      tabBar = (props: BottomTabBarProps) => <BottomTabBar {...props} />,
       tabBarOptions,
       state,
       navigation,
@@ -174,27 +187,25 @@ export default class BottomTabView extends React.Component<Props, State> {
       return null;
     }
 
-    return (
-      <TabBarComponent
-        {...tabBarOptions}
-        state={state}
-        descriptors={descriptors}
-        navigation={navigation}
-        onTabPress={this.handleTabPress}
-        onTabLongPress={this.handleTabLongPress}
-        getLabelText={this.getLabelText}
-        getButtonComponent={this.getButtonComponent}
-        getAccessibilityLabel={this.getAccessibilityLabel}
-        getAccessibilityRole={this.getAccessibilityRole}
-        getAccessibilityStates={this.getAccessibilityStates}
-        getTestID={this.getTestID}
-        renderIcon={this.renderIcon}
-      />
-    );
+    return tabBar({
+      ...tabBarOptions,
+      state: state,
+      descriptors: descriptors,
+      navigation: navigation,
+      onTabPress: this.handleTabPress,
+      onTabLongPress: this.handleTabLongPress,
+      getLabelText: this.getLabelText,
+      getAccessibilityLabel: this.getAccessibilityLabel,
+      getAccessibilityRole: this.getAccessibilityRole,
+      getAccessibilityStates: this.getAccessibilityStates,
+      getTestID: this.getTestID,
+      renderButton: this.renderButton,
+      renderIcon: this.renderIcon,
+    });
   };
 
   render() {
-    const { state, descriptors, lazy } = this.props;
+    const { state, descriptors, lazy, unmountInactiveScreens } = this.props;
     const { routes } = state;
     const { loaded } = this.state;
 
@@ -203,6 +214,10 @@ export default class BottomTabView extends React.Component<Props, State> {
         <View style={styles.container}>
           <ScreenContainer style={styles.pages}>
             {routes.map((route, index) => {
+              if (unmountInactiveScreens && index !== state.index) {
+                return null;
+              }
+
               if (lazy && !loaded.includes(index)) {
                 // Don't render a screen if we've never navigated to it
                 return null;
@@ -216,7 +231,15 @@ export default class BottomTabView extends React.Component<Props, State> {
                   style={StyleSheet.absoluteFill}
                   isVisible={isFocused}
                 >
-                  {descriptors[route.key].render()}
+                  <View
+                    accessibilityElementsHidden={!isFocused}
+                    importantForAccessibility={
+                      isFocused ? 'auto' : 'no-hide-descendants'
+                    }
+                    style={styles.content}
+                  >
+                    {descriptors[route.key].render()}
+                  </View>
                 </ResourceSavingScene>
               );
             })}
@@ -236,4 +259,7 @@ const styles = StyleSheet.create({
   pages: {
     flex: 1,
   },
+  content: {
+    flex: 1,
+  },
 });

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { TouchableWithoutFeedback, View } from 'react-native';
-
-export default function TouchableWithoutFeedbackWrapper({
-  onPress,
-  onLongPress,
-  testID,
-  accessibilityLabel,
-  accessibilityRole,
-  accessibilityStates,
-  ...rest
-}: React.ComponentProps<typeof TouchableWithoutFeedback> & {
-  children: React.ReactNode;
-}) {
-  return (
-    <TouchableWithoutFeedback
-      onPress={onPress}
-      onLongPress={onLongPress}
-      testID={testID}
-      hitSlop={{ left: 15, right: 15, top: 0, bottom: 5 }}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole={accessibilityRole}
-      accessibilityStates={accessibilityStates}
-    >
-      <View {...rest} />
-    </TouchableWithoutFeedback>
-  );
-}

packages/compat/CHANGELOG.md

@@ -3,6 +3,41 @@
 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/compat@5.0.0-alpha.11...@react-navigation/compat@5.0.0-alpha.12) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.10...@react-navigation/compat@5.0.0-alpha.11) (2019-10-30)
+
+
+### Bug Fixes
+
+* drop isFirstRouteInParent method ([#145](https://github.com/react-navigation/navigation-ex/issues/145)) ([3a77107](https://github.com/react-navigation/navigation-ex/commit/3a77107))
+
+
+
+
+
+# [5.0.0-alpha.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.9...@react-navigation/compat@5.0.0-alpha.10) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [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)
 
 

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.8",
+  "version": "5.0.0-alpha.12",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@react-navigation/routers": "^5.0.0-alpha.12"
   },
   "devDependencies": {
     "@types/react": "^16.9.4",

packages/compat/src/createCompatNavigationProp.tsx

@@ -173,6 +173,12 @@ export default function createCompatNavigationProp<
 
       return defaultValue;
     },
+    isFirstRouteInParent(): boolean {
+      const { routes } = navigation.dangerouslyGetState();
+
+      // @ts-ignore
+      return routes[0].key === state.key;
+    },
     dangerouslyGetParent() {
       const parent = navigation.dangerouslyGetParent();
 

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/compat/src/types.tsx

@@ -25,6 +25,7 @@ export type CompatNavigationProp<
       paramName: T,
       defaultValue?: ParamList[RouteName][T]
     ): ParamList[RouteName][T];
+    isFirstRouteInParent(): boolean;
     dangerouslyGetParent<
       T = NavigationProp<ParamListBase> | undefined
     >(): T extends NavigationProp<ParamListBase>

packages/core/CHANGELOG.md

@@ -3,6 +3,63 @@
 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.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.19...@react-navigation/core@5.0.0-alpha.20) (2019-11-02)
+
+
+### Bug Fixes
+
+* pass rehydrated state in onStateChange and devtools ([5a34764](https://github.com/react-navigation/navigation-ex/commit/5a34764))
+
+
+
+
+
+# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.18...@react-navigation/core@5.0.0-alpha.19) (2019-10-30)
+
+
+### Bug Fixes
+
+* drop isFirstRouteInParent method ([#145](https://github.com/react-navigation/navigation-ex/issues/145)) ([3a77107](https://github.com/react-navigation/navigation-ex/commit/3a77107))
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.17...@react-navigation/core@5.0.0-alpha.18) (2019-10-29)
+
+
+### Bug Fixes
+
+* improve type annotation for screens ([8f16085](https://github.com/react-navigation/navigation-ex/commit/8f16085))
+
+
+
+
+
+# [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)
 
 

packages/core/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.15",
+  "version": "5.0.0-alpha.20",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/core/src/NavigationContainer.tsx

@@ -137,9 +137,9 @@ const Container = React.forwardRef(function NavigationContainer(
     [trackAction]
   );
 
-  const getRootState = () => {
+  const getRootState = React.useCallback(() => {
     return getStateForRoute('root');
-  };
+  }, [getStateForRoute]);
 
   React.useImperativeHandle(ref, () => ({
     ...(Object.keys(CommonActions) as Array<keyof typeof CommonActions>).reduce<
@@ -220,18 +220,18 @@ const Container = React.forwardRef(function NavigationContainer(
     if (skipTrackingRef.current) {
       skipTrackingRef.current = false;
     } else {
-      trackState(state);
+      trackState(getRootState);
     }
 
     navigationStateRef.current = state;
     transactionStateRef.current = null;
 
     if (!isFirstMountRef.current && onStateChange) {
-      onStateChange(state);
+      onStateChange(getRootState());
     }
 
     isFirstMountRef.current = false;
-  }, [state, onStateChange, trackState]);
+  }, [state, onStateChange, trackState, getRootState]);
 
   return (
     <NavigationBuilderContext.Provider value={builderContext}>

packages/core/src/SceneView.tsx

@@ -90,8 +90,10 @@ export default function SceneView<
               route={route}
             >
               {'component' in screen && screen.component !== undefined ? (
+                // @ts-ignore
                 <screen.component navigation={navigation} route={route} />
               ) : 'children' in screen && screen.children !== undefined ? (
+                // @ts-ignore
                 screen.children({ navigation, route })
               ) : null}
             </StaticContainer>

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

@@ -4,7 +4,8 @@ import * as CommonActions from '../CommonActions';
 jest.mock('shortid', () => () => 'test');
 
 const STATE = {
-  stale: false as false,
+  stale: false as const,
+  type: 'test',
   key: 'root',
   index: 1,
   routes: [
@@ -23,6 +24,7 @@ it('replaces focused screen with REPLACE', () => {
 
   expect(result).toEqual({
     stale: false,
+    type: 'test',
     key: 'root',
     index: 1,
     routes: [
@@ -42,6 +44,7 @@ it('replaces source screen with REPLACE', () => {
 
   expect(result).toEqual({
     stale: false,
+    type: 'test',
     key: 'root',
     index: 1,
     routes: [
@@ -70,6 +73,7 @@ it('sets params for the focused screen with SET_PARAMS', () => {
 
   expect(result).toEqual({
     stale: false,
+    type: 'test',
     key: 'root',
     index: 1,
     routes: [
@@ -89,6 +93,7 @@ it('sets params for the source screen with SET_PARAMS', () => {
 
   expect(result).toEqual({
     stale: false,
+    type: 'test',
     key: 'root',
     index: 1,
     routes: [

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

@@ -233,6 +233,7 @@ it('handle dispatching with ref', () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).lastCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'foo2', 'bar', 'baz'],
@@ -242,6 +243,7 @@ it('handle dispatching with ref', () => {
         name: 'baz',
         state: {
           stale: false,
+          type: 'test',
           index: 0,
           key: '1',
           routeNames: ['qux', 'lex'],
@@ -319,7 +321,28 @@ it('handle resetting state with ref', () => {
   });
 
   expect(onStateChange).toBeCalledTimes(1);
-  expect(onStateChange).lastCalledWith(state);
+  expect(onStateChange).lastCalledWith({
+    index: 1,
+    key: '5',
+    routeNames: ['foo', 'foo2', 'bar', 'baz'],
+    routes: [
+      {
+        key: 'baz',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: '6',
+          routeNames: ['qux', 'lex'],
+          routes: [{ key: 'qux', name: 'qux' }, { key: 'lex', name: 'lex' }],
+          stale: false,
+          type: 'test',
+        },
+      },
+      { key: 'bar', name: 'bar' },
+    ],
+    stale: false,
+    type: 'test',
+  });
 });
 
 it('handle getRootState', () => {
@@ -367,10 +390,12 @@ it('handle getRootState', () => {
           routeNames: ['qux', 'lex'],
           routes: [{ key: 'qux', name: 'qux' }, { key: 'lex', name: 'lex' }],
           stale: false,
+          type: 'test',
         },
       },
       { key: 'bar', name: 'bar' },
     ],
     stale: false,
+    type: 'test',
   });
 });

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

@@ -13,6 +13,8 @@ export const MockRouterKey = { current: 0 };
 
 export default function MockRouter(options: DefaultRouterOptions) {
   const router: Router<NavigationState, MockActions> = {
+    type: 'test',
+
     getInitialState({ routeNames, routeParamList }) {
       const index =
         options.initialRouteName === undefined
@@ -21,6 +23,7 @@ export default function MockRouter(options: DefaultRouterOptions) {
 
       return {
         stale: false,
+        type: 'test',
         key: String(MockRouterKey.current++),
         index,
         routeNames,
@@ -58,6 +61,7 @@ export default function MockRouter(options: DefaultRouterOptions) {
 
       return {
         stale: false,
+        type: 'test',
         key: String(MockRouterKey.current++),
         index:
           typeof state.index === 'number' && state.index < routes.length
@@ -108,7 +112,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));
 
@@ -52,6 +52,7 @@ it('initializes state for a navigator on navigation', () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).toBeCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar', 'baz'],
@@ -106,6 +107,66 @@ it('rehydrates state for a navigator on navigation', () => {
     routeNames: ['foo', 'bar'],
     routes: [{ key: 'foo', name: 'foo' }, { key: 'bar', name: 'bar' }],
     stale: false,
+    type: 'test',
+  });
+});
+
+it("doesn't rehydrate state if the type of state didn't match router", () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const FooScreen = (props: any) => {
+    React.useEffect(() => {
+      props.navigation.dispatch({ type: 'UPDATE' });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return null;
+  };
+
+  const initialState = {
+    index: 1,
+    type: 'something-else',
+    routes: [{ key: 'foo', name: 'foo' }, { key: 'bar', name: 'bar' }],
+  };
+
+  const onStateChange = jest.fn();
+
+  const element = (
+    <NavigationContainer
+      initialState={initialState}
+      onStateChange={onStateChange}
+    >
+      <TestNavigator initialRouteName="foo">
+        <Screen
+          name="foo"
+          component={FooScreen}
+          initialParams={{ answer: 42 }}
+        />
+        <Screen name="bar" component={jest.fn()} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  render(element).update(element);
+
+  expect(onStateChange).lastCalledWith({
+    index: 0,
+    key: '0',
+    routeNames: ['foo', 'bar'],
+    routes: [
+      {
+        key: 'foo',
+        name: 'foo',
+        params: { answer: 42 },
+      },
+      { key: 'bar', name: 'bar' },
+    ],
+    stale: false,
+    type: 'test',
   });
 });
 
@@ -144,6 +205,7 @@ it('initializes state for nested screens in React.Fragment', () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).toBeCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar', 'baz'],
@@ -194,6 +256,7 @@ it('initializes state for nested navigator on navigation', () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).toBeCalledWith({
     stale: false,
+    type: 'test',
     index: 2,
     key: '0',
     routeNames: ['foo', 'bar', 'baz'],
@@ -205,6 +268,7 @@ it('initializes state for nested navigator on navigation', () => {
         name: 'baz',
         state: {
           stale: false,
+          type: 'test',
           index: 0,
           key: '1',
           routeNames: ['qux'],
@@ -309,6 +373,7 @@ it('cleans up state when the navigator unmounts', () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).lastCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar'],
@@ -361,6 +426,7 @@ it('allows state updates by dispatching a function returning an action', () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).toBeCalledWith({
     stale: false,
+    type: 'test',
     index: 1,
     key: '0',
     routeNames: ['foo', 'bar'],
@@ -399,6 +465,7 @@ it('updates route params with setParams', () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).lastCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar'],
@@ -413,6 +480,7 @@ it('updates route params with setParams', () => {
   expect(onStateChange).toBeCalledTimes(2);
   expect(onStateChange).lastCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar'],
@@ -466,10 +534,23 @@ it('updates route params with setParams applied to parent', () => {
     key: '0',
     routeNames: ['foo', 'bar'],
     routes: [
-      { key: 'foo', name: 'foo', params: { username: 'alice' } },
+      {
+        key: 'foo',
+        name: 'foo',
+        params: { username: 'alice' },
+        state: {
+          index: 0,
+          key: '1',
+          routeNames: ['baz'],
+          routes: [{ key: 'baz', name: 'baz' }],
+          stale: false,
+          type: 'test',
+        },
+      },
       { key: 'bar', name: 'bar' },
     ],
     stale: false,
+    type: 'test',
   });
 
   act(() => setParams({ age: 25 }));
@@ -480,10 +561,23 @@ it('updates route params with setParams applied to parent', () => {
     key: '0',
     routeNames: ['foo', 'bar'],
     routes: [
-      { key: 'foo', name: 'foo', params: { username: 'alice', age: 25 } },
+      {
+        key: 'foo',
+        name: 'foo',
+        params: { username: 'alice', age: 25 },
+        state: {
+          index: 0,
+          key: '1',
+          routeNames: ['baz'],
+          routes: [{ key: 'baz', name: 'baz' }],
+          stale: false,
+          type: 'test',
+        },
+      },
       { key: 'bar', name: 'bar' },
     ],
     stale: false,
+    type: 'test',
   });
 });
 
@@ -516,6 +610,7 @@ it('handles change in route names', () => {
 
   expect(onStateChange).toBeCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'baz', 'qux'],
@@ -523,6 +618,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);
@@ -554,6 +723,7 @@ it('gives access to internal state', () => {
     routeNames: ['bar'],
     routes: [{ key: 'bar', name: 'bar' }],
     stale: false,
+    type: 'test',
   });
 });
 

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

@@ -216,6 +216,7 @@ it('fires blur event when a route is removed with a delay', async () => {
 
         return {
           stale: false,
+          type: 'test',
           key: 'stack',
           index: 0,
           routeNames,

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

@@ -76,6 +76,7 @@ it("lets parent handle the action if child didn't", () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).lastCalledWith({
     stale: false,
+    type: 'test',
     index: 2,
     key: '0',
     routeNames: ['foo', 'bar', 'baz'],
@@ -191,6 +192,7 @@ it("lets children handle the action if parent didn't", () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).lastCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar', 'baz'],
@@ -200,6 +202,7 @@ it("lets children handle the action if parent didn't", () => {
         name: 'baz',
         state: {
           stale: false,
+          type: 'test',
           index: 0,
           key: '1',
           routeNames: ['qux', 'lex'],

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

@@ -23,6 +23,12 @@ export type NavigationState = {
   routes: Array<
     Route<string> & { state?: NavigationState | PartialState<NavigationState> }
   >;
+  /**
+   * Custom type for the state, whether it's for tab, stack, drawer etc.
+   * During rehydration, the state will be discarded if type doesn't match with router type.
+   * It can also be used to detect the type of the navigator we're dealing with.
+   */
+  type: string;
   /**
    * Whether the navigation state has been rehydrated.
    */
@@ -36,9 +42,10 @@ export type InitialState = Partial<
 };
 
 export type PartialState<State extends NavigationState> = Partial<
-  Omit<State, 'stale' | 'key' | 'routes' | 'routeNames'>
+  Omit<State, 'stale' | 'type' | 'key' | 'routes' | 'routeNames'>
 > & {
   stale?: true;
+  type?: string;
   routes: Array<
     Omit<Route<string>, 'key'> & { key?: string; state?: InitialState }
   >;
@@ -115,6 +122,12 @@ export type Router<
   State extends NavigationState,
   Action extends NavigationAction
 > = {
+  /**
+   * Type of the router. Should match the `type` property in state.
+   * If the type doesn't match, the state will be discarded during rehydration.
+   */
+  type: State['type'];
+
   /**
    * Initialize the navigation state.
    *
@@ -189,7 +202,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 +228,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 +245,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 +362,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 +389,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.
@@ -394,13 +407,6 @@ export type NavigationProp<
    */
   setOptions(options: Partial<ScreenOptions>): void;
 
-  /**
-   * Check if the screen is the first route in the navigator.
-   * This method returns `true` if the index of the route is `0`, `false` otherwise.
-   * It can be useful to decide whether to display a back button in a stack.
-   */
-  isFirstRouteInParent(): boolean;
-
   /**
    * Returns the parent navigator, if any. Reason why the function is called
    * dangerouslyGetParent is to warn developers against overusing it to eg. get parent
@@ -468,7 +474,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.
@@ -521,13 +527,19 @@ export type RouteConfig<
       /**
        * React component to render for this screen.
        */
-      component: React.ComponentType<any>;
+      component: React.ComponentType<{
+        route: RouteProp<ParamList, RouteName>;
+        navigation: any;
+      }>;
     }
   | {
       /**
        * Render callback to render content of this screen.
        */
-      children: (props: any) => React.ReactNode;
+      children: (props: {
+        route: RouteProp<ParamList, RouteName>;
+        navigation: any;
+      }) => React.ReactNode;
     });
 
 export type NavigationContainerRef =

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/useDevTools.tsx

@@ -62,7 +62,7 @@ export default function useDevTools({ name, reset, state }: Options) {
   );
 
   const trackState = React.useCallback(
-    (state: State) => {
+    (getState: () => State) => {
       if (!devTools) {
         return;
       }
@@ -71,9 +71,11 @@ export default function useDevTools({ name, reset, state }: Options) {
         devTools.send(actions.current.shift(), lastStateRef.current);
       }
 
+      const state = getState();
+
       if (actions.current.length) {
         devTools.send(actions.current.pop(), state);
-      } else if (lastStateRef.current !== state) {
+      } else {
         devTools.send('@@UNKNOWN', state);
       }
 

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 }> & {
-  create: (target: string) => EventConsumer<{ [key: string]: any }>;
+export type NavigationEventEmitter = EventEmitter<Record<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<{
-    [key: string]: { [key: string]: Listeners };
-  }>({});
+  const listeners = React.useRef<Record<string, Record<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(
-    (acc, curr) => {
-      if (curr.name in acc) {
-        throw new Error(
-          `A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named '${curr.name}')`
-        );
-      }
+  const screens = getRouteConfigsFromChildren<ScreenOptions>(children).reduce<
+    Record<string, RouteConfig<ParamListBase, string, ScreenOptions>>
+  >((acc, curr) => {
+    if (curr.name in acc) {
+      throw new Error(
+        `A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named '${curr.name}')`
+      );
+    }
 
-      acc[curr.name] = curr;
-      return acc;
-    },
-    {} as { [key: string]: RouteConfig<ParamListBase, string, ScreenOptions> }
-  );
+    acc[curr.name] = curr;
+    return acc;
+  }, {});
 
   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) {
@@ -130,6 +166,17 @@ export default function useNavigationBuilder<
     );
   }
 
+  const isStateValid = React.useCallback(
+    state => state.type === undefined || state.type === router.type,
+    [router.type]
+  );
+
+  const isStateInitialized = React.useCallback(
+    state =>
+      state !== undefined && state.stale === false && isStateValid(state),
+    [isStateValid]
+  );
+
   const {
     state: currentState,
     getState: getCurrentState,
@@ -152,7 +199,7 @@ export default function useNavigationBuilder<
     // Otherwise assume that the state was provided as initial state
     // So we need to rehydrate it to make it usable
     initializedStateRef.current =
-      currentState === undefined
+      currentState === undefined || !isStateValid(currentState)
         ? router.getInitialState({
             routeNames,
             routeParamList,
@@ -171,32 +218,57 @@ export default function useNavigationBuilder<
     // If the state isn't initialized, or stale, use the state we initialized instead
     // The state won't update until there's a change needed in the state we have initalized locally
     // So it'll be `undefined` or stale untill the first navigation event happens
-    currentState === undefined || currentState.stale !== false
-      ? (initializedStateRef.current as State)
-      : (currentState as State);
+    isStateInitialized(currentState)
+      ? (currentState as State)
+      : (initializedStateRef.current 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
@@ -210,10 +282,10 @@ export default function useNavigationBuilder<
   const getState = React.useCallback((): State => {
     const currentState = getCurrentState();
 
-    return currentState === undefined || currentState.stale !== false
-      ? (initializedStateRef.current as State)
-      : (currentState as State);
-  }, [getCurrentState]);
+    return isStateInitialized(currentState)
+      ? (currentState as State)
+      : (initializedStateRef.current as State);
+  }, [getCurrentState, isStateInitialized]);
 
   const emitter = useEventEmitter();
 

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;
@@ -66,11 +66,9 @@ export default function useNavigationCache<
   cache.current = state.routes.reduce<NavigationCache<State, ScreenOptions>>(
     (acc, route, index) => {
       const previous = cache.current[route.key];
-      const isFirst = route.key === state.routes[0].key;
 
-      if (previous && previous.isFirstRouteInParent() === isFirst) {
-        // If a cached navigation object already exists and has same `isFirstRouteInParent`, reuse it
-        // This method could return different result if the index of the route changes somehow
+      if (previous) {
+        // If a cached navigation object already exists, reuse it
         acc[route.key] = previous;
       } else {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -89,13 +87,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] = {
@@ -121,7 +119,6 @@ export default function useNavigationCache<
             // This makes sure that we return the focus state in the whole tree, not just this navigator
             return navigation ? navigation.isFocused() : true;
           },
-          isFirstRouteInParent: () => isFirst,
         };
       }
 

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/core/src/useOnGetState.tsx

@@ -14,7 +14,7 @@ export default function useOnGetState({
   const route = React.useContext(NavigationRouteContext);
   const key = route ? route.key : 'root';
 
-  const getter = React.useCallback(() => {
+  const getRehydratedState = React.useCallback(() => {
     const state = getState();
     return {
       ...state,
@@ -26,6 +26,6 @@ export default function useOnGetState({
   }, [getState, getStateForRoute]);
 
   React.useEffect(() => {
-    return addStateGetter && addStateGetter(key, getter);
-  }, [addStateGetter, getter, key]);
+    return addStateGetter && addStateGetter(key, getRehydratedState);
+  }, [addStateGetter, getRehydratedState, key]);
 }

packages/core/src/useStateGetters.tsx

@@ -9,7 +9,7 @@ export default function useStateGetters() {
   const stateGetters = React.useRef<Record<string, NavigatorStateGetter>>({});
 
   const getStateForRoute = React.useCallback(
-    routeKey =>
+    (routeKey: string) =>
       stateGetters.current[routeKey] === undefined
         ? undefined
         : stateGetters.current[routeKey](),

packages/drawer/CHANGELOG.md

@@ -3,6 +3,68 @@
 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.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.19...@react-navigation/drawer@5.0.0-alpha.20) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.18...@react-navigation/drawer@5.0.0-alpha.19) (2019-11-02)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.17...@react-navigation/drawer@5.0.0-alpha.18) (2019-10-30)
+
+
+### Bug Fixes
+
+* hide screen from screen reader when drawer is open ([#147](https://github.com/react-navigation/navigation-ex/issues/147)) ([fb749ac](https://github.com/react-navigation/navigation-ex/commit/fb749ac))
+
+
+### Features
+
+* add an 'unmountInactiveScreens' option ([12d597f](https://github.com/react-navigation/navigation-ex/commit/12d597f))
+
+
+
+
+
+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.16...@react-navigation/drawer@5.0.0-alpha.17) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [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)
 
 

packages/drawer/package.json

@@ -11,7 +11,7 @@
     "material",
     "drawer"
   ],
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.20",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@react-navigation/routers": "^5.0.0-alpha.12"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
@@ -46,7 +46,7 @@
     "react-native-gesture-handler": "^1.3.0",
     "react-native-reanimated": "^1.3.0",
     "react-native-safe-area-context": "^0.3.6",
-    "react-native-screens": "^2.0.0-alpha.3",
+    "react-native-screens": "^2.0.0-alpha.7",
     "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 || ^2.0.0-alpha.3"
+    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.0"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/drawer/src/types.tsx

@@ -67,16 +67,16 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
    * Whether a screen should be unmounted when navigating away from it.
    * Defaults to `false`.
    */
-  unmountInactiveRoutes?: boolean;
+  unmountInactiveScreens?: boolean;
   /**
-   * Custom component used to render as the content of the drawer, for example, navigation items.
-   * Defaults to `DrawerItems`.
+   * Function that returns React element to render as the content of the drawer, for example, navigation items.
+   * Defaults to `DrawerContent`.
    */
-  contentComponent: React.ComponentType<DrawerContentComponentProps<T>>;
+  drawerContent: (props: DrawerContentComponentProps<T>) => React.ReactNode;
   /**
    * Options for the content component which will be passed as props.
    */
-  contentOptions?: T;
+  drawerContentOptions?: T;
   /**
    * Style object for the component wrapping the screen content.
    */

packages/drawer/src/views/Drawer.tsx

@@ -8,6 +8,7 @@ import {
   Keyboard,
   StatusBar,
   StyleProp,
+  View,
 } from 'react-native';
 import {
   PanGestureHandler,
@@ -428,7 +429,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 +527,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}
@@ -537,7 +545,13 @@ export default class DrawerView extends React.PureComponent<Props> {
               sceneContainerStyle as any,
             ]}
           >
-            {renderSceneContent({ progress: this.progress })}
+            <View
+              accessibilityElementsHidden={open}
+              importantForAccessibility={open ? 'no-hide-descendants' : 'auto'}
+              style={styles.content}
+            >
+              {renderSceneContent({ progress: this.progress })}
+            </View>
             <TapGestureHandler onHandlerStateChange={this.handleTapStateChange}>
               <Animated.View
                 style={[

packages/drawer/src/views/DrawerView.tsx

@@ -23,6 +23,7 @@ import {
   DrawerDescriptorMap,
   DrawerNavigationConfig,
   DrawerNavigationHelpers,
+  DrawerContentComponentProps,
 } from '../types';
 
 type Props = Omit<DrawerNavigationConfig, 'overlayColor'> & {
@@ -64,7 +65,9 @@ const getDefaultDrawerWidth = ({
 export default class DrawerView extends React.PureComponent<Props, State> {
   static defaultProps = {
     lazy: true,
-    contentComponent: DrawerContent,
+    drawerContent: (props: DrawerContentComponentProps) => (
+      <DrawerContent {...props} />
+    ),
     drawerPosition: I18nManager.isRTL ? 'right' : 'left',
     keyboardDismissMode: 'on-drag',
     overlayColor: 'rgba(0, 0, 0, 0.5)',
@@ -135,58 +138,52 @@ export default class DrawerView extends React.PureComponent<Props, State> {
       navigation,
       descriptors,
       drawerPosition,
-      contentComponent: ContentComponent,
+      drawerContent,
+      drawerContentOptions,
     } = this.props;
 
-    return (
-      <ContentComponent
-        progress={progress}
-        state={state}
-        navigation={navigation}
-        descriptors={descriptors}
-        drawerPosition={drawerPosition}
-      />
-    );
+    return drawerContent({
+      ...drawerContentOptions,
+      progress: progress,
+      state: state,
+      navigation: navigation,
+      descriptors: descriptors,
+      drawerPosition: drawerPosition,
+    });
   };
 
   private renderContent = () => {
-    let { lazy, state, descriptors, unmountInactiveRoutes } = this.props;
+    let { lazy, state, descriptors, unmountInactiveScreens } = this.props;
 
     const { loaded } = this.state;
 
-    if (unmountInactiveRoutes) {
-      const activeKey = state.routes[state.index].key;
-      const descriptor = descriptors[activeKey];
+    return (
+      <ScreenContainer style={styles.content}>
+        {state.routes.map((route, index) => {
+          if (unmountInactiveScreens && index !== state.index) {
+            return null;
+          }
 
-      return descriptor.render();
-    } else {
-      return (
-        <ScreenContainer style={styles.content}>
-          {state.routes.map((route, index) => {
-            if (lazy && !loaded.includes(index)) {
-              // Don't render a screen if we've never navigated to it
-              return null;
-            }
+          if (lazy && !loaded.includes(index)) {
+            // Don't render a screen if we've never navigated to it
+            return null;
+          }
 
-            const isFocused = state.index === index;
-            const descriptor = descriptors[route.key];
+          const isFocused = state.index === index;
+          const descriptor = descriptors[route.key];
 
-            return (
-              <ResourceSavingScene
-                key={route.key}
-                style={[
-                  StyleSheet.absoluteFill,
-                  { opacity: isFocused ? 1 : 0 },
-                ]}
-                isVisible={isFocused}
-              >
-                {descriptor.render()}
-              </ResourceSavingScene>
-            );
-          })}
-        </ScreenContainer>
-      );
-    }
+          return (
+            <ResourceSavingScene
+              key={route.key}
+              style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
+              isVisible={isFocused}
+            >
+              {descriptor.render()}
+            </ResourceSavingScene>
+          );
+        })}
+      </ScreenContainer>
+    );
   };
 
   private setDrawerGestureRef = (ref: PanGestureHandler | null) => {

packages/example/CHANGELOG.md

@@ -3,6 +3,60 @@
 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.19](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.18...@react-navigation/example@5.0.0-alpha.19) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.17...@react-navigation/example@5.0.0-alpha.18) (2019-11-02)
+
+
+### Bug Fixes
+
+* minor tweaks for web and fix example ([67fd69a](https://github.com/satya164/navigation-ex/commit/67fd69a))
+
+
+
+
+
+# [5.0.0-alpha.17](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.16...@react-navigation/example@5.0.0-alpha.17) (2019-10-29)
+
+
+### Bug Fixes
+
+* improve type annotation for screens ([8f16085](https://github.com/satya164/navigation-ex/commit/8f16085))
+
+
+
+
+
+# [5.0.0-alpha.16](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.15...@react-navigation/example@5.0.0-alpha.16) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [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)
 
 

packages/example/ios/Podfile

@@ -28,7 +28,7 @@ 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'
+  pod 'RNScreens', :path => '../node_modules/react-native-screens/RNScreens.podspec'
 
   use_unimodules!
   pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'

packages/example/ios/Podfile.lock

@@ -93,7 +93,7 @@ PODS:
     - React
   - RNReanimated (1.2.0):
     - React
-  - RNScreens (2.0.0-alpha.4):
+  - RNScreens (2.0.0-alpha.7):
     - React
   - UMBarCodeScannerInterface (4.0.0)
   - UMCameraInterface (4.0.0)
@@ -159,7 +159,7 @@ DEPENDENCIES:
   - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  https://github.com/cocoapods/specs.git:
+  trunk:
     - boost-for-react-native
 
 EXTERNAL SOURCES:
@@ -208,7 +208,7 @@ EXTERNAL SOURCES:
   RNReanimated:
     :podspec: "../node_modules/react-native-reanimated/RNReanimated.podspec"
   RNScreens:
-    :podspec: "../node_modules/react-native-screens/RNScreens.podspec"
+    :path: "../node_modules/react-native-screens/RNScreens.podspec"
   UMBarCodeScannerInterface:
     :path: !ruby/object:Pathname
     path: "../node_modules/unimodules-barcode-scanner-interface/ios"
@@ -267,7 +267,7 @@ SPEC CHECKSUMS:
   react-native-safe-area-context: e380a6f783ccaec848e2f3cc8eb205a62362950d
   RNGestureHandler: 5329a942fce3d41c68b84c2c2276ce06a696d8b0
   RNReanimated: 1b52415c4302f198cb581282a0166690bad62c43
-  RNScreens: 84be1a2369a580beb2fea0755cc62ef16b83fffe
+  RNScreens: 2f53466846305189a0cfd1745f26b6ca141b3a08
   UMBarCodeScannerInterface: d5a6fdc98ed6241225b0a8432a7f4e2b397668bc
   UMCameraInterface: 68870a3197fee85bd5afca5609ba4a5b7257d19d
   UMConstantsInterface: d25b8e8887ca7aaf568c06caf08f4d40734ee4ef
@@ -282,6 +282,6 @@ SPEC CHECKSUMS:
   UMTaskManagerInterface: 1e70fe58b872355f0ecb44fb81bb1a16484047f0
   yoga: 684513b14b03201579ba3cee20218c9d1298b0cc
 
-PODFILE CHECKSUM: 1276a2dd000c142ccc03272023bb8a6b2d5b9933
+PODFILE CHECKSUM: 277599ab8fceae1c57f639a14203691239c429ab
 
-COCOAPODS: 1.7.5
+COCOAPODS: 1.8.4

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.13",
+  "version": "5.0.0-alpha.19",
   "private": true,
   "workspaces": {
     "nohoist": [
@@ -27,10 +27,11 @@
     "react-dom": "~16.8.3",
     "react-native": "~0.59.10",
     "react-native-gesture-handler": "~1.3.0",
-    "react-native-paper": "^3.0.0-alpha.3",
+    "react-native-paper": "^3.1.1",
     "react-native-reanimated": "~1.2.0",
+    "react-native-reanimated-web": "npm:react-native-reanimated@^1.3.2",
     "react-native-safe-area-context": "~0.3.6",
-    "react-native-screens": "2.0.0-alpha.4",
+    "react-native-screens": "^2.0.0-alpha.7",
     "react-native-tab-view": "2.10.0",
     "react-native-unimodules": "^0.7.0-rc.1",
     "react-native-web": "^0.11.7",
@@ -44,7 +45,7 @@
     "@types/react": "^16.9.4",
     "@types/react-native": "^0.60.19",
     "babel-preset-expo": "^7.0.0",
-    "expo-cli": "^3.3.0",
+    "expo-cli": "^3.4.1",
     "jetifier": "^1.6.4",
     "typescript": "^3.6.3"
   }

packages/example/src/Screens/BottomTabs.tsx

@@ -32,26 +32,26 @@ const BottomTabs = createBottomTabNavigator<BottomTabParams>();
 
 export default function BottomTabsScreen() {
   return (
-    <BottomTabs.Navigator>
+    <BottomTabs.Navigator
+      screenOptions={{
+        tabBarButton: props => <TouchableBounce {...props} />,
+      }}
+    >
       <BottomTabs.Screen
         name="article"
         options={{
           title: 'Article',
           tabBarIcon: getTabBarIcon('file-document-box'),
-          tabBarButtonComponent: TouchableBounce,
         }}
       >
-        {props => (
-          <SimpleStackScreen {...props} options={{ headerMode: 'none' }} />
-        )}
+        {props => <SimpleStackScreen {...props} headerMode="none" />}
       </BottomTabs.Screen>
       <BottomTabs.Screen
         name="chat"
         component={Chat}
         options={{
-          title: 'Chat',
+          tabBarLabel: 'Chat',
           tabBarIcon: getTabBarIcon('message-reply'),
-          tabBarButtonComponent: TouchableBounce,
         }}
       />
       <BottomTabs.Screen
@@ -60,7 +60,6 @@ export default function BottomTabsScreen() {
         options={{
           title: 'Contacts',
           tabBarIcon: getTabBarIcon('contacts'),
-          tabBarButtonComponent: TouchableBounce,
         }}
       />
       <BottomTabs.Screen
@@ -69,7 +68,6 @@ export default function BottomTabsScreen() {
         options={{
           title: 'Albums',
           tabBarIcon: getTabBarIcon('image-album'),
-          tabBarButtonComponent: TouchableBounce,
         }}
       />
     </BottomTabs.Navigator>

packages/example/src/Screens/MaterialBottomTabs.tsx

@@ -28,9 +28,7 @@ export default function MaterialBottomTabsScreen() {
           tabBarColor: '#C9E7F8',
         }}
       >
-        {props => (
-          <SimpleStackScreen {...props} options={{ headerMode: 'none' }} />
-        )}
+        {props => <SimpleStackScreen {...props} headerMode="none" />}
       </MaterialBottomTabs.Screen>
       <MaterialBottomTabs.Screen
         name="chat"

packages/example/src/Screens/NativeStack.tsx

@@ -2,7 +2,7 @@ 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 { enableScreens } from 'react-native-screens';
 import {
   RouteProp,
   ParamListBase,
@@ -124,8 +124,7 @@ export default function NativeStackScreen({ navigation }: Props) {
   );
 }
 
-// eslint-disable-next-line react-hooks/rules-of-hooks
-useScreens(true);
+enableScreens(true);
 
 const styles = StyleSheet.create({
   buttons: {

packages/example/src/Screens/NativeStack.web.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}>Not supported on Web :(</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#eceff1',
+  },
+  text: {
+    fontSize: 16,
+    color: '#999',
+  },
+});

packages/example/src/Screens/SimpleStack.tsx

@@ -5,7 +5,6 @@ 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';
@@ -77,18 +76,17 @@ const AlbumsScreen = ({
 
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
-type Props = {
-  options?: StackNavigationOptions;
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
   navigation: StackNavigationProp<ParamListBase>;
 };
 
-export default function SimpleStackScreen({ navigation, options }: Props) {
+export default function SimpleStackScreen({ navigation, ...rest }: Props) {
   navigation.setOptions({
     headerShown: false,
   });
 
   return (
-    <SimpleStack.Navigator {...options}>
+    <SimpleStack.Navigator {...rest}>
       <SimpleStack.Screen
         name="article"
         component={ArticleScreen}

packages/example/webpack.config.js

@@ -10,6 +10,7 @@ module.exports = async function(env, argv) {
   config.module.rules.push({
     test: /\.(js|ts|tsx)$/,
     include: /packages\/.+/,
+    exclude: /node_modules/,
     use: 'babel-loader',
   });
 
@@ -17,25 +18,23 @@ module.exports = async function(env, argv) {
     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');
+  Object.assign(config.resolve.alias, {
+    react: path.resolve(__dirname, 'node_modules', 'react'),
+    'react-native': path.resolve(__dirname, 'node_modules', 'react-native-web'),
+    'react-native-web': path.resolve(
+      __dirname,
+      'node_modules',
+      'react-native-web'
+    ),
+    'react-native-reanimated': path.resolve(
+      __dirname,
+      'node_modules',
+      'react-native-reanimated-web'
+    ),
+    '@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(

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.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.17...@react-navigation/material-bottom-tabs@5.0.0-alpha.18) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.16...@react-navigation/material-bottom-tabs@5.0.0-alpha.17) (2019-10-30)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.15...@react-navigation/material-bottom-tabs@5.0.0-alpha.16) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [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)
 
 

packages/material-bottom-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.13",
+  "version": "5.0.0-alpha.18",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@react-navigation/routers": "^5.0.0-alpha.12"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
@@ -44,7 +44,7 @@
     "del-cli": "^3.0.0",
     "react": "~16.8.3",
     "react-native": "~0.59.10",
-    "react-native-paper": "^3.0.0-alpha.3",
+    "react-native-paper": "^3.1.1",
     "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",
     "react-native-vector-icons": "^6.0.0"
   },
   "@react-native-community/bob": {

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

@@ -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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { BottomNavigation } from 'react-native-paper';
 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 ${
-        state.routes.length
-      }`;
+      return `${label}, tab, ${state.routes.findIndex(
+        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,30 @@
 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-top-tabs@5.0.0-alpha.14...@react-navigation/material-top-tabs@5.0.0-alpha.15) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.13...@react-navigation/material-top-tabs@5.0.0-alpha.14) (2019-10-30)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.12...@react-navigation/material-top-tabs@5.0.0-alpha.13) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 # [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)
 
 

packages/material-top-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.12",
+  "version": "5.0.0-alpha.15",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@react-navigation/routers": "^5.0.0-alpha.12"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",

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

@@ -119,7 +119,7 @@ export type MaterialTopTabNavigationConfig = Partial<
   >
 > & {
   /**
-   * Component to render for routes that haven't been rendered yet.
+   * Function that returns a React element to render for routes that haven't been rendered yet.
    * Receives an object containing the route as the prop.
    * The lazy prop also needs to be enabled.
    *
@@ -127,11 +127,11 @@ export type MaterialTopTabNavigationConfig = Partial<
    *
    * By default, this renders null.
    */
-  lazyPlaceholderComponent?: React.ComponentType<{ route: Route<string> }>;
+  lazyPlaceholder?: (props: { route: Route<string> }) => React.ReactNode;
   /**
-   * Custom tab bar component.
+   * Function that returns a React element to display as the tab bar.
    */
-  tabBarComponent?: React.ComponentType<MaterialTopTabBarProps>;
+  tabBar?: (props: MaterialTopTabBarProps) => React.ReactNode;
   /**
    * Options for the tab bar which will be passed as props to the tab bar component.
    */

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

@@ -8,6 +8,7 @@ import {
   MaterialTopTabDescriptorMap,
   MaterialTopTabNavigationConfig,
   MaterialTopTabNavigationHelpers,
+  MaterialTopTabBarProps,
 } from '../types';
 
 type Props = MaterialTopTabNavigationConfig & {
@@ -23,10 +24,10 @@ export default class MaterialTopTabView extends React.PureComponent<Props> {
   };
 
   private renderLazyPlaceholder = (props: { route: Route<string> }) => {
-    const { lazyPlaceholderComponent: LazyPlaceholder } = this.props;
+    const { lazyPlaceholder } = this.props;
 
-    if (LazyPlaceholder != null) {
-      return <LazyPlaceholder {...props} />;
+    if (lazyPlaceholder != null) {
+      return lazyPlaceholder(props);
     }
 
     return null;
@@ -99,30 +100,30 @@ export default class MaterialTopTabView extends React.PureComponent<Props> {
 
     const {
       navigation,
-      tabBarComponent: TabBarComponent = MaterialTopTabBar,
+      tabBar = (props: MaterialTopTabBarProps) => (
+        <MaterialTopTabBar {...props} />
+      ),
       tabBarPosition,
       tabBarOptions,
     } = this.props;
 
-    if (TabBarComponent === null || !tabBarVisible) {
+    if (tabBarVisible === false) {
       return null;
     }
 
-    return (
-      <TabBarComponent
-        {...tabBarOptions}
-        {...props}
-        tabBarPosition={tabBarPosition}
-        state={state}
-        navigation={navigation}
-        descriptors={descriptors}
-        getAccessibilityLabel={this.getAccessibilityLabel}
-        getLabelText={this.getLabelText}
-        getTestID={this.getTestID}
-        onTabPress={this.handleTabPress}
-        onTabLongPress={this.handleTabLongPress}
-      />
-    );
+    return tabBar({
+      ...tabBarOptions,
+      ...props,
+      tabBarPosition: tabBarPosition,
+      state: state,
+      navigation: navigation,
+      descriptors: descriptors,
+      getAccessibilityLabel: this.getAccessibilityLabel,
+      getLabelText: this.getLabelText,
+      getTestID: this.getTestID,
+      onTabPress: this.handleTabPress,
+      onTabLongPress: this.handleTabLongPress,
+    });
   };
 
   private handleSwipeStart = () =>
@@ -138,8 +139,8 @@ export default class MaterialTopTabView extends React.PureComponent<Props> {
   render() {
     const {
       /* eslint-disable @typescript-eslint/no-unused-vars */
-      lazyPlaceholderComponent,
-      tabBarComponent,
+      lazyPlaceholder,
+      tabBar,
       tabBarOptions,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       state,

packages/native-stack/CHANGELOG.md

@@ -3,6 +3,96 @@
 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.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.9...@react-navigation/native-stack@5.0.0-alpha.10) (2019-11-04)
+
+
+### Bug Fixes
+
+* popToTop on tab press in native stack ([301c35e](https://github.com/react-navigation/navigation-ex/commit/301c35e))
+
+
+
+
+
+# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.8...@react-navigation/native-stack@5.0.0-alpha.9) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.7...@react-navigation/native-stack@5.0.0-alpha.8) (2019-11-02)
+
+
+### Features
+
+* add headerBackTitleVisible to navigation options in native stack ([77f29d3](https://github.com/react-navigation/navigation-ex/commit/77f29d3))
+
+
+
+
+
+# [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.6...@react-navigation/native-stack@5.0.0-alpha.7) (2019-11-02)
+
+
+### Bug Fixes
+
+* remove top margin from screen in native stack on Android ([5cd6940](https://github.com/react-navigation/navigation-ex/commit/5cd6940))
+
+
+
+
+
+# [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.5...@react-navigation/native-stack@5.0.0-alpha.6) (2019-10-30)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.4...@react-navigation/native-stack@5.0.0-alpha.5) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [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)
 
 

packages/native-stack/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.10",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,19 +29,19 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@react-navigation/routers": "^5.0.0-alpha.12"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
     "del-cli": "^2.0.0",
-    "react-native-screens": "^2.0.0-alpha.3",
+    "react-native-screens": "^2.0.0-alpha.7",
     "typescript": "^3.5.3"
   },
   "peerDependencies": {
     "@react-navigation/core": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
-    "react-native-screens": "^2.0.0-alpha.3"
+    "react-native-screens": "^2.0.0-alpha.7"
   },
   "@react-native-community/bob": {
     "source": "src",

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

@@ -1,10 +1,15 @@
 import React from 'react';
-import { createNavigator, useNavigationBuilder } from '@react-navigation/core';
+import {
+  createNavigator,
+  useNavigationBuilder,
+  EventArg,
+} from '@react-navigation/core';
 
 import {
   StackRouter,
   StackNavigationState,
   StackRouterOptions,
+  StackActions,
 } from '@react-navigation/routers';
 
 import {
@@ -36,6 +41,28 @@ function NativeStackNavigator(props: NativeStackNavigatorProps) {
     screenOptions,
   });
 
+  React.useEffect(
+    () =>
+      navigation.addListener &&
+      navigation.addListener('tabPress', (e: EventArg<'tabPress'>) => {
+        const isFocused = navigation.isFocused();
+
+        // Run the operation in the next frame so we're sure all listeners have been run
+        // This is necessary to know if preventDefault() has been called
+        requestAnimationFrame(() => {
+          if (state.index > 0 && isFocused && !e.defaultPrevented) {
+            // When user taps on already focused tab and we're inside the tab,
+            // reset the stack to replicate native behaviour
+            navigation.dispatch({
+              ...StackActions.popToTop(),
+              target: state.key,
+            });
+          }
+        });
+      }),
+    [navigation, state.index, state.key]
+  );
+
   return (
     <StackView
       state={state}

packages/native-stack/src/types.tsx

@@ -65,6 +65,13 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   headerBackTitle?: string;
+  /**
+   * Whether the back button title should be visible or not. Defaults to `true`.
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  headerBackTitleVisible?: boolean;
   /**
    * Whether to show the header.
    */
@@ -123,6 +130,19 @@ export type NativeStackNavigationOptions = {
     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

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

@@ -20,6 +20,7 @@ export default function HeaderConfig(props: Props) {
     headerRight,
     headerTitle,
     headerBackTitle,
+    headerBackTitleVisible = true,
     headerHideBackButton,
     headerHideShadow,
     headerTintColor,
@@ -27,6 +28,7 @@ export default function HeaderConfig(props: Props) {
     headerTranslucent,
     headerStyle = {},
     headerTitleStyle = {},
+    headerLargeTitleStyle = {},
     headerBackTitleStyle = {},
     headerShown,
     gestureEnabled,
@@ -46,18 +48,20 @@ export default function HeaderConfig(props: Props) {
           : route.name
       }
       titleFontFamily={headerTitleStyle.fontFamily}
-      titleFontSize={headerTitleStyle.fontFamily}
+      titleFontSize={headerTitleStyle.fontSize}
       titleColor={
         headerTitleStyle.color !== undefined
           ? headerTitleStyle.color
           : headerTintColor
       }
-      backTitle={headerBackTitle}
+      backTitle={headerBackTitleVisible ? 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 ? (

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { StackNavigationState, StackActions } from '@react-navigation/routers';
 
 import {
@@ -55,7 +55,6 @@ const styles = StyleSheet.create({
   content: {
     flex: 1,
     backgroundColor: '#eee',
-    marginTop: Platform.OS === 'android' ? 56 : 0,
   },
   scenes: {
     flex: 1,

packages/native/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.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.13...@react-navigation/native@5.0.0-alpha.14) (2019-10-30)
+
+
+### Bug Fixes
+
+* support scroll to top in navigators nested in tab ([50dea65](https://github.com/react-navigation/navigation-ex/commit/50dea65))
+
+
+
+
+
+# [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)
 
 

packages/native/package.json

@@ -7,7 +7,7 @@
     "ios",
     "android"
   ],
-  "version": "5.0.0-alpha.12",
+  "version": "5.0.0-alpha.14",
   "license": "MIT",
   "repository": {
     "type": "git",

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/native/src/useScrollToTop.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useNavigation, EventArg } from '@react-navigation/core';
+import { useNavigation, useRoute, EventArg } from '@react-navigation/core';
 
 type ScrollOptions = { y?: number; animated?: boolean };
 
@@ -36,22 +36,42 @@ export default function useScrollToTop(
   ref: React.RefObject<ScrollableWrapper>
 ) {
   const navigation = useNavigation();
+  const route = useRoute();
 
-  React.useEffect(
-    () =>
-      // @ts-ignore
+  React.useEffect(() => {
+    let current = navigation;
+
+    // The screen might be inside another navigator such as stack nested in tabs
+    // We need to find the closest tab navigator and add the listener there
+    while (current && current.dangerouslyGetState().type !== 'tab') {
+      current = current.dangerouslyGetParent();
+    }
+
+    if (!current) {
+      return;
+    }
+
+    const unsubscribe = current.addListener(
       // We don't wanna import tab types here to avoid extra deps
       // in addition, there are multiple tab implementations
-      navigation.addListener('tabPress', (e: EventArg<'tabPress'>) => {
+      // @ts-ignore
+      'tabPress',
+      (e: EventArg<'tabPress'>) => {
+        // We should scroll to top only when the screen is focused
         const isFocused = navigation.isFocused();
 
+        // In a nested stack navigator, tab press resets the stack to first screen
+        // So we should scroll to top only when we are on first screen
+        const isFirst =
+          navigation === current ||
+          navigation.dangerouslyGetState().routes[0].key === route.key;
+
         // Run the operation in the next frame so we're sure all listeners have been run
         // This is necessary to know if preventDefault() has been called
         requestAnimationFrame(() => {
           const scrollable = getScrollableNode(ref);
 
-          if (isFocused && !e.defaultPrevented && scrollable) {
-            // When user taps on already focused tab, scroll to top
+          if (isFocused && isFirst && scrollable && !e.defaultPrevented) {
             if ('scrollToTop' in scrollable) {
               scrollable.scrollToTop();
             } else if ('scrollTo' in scrollable) {
@@ -63,7 +83,9 @@ export default function useScrollToTop(
             }
           }
         });
-      }),
-    [navigation, ref]
-  );
+      }
+    );
+
+    return unsubscribe;
+  }, [navigation, ref, route.key]);
 }

packages/routers/CHANGELOG.md

@@ -3,6 +3,36 @@
 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/routers@5.0.0-alpha.11...@react-navigation/routers@5.0.0-alpha.12) (2019-11-04)
+
+
+### Bug Fixes
+
+* close drawer on back button press ([3a4c38b](https://github.com/react-navigation/navigation-ex/commit/3a4c38b))
+
+
+
+
+
+# [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.10...@react-navigation/routers@5.0.0-alpha.11) (2019-10-30)
+
+**Note:** Version bump only for package @react-navigation/routers
+
+
+
+
+
+# [5.0.0-alpha.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.9...@react-navigation/routers@5.0.0-alpha.10) (2019-10-29)
+
+
+### Bug Fixes
+
+* use index of first route when rehydrating tab state ([7635373](https://github.com/react-navigation/navigation-ex/commit/7635373))
+
+
+
+
+
 # [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.8...@react-navigation/routers@5.0.0-alpha.9) (2019-10-03)
 
 **Note:** Version bump only for package @react-navigation/routers

packages/routers/__tests__/DrawerRouter.test.tsx

@@ -26,6 +26,7 @@ it('gets initial state from route names and params with initialRouteName', () =>
       { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'drawer',
   });
 });
 
@@ -52,6 +53,7 @@ it('gets initial state from route names and params without initialRouteName', ()
       { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'drawer',
   });
 });
 
@@ -85,6 +87,29 @@ it('gets rehydrated state from partial state', () => {
       { key: 'qux-1', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'drawer',
+  });
+
+  expect(
+    router.getRehydratedState(
+      {
+        routes: [{ key: 'baz-0', name: 'baz' }],
+      },
+      options
+    )
+  ).toEqual({
+    index: 1,
+    key: 'drawer-test',
+    isDrawerOpen: false,
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-0', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+    type: 'drawer',
   });
 
   expect(
@@ -111,6 +136,7 @@ it('gets rehydrated state from partial state', () => {
       { key: 'qux-2', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'drawer',
   });
 
   expect(
@@ -122,7 +148,7 @@ it('gets rehydrated state from partial state', () => {
       options
     )
   ).toEqual({
-    index: 0,
+    index: 2,
     key: 'drawer-test',
     isDrawerOpen: false,
     routeKeyHistory: [],
@@ -133,6 +159,7 @@ it('gets rehydrated state from partial state', () => {
       { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'drawer',
   });
 
   expect(
@@ -157,6 +184,7 @@ it('gets rehydrated state from partial state', () => {
       { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'drawer',
   });
 });
 
@@ -175,6 +203,7 @@ it("doesn't rehydrate state if it's not stale", () => {
       { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false as const,
+    type: 'drawer' as const,
   };
 
   expect(
@@ -192,6 +221,7 @@ it('handles navigate action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'drawer',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar'],
@@ -203,6 +233,7 @@ it('handles navigate action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'drawer',
     key: 'root',
     index: 0,
     routeNames: ['baz', 'bar'],
@@ -222,6 +253,7 @@ it('handles navigate action with open drawer', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'drawer',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar'],
@@ -233,6 +265,7 @@ it('handles navigate action with open drawer', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'drawer',
     key: 'root',
     index: 0,
     routeNames: ['baz', 'bar'],
@@ -252,6 +285,7 @@ it('handles open drawer action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'drawer',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar'],
@@ -263,6 +297,7 @@ it('handles open drawer action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'drawer',
     key: 'root',
     index: 1,
     routeNames: ['baz', 'bar'],
@@ -273,6 +308,7 @@ it('handles open drawer action', () => {
 
   const state = {
     stale: false as const,
+    type: 'drawer' as const,
     key: 'root',
     index: 1,
     routeNames: ['baz', 'bar'],
@@ -293,6 +329,7 @@ it('handles close drawer action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'drawer',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar'],
@@ -304,6 +341,7 @@ it('handles close drawer action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'drawer',
     key: 'root',
     index: 1,
     routeNames: ['baz', 'bar'],
@@ -314,6 +352,7 @@ it('handles close drawer action', () => {
 
   const state = {
     stale: false as const,
+    type: 'drawer' as const,
     key: 'root',
     index: 1,
     routeNames: ['baz', 'bar'],
@@ -334,6 +373,7 @@ it('handles toggle drawer action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'drawer',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar'],
@@ -345,6 +385,7 @@ it('handles toggle drawer action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'drawer',
     key: 'root',
     index: 1,
     routeNames: ['baz', 'bar'],
@@ -357,6 +398,7 @@ it('handles toggle drawer action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'drawer',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar'],
@@ -368,6 +410,7 @@ it('handles toggle drawer action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'drawer',
     key: 'root',
     index: 1,
     routeNames: ['baz', 'bar'],
@@ -392,6 +435,7 @@ it('updates route key history on focus change', () => {
       { key: 'qux-0', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false as const,
+    type: 'drawer' as const,
   };
 
   expect(router.getStateForRouteFocus(state, 'bar-0').routeKeyHistory).toEqual(
@@ -420,6 +464,7 @@ it('closes drawer on focus change', () => {
           { key: 'qux-0', name: 'qux' },
         ],
         stale: false,
+        type: 'drawer',
       },
       'baz-0'
     )
@@ -435,6 +480,7 @@ it('closes drawer on focus change', () => {
       { key: 'qux-0', name: 'qux' },
     ],
     stale: false,
+    type: 'drawer',
   });
 
   expect(
@@ -451,6 +497,7 @@ it('closes drawer on focus change', () => {
           { key: 'qux-0', name: 'qux' },
         ],
         stale: false,
+        type: 'drawer',
       },
       'baz-0'
     )
@@ -466,5 +513,6 @@ it('closes drawer on focus change', () => {
       { key: 'qux-0', name: 'qux' },
     ],
     stale: false,
+    type: 'drawer',
   });
 });

packages/routers/__tests__/StackRouter.test.tsx

@@ -20,6 +20,7 @@ it('gets initial state from route names and params with initialRouteName', () =>
     routeNames: ['bar', 'baz', 'qux'],
     routes: [{ key: 'baz-test', name: 'baz', params: { answer: 42 } }],
     stale: false,
+    type: 'stack',
   });
 });
 
@@ -40,6 +41,7 @@ it('gets initial state from route names and params without initialRouteName', ()
     routeNames: ['bar', 'baz', 'qux'],
     routes: [{ key: 'bar-test', name: 'bar' }],
     stale: false,
+    type: 'stack',
   });
 });
 
@@ -70,6 +72,7 @@ it('gets rehydrated state from partial state', () => {
       { key: 'qux-1', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'stack',
   });
 
   expect(
@@ -94,6 +97,7 @@ it('gets rehydrated state from partial state', () => {
       { key: 'qux-2', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'stack',
   });
 
   expect(
@@ -110,6 +114,7 @@ it('gets rehydrated state from partial state', () => {
     routeNames: ['bar', 'baz', 'qux'],
     routes: [{ key: 'bar-test', name: 'bar' }],
     stale: false,
+    type: 'stack',
   });
 });
 
@@ -122,6 +127,7 @@ it("doesn't rehydrate state if it's not stale", () => {
     routeNames: ['bar', 'baz', 'qux'],
     routes: [{ key: 'bar-test', name: 'bar' }],
     stale: false as const,
+    type: 'stack' as const,
   };
 
   expect(
@@ -147,6 +153,7 @@ it('gets state on route names change', () => {
           { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
         ],
         stale: false,
+        type: 'stack',
       },
       {
         routeNames: ['qux', 'baz', 'foo', 'fiz'],
@@ -165,6 +172,7 @@ it('gets state on route names change', () => {
       { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'stack',
   });
 
   expect(
@@ -178,6 +186,7 @@ it('gets state on route names change', () => {
           { key: 'bar-test', name: 'bar' },
         ],
         stale: false,
+        type: 'stack',
       },
       {
         routeNames: ['baz', 'qux'],
@@ -192,6 +201,7 @@ it('gets state on route names change', () => {
     routeNames: ['baz', 'qux'],
     routes: [{ key: 'baz-test', name: 'baz', params: { name: 'John' } }],
     stale: false,
+    type: 'stack',
   });
 });
 
@@ -209,6 +219,7 @@ it('gets state on route names change with initialRouteName', () => {
           { key: 'bar-test', name: 'bar' },
         ],
         stale: false,
+        type: 'stack',
       },
       {
         routeNames: ['baz', 'qux'],
@@ -223,6 +234,7 @@ it('gets state on route names change with initialRouteName', () => {
     routeNames: ['baz', 'qux'],
     routes: [{ key: 'qux-test', name: 'qux' }],
     stale: false,
+    type: 'stack',
   });
 });
 
@@ -233,6 +245,7 @@ it('handles navigate action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
@@ -242,6 +255,7 @@ it('handles navigate action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'stack',
     key: 'root',
     index: 2,
     routeNames: ['baz', 'bar', 'qux'],
@@ -260,6 +274,7 @@ it('handles navigate action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
@@ -269,6 +284,7 @@ it('handles navigate action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'stack',
     key: 'root',
     index: 0,
     routeNames: ['baz', 'bar', 'qux'],
@@ -279,6 +295,7 @@ it('handles navigate action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
@@ -291,6 +308,7 @@ it('handles navigate action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'stack',
     key: 'root',
     index: 1,
     routeNames: ['baz', 'bar', 'qux'],
@@ -304,6 +322,7 @@ it('handles navigate action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
@@ -317,6 +336,7 @@ it('handles navigate action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
@@ -330,6 +350,7 @@ it('handles navigate action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
@@ -342,6 +363,7 @@ it('handles navigate action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'stack',
     key: 'root',
     index: 0,
     routeNames: ['baz', 'bar', 'qux'],
@@ -352,6 +374,7 @@ it('handles navigate action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
@@ -361,6 +384,7 @@ it('handles navigate action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'stack',
     key: 'root',
     index: 2,
     routeNames: ['baz', 'bar', 'qux'],
@@ -379,6 +403,7 @@ it('handles go back action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
@@ -388,6 +413,7 @@ it('handles go back action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'stack',
     key: 'root',
     index: 0,
     routeNames: ['baz', 'bar', 'qux'],
@@ -398,6 +424,7 @@ it('handles go back action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 0,
         routeNames: ['baz', 'bar', 'qux'],
@@ -415,6 +442,7 @@ it('handles pop action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 2,
         routeNames: ['baz', 'bar', 'qux'],
@@ -428,6 +456,7 @@ it('handles pop action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'stack',
     key: 'root',
     index: 1,
     routeNames: ['baz', 'bar', 'qux'],
@@ -438,6 +467,7 @@ it('handles pop action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 2,
         routeNames: ['baz', 'bar', 'qux'],
@@ -451,6 +481,7 @@ it('handles pop action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'stack',
     key: 'root',
     index: 0,
     routeNames: ['baz', 'bar', 'qux'],
@@ -461,6 +492,7 @@ it('handles pop action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 2,
         routeNames: ['baz', 'bar', 'qux'],
@@ -478,6 +510,7 @@ it('handles pop action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'stack',
     key: 'root',
     index: 0,
     routeNames: ['baz', 'bar', 'qux'],
@@ -488,6 +521,7 @@ it('handles pop action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 0,
         routeNames: ['baz', 'bar', 'qux'],
@@ -505,6 +539,7 @@ it('handles pop to top action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 2,
         routeNames: ['baz', 'bar', 'qux'],
@@ -518,6 +553,7 @@ it('handles pop to top action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'stack',
     key: 'root',
     index: 0,
     routeNames: ['baz', 'bar', 'qux'],
@@ -532,6 +568,7 @@ it('handles push action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 2,
         routeNames: ['baz', 'bar', 'qux'],
@@ -541,6 +578,7 @@ it('handles push action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'stack',
     key: 'root',
     index: 3,
     routeNames: ['baz', 'bar', 'qux'],
@@ -551,6 +589,7 @@ it('handles push action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'stack',
         key: 'root',
         index: 2,
         routeNames: ['baz', 'bar', 'qux'],
@@ -576,6 +615,7 @@ it('changes index on focus change', () => {
           { key: 'qux-0', name: 'qux' },
         ],
         stale: false,
+        type: 'stack',
       },
       'baz-0'
     )
@@ -585,6 +625,7 @@ it('changes index on focus change', () => {
     routeNames: ['bar', 'baz', 'qux'],
     routes: [{ key: 'bar-0', name: 'bar' }, { key: 'baz-0', name: 'baz' }],
     stale: false,
+    type: 'stack',
   });
 
   const state = {
@@ -593,6 +634,7 @@ it('changes index on focus change', () => {
     routeNames: ['bar', 'baz', 'qux'],
     routes: [{ key: 'bar-0', name: 'bar' }, { key: 'baz-0', name: 'baz' }],
     stale: false as const,
+    type: 'stack' as const,
   };
 
   expect(router.getStateForRouteFocus(state, 'qux-0')).toEqual(state);

packages/routers/__tests__/TabRouter.test.tsx

@@ -25,6 +25,7 @@ it('gets initial state from route names and params with initialRouteName', () =>
       { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'tab',
   });
 });
 
@@ -50,6 +51,7 @@ it('gets initial state from route names and params without initialRouteName', ()
       { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'tab',
   });
 });
 
@@ -82,6 +84,28 @@ it('gets rehydrated state from partial state', () => {
       { key: 'qux-1', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'tab',
+  });
+
+  expect(
+    router.getRehydratedState(
+      {
+        routes: [{ key: 'baz-0', name: 'baz' }],
+      },
+      options
+    )
+  ).toEqual({
+    index: 1,
+    key: 'tab-test',
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-0', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+    type: 'tab',
   });
 
   expect(
@@ -107,6 +131,7 @@ it('gets rehydrated state from partial state', () => {
       { key: 'qux-2', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'tab',
   });
 
   expect(
@@ -118,7 +143,7 @@ it('gets rehydrated state from partial state', () => {
       options
     )
   ).toEqual({
-    index: 0,
+    index: 2,
     key: 'tab-test',
     routeKeyHistory: [],
     routeNames: ['bar', 'baz', 'qux'],
@@ -128,6 +153,7 @@ it('gets rehydrated state from partial state', () => {
       { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'tab',
   });
 
   expect(
@@ -150,6 +176,7 @@ it('gets rehydrated state from partial state', () => {
       { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false,
+    type: 'tab',
   });
 });
 
@@ -167,6 +194,7 @@ it("doesn't rehydrate state if it's not stale", () => {
       { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false as const,
+    type: 'tab' as const,
   };
 
   expect(
@@ -193,6 +221,7 @@ it('gets state on route names change', () => {
           { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
         ],
         stale: false,
+        type: 'tab',
       },
       {
         routeNames: ['qux', 'baz', 'foo', 'fiz'],
@@ -214,6 +243,7 @@ it('gets state on route names change', () => {
       { key: 'fiz-test', name: 'fiz', params: { fruit: 'apple' } },
     ],
     stale: false,
+    type: 'tab',
   });
 });
 
@@ -224,6 +254,7 @@ it('handles navigate action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'tab',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar'],
@@ -234,6 +265,7 @@ it('handles navigate action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'tab',
     key: 'root',
     index: 1,
     routeNames: ['baz', 'bar'],
@@ -248,6 +280,7 @@ it('handles navigate action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'tab',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar'],
@@ -258,6 +291,7 @@ it('handles navigate action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'tab',
     key: 'root',
     index: 0,
     routeNames: ['baz', 'bar'],
@@ -272,6 +306,7 @@ it('handles navigate action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'tab',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar'],
@@ -290,6 +325,7 @@ it('handles jump to action', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'tab',
         key: 'root',
         index: 0,
         routeNames: ['baz', 'bar'],
@@ -300,6 +336,7 @@ it('handles jump to action', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'tab',
     key: 'root',
     index: 1,
     routeNames: ['baz', 'bar'],
@@ -315,6 +352,7 @@ it('handles back action with backBehavior: history', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'tab',
         key: 'root',
         index: 0,
         routeNames: ['baz', 'bar'],
@@ -325,6 +363,7 @@ it('handles back action with backBehavior: history', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'tab',
     key: 'root',
     index: 1,
     routeNames: ['baz', 'bar'],
@@ -336,6 +375,7 @@ it('handles back action with backBehavior: history', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'tab',
         key: 'root',
         index: 0,
         routeNames: ['baz', 'bar'],
@@ -354,6 +394,7 @@ it('handles back action with backBehavior: order', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'tab',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar'],
@@ -364,6 +405,7 @@ it('handles back action with backBehavior: order', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'tab',
     key: 'root',
     index: 0,
     routeNames: ['baz', 'bar'],
@@ -375,6 +417,7 @@ it('handles back action with backBehavior: order', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'tab',
         key: 'root',
         index: 0,
         routeNames: ['baz', 'bar'],
@@ -396,6 +439,7 @@ it('handles back action with backBehavior: initialRoute', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'tab',
         key: 'root',
         index: 0,
         routeNames: ['baz', 'bar'],
@@ -406,6 +450,7 @@ it('handles back action with backBehavior: initialRoute', () => {
     )
   ).toEqual({
     stale: false,
+    type: 'tab',
     key: 'root',
     index: 1,
     routeNames: ['baz', 'bar'],
@@ -417,6 +462,7 @@ it('handles back action with backBehavior: initialRoute', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'tab',
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar'],
@@ -435,6 +481,7 @@ it('handles back action with backBehavior: none', () => {
     router.getStateForAction(
       {
         stale: false,
+        type: 'tab',
         key: 'root',
         index: 0,
         routeNames: ['baz', 'bar'],
@@ -460,6 +507,7 @@ it('updates route key history on navigate and jump to', () => {
       { key: 'qux-0', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false as const,
+    type: 'tab',
   };
 
   expect(state.routeKeyHistory).toEqual([]);
@@ -514,6 +562,7 @@ it('updates route key history on focus change', () => {
       { key: 'qux-0', name: 'qux', params: { name: 'Jane' } },
     ],
     stale: false as const,
+    type: 'tab' as const,
   };
 
   expect(router.getStateForRouteFocus(state, 'bar-0').routeKeyHistory).toEqual(

packages/routers/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.9",
+  "version": "5.0.0-alpha.12",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/routers/src/DrawerRouter.tsx

@@ -17,7 +17,11 @@ export type DrawerActionType =
 
 export type DrawerRouterOptions = TabRouterOptions;
 
-export type DrawerNavigationState = TabNavigationState & {
+export type DrawerNavigationState = Omit<TabNavigationState, 'type'> & {
+  /**
+   * Type of the router, in this case, it's drawer.
+   */
+  type: 'drawer';
   /**
    * Whether the drawer is open or closed.
    */
@@ -40,7 +44,7 @@ export const DrawerActions = {
 export default function DrawerRouter(
   options: DrawerRouterOptions
 ): Router<DrawerNavigationState, DrawerActionType | CommonAction> {
-  const router = TabRouter(options) as Router<
+  const router = (TabRouter(options) as unknown) as Router<
     DrawerNavigationState,
     TabActionType | CommonAction
   >;
@@ -48,6 +52,8 @@ export default function DrawerRouter(
   return {
     ...router,
 
+    type: 'drawer',
+
     getInitialState({ routeNames, routeParamList }) {
       const index =
         options.initialRouteName === undefined
@@ -56,6 +62,7 @@ export default function DrawerRouter(
 
       return {
         stale: false,
+        type: 'drawer',
         key: `drawer-${shortid()}`,
         index,
         routeNames,
@@ -81,6 +88,7 @@ export default function DrawerRouter(
 
       return {
         ...state,
+        type: 'drawer',
         key: `drawer-${shortid()}`,
         isDrawerOpen:
           typeof partialState.isDrawerOpen === 'boolean'
@@ -144,6 +152,16 @@ export default function DrawerRouter(
             action
           );
 
+        case 'GO_BACK':
+          if (state.isDrawerOpen) {
+            return {
+              ...state,
+              isDrawerOpen: false,
+            };
+          }
+
+          return router.getStateForAction(state, action);
+
         default:
           return router.getStateForAction(state, action);
       }

packages/routers/src/StackRouter.tsx

@@ -29,7 +29,12 @@ export type StackActionType =
 
 export type StackRouterOptions = DefaultRouterOptions;
 
-export type StackNavigationState = NavigationState;
+export type StackNavigationState = NavigationState & {
+  /**
+   * Type of the router, in this case, it's stack.
+   */
+  type: 'stack';
+};
 
 export const StackActions = {
   push(name: string, params?: object): StackActionType {
@@ -47,6 +52,8 @@ export default function StackRouter(options: StackRouterOptions) {
   const router: Router<StackNavigationState, CommonAction | StackActionType> = {
     ...BaseRouter,
 
+    type: 'stack',
+
     getInitialState({ routeNames, routeParamList }) {
       const initialRouteName =
         options.initialRouteName !== undefined
@@ -55,6 +62,7 @@ export default function StackRouter(options: StackRouterOptions) {
 
       return {
         stale: false,
+        type: 'stack',
         key: `stack-${shortid()}`,
         index: 0,
         routeNames,
@@ -107,6 +115,7 @@ export default function StackRouter(options: StackRouterOptions) {
 
       return {
         stale: false,
+        type: 'stack',
         key: `stack-${shortid()}`,
         index: routes.length - 1,
         routeNames,

packages/routers/src/TabRouter.tsx

@@ -21,6 +21,10 @@ export type TabRouterOptions = DefaultRouterOptions & {
 };
 
 export type TabNavigationState = NavigationState & {
+  /**
+   * Type of the router, in this case, it's tab.
+   */
+  type: 'tab';
   /**
    * List of previously visited route keys.
    */
@@ -54,6 +58,8 @@ export default function TabRouter({
   const router: Router<TabNavigationState, TabActionType | CommonAction> = {
     ...BaseRouter,
 
+    type: 'tab',
+
     getInitialState({ routeNames, routeParamList }) {
       const index =
         initialRouteName === undefined
@@ -62,6 +68,7 @@ export default function TabRouter({
 
       return {
         stale: false,
+        type: 'tab',
         key: `tab-${shortid()}`,
         index,
         routeNames,
@@ -105,17 +112,25 @@ export default function TabRouter({
         } as Route<string>;
       });
 
+      const index = Math.min(
+        Math.max(
+          typeof state.index === 'number'
+            ? state.index
+            : routeNames.indexOf(state.routes[0].name),
+          0
+        ),
+        routes.length - 1
+      );
+
       const routeKeyHistory = state.routeKeyHistory
         ? state.routeKeyHistory.filter(key => routes.find(r => r.key === key))
         : [];
 
       return {
         stale: false,
+        type: 'tab',
         key: `tab-${shortid()}`,
-        index:
-          typeof state.index === 'number' && state.index < routes.length
-            ? state.index
-            : 0,
+        index,
         routeNames,
         routeKeyHistory,
         routes,

packages/stack/CHANGELOG.md

@@ -3,6 +3,107 @@
 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.34](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.33...@react-navigation/stack@5.0.0-alpha.34) (2019-11-04)
+
+
+### Features
+
+* support transform style for header ([#158](https://github.com/react-navigation/navigation-ex/issues/158)) ([a93a81e](https://github.com/react-navigation/navigation-ex/commit/a93a81e))
+
+
+
+
+
+# [5.0.0-alpha.33](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.32...@react-navigation/stack@5.0.0-alpha.33) (2019-11-02)
+
+
+### Bug Fixes
+
+* add horizontal margin to centered title ([2ef5ad4](https://github.com/react-navigation/navigation-ex/commit/2ef5ad4))
+* remove unnecessary paddingHorizontal on stack header ([74ee216](https://github.com/react-navigation/navigation-ex/commit/74ee216))
+
+
+
+
+
+# [5.0.0-alpha.32](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.31...@react-navigation/stack@5.0.0-alpha.32) (2019-11-02)
+
+
+### Bug Fixes
+
+* minor tweaks for web and fix example ([67fd69a](https://github.com/react-navigation/navigation-ex/commit/67fd69a))
+
+
+
+
+
+# [5.0.0-alpha.31](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.30...@react-navigation/stack@5.0.0-alpha.31) (2019-10-30)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [5.0.0-alpha.30](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.29...@react-navigation/stack@5.0.0-alpha.30) (2019-10-29)
+
+
+### Bug Fixes
+
+* keyboard manager in stack for fast swipe ([07bfc86](https://github.com/react-navigation/navigation-ex/commit/07bfc86))
+* make clearKeyboardTimeout private ([876c318](https://github.com/react-navigation/navigation-ex/commit/876c318))
+
+
+
+
+
+# [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.28...@react-navigation/stack@5.0.0-alpha.29) (2019-10-22)
+
+
+### Bug Fixes
+
+* conditions in gesture direction ([225e760](https://github.com/react-navigation/navigation-ex/commit/225e760))
+
+
+
+
+
+# [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)
 
 

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.25",
+  "version": "5.0.0-alpha.34",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@react-navigation/routers": "^5.0.0-alpha.12"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
@@ -46,7 +46,7 @@
     "react-native-gesture-handler": "^1.3.0",
     "react-native-reanimated": "^1.3.0",
     "react-native-safe-area-context": "^0.3.6",
-    "react-native-screens": "^2.0.0-alpha.3",
+    "react-native-screens": "^2.0.0-alpha.7",
     "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 || ^2.0.0-alpha.3"
+    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.0"
   },
   "@react-native-community/bob": {
     "source": "src",

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/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,
@@ -184,7 +185,9 @@ export type StackHeaderOptions = {
    * This is useful for using backgrounds such as an image or a gradient.
    * You can use this with `headerTransparent` to render a blur view, for example, to create a translucent header.
    */
-  headerBackground?: () => React.ReactNode;
+  headerBackground?: (props: {
+    style: StyleProp<ViewStyle>;
+  }) => React.ReactNode;
   /**
    * Style object for the header. You can specify a custom background color here, for example.
    */
@@ -207,6 +210,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.
    */
@@ -244,7 +251,6 @@ export type StackNavigationOptions = StackHeaderOptions &
     title?: string;
     /**
      * Function that given `HeaderProps` returns a React Element to display as a header.
-     * Setting to `null` hides header.
      */
     header?: (props: StackHeaderProps) => React.ReactNode;
     /**
@@ -302,6 +308,17 @@ export type StackNavigationOptions = StackHeaderOptions &
      * 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, previous, layout, navigation, styleInterpolator } = props;
+  const {
+    scene,
+    previous,
+    layout,
+    insets,
+    navigation,
+    styleInterpolator,
+  } = props;
   const { options } = scene.descriptor;
   const title =
     typeof options.headerTitle !== 'function' &&

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

@@ -24,9 +24,8 @@ const styles = StyleSheet.create({
         },
       },
       default: {
-        // https://github.com/necolas/react-native-web/issues/44
-        // Material Design
-        boxShadow: `0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12)`,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: 'rgba(0, 0, 0, 0.20)',
       },
     }),
   },

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,
@@ -87,6 +90,7 @@ export default function HeaderContainer({
         const props = {
           mode,
           layout,
+          insets,
           scene,
           previous,
           navigation: scene.descriptor.navigation as StackNavigationProp<

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];
 
@@ -222,6 +222,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
       shadowOpacity,
       shadowRadius,
       opacity,
+      transform,
       ...unsafeStyles
     } = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;
 
@@ -263,6 +264,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
       shadowOpacity,
       shadowRadius,
       opacity,
+      transform,
     };
 
     // Setting a property to undefined triggers default style
@@ -301,14 +303,14 @@ export default class HeaderSegment extends React.Component<Props, State> {
           style={[StyleSheet.absoluteFill, backgroundStyle]}
         >
           {headerBackground ? (
-            headerBackground()
+            headerBackground({ style: safeStyles })
           ) : headerTransparent ? null : (
             <HeaderBackground style={safeStyles} />
           )}
         </Animated.View>
         <Animated.View
           pointerEvents="box-none"
-          style={[{ height, minHeight, maxHeight, opacity }]}
+          style={[{ height, minHeight, maxHeight, opacity, transform }]}
         >
           <View pointerEvents="none" style={{ height: insets.top }} />
           <View pointerEvents="box-none" style={styles.content}>
@@ -328,10 +330,9 @@ export default class HeaderSegment extends React.Component<Props, State> {
             <Animated.View
               pointerEvents="box-none"
               style={[
-                headerTitleAlign === 'left' && {
-                  position: 'absolute',
-                  left: leftButton ? 72 : 16,
-                },
+                headerTitleAlign === 'left'
+                  ? { position: 'absolute', left: leftButton ? 72 : 16 }
+                  : { marginHorizontal: 18 },
                 titleStyle,
                 titleContainerStyle,
               ]}
@@ -366,7 +367,6 @@ export default class HeaderSegment extends React.Component<Props, State> {
 const styles = StyleSheet.create({
   content: {
     flex: 1,
-    paddingHorizontal: 4,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',

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

@@ -7,7 +7,9 @@ type Props = TextProps & {
 };
 
 export default function HeaderTitle({ style, ...rest }: Props) {
-  return <Animated.Text {...rest} style={[styles.title, style]} />;
+  return (
+    <Animated.Text numberOfLines={1} {...rest} style={[styles.title, style]} />
+  );
 }
 
 const styles = StyleSheet.create({
@@ -24,7 +26,7 @@ const styles = StyleSheet.create({
     },
     default: {
       fontSize: 18,
-      fontWeight: '400',
+      fontWeight: '500',
       color: '#3c4043',
     },
   }),

packages/stack/src/views/KeyboardManager.tsx

@@ -11,14 +11,27 @@ type Props = {
 };
 
 export default class KeyboardManager extends React.Component<Props> {
+  componentWillUnmount = () => {
+    this.clearKeyboardTimeout();
+  };
   // Numeric id of the previously focused text input
   // When a gesture didn't change the tab, we can restore the focused input with this
   private previouslyFocusedTextInput: number | null = null;
+  private startTimestamp: number = 0;
+  private keyboardTimeout: NodeJS.Timeout | undefined;
+
+  private clearKeyboardTimeout = () => {
+    if (this.keyboardTimeout !== undefined) {
+      clearTimeout(this.keyboardTimeout);
+      this.keyboardTimeout = undefined;
+    }
+  };
 
   private handlePageChangeStart = () => {
     if (!this.props.enabled) {
       return;
     }
+    this.clearKeyboardTimeout();
 
     const input = TextInput.State.currentlyFocusedField();
 
@@ -27,12 +40,16 @@ export default class KeyboardManager extends React.Component<Props> {
 
     // Store the id of this input so we can refocus it if change was cancelled
     this.previouslyFocusedTextInput = input;
+
+    // Store timestamp for touch start
+    this.startTimestamp = Date.now();
   };
 
   private handlePageChangeConfirm = () => {
     if (!this.props.enabled) {
       return;
     }
+    this.clearKeyboardTimeout();
 
     Keyboard.dismiss();
 
@@ -44,15 +61,29 @@ export default class KeyboardManager extends React.Component<Props> {
     if (!this.props.enabled) {
       return;
     }
+    this.clearKeyboardTimeout();
 
     // The page didn't change, we should restore the focus of text input
     const input = this.previouslyFocusedTextInput;
 
     if (input) {
-      TextInput.State.focusTextInput(input);
-    }
+      // If the interaction was super short we should make sure keyboard won't hide again.
 
-    this.previouslyFocusedTextInput = null;
+      // Too fast input refocus will result only in keyboard flashing on screen and hiding right away.
+      // During first ~100ms keyboard will be dismissed no matter what,
+      // so we have to make sure it won't interrupt input refocus logic.
+      // That's why when the interaction is shorter than 100ms we add delay so it won't hide once again.
+      // Subtracting timestamps makes us sure the delay is executed only when needed.
+      if (Date.now() - this.startTimestamp < 100) {
+        this.keyboardTimeout = setTimeout(() => {
+          TextInput.State.focusTextInput(input);
+          this.previouslyFocusedTextInput = null;
+        }, 100);
+      } else {
+        TextInput.State.focusTextInput(input);
+        this.previouslyFocusedTextInput = null;
+      }
+    }
   };
 
   render() {

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

@@ -281,19 +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.onOpen(false);
-      } else {
-        this.props.onClose(false);
-      }
+      this.props.onClose(false);
     }
   }
 
   private isVisible = new Value<Binary>(TRUE);
-  private gestureVelocityImpact = new Value<number>(
-    this.props.gestureVelocityImpact
-  );
-  private isVisibleValue: Binary = TRUE;
   private nextIsVisible = new Value<Binary | -1>(UNSET);
 
   private isClosing = new Value<Binary>(FALSE);
@@ -313,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
@@ -322,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
@@ -385,7 +381,10 @@ export default class Card extends React.Component<Props> {
       this.props.current,
       this.props.next,
       this.props.layout,
-      this.props.insets
+      this.props.insets.top,
+      this.props.insets.right,
+      this.props.insets.bottom,
+      this.props.insets.left
     );
   };
 
@@ -530,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([
@@ -651,7 +640,6 @@ export default class Card extends React.Component<Props> {
         ),
       ]
     ),
-    this.changeVisiblityExec,
   ]);
 
   private handleGestureEventHorizontal = Animated.event([
@@ -684,7 +672,10 @@ export default class Card extends React.Component<Props> {
       current: Animated.Node<number>,
       next: Animated.Node<number> | undefined,
       layout: Layout,
-      insets: EdgeInsets
+      insetTop: number,
+      insetRight: number,
+      insetBottom: number,
+      insetLeft: number
     ) =>
       styleInterpolator({
         index,
@@ -694,7 +685,12 @@ export default class Card extends React.Component<Props> {
         layouts: {
           screen: layout,
         },
-        insets,
+        insets: {
+          top: insetTop,
+          right: insetRight,
+          bottom: insetBottom,
+          left: insetLeft,
+        },
       })
   );
 
@@ -708,19 +704,25 @@ export default class Card extends React.Component<Props> {
     this.props.current,
     this.props.next,
     this.props.layout,
-    this.props.insets
+    this.props.insets.top,
+    this.props.insets.right,
+    this.props.insets.bottom,
+    this.props.insets.left
   );
 
   private gestureActivationCriteria() {
     const { layout, gestureDirection, gestureResponseDistance } = this.props;
 
-    // Doesn't make sense for a response distance of 0, so this works fine
     const distance =
       gestureDirection === 'vertical'
-        ? (gestureResponseDistance && gestureResponseDistance.vertical) ||
-          GESTURE_RESPONSE_DISTANCE_VERTICAL
-        : (gestureResponseDistance && gestureResponseDistance.horizontal) ||
-          GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
+        ? gestureResponseDistance &&
+          gestureResponseDistance.vertical !== undefined
+          ? gestureResponseDistance.vertical
+          : GESTURE_RESPONSE_DISTANCE_VERTICAL
+        : gestureResponseDistance &&
+          gestureResponseDistance.horizontal !== undefined
+        ? gestureResponseDistance.horizontal
+        : GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
 
     if (gestureDirection === 'vertical') {
       return {
@@ -776,7 +778,10 @@ export default class Card extends React.Component<Props> {
         current,
         next,
         layout,
-        insets
+        insets.top,
+        insets.right,
+        insets.bottom,
+        insets.left
       );
     }
 

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

@@ -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(
-    (acc, curr) => {
-      acc[curr.key] = previous[curr.key] || defaultHeaderHeight;
+  return routes.reduce<Record<string, number>>((acc, curr) => {
+    const { options = {} } = descriptors[curr.key] || {};
+    const { height = previous[curr.key] } = StyleSheet.flatten(
+      options.headerStyle || {}
+    );
 
-      return acc;
-    },
-    {} as { [key: string]: number }
-  );
+    acc[curr.key] = typeof height === 'number' ? height : defaultHeaderHeight;
+
+    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(
-      (acc, curr) => {
-        const descriptor = props.descriptors[curr.key];
+    const progress = props.routes.reduce<ProgressValues>((acc, curr) => {
+      const descriptor = props.descriptors[curr.key];
 
-        acc[curr.key] =
-          state.progress[curr.key] ||
-          new Animated.Value(
-            props.openingRouteKeys.includes(curr.key) &&
-            descriptor &&
-            descriptor.options.animationEnabled !== false
-              ? 0
-              : 1
-          );
+      acc[curr.key] =
+        state.progress[curr.key] ||
+        new Animated.Value(
+          props.openingRouteKeys.includes(curr.key) &&
+          descriptor &&
+          descriptor.options.animationEnabled !== false
+            ? 0
+            : 1
+        );
 
-        return acc;
-      },
-      {} as ProgressValues
-    );
+      return acc;
+    }, {});
 
     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 = ({
@@ -327,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
@@ -353,6 +362,7 @@ export default class Stack extends React.Component<Props, State> {
                 : 0;
 
             const {
+              safeAreaInsets,
               headerShown,
               headerTransparent,
               cardTransparent,
@@ -401,6 +411,13 @@ export default class Stack extends React.Component<Props, State> {
               }
             }
 
+            const {
+              top: safeAreaInsetTop = insets.top,
+              right: safeAreaInsetRight = insets.right,
+              bottom: safeAreaInsetBottom = insets.bottom,
+              left: safeAreaInsetLeft = insets.left,
+            } = safeAreaInsets || {};
+
             return (
               <MaybeScreen
                 key={route.key}
@@ -415,12 +432,15 @@ export default class Stack extends React.Component<Props, State> {
                   focused={focused}
                   closing={closingRouteKeys.includes(route.key)}
                   layout={layout}
-                  insets={insets}
                   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}
@@ -454,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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { EdgeInsets } from 'react-native-safe-area-context';
 import { StackNavigationState } from '@react-navigation/routers';
 import { Route } from '@react-navigation/core';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
@@ -20,12 +19,15 @@ type Props = TransitionPreset & {
   focused: boolean;
   closing: boolean;
   layout: Layout;
-  insets: EdgeInsets;
   current: Animated.Value<number>;
   previousScene?: Scene<Route<string>>;
   scene: Scene<Route<string>>;
   state: StackNavigationState;
   navigation: StackNavigationHelpers;
+  safeAreaInsetTop: number;
+  safeAreaInsetRight: number;
+  safeAreaInsetBottom: number;
+  safeAreaInsetLeft: number;
   cardTransparent?: boolean;
   cardOverlayEnabled?: boolean;
   cardShadowEnabled?: boolean;
@@ -96,7 +98,6 @@ export default class StackItem extends React.PureComponent<Props> {
     const {
       index,
       layout,
-      insets,
       active,
       focused,
       closing,
@@ -104,6 +105,10 @@ export default class StackItem extends React.PureComponent<Props> {
       state,
       scene,
       previousScene,
+      safeAreaInsetTop,
+      safeAreaInsetRight,
+      safeAreaInsetBottom,
+      safeAreaInsetLeft,
       cardTransparent,
       cardOverlayEnabled,
       cardShadowEnabled,
@@ -126,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}
@@ -168,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

@@ -53,14 +53,14 @@ class StackView extends React.Component<Props, 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(
+        const descriptors = state.routes.reduce<StackDescriptorMap>(
           (acc, route) => {
             acc[route.key] =
               props.descriptors[route.key] || state.descriptors[route.key];
 
             return acc;
           },
-          {} as StackDescriptorMap
+          {}
         );
 
         return {
@@ -195,15 +195,12 @@ class StackView extends React.Component<Props, State> {
       throw new Error(`There should always be at least one route.`);
     }
 
-    const descriptors = routes.reduce(
-      (acc, route) => {
-        acc[route.key] =
-          props.descriptors[route.key] || state.descriptors[route.key];
+    const descriptors = routes.reduce<StackDescriptorMap>((acc, route) => {
+      acc[route.key] =
+        props.descriptors[route.key] || state.descriptors[route.key];
 
-        return acc;
-      },
-      {} as StackDescriptorMap
-    );
+      return acc;
+    }, {});
 
     return {
       routes,

yarn.lock

@@ -864,12 +864,11 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@callstack/react-theme-provider@^3.0.2":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.3.tgz#f964dda28cd6e731c3fbcf916b0579c6f9fb2db7"
-  integrity sha512-B+9JBK7zsND/AdVkjwHvbb4cR05fJofLFG30hOeoXke8WkKAWN36yFljauAhI8qwlXlGFGZMYE1wQvsqBSccrA==
+"@callstack/react-theme-provider@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.5.tgz#a173e455e9603c9c45357a3b6ace1273086527ca"
+  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"
 
@@ -1108,19 +1107,30 @@
     resolve-from "^5.0.0"
     slugify "^1.3.4"
 
-"@expo/dev-tools@^0.6.6":
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/@expo/dev-tools/-/dev-tools-0.6.6.tgz#6ea36ff2ddf8d40efc68e9f235d63e446979a90c"
-  integrity sha512-UF6GKNSBigwmwyt9y4niHyKemcq2inChnpKwJKL9kJJ4BiPGPheqswhMxZasNeyh4ds2vQmjU8jvUjQOsKDRsw==
+"@expo/config@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@expo/config/-/config-2.3.0.tgz#b6a9ee176744e5dda915763afb08542643c32acf"
+  integrity sha512-EGyN+vba+04RFX8rlQSvlXN5QgSldjd1qubPsgaoSX+MzBGA2IEH/2pnW2An9VJwQ9vG8axaH8ArcRmQ2nyr0w==
   dependencies:
-    "@expo/config" "^2.2.0"
+    "@expo/json-file" "^8.2.1"
+    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.7":
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/@expo/dev-tools/-/dev-tools-0.6.8.tgz#4fde9cdc1cf5b464a6f40042330a0ac8b4d2a012"
+  integrity sha512-KdCiG/StWv7RxodE5gEprxxJ8W2/tgW7AOiOGjtV9ni5OCqdjhgnepyOfXuAOSEsVTVXsH8HF1Xjni4IxK43Yw==
+  dependencies:
+    "@expo/config" "^2.3.0"
     base64url "3.0.1"
     express "4.16.4"
-    freeport-async "1.1.1"
+    freeport-async "2.0.0"
     graphql "0.13.2"
     graphql-tools "3.0.0"
     iterall "1.2.2"
-    lodash "^4.17.11"
+    lodash "^4.17.15"
     subscriptions-transport-ws "0.9.8"
 
 "@expo/image-utils@^0.2.6":
@@ -1133,6 +1143,16 @@
   optionalDependencies:
     sharp-cli "1.10.0"
 
+"@expo/image-utils@^0.2.7":
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/@expo/image-utils/-/image-utils-0.2.7.tgz#1669aad4e4d8e923d91ba612974cfc30db6c2661"
+  integrity sha512-fideaPyR8w3XykLcck/2Tu7aWsAFmaAaqOjMAOCuuarUYKnFusDqxaicNWp5yLPufxG63p8d3TFKLxWpL7YD3A==
+  dependencies:
+    "@expo/spawn-async" "1.5.0"
+    semver "6.1.1"
+  optionalDependencies:
+    sharp-cli "1.10.0"
+
 "@expo/json-file@^8.2.0":
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/@expo/json-file/-/json-file-8.2.0.tgz#efb82b9a4e092aadb629451e60d0893369b7689e"
@@ -1145,6 +1165,18 @@
     util.promisify "^1.0.0"
     write-file-atomic "^2.3.0"
 
+"@expo/json-file@^8.2.1":
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/@expo/json-file/-/json-file-8.2.1.tgz#481e038ec0b01bf0d48bc223acaaa25214ccb4c6"
+  integrity sha512-8X7rBhjNJEXTXlVLAhOoRl19WhlRhfuEp8cbfoE1fEV0ExXyZwfN8rRYbm2Q5BcFjSsRnfuTckpQiU86qahIDA==
+  dependencies:
+    "@babel/code-frame" "^7.0.0-beta.44"
+    fs-extra "^8.0.1"
+    json5 "^1.0.1"
+    lodash "^4.17.15"
+    util.promisify "^1.0.0"
+    write-file-atomic "^2.3.0"
+
 "@expo/ngrok-bin-darwin-ia32@2.2.8":
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/@expo/ngrok-bin-darwin-ia32/-/ngrok-bin-darwin-ia32-2.2.8.tgz#46ed6d485a87396acf4af317beeaab7a1f607315"
@@ -1229,23 +1261,23 @@
     request "^2.81.0"
     uuid "^3.0.0"
 
-"@expo/osascript@^2.0.6-alpha.0":
-  version "2.0.6-alpha.0"
-  resolved "https://registry.yarnpkg.com/@expo/osascript/-/osascript-2.0.6-alpha.0.tgz#bd9faa067412ae3e96ac52ffcd5b21a57c5780e5"
-  integrity sha512-KK2vGJMnhrfotlo/axhg3sBTfyo10e0AfSxk6LLhbKT7QDflkzWG0o4z/yIgn2DiglbVa2FEvVp0gUWSdeZp0g==
+"@expo/osascript@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@expo/osascript/-/osascript-2.0.6.tgz#232be46a56bc4c3a1934de21971d7e29810e2bb1"
+  integrity sha512-V4qsnRodRZT5OKMQ69gzyMr4vjFbA5YP4MEZ2khdomEFlxxJyobaLv8aWB1303i2yPdEY3vYi4pF6LxL4tXPUg==
   dependencies:
     "@expo/spawn-async" "^1.5.0"
     exec-async "^2.2.0"
 
-"@expo/schemer@^1.2.8":
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/@expo/schemer/-/schemer-1.2.8.tgz#4e13e125157bc3fc0d53520a7ccb81f7d4598848"
-  integrity sha512-NzKNhsHFwJrSzwk1xMhpwmtAkZ0Z4UaApw/J8aBrH+jsvySepLE2ZSAFr4Zv7fwPBG1zRJTU2oCuGw1DX7WCgQ==
+"@expo/schemer@^1.2.9":
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/@expo/schemer/-/schemer-1.2.9.tgz#88f93623101138f7290e217b91cf255ee68e8ca9"
+  integrity sha512-KKdPv+wag/98g07nCvl5MqezllsRAXqo9FX7+I/iB2erb5YlUHcjVQ7EOhgEh4u0OLhkYU2k03vyf9lCdB8lkg==
   dependencies:
     ajv "^5.2.2"
     es6-error "^4.0.2"
     json-schema-traverse "0.3.1"
-    lodash "^4.17.11"
+    lodash "^4.17.15"
     probe-image-size "^3.1.0"
     read-chunk "^3.2.0"
 
@@ -1321,6 +1353,49 @@
     workbox-webpack-plugin "^3.6.3"
     yup "^0.27.0"
 
+"@expo/webpack-config@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@expo/webpack-config/-/webpack-config-0.8.1.tgz#46b5fe690570fa9690983031e0e493f73840e2ca"
+  integrity sha512-R4mkY6jcorXO7sb2g9gUlUyRsa11M7xAGHE0DFilQEUCAHDfSH4eEr4Mg5NdWMHrr5Hi2W7rSt21UgJ2CjP88w==
+  dependencies:
+    "@babel/core" "^7.0.0"
+    "@babel/runtime" "^7.3.4"
+    "@expo/config" "^2.3.0"
+    "@expo/webpack-pwa-manifest-plugin" "^1.2.8"
+    "@types/yup" "^0.26.24"
+    babel-loader "8.0.6"
+    babel-preset-expo "^7.0.0"
+    brotli-webpack-plugin "^1.1.0"
+    chalk "^2.4.2"
+    clean-webpack-plugin "^1.0.1"
+    compression-webpack-plugin "^2.0.0"
+    copy-webpack-plugin "5.0.0"
+    css-loader "^2.1.1"
+    deep-diff "^1.0.2"
+    file-loader "4.2.0"
+    find-yarn-workspace-root "^1.2.1"
+    getenv "^0.7.0"
+    html-loader "^0.5.5"
+    html-webpack-plugin "4.0.0-alpha.2"
+    is-wsl "^2.0.0"
+    mini-css-extract-plugin "^0.5.0"
+    optimize-css-assets-webpack-plugin "^5.0.1"
+    pnp-webpack-plugin "^1.2.1"
+    postcss-safe-parser "^4.0.1"
+    prettier "^1.16.4"
+    progress-bar-webpack-plugin "^1.12.1"
+    react-dev-utils "9.0.3"
+    style-loader "^0.23.1"
+    terser-webpack-plugin "^1.2.3"
+    url-loader "^1.1.2"
+    webpack "4.39.0"
+    webpack-bundle-analyzer "^3.0.4"
+    webpack-deep-scope-plugin "1.6.0"
+    webpack-manifest-plugin "^2.0.4"
+    webpack-merge "^4.2.1"
+    workbox-webpack-plugin "^3.6.3"
+    yup "^0.27.0"
+
 "@expo/webpack-pwa-manifest-plugin@^1.2.7":
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/@expo/webpack-pwa-manifest-plugin/-/webpack-pwa-manifest-plugin-1.2.7.tgz#cfee555f53ccc2745f9a2ed5185803ed8735292d"
@@ -1333,6 +1408,18 @@
     node-fetch "^2.6.0"
     tempy "^0.3.0"
 
+"@expo/webpack-pwa-manifest-plugin@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@expo/webpack-pwa-manifest-plugin/-/webpack-pwa-manifest-plugin-1.2.8.tgz#ae6127e10eaae43a53daf9a3fa28a6b94515f083"
+  integrity sha512-Oo70gOyE1NICKkUdNvmth8xSNEfowUNIQ0ibDBy63shOB1gSPTW+lcQ7H1ruKgFB4iApYk58f4H4kPMVRc6Uiw==
+  dependencies:
+    "@expo/config" "^2.3.0"
+    "@expo/image-utils" "^0.2.7"
+    is-color "^1.0.2"
+    mime "^2.4.0"
+    node-fetch "^2.6.0"
+    tempy "^0.3.0"
+
 "@expo/websql@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@expo/websql/-/websql-1.0.1.tgz#fff0cf9c1baa1f70f9e1d658b7c39a420d9b10a9"
@@ -1344,25 +1431,23 @@
     pouchdb-collections "^1.0.1"
     tiny-queue "^0.2.1"
 
-"@expo/xdl@^56.3.0":
-  version "56.3.0"
-  resolved "https://registry.yarnpkg.com/@expo/xdl/-/xdl-56.3.0.tgz#cd7b04b1be76f11b513a6d3322525cb195df2e0f"
-  integrity sha512-XCouU2dtIKRERnC46P0MRDNw7FC8Hl8J31IM2jlE2B3IDBvs9F+qyXKBYpw0Ne+XIUJzY7PefQLpbRc3O2C4eQ==
+"@expo/xdl@^56.4.0":
+  version "56.5.0"
+  resolved "https://registry.yarnpkg.com/@expo/xdl/-/xdl-56.5.0.tgz#4d781fbd5ee005781b790e936edc634f3f990969"
+  integrity sha512-DJAgTvgT8OJmbXCbnpqKIDrRM82ZILEO7fNSgOQByYK3R3YAZAslxl60nP8FukH7j3u818H0qEh5d7Rf6AG4nQ==
   dependencies:
     "@expo/bunyan" "3.0.2"
-    "@expo/config" "^2.2.0"
-    "@expo/image-utils" "^0.2.6"
-    "@expo/json-file" "^8.2.0"
+    "@expo/config" "^2.3.0"
+    "@expo/image-utils" "^0.2.7"
+    "@expo/json-file" "^8.2.1"
     "@expo/ngrok" "2.4.3"
-    "@expo/osascript" "^2.0.6-alpha.0"
-    "@expo/schemer" "^1.2.8"
+    "@expo/osascript" "^2.0.6"
+    "@expo/schemer" "^1.2.9"
     "@expo/spawn-async" "1.5.0"
-    "@expo/webpack-config" "^0.7.12"
-    "@types/webpack" "^4.32.1"
-    "@types/webpack-dev-server" "^3.1.7"
+    "@expo/webpack-config" "^0.8.1"
     analytics-node "3.3.0"
     axios "0.19.0"
-    boxen "^4.1.0"
+    boxen "4.1.0"
     chalk "2.4.1"
     concat-stream "1.6.2"
     decache "4.4.0"
@@ -1370,7 +1455,7 @@
     es6-error "4.1.1"
     express "4.16.4"
     form-data "2.3.2"
-    freeport-async "1.1.1"
+    freeport-async "2.0.0"
     fs-extra "6.0.1"
     getenv "0.7.0"
     glob "7.1.2"
@@ -1385,13 +1470,15 @@
     invariant "2.2.4"
     joi "14.0.4"
     latest-version "5.1.0"
-    lodash "4.17.11"
+    lodash "4.17.15"
     md5hex "1.0.0"
     minimatch "3.0.4"
     minipass "2.3.5"
     mv "2.1.1"
     ncp "2.0.0"
     node-forge "0.7.6"
+    p-map "3.0.0"
+    p-retry "4.1.0"
     p-timeout "3.1.0"
     package-json "6.4.0"
     pacote "9.3.0"
@@ -2428,11 +2515,6 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@types/anymatch@*":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
-  integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
-
 "@types/babel__core@^7.1.0":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.3.tgz#e441ea7df63cd080dfcd02ab199e6d16a735fc30"
@@ -2466,29 +2548,6 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
-"@types/body-parser@*":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.17.1.tgz#18fcf61768fb5c30ccc508c21d6fd2e8b3bf7897"
-  integrity sha512-RoX2EZjMiFMjZh9lmYrwgoP9RTpAjSHiJxdp4oidAQVO02T7HER3xj9UKue5534ULWeqVEkujhWcyvUce+d68w==
-  dependencies:
-    "@types/connect" "*"
-    "@types/node" "*"
-
-"@types/connect-history-api-fallback@*":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.3.tgz#4772b79b8b53185f0f4c9deab09236baf76ee3b4"
-  integrity sha512-7SxFCd+FLlxCfwVwbyPxbR4khL9aNikJhrorw8nUIOqeuooc9gifBuDQOJw5kzN7i6i3vLn9G8Wde/4QDihpYw==
-  dependencies:
-    "@types/express-serve-static-core" "*"
-    "@types/node" "*"
-
-"@types/connect@*":
-  version "3.4.32"
-  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.32.tgz#aa0e9616b9435ccad02bc52b5b454ffc2c70ba28"
-  integrity sha512-4r8qa0quOvh7lGD0pre62CAb1oni1OO6ecJLGCezTmhQ8Fz50Arx9RUszryR8KlgK6avuSXvviL6yWyViQABOg==
-  dependencies:
-    "@types/node" "*"
-
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -2499,23 +2558,6 @@
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
   integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
 
-"@types/express-serve-static-core@*":
-  version "4.16.9"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.16.9.tgz#69e00643b0819b024bdede95ced3ff239bb54558"
-  integrity sha512-GqpaVWR0DM8FnRUJYKlWgyARoBUAVfRIeVDZQKOttLFp5SmhhF9YFIYeTPwMd/AXfxlP7xVO2dj1fGu0Q+krKQ==
-  dependencies:
-    "@types/node" "*"
-    "@types/range-parser" "*"
-
-"@types/express@*":
-  version "4.17.1"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.1.tgz#4cf7849ae3b47125a567dfee18bfca4254b88c5c"
-  integrity sha512-VfH/XCP0QbQk5B5puLqTLEeFgR8lfCJHZJKkInZ9mkYd+u8byX0kztXEQxEk4wZXJs8HI+7km2ALXjn4YKcX9w==
-  dependencies:
-    "@types/body-parser" "*"
-    "@types/express-serve-static-core" "*"
-    "@types/serve-static" "*"
-
 "@types/fbemitter@^2.0.32":
   version "2.0.32"
   resolved "https://registry.yarnpkg.com/@types/fbemitter/-/fbemitter-2.0.32.tgz#8ed204da0f54e9c8eaec31b1eec91e25132d082c"
@@ -2530,30 +2572,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"
-  integrity sha512-lnBTx6HCOUeIJMLbI/LaL5EmdKLhczJY5oeXZpX/cXE4rRqb3RmV7VcMpiEfYkmTjipv3h7IAyIINe4plEv7cA==
-  dependencies:
-    "@types/connect" "*"
-    "@types/http-proxy" "*"
-    "@types/node" "*"
-
-"@types/http-proxy@*":
-  version "1.17.0"
-  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.0.tgz#baf82ff6aa2723fd29f90e3ba1384e665006863e"
-  integrity sha512-l+s0IoxSHqhLFJPDHRfO235kgrCkvFD8JmdV/T9C4BKBYPIjrQopGFH4r7h2e3jQqgJRCthRCAZIxDoFnj1zwQ==
-  dependencies:
-    "@types/node" "*"
-
 "@types/invariant@^2.2.29":
   version "2.2.30"
   resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.30.tgz#20efa342807606ada5483731a8137cb1561e5fe9"
@@ -2608,11 +2626,6 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.141.tgz#d81f4d0c562abe28713406b571ffb27692a82ae6"
   integrity sha512-v5NYIi9qEbFEUpCyikmnOYe4YlP8BMUdTcNCAquAKzu+FA7rZ1onj9x80mbnDdOW/K5bFf3Tv5kJplP33+gAbQ==
 
-"@types/mime@*":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.1.tgz#dc488842312a7f075149312905b5e3c0b054c79d"
-  integrity sha512-FwI9gX75FgVBJ7ywgnq/P7tw+/o1GUbtP0KzbtusLigAOgIgNISRK0ZPl4qertvXSIE8YbsVJueQ90cDt9YYyw==
-
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -2648,11 +2661,6 @@
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.5.3.tgz#1c3b71b091eaeaf5924538006b7f70603ce63d38"
   integrity sha512-Jugo5V/1bS0fRhy2z8+cUAHEyWOATaz4rbyLVvcFs7+dXp5HfwpEwzF1Q11bB10ApUqHf+yTauxI0UXQDwGrbA==
 
-"@types/range-parser@*":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
-  integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
-
 "@types/react-native-vector-icons@^6.4.4":
   version "6.4.4"
   resolved "https://registry.yarnpkg.com/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.4.tgz#f81dcc371b74a9c408ce12f95b8f494d7543146b"
@@ -2685,51 +2693,31 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/retry@^0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
+  integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
+
 "@types/semver@^6.0.1":
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.0.2.tgz#5e8b09f0e4af53034b1d0fb9977a277847836205"
   integrity sha512-G1Ggy7/9Nsa1Jt2yiBR2riEuyK2DFNnqow6R7cromXPMNynackRY1vqFTLz/gwnef1LHokbXThcPhqMRjUbkpQ==
 
-"@types/serve-static@*":
-  version "1.13.3"
-  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.3.tgz#eb7e1c41c4468272557e897e9171ded5e2ded9d1"
-  integrity sha512-oprSwp094zOglVrXdlo/4bAHtKTAxX6VT8FOZlBKrmyLbNvE1zxZyJ6yikMVtHIvwP45+ZQGJn+FdXGKTozq0g==
-  dependencies:
-    "@types/express-serve-static-core" "*"
-    "@types/mime" "*"
-
 "@types/shortid@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/shortid/-/shortid-0.0.29.tgz#8093ee0416a6e2bf2aa6338109114b3fbffa0e9b"
   integrity sha1-gJPuBBam4r8qpjOBCRFLP7/6Dps=
 
-"@types/source-list-map@*":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
-  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
-
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
-"@types/tapable@*":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
-  integrity sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ==
-
 "@types/tapable@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.2.tgz#e13182e1b69871a422d7863e11a4a6f5b814a4bd"
   integrity sha512-42zEJkBpNfMEAvWR5WlwtTH22oDzcMjFsL9gDGExwF8X8WvAiw7Vwop7hPw03QT8TKfec83LwbHj6SvpqM4ELQ==
 
-"@types/uglify-js@*":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.4.tgz#96beae23df6f561862a830b4288a49e86baac082"
-  integrity sha512-SudIN9TRJ+v8g5pTG8RRCqfqTMNqgWCKKd3vtynhGzkIIjxaicNAMuY5TRadJ6tzDu3Dotf3ngaMILtmOdmWEQ==
-  dependencies:
-    source-map "^0.6.1"
-
 "@types/untildify@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/untildify/-/untildify-3.0.0.tgz#cd3e6624e46ccf292d3823fb48fa90dda0deaec0"
@@ -2740,38 +2728,6 @@
   resolved "https://registry.yarnpkg.com/@types/uuid-js/-/uuid-js-0.7.2.tgz#5b5552fcbaaf4acf026fb6dc66f7e5bd6b4be92f"
   integrity sha512-9R+mA6mMXkFVQnXEeX5fMQDR2SYND7cafJTqbeMpLhgsL7qr7MF4ZBxWpLexml3lZsBsyAmqVWbOiB0N10m15w==
 
-"@types/webpack-dev-server@^3.1.7":
-  version "3.1.7"
-  resolved "https://registry.yarnpkg.com/@types/webpack-dev-server/-/webpack-dev-server-3.1.7.tgz#a3e7a20366e68bc9853c730b56e994634cb78dac"
-  integrity sha512-VIRkDkBDuOkYRXQ1EG/etisQ3odo6pcjSmA1Si4VYANuNhSBsLxfuPGeGERwCx1nDKxK3aaXnicPzi0gUvxUaw==
-  dependencies:
-    "@types/connect-history-api-fallback" "*"
-    "@types/express" "*"
-    "@types/http-proxy-middleware" "*"
-    "@types/serve-static" "*"
-    "@types/webpack" "*"
-
-"@types/webpack-sources@*":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-0.1.5.tgz#be47c10f783d3d6efe1471ff7f042611bd464a92"
-  integrity sha512-zfvjpp7jiafSmrzJ2/i3LqOyTYTuJ7u1KOXlKgDlvsj9Rr0x7ZiYu5lZbXwobL7lmsRNtPXlBfmaUD8eU2Hu8w==
-  dependencies:
-    "@types/node" "*"
-    "@types/source-list-map" "*"
-    source-map "^0.6.1"
-
-"@types/webpack@*", "@types/webpack@^4.32.1":
-  version "4.39.2"
-  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.39.2.tgz#fcaa85607a9bdd0e8f86a350f239ff08aede8584"
-  integrity sha512-3c7+vcmyyIi3RBoOdXs8k3E9rQVIy6yOBqK0DFk6lnJ76JUfbDBWbEf1JflzyPQf56W4ToE+2YPnbxbucniW5w==
-  dependencies:
-    "@types/anymatch" "*"
-    "@types/node" "*"
-    "@types/tapable" "*"
-    "@types/uglify-js" "*"
-    "@types/webpack-sources" "*"
-    source-map "^0.6.0"
-
 "@types/websql@^0.0.27":
   version "0.0.27"
   resolved "https://registry.yarnpkg.com/@types/websql/-/websql-0.0.27.tgz#621a666a7f02018e7cbb4abab956a25736c27d71"
@@ -3107,7 +3063,7 @@ acorn@^5.5.3:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
   integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
 
-acorn@^6.0.1, acorn@^6.0.5, acorn@^6.0.7:
+acorn@^6.0.1, acorn@^6.0.5, acorn@^6.0.7, acorn@^6.2.1:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.3.0.tgz#0087509119ffa4fc0a0041d1e93a417e68cb856e"
   integrity sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==
@@ -3161,7 +3117,7 @@ ajv-errors@^1.0.0:
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
   integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
 
-ajv-keywords@^3.1.0:
+ajv-keywords@^3.1.0, ajv-keywords@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
   integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
@@ -3655,7 +3611,7 @@ babel-jest@^24.9.0:
     chalk "^2.4.2"
     slash "^2.0.0"
 
-babel-loader@^8.0.5:
+babel-loader@8.0.6, babel-loader@^8.0.5:
   version "8.0.6"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
   integrity sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw==
@@ -3970,7 +3926,7 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-boxen@4.1.0, boxen@^4.1.0:
+boxen@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-4.1.0.tgz#256f6b2eb09ba22ea558e5acc0a5ff637bf8ed03"
   integrity sha512-Iwq1qOkmEsl0EVABa864Bbj3HCL4186DRZgFW/NrFs5y5GMM3ljsxzMLgOHdWISDRvcM8beh8q4tTNzXz+mSKg==
@@ -4507,7 +4463,7 @@ chownr@^1.0.1, chownr@^1.1.1, chownr@^1.1.2:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
   integrity sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==
 
-chrome-trace-event@^1.0.0:
+chrome-trace-event@^1.0.0, chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
   integrity sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ==
@@ -6308,7 +6264,7 @@ eslint-rule-composer@^0.3.0:
   resolved "https://registry.yarnpkg.com/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz#79320c927b0c5c0d3d3d2b76c8b4a488f25bbaf9"
   integrity sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==
 
-eslint-scope@^4.0.0:
+eslint-scope@^4.0.0, eslint-scope@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
   integrity sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==
@@ -6604,18 +6560,18 @@ expo-asset@~7.0.0:
     path-browserify "^1.0.0"
     url-parse "^1.4.4"
 
-expo-cli@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/expo-cli/-/expo-cli-3.3.0.tgz#8ee8ff5d3addc5386b321f5534306236813c1bd3"
-  integrity sha512-+3XThHXJdFSnm+eG3A44Myxb+K3i39tYyvtFVPsZcGCHBWFQQ2eepBzQyJlcnjRhe5/ElDMLrACAsV+9P5XB1Q==
+expo-cli@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/expo-cli/-/expo-cli-3.4.1.tgz#e3619434c252c4132d1f9ee869f7d1f52a447d7d"
+  integrity sha512-9v+vzVy1zfdKaWfDCaofrdvZAmHUwBg6eCpzd7XT6sW7tsJsgt5fKRHG26+yHR4QLFcK1ILdKwgmsKDlvPfssw==
   dependencies:
     "@expo/bunyan" "3.0.2"
-    "@expo/config" "^2.2.0"
-    "@expo/dev-tools" "^0.6.6"
-    "@expo/json-file" "^8.2.0"
+    "@expo/config" "^2.3.0"
+    "@expo/dev-tools" "^0.6.7"
+    "@expo/json-file" "^8.2.1"
     "@expo/simple-spinner" "1.0.2"
     "@expo/spawn-async" "1.5.0"
-    "@expo/xdl" "^56.3.0"
+    "@expo/xdl" "^56.4.0"
     "@types/untildify" "^3.0.0"
     ansi-regex "^4.1.0"
     axios "0.19.0"
@@ -6639,7 +6595,7 @@ expo-cli@^3.3.0:
     inflection "^1.12.0"
     inquirer "5.2.0"
     klaw-sync "6.0.0"
-    lodash "4.17.11"
+    lodash "4.17.15"
     match-require "2.1.0"
     npm-package-arg "6.1.0"
     open "6.3.0"
@@ -7083,6 +7039,14 @@ file-entry-cache@^5.0.1:
   dependencies:
     flat-cache "^2.0.1"
 
+file-loader@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-4.2.0.tgz#5fb124d2369d7075d70a9a5abecd12e60a95215e"
+  integrity sha512-+xZnaK5R8kBJrHK0/6HRlrKNamvVS5rjyuju+rnyxRGuwUJwpAMsVzUl5dz6rK8brkzjV6JpcFNjp6NqV0g1OQ==
+  dependencies:
+    loader-utils "^1.2.3"
+    schema-utils "^2.0.0"
+
 file-loader@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-3.0.1.tgz#f8e0ba0b599918b51adfe45d66d1e771ad560faa"
@@ -7317,10 +7281,10 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-freeport-async@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/freeport-async/-/freeport-async-1.1.1.tgz#5c8cf4fc1aba812578317bd4d7a1e5597baf958e"
-  integrity sha1-XIz0/Bq6gSV4MXvU16HlWXuvlY4=
+freeport-async@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/freeport-async/-/freeport-async-2.0.0.tgz#6adf2ec0c629d11abff92836acd04b399135bab4"
+  integrity sha512-K7od3Uw45AJg00XUmy15+Hae2hOcgKcmN3/EF6Y7i01O0gaqiRx8sUSpsb9+BRNL8RPBrhzPsVfy8q9ADlJuWQ==
 
 fresh@0.5.2:
   version "0.5.2"
@@ -9855,7 +9819,7 @@ load-json-file@^5.3.0:
     strip-bom "^3.0.0"
     type-fest "^0.3.0"
 
-loader-runner@^2.3.0:
+loader-runner@^2.3.0, loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
@@ -9992,17 +9956,12 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@4.17.11:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
-  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
-
 lodash@4.17.14:
   version "4.17.14"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba"
   integrity sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==
 
-"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.0, lodash@^4.6.1:
+lodash@4.17.15, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.0, lodash@^4.6.1:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -11089,7 +11048,7 @@ negotiator@0.6.2:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
   integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
-neo-async@^2.5.0, neo-async@^2.6.0:
+neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
   integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
@@ -11172,7 +11131,7 @@ node-int64@^0.4.0:
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
   integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
 
-node-libs-browser@^2.0.0:
+node-libs-browser@^2.0.0, node-libs-browser@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
   integrity sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==
@@ -11775,6 +11734,13 @@ p-map-series@^1.0.0:
   dependencies:
     p-reduce "^1.0.0"
 
+p-map@3.0.0, p-map@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-3.0.0.tgz#d704d9af8a2ba684e2600d9a215983d4141a979d"
+  integrity sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==
+  dependencies:
+    aggregate-error "^3.0.0"
+
 p-map@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
@@ -11785,13 +11751,6 @@ p-map@^2.0.0, p-map@^2.1.0:
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
   integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
 
-p-map@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-3.0.0.tgz#d704d9af8a2ba684e2600d9a215983d4141a979d"
-  integrity sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==
-  dependencies:
-    aggregate-error "^3.0.0"
-
 p-pipe@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/p-pipe/-/p-pipe-1.2.0.tgz#4b1a11399a11520a67790ee5a0c1d5881d6befe9"
@@ -11809,6 +11768,14 @@ p-reduce@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
   integrity sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=
 
+p-retry@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.1.0.tgz#9ce7cef2069e84bf590df3b8ec18d740109338d6"
+  integrity sha512-oepllyG9gX1qH4Sm20YAKxg1GA7L7puhvGnTfimi31P07zSIj7SDV6YtuAx9nbJF51DES+2CIIRkXs8GKqWJxA==
+  dependencies:
+    "@types/retry" "^0.12.0"
+    retry "^0.12.0"
+
 p-timeout@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-3.1.0.tgz#198c1f503bb973e9b9727177a276c80afd6851f3"
@@ -13111,15 +13078,20 @@ react-native-gesture-handler@~1.3.0:
     invariant "^2.2.2"
     prop-types "^15.5.10"
 
-react-native-paper@^3.0.0-alpha.3:
-  version "3.0.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-3.0.0-alpha.5.tgz#2a3e23c52ec717d7c6a1df1e7adc1005611b08a2"
-  integrity sha512-LSsmhCIo2EgT9azd1usjBmfGBgNkKOMdHWkFJnwmGrXo/JMxhlD/KMt+GRTz4ZjFWmJu3GO635ihYleSJhW6Mg==
+react-native-paper@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-3.1.1.tgz#971f3097eecb4c061bf10768182b8985442a45ab"
+  integrity sha512-GHJ/2z/1Nzm4Y1g22Znu09BV7SV4tsR7h/9HrXuj3kFrsJo7zt5e+t/ELLLvycGEo4z1vhV6MtjtIk/PSaKoDA==
   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"
 
+"react-native-reanimated-web@npm:react-native-reanimated@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.3.2.tgz#3f050e61cad6173ea584517b7b981f17f442aa19"
+  integrity sha512-wDxI2N9YLZRmH/n9UIah7RnGSCZJcbKa4mylf2+2pPjicDJAlyjljGAkHOwUlSOol8x14fUp5m65TS9eVZNmZQ==
+
 react-native-reanimated@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.3.0.tgz#581cdb0bd1ff05e7304b116af712ded0c7665ede"
@@ -13142,17 +13114,10 @@ react-native-safe-area-view@^0.12.0:
   dependencies:
     hoist-non-react-statics "^2.3.1"
 
-react-native-screens@2.0.0-alpha.4:
-  version "2.0.0-alpha.4"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.4.tgz#cf869bba2a5940f0b71d1dde9cf4e545cc0e97d0"
-  integrity sha512-/MdbyDwmvGncnyH4TVPB4JAawtGVZtyG5NOAbJ14wVmsRZhOqVABmiRP7jGO9tKOCENnoVDKspEw24u66G7EMw==
-  dependencies:
-    debounce "^1.2.0"
-
-react-native-screens@^2.0.0-alpha.3:
-  version "2.0.0-alpha.3"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.3.tgz#af86f265b2fb4293b626cf4396db7743de5a54af"
-  integrity sha512-SA3uGrc3UM1V9y6gfVU1UPf1a3dMyQCj3p5J7y6g81Of8rV5Pc34s6fWzOKNAWgOiviAktZB1z7Jngdl7+acZg==
+react-native-screens@^2.0.0-alpha.7:
+  version "2.0.0-alpha.7"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.7.tgz#7cc2e4000591613cfc9cd92c2e2d83e9b2104a2e"
+  integrity sha512-Lst3pOrtXgVrC6GFRO86MMhlFYwCZd0Jz3JBDHnnmWcYb1mzgPmMvooCDv6OdoU2Rv2WZXiaUZh4RQdoyr6YeQ==
   dependencies:
     debounce "^1.2.0"
 
@@ -13844,6 +13809,11 @@ retry@^0.10.0:
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.10.1.tgz#e76388d217992c252750241d3d3956fed98d8ff4"
   integrity sha1-52OI0heZLCUnUCQdPTlW/tmNj/Q=
 
+retry@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
+  integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
+
 reusify@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
@@ -14054,6 +14024,14 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
+schema-utils@^2.0.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.5.0.tgz#8f254f618d402cc80257486213c8970edfd7c22f"
+  integrity sha512-32ISrwW2scPXHUSusP8qMg5dLUawKkyV+/qIEV9JdXKx+rsM6mi8vZY8khg2M69Qom16rtroWXD3Ybtiws38gQ==
+  dependencies:
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -14970,7 +14948,7 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
-tapable@^1.0.0, tapable@^1.1.0:
+tapable@^1.0.0, tapable@^1.1.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
@@ -15100,7 +15078,7 @@ term-size@^2.1.0:
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.1.0.tgz#3aec444c07a7cf936e157c1dc224b590c3c7eef2"
   integrity sha512-I42EWhJ+2aeNQawGx1VtpO0DFI9YcfuvAMNIdKyf/6sRbHJ4P+ZQ/zIT87tE+ln1ymAGcCJds4dolfSAS0AcNg==
 
-terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.2.3:
+terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.2.3, terser-webpack-plugin@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
   integrity sha512-ZXmmfiwtCLfz8WKZyYUuuHf3dMYEjg8NrjHMb0JqHVHVOSkzp3cW2/XG1fP3tRhqEqSzMwzzRQGtAPbs4Cncxg==
@@ -15892,7 +15870,7 @@ watch@~0.18.0:
     exec-sh "^0.2.0"
     minimist "^1.2.0"
 
-watchpack@^1.5.0:
+watchpack@^1.5.0, watchpack@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
   integrity sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA==
@@ -16018,7 +15996,7 @@ webpack-merge@^4.2.1:
   dependencies:
     lodash "^4.17.15"
 
-webpack-sources@^1.0.1, webpack-sources@^1.0.2, webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0:
+webpack-sources@^1.0.1, webpack-sources@^1.0.2, webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
@@ -16056,6 +16034,35 @@ webpack@4.29.6:
     watchpack "^1.5.0"
     webpack-sources "^1.3.0"
 
+webpack@4.39.0:
+  version "4.39.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.39.0.tgz#1d511308c3dd8f9fe3152c9447ce30f1814a620c"
+  integrity sha512-nrxFNSEKm4T1C/EsgOgN50skt//Pl4X7kgJC1MrlE47M292LSCVmMOC47iTGL0CGxbdwhKGgeThrJcw0bstEfA==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-module-context" "1.8.5"
+    "@webassemblyjs/wasm-edit" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
+    acorn "^6.2.1"
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^4.1.0"
+    eslint-scope "^4.0.3"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^2.4.0"
+    loader-utils "^1.2.3"
+    memory-fs "^0.4.1"
+    micromatch "^3.1.10"
+    mkdirp "^0.5.1"
+    neo-async "^2.6.1"
+    node-libs-browser "^2.2.1"
+    schema-utils "^1.0.0"
+    tapable "^1.1.3"
+    terser-webpack-plugin "^1.4.1"
+    watchpack "^1.6.0"
+    webpack-sources "^1.4.1"
+
 websocket-driver@>=0.5.1:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.3.tgz#a2d4e0d4f4f116f1e6297eba58b05d430100e9f9"