chore: publish

- @react-navigation/bottom-tabs@5.0.0-alpha.11 - @react-navigation/compat@5.0.0-alpha.5 - @react-navigation/core@5.0.0-alpha.12 - @react-navigation/drawer@5.0.0-alpha.11 - @react-navigation/example@5.0.0-alpha.9 - @react-navigation/material-bottom-tabs@5.0.0-alpha.10 - @react-navigation/material-top-tabs@5.0.0-alpha.9 - @react-navigation/native@5.0.0-alpha.9 - @react-navigation/routers@5.0.0-alpha.9 - @react-navigation/stack@5.0.0-alpha.21
fix: add missing React import
2026-01-13 22:42:25 +08:00 · 2019-10-03 19:47:41 +02:00 · 2019-10-03 19:07:56 +02:00 · 2019-10-03 19:07:21 +02:00 · 2019-10-03 18:44:18 +02:00 · 2019-10-03 17:51:13 +02:00
91 changed files with 3030 additions and 1569 deletions
--- a/.release-it.json
+++ b/.release-it.json
@@ -1,14 +0,0 @@
-{
-  "git": {
-    "commitMessage": "chore: release %s",
-    "tagName": "v%s"
-  },
-  "github": {
-    "release": true
-  },
-  "plugins": {
-    "@release-it/conventional-changelog": {
-      "preset": "angular"
-    }
-  }
-}
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,3 @@
-/* eslint-disable import/no-commonjs */
-
 module.exports = {
  presets: [
    [
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1,5 +1,3 @@
-/* eslint-disable import/no-commonjs */
-
 module.exports = {
  extends: ['@commitlint/config-conventional'],
 };
--- a/package.json
+++ b/package.json
@@ -23,22 +23,22 @@
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-env": "^7.6.2",
    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.3.3",
-    "@babel/runtime": "^7.5.5",
-    "@commitlint/config-conventional": "^8.0.0",
+    "@babel/preset-typescript": "^7.6.0",
+    "@babel/runtime": "^7.6.2",
+    "@commitlint/config-conventional": "^8.2.0",
    "@types/jest": "^24.0.13",
-    "codecov": "^3.5.0",
-    "commitlint": "^8.0.0",
+    "codecov": "^3.6.1",
+    "commitlint": "^8.2.0",
    "core-js": "^3.2.1",
-    "eslint": "^5.16.0",
-    "eslint-config-satya164": "^2.4.1",
-    "husky": "^2.4.0",
+    "eslint": "^6.5.1",
+    "eslint-config-satya164": "^3.1.2",
+    "husky": "^3.0.8",
    "jest": "^24.8.0",
    "lerna": "^3.16.4",
    "prettier": "^1.18.2",
-    "typescript": "^3.5.3"
+    "typescript": "^3.6.3"
  },
  "resolutions": {
    "react": "16.8.3",
--- a/packages/bottom-tabs/CHANGELOG.md
+++ b/packages/bottom-tabs/CHANGELOG.md
@@ -3,6 +3,37 @@
 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.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.10...@react-navigation/bottom-tabs@5.0.0-alpha.11) (2019-10-03)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.9...@react-navigation/bottom-tabs@5.0.0-alpha.10) (2019-09-27)
+
+
+### Features
+
+* export BottomTabBar props type ([#109](https://github.com/react-navigation/navigation-ex/issues/109)) ([1fd5a86](https://github.com/react-navigation/navigation-ex/commit/1fd5a86))
+* export some more type aliases ([8b78d61](https://github.com/react-navigation/navigation-ex/commit/8b78d61))
+
+
+
+
+
+# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.8...@react-navigation/bottom-tabs@5.0.0-alpha.9) (2019-09-17)
+
+
+### Bug Fixes
+
+* provide navigation prop in header ([30e510d](https://github.com/react-navigation/navigation-ex/commit/30e510d))
+
+
+
+
+
 # [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.7...@react-navigation/bottom-tabs@5.0.0-alpha.8) (2019-09-16)


--- a/packages/bottom-tabs/package.json
+++ b/packages/bottom-tabs/package.json
@@ -10,7 +10,7 @@
    "android",
    "tab"
  ],
-  "version": "5.0.0-alpha.8",
+  "version": "5.0.0-alpha.11",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -33,17 +33,17 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.7",
-    "react-native-safe-area-view": "^0.14.6"
+    "@react-navigation/routers": "^5.0.0-alpha.9",
+    "react-native-safe-area-view": "^0.14.7"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.8.24",
-    "@types/react-native": "^0.60.2",
-    "del-cli": "^2.0.0",
+    "@types/react": "^16.9.4",
+    "@types/react-native": "^0.60.17",
+    "del-cli": "^3.0.0",
    "react": "16.8.3",
    "react-native": "0.59.10",
-    "typescript": "^3.5.3"
+    "typescript": "^3.6.3"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0",
--- a/packages/bottom-tabs/src/index.tsx
+++ b/packages/bottom-tabs/src/index.tsx
@@ -13,4 +13,9 @@ export { default as BottomTabBar } from './views/BottomTabBar';
 /**
 * Types
 */
-export { BottomTabNavigationOptions, BottomTabNavigationProp } from './types';
+export {
+  BottomTabNavigationOptions,
+  BottomTabNavigationProp,
+  BottomTabBarProps,
+  BottomTabBarOptions,
+} from './types';
--- a/packages/bottom-tabs/src/types.tsx
+++ b/packages/bottom-tabs/src/types.tsx
@@ -199,6 +199,7 @@ export type BottomTabBarOptions = {

 export type BottomTabBarProps = BottomTabBarOptions & {
  state: TabNavigationState;
+  descriptors: BottomTabDescriptorMap;
  navigation: NavigationHelpers<ParamListBase>;
  onTabPress: (props: { route: Route<string> }) => void;
  onTabLongPress: (props: { route: Route<string> }) => void;
@@ -231,5 +232,7 @@ export type BottomTabBarProps = BottomTabBarOptions & {
    tintColor: string;
    horizontal: boolean;
  }) => React.ReactNode;
+  activeTintColor: string;
+  inactiveTintColor: string;
  safeAreaInset?: React.ComponentProps<typeof SafeAreaView>['forceInset'];
 };
--- a/packages/bottom-tabs/src/views/BottomTabBar.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -9,7 +9,7 @@ import {
  Dimensions,
 } from 'react-native';
 import SafeAreaView from 'react-native-safe-area-view';
-import { Route } from '@react-navigation/core';
+import { Route, NavigationContext } from '@react-navigation/core';

 import TabBarIcon from './TabBarIcon';
 import TouchableWithoutFeedbackWrapper from './TouchableWithoutFeedbackWrapper';
@@ -23,8 +23,6 @@ type State = {
 };

 type Props = BottomTabBarProps & {
-  activeTintColor: string;
-  inactiveTintColor: string;
  safeAreaInset: React.ComponentProps<typeof SafeAreaView>['forceInset'];
 };

@@ -261,6 +259,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
  render() {
    const {
      state,
+      descriptors,
      keyboardHidesTabBar,
      activeBackgroundColor,
      inactiveBackgroundColor,
@@ -291,8 +290,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
        style={[
          styles.container,
          keyboardHidesTabBar
-            ? // eslint-disable-next-line react-native/no-inline-styles
-              {
+            ? {
                // When the keyboard is shown, slide down the tab bar
                transform: [
                  {
@@ -337,26 +335,30 @@ export default class TabBarBottom extends React.Component<Props, State> {
              getButtonComponent({ route }) || TouchableWithoutFeedbackWrapper;

            return (
-              <ButtonComponent
+              <NavigationContext.Provider
                key={route.key}
-                onPress={() => onTabPress({ route })}
-                onLongPress={() => onTabLongPress({ route })}
-                testID={testID}
-                accessibilityLabel={accessibilityLabel}
-                accessibilityRole={accessibilityRole}
-                accessibilityStates={accessibilityStates}
-                style={[
-                  styles.tab,
-                  { backgroundColor },
-                  this.shouldUseHorizontalLabels()
-                    ? styles.tabLandscape
-                    : styles.tabPortrait,
-                  tabStyle,
-                ]}
+                value={descriptors[route.key].navigation}
              >
-                {this.renderIcon(scene)}
-                {this.renderLabel(scene)}
-              </ButtonComponent>
+                <ButtonComponent
+                  onPress={() => onTabPress({ route })}
+                  onLongPress={() => onTabLongPress({ route })}
+                  testID={testID}
+                  accessibilityLabel={accessibilityLabel}
+                  accessibilityRole={accessibilityRole}
+                  accessibilityStates={accessibilityStates}
+                  style={[
+                    styles.tab,
+                    { backgroundColor },
+                    this.shouldUseHorizontalLabels()
+                      ? styles.tabLandscape
+                      : styles.tabPortrait,
+                    tabStyle,
+                  ]}
+                >
+                  {this.renderIcon(scene)}
+                  {this.renderLabel(scene)}
+                </ButtonComponent>
+              </NavigationContext.Provider>
            );
          })}
        </SafeAreaView>
--- a/packages/bottom-tabs/src/views/BottomTabView.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabView.tsx
@@ -177,6 +177,7 @@ export default class BottomTabView extends React.Component<Props, State> {
      <TabBarComponent
        {...tabBarOptions}
        state={state}
+        descriptors={descriptors}
        navigation={navigation}
        onTabPress={this.handleTabPress}
        onTabLongPress={this.handleTabLongPress}
--- a/packages/bottom-tabs/src/views/ResourceSavingScene.tsx
+++ b/packages/bottom-tabs/src/views/ResourceSavingScene.tsx
@@ -24,12 +24,7 @@ export default class ResourceSavingScene extends React.Component<Props> {

    return (
      <View
-        style={[
-          styles.container,
-          style,
-          // eslint-disable-next-line react-native/no-inline-styles
-          { opacity: isVisible ? 1 : 0 },
-        ]}
+        style={[styles.container, style, { opacity: isVisible ? 1 : 0 }]}
        collapsable={false}
        removeClippedSubviews={
          // On iOS, set removeClippedSubviews to true only when not focused
--- a/packages/compat/CHANGELOG.md
+++ b/packages/compat/CHANGELOG.md
@@ -3,6 +3,50 @@
 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.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.4...@react-navigation/compat@5.0.0-alpha.5) (2019-10-03)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.3...@react-navigation/compat@5.0.0-alpha.4) (2019-09-27)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.2...@react-navigation/compat@5.0.0-alpha.3) (2019-09-23)
+
+
+### Bug Fixes
+
+* throw when wrapping a compat navigatofor compat ([8920da6](https://github.com/react-navigation/navigation-ex/commit/8920da6))
+
+
+
+
+
+# [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.1...@react-navigation/compat@5.0.0-alpha.2) (2019-09-17)
+
+
+### Bug Fixes
+
+* provide navigation prop in header ([30e510d](https://github.com/react-navigation/navigation-ex/commit/30e510d))
+
+
+### Features
+
+* add createSwitchNavigator ([ff50282](https://github.com/react-navigation/navigation-ex/commit/ff50282))
+* add withNavigation and withNavigationFocus ([114a5dc](https://github.com/react-navigation/navigation-ex/commit/114a5dc))
+
+
+
+
+
 # 5.0.0-alpha.1 (2019-09-16)


--- a/packages/compat/package.json
+++ b/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.1",
+  "version": "5.0.0-alpha.5",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -24,12 +24,12 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.7"
+    "@react-navigation/routers": "^5.0.0-alpha.9"
  },
  "devDependencies": {
-    "@types/react": "^16.8.19",
+    "@types/react": "^16.9.4",
    "react": "^16.8.3",
-    "typescript": "^3.5.3"
+    "typescript": "^3.6.3"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0",
--- a/packages/compat/src/CompatScreen.tsx
+++ b/packages/compat/src/CompatScreen.tsx
@@ -7,15 +7,18 @@ import {
 import ScreenPropsContext from './ScreenPropsContext';
 import createCompatNavigationProp from './createCompatNavigationProp';

-type Props = {
-  navigation: NavigationProp<ParamListBase>;
-  route: RouteProp<ParamListBase, string>;
+type Props<ParamList extends ParamListBase> = {
+  navigation: NavigationProp<ParamList>;
+  route: RouteProp<ParamList, string>;
  component: React.ComponentType<any>;
 };

-function ScreenComponent(props: Props) {
+function ScreenComponent<ParamList extends ParamListBase>(
+  props: Props<ParamList>
+) {
  const navigation = React.useMemo(
-    () => createCompatNavigationProp(props.navigation, props.route),
+    () =>
+      createCompatNavigationProp(props.navigation as any, props.route as any),
    [props.navigation, props.route]
  );

--- a/packages/compat/src/createCompatNavigationProp.tsx
+++ b/packages/compat/src/createCompatNavigationProp.tsx
@@ -6,6 +6,7 @@ import {
  RouteProp,
 } from '@react-navigation/core';
 import * as helpers from './helpers';
+import { CompatNavigationProp } from './types';

 type EventName = 'willFocus' | 'willBlur' | 'didFocus' | 'didBlur' | 'refocus';

@@ -14,32 +15,28 @@ const blurSubscriptions = new WeakMap<() => void, () => void>();
 const refocusSubscriptions = new WeakMap<() => void, () => void>();

 export default function createCompatNavigationProp<
-  ParamList extends ParamListBase
+  NavigationPropType extends NavigationProp<ParamListBase>,
+  ParamList extends ParamListBase = NavigationPropType extends NavigationProp<
+    infer P
+  >
+    ? P
+    : ParamListBase
 >(
-  navigation: NavigationProp<ParamList>,
+  navigation: NavigationPropType,
  state:
    | (RouteProp<ParamList, keyof ParamList> & {
        state?: NavigationState | PartialState<NavigationState>;
      })
    | NavigationState
    | PartialState<NavigationState>
-) {
+): CompatNavigationProp<NavigationPropType> {
  return {
    ...navigation,
    ...Object.entries(helpers).reduce<{
      [key: string]: (...args: any[]) => void;
-    }>((acc, [name, method]) => {
+    }>((acc, [name, method]: [string, Function]) => {
      if (name in navigation) {
-        acc[name] = (...args: any[]) => {
-          // @ts-ignore
-          const payload = method(...args);
-
-          navigation.dispatch(
-            typeof payload === 'function'
-              ? payload(navigation.dangerouslyGetState())
-              : payload
-          );
-        };
+        acc[name] = (...args: any[]) => navigation.dispatch(method(...args));
      }

      return acc;
@@ -188,5 +185,5 @@ export default function createCompatNavigationProp<

      return undefined;
    },
-  };
+  } as any;
 }
--- a/packages/compat/src/createCompatNavigatorFactory.tsx
+++ b/packages/compat/src/createCompatNavigatorFactory.tsx
@@ -19,7 +19,14 @@ export default function createCompatNavigatorFactory<
    React.ComponentType<any>
  >
 >(createNavigator: CreateNavigator) {
-  return <
+  // @ts-ignore
+  if (createNavigator.isCompat) {
+    throw new Error(
+      `The navigator is already in compat mode. You don't need to wrap it in 'createCompatNavigatorFactory'.`
+    );
+  }
+
+  const createCompatNavigator = <
    NavigationPropType extends NavigationProp<any, any, any, any, any>,
    ParamList extends ParamListBase = NavigationPropType extends NavigationProp<
      infer P
@@ -80,7 +87,7 @@ export default function createCompatNavigatorFactory<
              navigation,
              route,
            }: {
-              navigation: NavigationProp<ParamList>;
+              navigation: NavigationPropType;
              route: RouteProp<ParamList, keyof ParamList> & {
                state?: NavigationState | PartialState<NavigationState>;
              };
@@ -101,10 +108,9 @@ export default function createCompatNavigatorFactory<
                typeof routeNavigationOptions === 'function' ||
                typeof screenNavigationOptions === 'function'
                  ? {
-                      navigation: createCompatNavigationProp<ParamList>(
-                        navigation,
-                        route
-                      ),
+                      navigation: createCompatNavigationProp<
+                        NavigationPropType
+                      >(navigation, route),
                      navigationOptions: defaultNavigationOptions || {},
                      screenProps,
                    }
@@ -158,4 +164,8 @@ export default function createCompatNavigatorFactory<

    return Navigator;
  };
+
+  createCompatNavigator.isCompat = true;
+
+  return createCompatNavigator;
 }
--- a/packages/compat/src/createSwitchNavigator.tsx
+++ b/packages/compat/src/createSwitchNavigator.tsx
@@ -0,0 +1,28 @@
+import {
+  useNavigationBuilder,
+  createNavigator,
+  DefaultNavigatorOptions,
+} from '@react-navigation/core';
+import {
+  TabRouter,
+  TabRouterOptions,
+  TabNavigationState,
+} from '@react-navigation/routers';
+import createCompatNavigatorFactory from './createCompatNavigatorFactory';
+
+type Props = DefaultNavigatorOptions<{}> & TabRouterOptions;
+
+function SwitchNavigator(props: Props) {
+  const { state, descriptors } = useNavigationBuilder<
+    TabNavigationState,
+    TabRouterOptions,
+    {},
+    {}
+  >(TabRouter, props);
+
+  return descriptors[state.routes[state.index].key].render();
+}
+
+export default createCompatNavigatorFactory(
+  createNavigator<{}, typeof SwitchNavigator>(SwitchNavigator)
+);
--- a/packages/compat/src/index.tsx
+++ b/packages/compat/src/index.tsx
@@ -9,4 +9,13 @@ export {
  default as createCompatNavigatorFactory,
 } from './createCompatNavigatorFactory';

+export {
+  default as createCompatNavigationProp,
+} from './createCompatNavigationProp';
+
+export { default as createSwitchNavigator } from './createSwitchNavigator';
+
+export { default as withNavigation } from './withNavigation';
+export { default as withNavigationFocus } from './withNavigationFocus';
+
 export * from './types';
--- a/packages/compat/src/useCompatNavigation.tsx
+++ b/packages/compat/src/useCompatNavigation.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import {
+  useNavigation,
+  useRoute,
+  NavigationProp,
+  ParamListBase,
+} from '@react-navigation/core';
+import createCompatNavigationProp from './createCompatNavigationProp';
+import { CompatNavigationProp } from './types';
+
+export default function useCompatNavigation<
+  T extends NavigationProp<ParamListBase>
+>() {
+  const navigation = useNavigation();
+  const route = useRoute();
+
+  return React.useMemo(
+    () =>
+      createCompatNavigationProp(
+        navigation,
+        route as any
+      ) as CompatNavigationProp<T>,
+    [navigation, route]
+  );
+}
--- a/packages/compat/src/withNavigation.tsx
+++ b/packages/compat/src/withNavigation.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { NavigationProp, ParamListBase } from '@react-navigation/core';
+import useCompatNavigation from './useCompatNavigation';
+import { CompatNavigationProp } from './types';
+
+type InjectedProps<T extends NavigationProp<ParamListBase>> = {
+  navigation: CompatNavigationProp<T>;
+};
+
+export default function withNavigation<
+  T extends NavigationProp<ParamListBase>,
+  P extends InjectedProps<T>,
+  C extends React.ComponentType<P>
+>(Comp: C) {
+  const WrappedComponent = ({
+    onRef,
+    ...rest
+  }: Exclude<P, InjectedProps<T>> & {
+    onRef?: C extends React.ComponentClass<any>
+      ? React.Ref<InstanceType<C>>
+      : never;
+  }): React.ReactElement => {
+    const navigation = useCompatNavigation<T>();
+
+    // @ts-ignore
+    return <Comp ref={onRef} navigation={navigation} {...rest} />;
+  };
+
+  WrappedComponent.displayName = `withNavigation(${Comp.displayName ||
+    Comp.name})`;
+
+  return WrappedComponent;
+}
--- a/packages/compat/src/withNavigationFocus.tsx
+++ b/packages/compat/src/withNavigationFocus.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { useIsFocused } from '@react-navigation/core';
+
+type InjectedProps = {
+  isFocused: boolean;
+};
+
+export default function withNavigationFocus<
+  P extends InjectedProps,
+  C extends React.ComponentType<P>
+>(Comp: C) {
+  const WrappedComponent = ({
+    onRef,
+    ...rest
+  }: Exclude<P, InjectedProps> & {
+    onRef?: C extends React.ComponentClass<any>
+      ? React.Ref<InstanceType<C>>
+      : never;
+  }): React.ReactElement => {
+    const isFocused = useIsFocused();
+
+    // @ts-ignore
+    return <Comp ref={onRef} isFocused={isFocused} {...rest} />;
+  };
+
+  WrappedComponent.displayName = `withNavigationFocus(${Comp.displayName ||
+    Comp.name})`;
+
+  return WrappedComponent;
+}
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -3,6 +3,47 @@
 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/core@5.0.0-alpha.11...@react-navigation/core@5.0.0-alpha.12) (2019-10-03)
+
+
+### Bug Fixes
+
+* don't merge state with existing state during reset. fixes [#111](https://github.com/react-navigation/navigation-ex/issues/111) ([7393464](https://github.com/react-navigation/navigation-ex/commit/7393464))
+* don't throw when switching navigator. fixes [#91](https://github.com/react-navigation/navigation-ex/issues/91) ([19be2b4](https://github.com/react-navigation/navigation-ex/commit/19be2b4))
+
+
+### Features
+
+* add a getRootState method ([#119](https://github.com/react-navigation/navigation-ex/issues/119)) ([7a5bcb4](https://github.com/react-navigation/navigation-ex/commit/7a5bcb4))
+
+
+
+
+
+# [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.10...@react-navigation/core@5.0.0-alpha.11) (2019-09-27)
+
+
+### Bug Fixes
+
+* fire blur event when a route is removed with a delay ([1153d55](https://github.com/react-navigation/navigation-ex/commit/1153d55)), closes [#110](https://github.com/react-navigation/navigation-ex/issues/110)
+
+
+### Features
+
+* add a method to reset root navigator state ([e61f594](https://github.com/react-navigation/navigation-ex/commit/e61f594))
+
+
+
+
+
+# [5.0.0-alpha.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.9...@react-navigation/core@5.0.0-alpha.10) (2019-09-17)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
 # [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.8...@react-navigation/core@5.0.0-alpha.9) (2019-09-16)


--- a/packages/core/package.json
+++ b/packages/core/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",
@@ -31,19 +31,19 @@
  "dependencies": {
    "escape-string-regexp": "^2.0.0",
    "query-string": "^6.8.3",
-    "shortid": "^2.2.14",
-    "use-subscription": "^1.0.0"
+    "shortid": "^2.2.15",
+    "use-subscription": "^1.1.1"
  },
  "devDependencies": {
-    "@babel/core": "^7.4.5",
+    "@babel/core": "^7.6.2",
    "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.8.19",
+    "@types/react": "^16.9.4",
    "@types/shortid": "^0.0.29",
-    "del-cli": "^2.0.0",
+    "del-cli": "^3.0.0",
    "react": "^16.8.3",
    "react-native-testing-library": "^1.9.1",
    "react-test-renderer": "16.8.3",
-    "typescript": "^3.5.3"
+    "typescript": "^3.6.3"
  },
  "peerDependencies": {
    "react": "^16.8.3"
--- a/packages/core/src/BaseRouter.tsx
+++ b/packages/core/src/BaseRouter.tsx
@@ -1,5 +1,5 @@
 import shortid from 'shortid';
-import { CommonAction, NavigationState } from './types';
+import { CommonAction, NavigationState, PartialState } from './types';

 /**
 * Base router object that can be used when writing custom routers.
@@ -9,7 +9,7 @@ const BaseRouter = {
  getStateForAction<State extends NavigationState>(
    state: State,
    action: CommonAction
-  ): State | null {
+  ): State | PartialState<State> | null {
    switch (action.type) {
      case 'REPLACE': {
        const index = action.source
@@ -56,12 +56,7 @@ const BaseRouter = {
      }

      case 'RESET':
-        return {
-          ...state,
-          ...action.payload,
-          key: state.key,
-          routeNames: state.routeNames,
-        };
+        return action.payload as PartialState<State>;

      default:
        return null;
--- a/packages/core/src/CommonActions.tsx
+++ b/packages/core/src/CommonActions.tsx
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-cycle
 import { NavigationState, PartialState } from './types';

 export type Action =
--- a/packages/core/src/EnsureSingleNavigator.tsx
+++ b/packages/core/src/EnsureSingleNavigator.tsx
@@ -18,25 +18,30 @@ export const SingleNavigatorContext = React.createContext<
 * Component which ensures that there's only one navigator nested under it.
 */
 export default function EnsureSingleNavigator({ children }: Props) {
-  const [currentKey, setCurrentKey] = React.useState<string | undefined>();
+  const navigatorKeyRef = React.useRef<string | undefined>();
+
  const value = React.useMemo(
    () => ({
      register(key: string) {
+        const currentKey = navigatorKeyRef.current;
+
        if (currentKey !== undefined && key !== currentKey) {
          throw new Error(MULTIPLE_NAVIGATOR_ERROR);
        }

-        setCurrentKey(key);
+        navigatorKeyRef.current = key;
      },
      unregister(key: string) {
-        if (currentKey !== undefined && key !== currentKey) {
-          throw new Error(MULTIPLE_NAVIGATOR_ERROR);
+        const currentKey = navigatorKeyRef.current;
+
+        if (key !== currentKey) {
+          return;
        }

-        setCurrentKey(undefined);
+        navigatorKeyRef.current = undefined;
      },
    }),
-    [currentKey]
+    []
  );

  return (
--- a/packages/core/src/NavigationBuilderContext.tsx
+++ b/packages/core/src/NavigationBuilderContext.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { NavigationAction, NavigationHelpers, ParamListBase } from './types';
+import {
+  NavigationAction,
+  NavigationHelpers,
+  NavigationState,
+  ParamListBase,
+} from './types';

 export type ChildActionListener = (
  action: NavigationAction,
@@ -14,6 +19,8 @@ export type FocusedNavigationListener = <T>(
  callback: FocusedNavigationCallback<T>
 ) => { handled: boolean; result: T };

+export type NavigatorStateGetter = () => NavigationState;
+
 /**
 * Context which holds the required helpers needed to build nested navigators.
 */
@@ -25,6 +32,7 @@ const NavigationBuilderContext = React.createContext<{
  addActionListener?: (listener: ChildActionListener) => void;
  addFocusedListener?: (listener: FocusedNavigationListener) => void;
  onRouteFocus?: (key: string) => void;
+  addStateGetter?: (key: string, getter: NavigatorStateGetter) => void;
  trackAction: (action: NavigationAction) => void;
 }>({
  trackAction: () => undefined,
--- a/packages/core/src/NavigationContainer.tsx
+++ b/packages/core/src/NavigationContainer.tsx
@@ -2,8 +2,10 @@ import * as React from 'react';
 import * as CommonActions from './CommonActions';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
 import NavigationBuilderContext from './NavigationBuilderContext';
+import ResetRootContext from './ResetRootContext';
 import useFocusedListeners from './useFocusedListeners';
 import useDevTools from './useDevTools';
+import useStateGetters from './useStateGetters';

 import {
  Route,
@@ -23,7 +25,9 @@ const MISSING_CONTEXT_ERROR =
 export const NavigationStateContext = React.createContext<{
  state?: NavigationState | PartialState<NavigationState>;
  getState: () => NavigationState | PartialState<NavigationState> | undefined;
-  setState: (state: NavigationState | undefined) => void;
+  setState: (
+    state: NavigationState | PartialState<NavigationState> | undefined
+  ) => void;
  key?: string;
  performTransaction: (action: () => void) => void;
 }>({
@@ -86,46 +90,6 @@ const Container = React.forwardRef(function NavigationContainer(
    getPartialState(initialState)
  );

-  const { listeners, addListener: addFocusedListener } = useFocusedListeners();
-
-  const dispatch = (action: NavigationAction) => {
-    listeners[0](navigation => navigation.dispatch(action));
-  };
-
-  const canGoBack = () => {
-    const { result, handled } = listeners[0](navigation =>
-      navigation.canGoBack()
-    );
-
-    if (handled) {
-      return result;
-    } else {
-      return false;
-    }
-  };
-
-  React.useImperativeHandle(ref, () => ({
-    ...(Object.keys(CommonActions) as Array<keyof typeof CommonActions>).reduce<
-      any
-    >((acc, name) => {
-      acc[name] = (...args: any[]) =>
-        dispatch(
-          // eslint-disable-next-line import/namespace
-          CommonActions[name](
-            // @ts-ignore
-            ...args
-          )
-        );
-      return acc;
-    }, {}),
-    resetRoot: (state: PartialState<NavigationState> | NavigationState) => {
-      trackAction('@@RESET_ROOT');
-      setNavigationState(state);
-    },
-    dispatch,
-    canGoBack,
-  }));
-
  const navigationStateRef = React.useRef<State>();
  const transactionStateRef = React.useRef<State | null>(null);
  const isTransactionActiveRef = React.useRef<boolean>(false);
@@ -143,12 +107,66 @@ const Container = React.forwardRef(function NavigationContainer(
    state,
  });

+  const { listeners, addListener: addFocusedListener } = useFocusedListeners();
+
+  const { getStateForRoute, addStateGetter } = useStateGetters();
+
+  const dispatch = (
+    action: NavigationAction | ((state: NavigationState) => NavigationAction)
+  ) => {
+    listeners[0](navigation => navigation.dispatch(action));
+  };
+
+  const canGoBack = () => {
+    const { result, handled } = listeners[0](navigation =>
+      navigation.canGoBack()
+    );
+
+    if (handled) {
+      return result;
+    } else {
+      return false;
+    }
+  };
+
+  const resetRoot = React.useCallback(
+    (state: PartialState<NavigationState> | NavigationState) => {
+      trackAction('@@RESET_ROOT');
+      setNavigationState(state);
+    },
+    [trackAction]
+  );
+
+  const getRootState = () => {
+    return getStateForRoute('root');
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    ...(Object.keys(CommonActions) as Array<keyof typeof CommonActions>).reduce<
+      any
+    >((acc, name) => {
+      acc[name] = (...args: any[]) =>
+        dispatch(
+          CommonActions[name](
+            // @ts-ignore
+            ...args
+          )
+        );
+      return acc;
+    }, {}),
+    resetRoot,
+    dispatch,
+    canGoBack,
+    getRootState,
+  }));
+
  const builderContext = React.useMemo(
    () => ({
      addFocusedListener,
+      addStateGetter,
      trackAction,
    }),
-    [addFocusedListener, trackAction]
+    [addFocusedListener, trackAction, addStateGetter]
  );

  const performTransaction = React.useCallback((callback: () => void) => {
@@ -218,7 +236,9 @@ const Container = React.forwardRef(function NavigationContainer(
  return (
    <NavigationBuilderContext.Provider value={builderContext}>
      <NavigationStateContext.Provider value={context}>
-        <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
+        <ResetRootContext.Provider value={resetRoot}>
+          <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
+        </ResetRootContext.Provider>
      </NavigationStateContext.Provider>
    </NavigationBuilderContext.Provider>
  );
--- a/packages/core/src/ResetRootContext.tsx
+++ b/packages/core/src/ResetRootContext.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { NavigationState, PartialState } from './types';
+
+/**
+ * Context which holds the method to reset root navigator state.
+ */
+const ResetRootContext = React.createContext<
+  (state: PartialState<NavigationState> | NavigationState) => void
+>(() => {
+  throw new Error(
+    "We couldn't find a way to reset root state. Have you wrapped your app with 'NavigationContainer'?"
+  );
+});
+
+export default ResetRootContext;
--- a/packages/core/src/SceneView.tsx
+++ b/packages/core/src/SceneView.tsx
@@ -19,8 +19,8 @@ type Props<State extends NavigationState, ScreenOptions extends object> = {
  route: Route<string> & {
    state?: NavigationState | PartialState<NavigationState>;
  };
-  getState: () => NavigationState;
-  setState: (state: NavigationState) => void;
+  getState: () => State;
+  setState: (state: State) => void;
 };

 /**
@@ -47,7 +47,7 @@ export default function SceneView<
  }, [getState, route.key]);

  const setCurrentState = React.useCallback(
-    (child: NavigationState | undefined) => {
+    (child: NavigationState | PartialState<NavigationState> | undefined) => {
      const state = getState();

      setState({
--- a/packages/core/src/tests/BaseRouter.test.tsx
+++ b/packages/core/src/tests/BaseRouter.test.tsx
@@ -125,15 +125,5 @@ it('resets state to new state with RESET', () => {
    })
  );

-  expect(result).toEqual({ ...STATE, index: 0, routes });
-});
-
-it('ignores key and routeNames when resetting with RESET', () => {
-  const result = BaseRouter.getStateForAction(
-    STATE,
-    // @ts-ignore
-    CommonActions.reset({ index: 2, key: 'foo', routeNames: ['test'] })
-  );
-
-  expect(result).toEqual({ ...STATE, index: 2 });
+  expect(result).toEqual({ index: 0, routes });
 });
--- a/packages/core/src/tests/NavigationContainer.test.tsx
+++ b/packages/core/src/tests/NavigationContainer.test.tsx
@@ -321,3 +321,56 @@ it('handle resetting state with ref', () => {
  expect(onStateChange).toBeCalledTimes(1);
  expect(onStateChange).lastCalledWith(state);
 });
+
+it('handle getRootState', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <NavigationContainer ref={ref}>
+      <TestNavigator initialRouteName="foo">
+        <Screen name="foo">
+          {() => (
+            <TestNavigator>
+              <Screen name="qux" component={() => null} />
+              <Screen name="lex" component={() => null} />
+            </TestNavigator>
+          )}
+        </Screen>
+        <Screen name="bar" component={() => null} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  render(element);
+
+  let state;
+  if (ref.current) {
+    state = ref.current.getRootState();
+  }
+  expect(state).toEqual({
+    index: 0,
+    key: '7',
+    routeNames: ['foo', 'bar'],
+    routes: [
+      {
+        key: 'foo',
+        name: 'foo',
+        state: {
+          index: 0,
+          key: '8',
+          routeNames: ['qux', 'lex'],
+          routes: [{ key: 'qux', name: 'qux' }, { key: 'lex', name: 'lex' }],
+          stale: false,
+        },
+      },
+      { key: 'bar', name: 'bar' },
+    ],
+    stale: false,
+  });
+});
--- a/packages/core/src/tests/index.test.tsx
+++ b/packages/core/src/tests/index.test.tsx
@@ -323,7 +323,7 @@ it('cleans up state when the navigator unmounts', () => {
  expect(onStateChange).lastCalledWith(undefined);
 });

-it('allows arbitrary state updates by dispatching a function', () => {
+it('allows state updates by dispatching a function returning an action', () => {
  const TestNavigator = (props: any) => {
    const { state, descriptors } = useNavigationBuilder(MockRouter, props);

@@ -332,11 +332,11 @@ it('allows arbitrary state updates by dispatching a function', () => {

  const FooScreen = (props: any) => {
    React.useEffect(() => {
-      props.navigation.dispatch((state: any) => ({
-        ...state,
-        routes: state.routes.slice().reverse(),
-        index: 1,
-      }));
+      props.navigation.dispatch((state: NavigationState) =>
+        state.index === 0
+          ? { type: 'NAVIGATE', payload: { name: state.routeNames[1] } }
+          : { type: 'NOOP' }
+      );
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

@@ -364,7 +364,7 @@ it('allows arbitrary state updates by dispatching a function', () => {
    index: 1,
    key: '0',
    routeNames: ['foo', 'bar'],
-    routes: [{ key: 'bar', name: 'bar' }, { key: 'foo', name: 'foo' }],
+    routes: [{ key: 'foo', name: 'foo' }, { key: 'bar', name: 'bar' }],
  });
 });

@@ -655,6 +655,7 @@ it('throws when a React Element is not the direct children', () => {
  );
 });

+// eslint-disable-next-line jest/expect-expect
 it("doesn't throw when direct children is Screen or empty element", () => {
  const TestNavigator = (props: any) => {
    useNavigationBuilder(MockRouter, props);
@@ -694,3 +695,30 @@ it('throws when multiple screens with same name are defined', () => {
    "A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named 'foo')"
  );
 });
+
+it('switches rendered navigators', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const root = render(
+    <NavigationContainer>
+      <TestNavigator key="a">
+        <Screen name="foo" component={jest.fn()} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(() =>
+    root.update(
+      <NavigationContainer>
+        <TestNavigator key="b">
+          <Screen name="foo" component={jest.fn()} />
+        </TestNavigator>
+      </NavigationContainer>
+    )
+  ).not.toThrowError(
+    'Another navigator is already registered for this container.'
+  );
+});
--- a/packages/core/src/tests/useEventEmitter.test.tsx
+++ b/packages/core/src/tests/useEventEmitter.test.tsx
@@ -4,6 +4,7 @@ import useNavigationBuilder from '../useNavigationBuilder';
 import NavigationContainer from '../NavigationContainer';
 import Screen from '../Screen';
 import MockRouter from './__fixtures__/MockRouter';
+import { Router, NavigationState } from '../types';

 it('fires focus and blur events in root navigator', () => {
  const TestNavigator = React.forwardRef((props: any, ref: any): any => {
@@ -200,6 +201,131 @@ it('fires focus and blur events in nested navigator', () => {
  expect(thirdFocusCallback).toBeCalledTimes(1);
 });

+it('fires blur event when a route is removed with a delay', async () => {
+  const TestRouter = (options: any): Router<NavigationState, any> => {
+    const router = MockRouter(options);
+
+    return {
+      ...router,
+
+      getInitialState({ routeNames, routeParamList }) {
+        const initialRouteName =
+          options.initialRouteName !== undefined
+            ? options.initialRouteName
+            : routeNames[0];
+
+        return {
+          stale: false,
+          key: 'stack',
+          index: 0,
+          routeNames,
+          routes: [
+            {
+              key: initialRouteName,
+              name: initialRouteName,
+              params: routeParamList[initialRouteName],
+            },
+          ],
+        };
+      },
+
+      getStateForAction(state, action) {
+        switch (action.type) {
+          case 'PUSH':
+            return {
+              ...state,
+              index: state.index + 1,
+              routes: [...state.routes, action.payload],
+            };
+          case 'POP': {
+            const routes = state.routes.slice(0, -1);
+
+            return {
+              ...state,
+              index: routes.length - 1,
+              routes,
+            };
+          }
+          default:
+            return router.getStateForAction(state, action);
+        }
+      },
+
+      actionCreators: {
+        push(payload) {
+          return { type: 'PUSH', payload };
+        },
+
+        pop() {
+          return { type: 'POP' };
+        },
+      },
+    };
+  };
+
+  const TestNavigator = React.forwardRef((props: any, ref: any): any => {
+    const { state, navigation, descriptors } = useNavigationBuilder(
+      TestRouter,
+      props
+    );
+
+    React.useImperativeHandle(ref, () => navigation, [navigation]);
+
+    const [previous, dispatch] = React.useReducer(
+      (state, action) => {
+        return { ...state, ...action };
+      },
+      { routes: state.routes, descriptors }
+    );
+
+    React.useEffect(() => {
+      dispatch({ routes: state.routes, descriptors });
+    }, [descriptors, state.routes]);
+
+    return previous.routes.map((route: any) =>
+      previous.descriptors[route.key].render()
+    );
+  });
+
+  const blurCallback = jest.fn();
+
+  const First = () => null;
+
+  const Second = ({ navigation }: any) => {
+    React.useEffect(() => navigation.addListener('blur', blurCallback), [
+      navigation,
+    ]);
+
+    return null;
+  };
+
+  const navigation = React.createRef<any>();
+
+  const element = (
+    <NavigationContainer>
+      <TestNavigator ref={navigation}>
+        <Screen name="first" component={First} />
+        <Screen name="second" component={Second} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  render(element);
+
+  act(() =>
+    navigation.current.push({
+      name: 'second',
+      key: 'second',
+    })
+  );
+
+  expect(blurCallback).toBeCalledTimes(0);
+
+  act(() => navigation.current.pop());
+
+  expect(blurCallback).toBeCalledTimes(1);
+});
+
 it('fires custom events', () => {
  const eventName = 'someSuperCoolEvent';

--- a/packages/core/src/tests/useOnAction.test.tsx
+++ b/packages/core/src/tests/useOnAction.test.tsx
@@ -296,6 +296,7 @@ it("action doesn't bubble if target is specified", () => {
  expect(onStateChange).not.toBeCalled();
 });

+// eslint-disable-next-line jest/expect-expect
 it("doesn't crash if no navigator handled the action", () => {
  const TestRouter = MockRouter;

--- a/packages/core/src/types.tsx
+++ b/packages/core/src/types.tsx
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-cycle
 import * as CommonActions from './CommonActions';
 import * as React from 'react';

@@ -170,7 +171,10 @@ export type Router<
   * @param state State object to apply the action on.
   * @param action Action object to apply.
   */
-  getStateForAction(state: State, action: Action): State | null;
+  getStateForAction(
+    state: State,
+    action: Action
+  ): State | PartialState<State> | null;

  /**
   * Whether the action should also change focus in parent navigator
@@ -270,7 +274,9 @@ type NavigationHelpersCommon<
   *
   * @param action Action object or update function.
   */
-  dispatch(action: NavigationAction | ((state: State) => State)): void;
+  dispatch(
+    action: NavigationAction | ((state: State) => NavigationAction)
+  ): void;

  /**
   * Navigate to a route in current navigation tree.
@@ -314,6 +320,13 @@ type NavigationHelpersCommon<
   */
  reset(state: PartialState<State> | State): void;

+  /**
+   * Reset the navigation state of the root navigator to the provided state.
+   *
+   * @param state Navigation state object.
+   */
+  resetRoot(state: PartialState<NavigationState> | NavigationState): void;
+
  /**
   * Go back to the previous route in history.
   */
@@ -525,6 +538,7 @@ export type NavigationContainerRef =
       * @param state Navigation state object.
       */
      resetRoot(state: PartialState<NavigationState> | NavigationState): void;
+      getRootState(): NavigationState;
    }
  | undefined
  | null;
--- a/packages/core/src/useDescriptors.tsx
+++ b/packages/core/src/useDescriptors.tsx
@@ -3,6 +3,7 @@ import SceneView from './SceneView';
 import NavigationBuilderContext, {
  ChildActionListener,
  FocusedNavigationListener,
+  NavigatorStateGetter,
 } from './NavigationBuilderContext';
 import { NavigationEventEmitter } from './useEventEmitter';
 import useNavigationCache from './useNavigationCache';
@@ -17,8 +18,8 @@ import {
  Router,
 } from './types';

-type Options<ScreenOptions extends object> = {
-  state: NavigationState;
+type Options<State extends NavigationState, ScreenOptions extends object> = {
+  state: State;
  screens: { [key: string]: RouteConfig<ParamListBase, string, ScreenOptions> };
  navigation: NavigationHelpers<ParamListBase>;
  screenOptions?:
@@ -31,12 +32,13 @@ type Options<ScreenOptions extends object> = {
    action: NavigationAction,
    visitedNavigators?: Set<string>
  ) => boolean;
-  getState: () => NavigationState;
-  setState: (state: NavigationState) => void;
+  getState: () => State;
+  setState: (state: State) => void;
  addActionListener: (listener: ChildActionListener) => void;
  addFocusedListener: (listener: FocusedNavigationListener) => void;
+  addStateGetter: (key: string, getter: NavigatorStateGetter) => void;
  onRouteFocus: (key: string) => void;
-  router: Router<NavigationState, NavigationAction>;
+  router: Router<State, NavigationAction>;
  emitter: NavigationEventEmitter;
 };

@@ -61,10 +63,11 @@ export default function useDescriptors<
  setState,
  addActionListener,
  addFocusedListener,
+  addStateGetter,
  onRouteFocus,
  router,
  emitter,
-}: Options<ScreenOptions>) {
+}: Options<State, ScreenOptions>) {
  const [options, setOptions] = React.useState<{ [key: string]: object }>({});
  const { trackAction } = React.useContext(NavigationBuilderContext);

@@ -74,6 +77,7 @@ export default function useDescriptors<
      onAction,
      addActionListener,
      addFocusedListener,
+      addStateGetter,
      onRouteFocus,
      trackAction,
    }),
@@ -83,6 +87,7 @@ export default function useDescriptors<
      addActionListener,
      addFocusedListener,
      onRouteFocus,
+      addStateGetter,
      trackAction,
    ]
  );
--- a/packages/core/src/useDevTools.tsx
+++ b/packages/core/src/useDevTools.tsx
@@ -18,6 +18,7 @@ type DevTools = {
 };

 declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace NodeJS {
    interface Global {
      __REDUX_DEVTOOLS_EXTENSION__:
--- a/packages/core/src/useFocusEvents.tsx
+++ b/packages/core/src/useFocusEvents.tsx
@@ -57,19 +57,19 @@ export default function useFocusEvents({ state, emitter }: Options) {
      return;
    }

-    state.routes.forEach((route, i) => {
-      if (
-        lastFocusedKey === undefined ||
-        (route.key !== lastFocusedKey && route.key !== currentFocusedKey)
-      ) {
-        // Only fire events after mount, or if focus state of this route changed
-        return;
-      }
+    if (lastFocusedKey === undefined) {
+      // Only fire events after initial mount
+      return;
+    }

-      emitter.emit({
-        type: i === state.index ? 'focus' : 'blur',
-        target: route.key,
-      });
+    emitter.emit({
+      type: 'focus',
+      target: currentFocusedKey,
    });
-  }, [currentFocusedKey, emitter, navigation, state.index, state.routes]);
+
+    emitter.emit({
+      type: 'blur',
+      target: lastFocusedKey,
+    });
+  }, [currentFocusedKey, emitter, navigation]);
 }
--- a/packages/core/src/useNavigationBuilder.tsx
+++ b/packages/core/src/useNavigationBuilder.tsx
@@ -23,6 +23,8 @@ import {
  PrivateValueStore,
  NavigationAction,
 } from './types';
+import useStateGetters from './useStateGetters';
+import useOnGetState from './useOnGetState';

 // This is to make TypeScript compiler happy
 // eslint-disable-next-line babel/no-unused-expressions
@@ -227,6 +229,8 @@ export default function useNavigationBuilder<
    addListener: addFocusedListener,
  } = useFocusedListeners();

+  const { getStateForRoute, addStateGetter } = useStateGetters();
+
  const onAction = useOnAction({
    router,
    getState,
@@ -245,7 +249,6 @@ export default function useNavigationBuilder<
  const navigation = useNavigationHelpers<State, NavigationAction, EventMap>({
    onAction,
    getState,
-    setState,
    emitter,
    router,
  });
@@ -255,6 +258,11 @@ export default function useNavigationBuilder<
    focusedListeners,
  });

+  useOnGetState({
+    getState,
+    getStateForRoute,
+  });
+
  const descriptors = useDescriptors<State, ScreenOptions>({
    state,
    screens,
@@ -266,6 +274,7 @@ export default function useNavigationBuilder<
    onRouteFocus,
    addActionListener,
    addFocusedListener,
+    addStateGetter,
    router,
    emitter,
  });
--- a/packages/core/src/useNavigationCache.tsx
+++ b/packages/core/src/useNavigationCache.tsx
@@ -12,15 +12,15 @@ import {
  Router,
 } from './types';

-type Options = {
-  state: NavigationState;
-  getState: () => NavigationState;
+type Options<State extends NavigationState> = {
+  state: State;
+  getState: () => State;
  navigation: NavigationHelpers<ParamListBase> &
    Partial<NavigationProp<ParamListBase, string, any, any, any>>;
  setOptions: (
    cb: (options: { [key: string]: object }) => { [key: string]: object }
  ) => void;
-  router: Router<NavigationState, NavigationAction>;
+  router: Router<State, NavigationAction>;
  emitter: NavigationEventEmitter;
 };

@@ -39,7 +39,14 @@ type NavigationCache<
 export default function useNavigationCache<
  State extends NavigationState,
  ScreenOptions extends object
->({ state, getState, navigation, setOptions, router, emitter }: Options) {
+>({
+  state,
+  getState,
+  navigation,
+  setOptions,
+  router,
+  emitter,
+}: Options<State>) {
  // Cache object which holds navigation objects for each screen
  // We use `React.useMemo` instead of `React.useRef` coz we want to invalidate it when deps change
  // In reality, these deps will rarely change, if ever
@@ -70,13 +77,17 @@ export default function useNavigationCache<
        const { emit, ...rest } = navigation;

        const dispatch = (
-          action: NavigationAction | ((state: State) => State)
-        ) =>
+          action: NavigationAction | ((state: State) => NavigationAction)
+        ) => {
+          const payload =
+            typeof action === 'function' ? action(getState()) : action;
+
          navigation.dispatch(
-            typeof action === 'object' && action != null
-              ? { source: route.key, ...action }
-              : action
+            typeof payload === 'object' && payload != null
+              ? { source: route.key, ...payload }
+              : payload
          );
+        };

        const helpers = Object.keys(actions).reduce(
          (acc, name) => {
@@ -92,7 +103,7 @@ export default function useNavigationCache<
          ...helpers,
          ...emitter.create(route.key),
          dangerouslyGetParent: () => parentNavigation as any,
-          dangerouslyGetState: getState as () => State,
+          dangerouslyGetState: getState,
          dispatch,
          setOptions: (options: object) =>
            setOptions(o => ({
--- a/packages/core/src/useNavigationHelpers.tsx
+++ b/packages/core/src/useNavigationHelpers.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as CommonActions from './CommonActions';
 import NavigationContext from './NavigationContext';
+import ResetRootContext from './ResetRootContext';
 import { NavigationStateContext } from './NavigationContainer';
 import { NavigationEventEmitter } from './useEventEmitter';
 import {
@@ -23,7 +24,6 @@ type Options<State extends NavigationState, Action extends NavigationAction> = {
    visitedNavigators?: Set<string>
  ) => boolean;
  getState: () => State;
-  setState: (state: State) => void;
  emitter: NavigationEventEmitter;
  router: Router<State, Action>;
 };
@@ -36,18 +36,18 @@ export default function useNavigationHelpers<
  State extends NavigationState,
  Action extends NavigationAction,
  EventMap extends { [key: string]: any }
->({ onAction, getState, setState, emitter, router }: Options<State, Action>) {
+>({ onAction, getState, emitter, router }: Options<State, Action>) {
+  const resetRoot = React.useContext(ResetRootContext);
  const parentNavigationHelpers = React.useContext(NavigationContext);
  const { performTransaction } = React.useContext(NavigationStateContext);

  return React.useMemo(() => {
-    const dispatch = (action: Action | ((state: State) => State)) =>
+    const dispatch = (action: Action | ((state: State) => Action)) =>
      performTransaction(() => {
-        if (typeof action === 'function') {
-          setState(action(getState()));
-        } else {
-          onAction(action);
-        }
+        const payload =
+          typeof action === 'function' ? action(getState()) : action;
+
+        onAction(payload);
      });

    const actions = {
@@ -67,6 +67,7 @@ export default function useNavigationHelpers<
    return {
      ...parentNavigationHelpers,
      ...helpers,
+      resetRoot,
      dispatch,
      emit: emitter.emit,
      isFocused: parentNavigationHelpers
@@ -85,9 +86,9 @@ export default function useNavigationHelpers<
    router,
    getState,
    parentNavigationHelpers,
+    resetRoot,
    emitter.emit,
    performTransaction,
-    setState,
    onAction,
  ]);
 }
--- a/packages/core/src/useOnAction.tsx
+++ b/packages/core/src/useOnAction.tsx
@@ -2,13 +2,18 @@ import * as React from 'react';
 import NavigationBuilderContext, {
  ChildActionListener,
 } from './NavigationBuilderContext';
-import { NavigationAction, NavigationState, Router } from './types';
+import {
+  NavigationAction,
+  NavigationState,
+  PartialState,
+  Router,
+} from './types';

 type Options = {
  router: Router<NavigationState, NavigationAction>;
  key?: string;
  getState: () => NavigationState;
-  setState: (state: NavigationState) => void;
+  setState: (state: NavigationState | PartialState<NavigationState>) => void;
  listeners: ChildActionListener[];
 };

--- a/packages/core/src/useOnGetState.tsx
+++ b/packages/core/src/useOnGetState.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import NavigationBuilderContext from './NavigationBuilderContext';
+import { NavigationState } from './types';
+import NavigationRouteContext from './NavigationRouteContext';
+
+export default function useOnGetState({
+  getStateForRoute,
+  getState,
+}: {
+  getStateForRoute: (routeName: string) => NavigationState | undefined;
+  getState: () => NavigationState;
+}) {
+  const { addStateGetter } = React.useContext(NavigationBuilderContext);
+  const route = React.useContext(NavigationRouteContext);
+  const key = route ? route.key : 'root';
+
+  const getter = React.useCallback(() => {
+    const state = getState();
+    return {
+      ...state,
+      routes: state.routes.map(route => ({
+        ...route,
+        state: getStateForRoute(route.key),
+      })),
+    };
+  }, [getState, getStateForRoute]);
+
+  React.useEffect(() => {
+    return addStateGetter && addStateGetter(key, getter);
+  }, [addStateGetter, getter, key]);
+}
--- a/packages/core/src/useStateGetters.tsx
+++ b/packages/core/src/useStateGetters.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { NavigatorStateGetter } from './NavigationBuilderContext';
+
+/**
+ * Hook which lets child navigators add getters to be called for obtaining rehydrated state.
+ */
+
+export default function useStateGetters() {
+  const stateGetters = React.useRef<Record<string, NavigatorStateGetter>>({});
+
+  const getStateForRoute = React.useCallback(
+    routeKey =>
+      stateGetters.current[routeKey] === undefined
+        ? undefined
+        : stateGetters.current[routeKey](),
+    [stateGetters]
+  );
+
+  const addStateGetter = React.useCallback(
+    (key: string, getter: NavigatorStateGetter) => {
+      stateGetters.current[key] = getter;
+
+      return () => {
+        // @ts-ignore
+        stateGetters.current[key] = undefined;
+      };
+    },
+    []
+  );
+
+  return {
+    getStateForRoute,
+    addStateGetter,
+  };
+}
--- a/packages/drawer/CHANGELOG.md
+++ b/packages/drawer/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.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.10...@react-navigation/drawer@5.0.0-alpha.11) (2019-10-03)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.9...@react-navigation/drawer@5.0.0-alpha.10) (2019-09-27)
+
+
+### Features
+
+* export some more type aliases ([8b78d61](https://github.com/react-navigation/navigation-ex/commit/8b78d61))
+
+
+
+
+
 # [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.8...@react-navigation/drawer@5.0.0-alpha.9) (2019-09-16)


--- a/packages/drawer/package.json
+++ b/packages/drawer/package.json
@@ -11,7 +11,7 @@
    "material",
    "drawer"
  ],
-  "version": "5.0.0-alpha.9",
+  "version": "5.0.0-alpha.11",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -34,20 +34,20 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.7",
-    "react-native-safe-area-view": "^0.14.6"
+    "@react-navigation/routers": "^5.0.0-alpha.9",
+    "react-native-safe-area-view": "^0.14.7"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.8.24",
-    "@types/react-native": "^0.60.2",
-    "del-cli": "^2.0.0",
+    "@types/react": "^16.9.4",
+    "@types/react-native": "^0.60.17",
+    "del-cli": "^3.0.0",
    "react": "16.8.3",
    "react-native": "0.59.10",
    "react-native-gesture-handler": "^1.3.0",
-    "react-native-reanimated": "^1.1.0",
+    "react-native-reanimated": "^1.3.0",
    "react-native-screens": "^1.0.0-alpha.22",
-    "typescript": "^3.5.3"
+    "typescript": "^3.6.3"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0",
--- a/packages/drawer/src/index.tsx
+++ b/packages/drawer/src/index.tsx
@@ -20,4 +20,8 @@ export { default as DrawerGestureContext } from './utils/DrawerGestureContext';
 /**
 * Types
 */
-export { DrawerNavigationOptions, DrawerNavigationProp } from './types';
+export {
+  DrawerNavigationOptions,
+  DrawerNavigationProp,
+  DrawerNavigationItemsProps,
+} from './types';
--- a/packages/drawer/src/views/Drawer.tsx
+++ b/packages/drawer/src/views/Drawer.tsx
@@ -578,7 +578,6 @@ export default class DrawerView extends React.PureComponent<Props> {
            style={[
              styles.container,
              right ? { right: offset } : { left: offset },
-              // eslint-disable-next-line react-native/no-inline-styles
              {
                transform: [{ translateX: drawerTranslateX }],
                opacity: this.drawerOpacity,
--- a/packages/drawer/src/views/DrawerView.tsx
+++ b/packages/drawer/src/views/DrawerView.tsx
@@ -163,7 +163,6 @@ export default class DrawerView extends React.PureComponent<Props, State> {
                key={route.key}
                style={[
                  StyleSheet.absoluteFill,
-                  // eslint-disable-next-line react-native/no-inline-styles
                  { opacity: isFocused ? 1 : 0 },
                ]}
                isVisible={isFocused}
--- a/packages/example/CHANGELOG.md
+++ b/packages/example/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.9](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.8...@react-navigation/example@5.0.0-alpha.9) (2019-10-03)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.7...@react-navigation/example@5.0.0-alpha.8) (2019-09-27)
+
+
+### Bug Fixes
+
+* close drawer on navigate ([655a220](https://github.com/react-navigation/navigation-ex/commit/655a220))
+
+
+
+
+
 # [5.0.0-alpha.7](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.6...@react-navigation/example@5.0.0-alpha.7) (2019-09-16)


--- a/packages/example/android/ReactNavigationExample.iml
+++ b/packages/example/android/ReactNavigationExample.iml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module external.linked.project.id="ReactNavigationExample" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" type="JAVA_MODULE" version="4">
+  <component name="FacetManager">
+    <facet type="java-gradle" name="Java-Gradle">
+      <configuration>
+        <option name="BUILD_FOLDER_PATH" value="$MODULE_DIR$/build" />
+        <option name="BUILDABLE" value="false" />
+      </configuration>
+    </facet>
+  </component>
+  <component name="NewModuleRootManager" LANGUAGE_LEVEL="JDK_1_7" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.gradle" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/packages/example/android/app/app.iml
+++ b/packages/example/android/app/app.iml
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module external.linked.project.id=":app" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$/.." external.system.id="GRADLE" type="JAVA_MODULE" version="4">
+  <component name="FacetManager">
+    <facet type="android-gradle" name="Android-Gradle">
+      <configuration>
+        <option name="GRADLE_PROJECT_PATH" value=":app" />
+        <option name="LAST_SUCCESSFUL_SYNC_AGP_VERSION" value="3.3.0" />
+        <option name="LAST_KNOWN_AGP_VERSION" value="3.3.0" />
+      </configuration>
+    </facet>
+    <facet type="android" name="Android">
+      <configuration>
+        <option name="SELECTED_BUILD_VARIANT" value="debug" />
+        <option name="ASSEMBLE_TASK_NAME" value="assembleDebug" />
+        <option name="COMPILE_JAVA_TASK_NAME" value="compileDebugSources" />
+        <afterSyncTasks>
+          <task>generateDebugSources</task>
+        </afterSyncTasks>
+        <option name="ALLOW_USER_CONFIGURATION" value="false" />
+        <option name="MANIFEST_FILE_RELATIVE_PATH" value="/src/main/AndroidManifest.xml" />
+        <option name="RES_FOLDER_RELATIVE_PATH" value="/src/main/res" />
+        <option name="RES_FOLDERS_RELATIVE_PATH" value="file://$MODULE_DIR$/src/main/res;file://$MODULE_DIR$/build/generated/res/rs/debug;file://$MODULE_DIR$/build/generated/res/resValues/debug" />
+        <option name="TEST_RES_FOLDERS_RELATIVE_PATH" value="file://$MODULE_DIR$/build/generated/res/rs/androidTest/debug" />
+        <option name="ASSETS_FOLDER_RELATIVE_PATH" value="/src/main/assets" />
+      </configuration>
+    </facet>
+  </component>
+  <component name="NewModuleRootManager" LANGUAGE_LEVEL="JDK_1_8">
+    <output url="file://$MODULE_DIR$/build/intermediates/javac/debug/compileDebugJavaWithJavac/classes" />
+    <output-test url="file://$MODULE_DIR$/build/intermediates/javac/debugUnitTest/compileDebugUnitTestJavaWithJavac/classes" />
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/apt/debug" isTestSource="false" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/aidl_source_output_dir/debug/compileDebugAidl/out" isTestSource="false" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/buildConfig/debug" isTestSource="false" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/renderscript_source_output_dir/debug/compileDebugRenderscript/out" isTestSource="false" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/res/react/debug" type="java-resource" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/res/rs/debug" type="java-resource" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/res/resValues/debug" type="java-resource" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/apt/androidTest/debug" isTestSource="true" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/aidl_source_output_dir/debugAndroidTest/compileDebugAndroidTestAidl/out" isTestSource="true" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/buildConfig/androidTest/debug" isTestSource="true" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/renderscript_source_output_dir/debugAndroidTest/compileDebugAndroidTestRenderscript/out" isTestSource="true" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/res/rs/androidTest/debug" type="java-test-resource" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/res/resValues/androidTest/debug" type="java-test-resource" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/apt/test/debug" isTestSource="true" generated="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/debug/res" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/debug/resources" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/debug/assets" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/debug/aidl" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/debug/java" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/debug/rs" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/debug/shaders" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/res" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/resources" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/assets" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/aidl" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/java" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/rs" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/shaders" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/testDebug/res" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/testDebug/resources" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/testDebug/assets" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/testDebug/aidl" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/testDebug/java" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/testDebug/rs" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/testDebug/shaders" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/res" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/resources" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/assets" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/aidl" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/java" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/rs" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/shaders" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/res" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/resources" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/assets" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/aidl" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/java" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/rs" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/shaders" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/res" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/resources" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/assets" type="java-test-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/aidl" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/java" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/rs" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/src/test/shaders" isTestSource="true" />
+      <excludeFolder url="file://$MODULE_DIR$/build" />
+    </content>
+    <orderEntry type="jdk" jdkName="Android API 28 Platform" jdkType="Android SDK" />
+    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="Gradle: com.android.support:collections:28.0.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: android.arch.lifecycle:common:1.1.1@jar" level="project" />
+    <orderEntry type="library" name="Gradle: android.arch.core:common:1.1.1@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-annotations:28.0.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.infer.annotation:infer-annotation:0.11.2@jar" level="project" />
+    <orderEntry type="library" name="Gradle: javax.inject:javax.inject:1@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.google.code.findbugs:jsr305:3.0.2@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.squareup.okhttp3:okhttp-urlconnection:3.12.1@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.squareup.okhttp3:okhttp:3.12.1@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.squareup.okio:okio:1.15.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.device.yearclass:yearclass:2.1.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: commons-codec:commons-codec:1.10@jar" level="project" />
+    <orderEntry type="library" name="Gradle: commons-io:commons-io:1.4@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.github.bumptech.glide:disklrucache:4.9.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.github.bumptech.glide:annotations:4.9.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.parse.bolts:bolts-tasks:1.4.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.react:react-native:0.59.10@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:appcompat-v7:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.github.bumptech.glide:glide:4.9.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.google.android.gms:play-services-location:16.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.google.android.gms:play-services-base:16.0.1@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.google.android.gms:play-services-places-placereport:16.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.google.android.gms:play-services-tasks:16.0.1@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.google.android.gms:play-services-basement:16.0.1@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-v4:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-fragment:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:animated-vector-drawable:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:customtabs:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-core-ui:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-core-utils:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-vector-drawable:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:loader:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-media-compat:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:viewpager:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:coordinatorlayout:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:drawerlayout:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:slidingpanelayout:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:customview:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:swiperefreshlayout:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:asynclayoutinflater:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:support-compat:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:versionedparcelable:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:cursoradapter:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: android.arch.lifecycle:runtime:1.1.1@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:documentfile:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:localbroadcastmanager:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:print:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: android.arch.lifecycle:viewmodel:1.1.1@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.github.bumptech.glide:gifdecoder:4.9.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.android.support:interpolator:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: android.arch.lifecycle:livedata:1.1.1@aar" level="project" />
+    <orderEntry type="library" name="Gradle: android.arch.lifecycle:livedata-core:1.1.1@aar" level="project" />
+    <orderEntry type="library" name="Gradle: android.arch.core:runtime:1.1.1@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:fresco:1.10.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:imagepipeline-okhttp3:1.10.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:drawee:1.10.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:imagepipeline:1.10.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:imagepipeline-base:1.10.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.soloader:soloader:0.6.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: io.nlopez.smartlocation:library:3.2.11@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:fbcore:1.10.0@aar" level="project" />
+    <orderEntry type="module" module-name="react-native-reanimated" />
+    <orderEntry type="module" module-name="react-native-gesture-handler" />
+    <orderEntry type="module" module-name="expo-permissions" />
+    <orderEntry type="module" module-name="unimodules-core" />
+    <orderEntry type="module" module-name="unimodules-react-native-adapter" />
+    <orderEntry type="module" module-name="expo-app-loader-provider" />
+    <orderEntry type="module" module-name="expo-constants" />
+    <orderEntry type="module" module-name="expo-file-system" />
+    <orderEntry type="module" module-name="expo-font" />
+    <orderEntry type="module" module-name="expo-keep-awake" />
+    <orderEntry type="module" module-name="expo-linear-gradient" />
+    <orderEntry type="module" module-name="expo-location" />
+    <orderEntry type="module" module-name="expo-sqlite" />
+    <orderEntry type="module" module-name="expo-web-browser" />
+    <orderEntry type="module" module-name="unimodules-barcode-scanner-interface" />
+    <orderEntry type="module" module-name="unimodules-camera-interface" />
+    <orderEntry type="module" module-name="unimodules-constants-interface" />
+    <orderEntry type="module" module-name="unimodules-face-detector-interface" />
+    <orderEntry type="module" module-name="unimodules-file-system-interface" />
+    <orderEntry type="module" module-name="unimodules-font-interface" />
+    <orderEntry type="module" module-name="unimodules-image-loader-interface" />
+    <orderEntry type="module" module-name="unimodules-permissions-interface" />
+    <orderEntry type="module" module-name="unimodules-sensors-interface" />
+    <orderEntry type="module" module-name="unimodules-task-manager-interface" />
+  </component>
+</module>
--- a/packages/example/android/local.properties
+++ b/packages/example/android/local.properties
@@ -0,0 +1,8 @@
+## This file must *NOT* be checked into Version Control Systems,
+# as it contains information specific to your local configuration.
+#
+# Location of the SDK. This is only used by Gradle.
+# For customization when using a Version Control System, please read the
+# header note.
+#Wed Sep 18 15:42:44 CEST 2019
+sdk.dir=/Users/osdnk/Library/Android/sdk
--- a/packages/example/babel.config.js
+++ b/packages/example/babel.config.js
@@ -1,5 +1,3 @@
-/* eslint-disable import/no-commonjs */
-
 module.exports = function(api) {
  api.cache(true);
  return {
--- a/packages/example/metro.config.js
+++ b/packages/example/metro.config.js
@@ -1,4 +1,4 @@
-/* eslint-disable import/no-commonjs, import/no-extraneous-dependencies */
+/* eslint-disable import/no-extraneous-dependencies */

 const path = require('path');
 const fs = require('fs');
--- a/packages/example/package.json
+++ b/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.7",
+  "version": "5.0.0-alpha.9",
  "private": true,
  "workspaces": {
    "nohoist": [
@@ -18,29 +18,29 @@
  "dependencies": {
    "@expo/vector-icons": "^10.0.0",
    "@react-native-community/masked-view": "^0.1.1",
-    "expo": "^34.0.1",
-    "expo-asset": "~6.0.0",
+    "expo": "^35.0.0",
+    "expo-asset": "~7.0.0",
    "query-string": "^6.8.3",
-    "react": "16.8.3",
+    "react": "^16.10.1",
    "react-dom": "^16.8.3",
-    "react-native": "0.59.10",
+    "react-native": "^0.61.2",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-paper": "^3.0.0-alpha.3",
-    "react-native-reanimated": "~1.1.0",
-    "react-native-screens": "1.0.0-alpha.22",
-    "react-native-tab-view": "2.7.1",
-    "react-native-unimodules": "~0.5.2",
-    "scheduler": "^0.14.0",
-    "shortid": "^2.2.14",
-    "use-subscription": "^1.0.0"
+    "react-native-reanimated": "~1.2.0",
+    "react-native-screens": "~1.0.0-alpha.23",
+    "react-native-tab-view": "2.10.0",
+    "react-native-unimodules": "^0.7.0-rc.1",
+    "scheduler": "^0.16.1",
+    "shortid": "^2.2.15",
+    "use-subscription": "^1.1.1"
  },
  "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@types/react": "^16.8.23",
-    "@types/react-native": "^0.57.65",
-    "babel-preset-expo": "^6.0.0",
-    "expo-cli": "^3.0.10",
-    "typescript": "^3.5.3"
+    "@babel/core": "^7.6.2",
+    "@types/react": "^16.9.4",
+    "@types/react-native": "^0.60.17",
+    "babel-preset-expo": "^7.0.0",
+    "expo-cli": "^3.1.2",
+    "typescript": "^3.6.3"
  },
  "resolutions": {
    "react-native-safe-area-view": "0.14.7"
--- a/packages/example/src/Screens/BottomTabs.tsx
+++ b/packages/example/src/Screens/BottomTabs.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable import/namespace, import/default */
-
 import * as React from 'react';
 import { MaterialIcons } from '@expo/vector-icons';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
--- a/packages/example/src/Shared/Albums.tsx
+++ b/packages/example/src/Shared/Albums.tsx
@@ -25,6 +25,7 @@ export default function Albums() {
      contentContainerStyle={styles.content}
    >
      {COVERS.map((source, i) => (
+        // eslint-disable-next-line react/no-array-index-key
        <Image key={i} source={source} style={styles.cover} />
      ))}
    </ScrollView>
--- a/packages/example/src/Shared/Chat.tsx
+++ b/packages/example/src/Shared/Chat.tsx
@@ -32,6 +32,7 @@ export default function Chat() {

          return (
            <View
+              // eslint-disable-next-line react/no-array-index-key
              key={i}
              style={[odd ? styles.odd : styles.even, styles.inverted]}
            >
--- a/packages/material-bottom-tabs/CHANGELOG.md
+++ b/packages/material-bottom-tabs/CHANGELOG.md
@@ -3,6 +3,22 @@
 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/material-bottom-tabs@5.0.0-alpha.9...@react-navigation/material-bottom-tabs@5.0.0-alpha.10) (2019-10-03)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.8...@react-navigation/material-bottom-tabs@5.0.0-alpha.9) (2019-09-27)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.7...@react-navigation/material-bottom-tabs@5.0.0-alpha.8) (2019-09-16)


--- a/packages/material-bottom-tabs/package.json
+++ b/packages/material-bottom-tabs/package.json
@@ -11,7 +11,7 @@
    "material",
    "tab"
  ],
-  "version": "5.0.0-alpha.8",
+  "version": "5.0.0-alpha.10",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -34,19 +34,19 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.7"
+    "@react-navigation/routers": "^5.0.0-alpha.9"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.8.24",
-    "@types/react-native": "^0.60.2",
-    "@types/react-native-vector-icons": "^6.4.1",
-    "del-cli": "^2.0.0",
+    "@types/react": "^16.9.4",
+    "@types/react-native": "^0.60.17",
+    "@types/react-native-vector-icons": "^6.4.4",
+    "del-cli": "^3.0.0",
    "react": "16.8.3",
    "react-native": "0.59.10",
    "react-native-paper": "^3.0.0-alpha.3",
    "react-native-vector-icons": "^6.6.0",
-    "typescript": "^3.5.3"
+    "typescript": "^3.6.3"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0",
--- a/packages/material-top-tabs/CHANGELOG.md
+++ b/packages/material-top-tabs/CHANGELOG.md
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.8...@react-navigation/material-top-tabs@5.0.0-alpha.9) (2019-10-03)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.7...@react-navigation/material-top-tabs@5.0.0-alpha.8) (2019-09-27)
+
+
+### Features
+
+* export some more type aliases ([8b78d61](https://github.com/react-navigation/navigation-ex/commit/8b78d61))
+
+
+
+
+
 # [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.6...@react-navigation/material-top-tabs@5.0.0-alpha.7) (2019-08-31)

 **Note:** Version bump only for package @react-navigation/material-top-tabs
--- a/packages/material-top-tabs/package.json
+++ b/packages/material-top-tabs/package.json
@@ -11,7 +11,7 @@
    "material",
    "tab"
  ],
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.9",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -34,19 +34,19 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.7"
+    "@react-navigation/routers": "^5.0.0-alpha.9"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.8.24",
-    "@types/react-native": "^0.60.2",
-    "del-cli": "^2.0.0",
+    "@types/react": "^16.9.4",
+    "@types/react-native": "^0.60.17",
+    "del-cli": "^3.0.0",
    "react": "16.8.3",
    "react-native": "^0.59.8",
    "react-native-gesture-handler": "^1.3.0",
-    "react-native-reanimated": "^1.1.0",
+    "react-native-reanimated": "^1.3.0",
    "react-native-tab-view": "^2.10.0",
-    "typescript": "^3.5.3"
+    "typescript": "^3.6.3"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0",
--- a/packages/material-top-tabs/src/index.tsx
+++ b/packages/material-top-tabs/src/index.tsx
@@ -16,4 +16,6 @@ export { default as MaterialTopTabBar } from './views/MaterialTopTabBar';
 export {
  MaterialTopTabNavigationOptions,
  MaterialTopTabNavigationProp,
+  MaterialTopTabBarProps,
+  MaterialTopTabBarOptions,
 } from './types';
--- a/packages/native/CHANGELOG.md
+++ b/packages/native/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.8...@react-navigation/native@5.0.0-alpha.9) (2019-10-03)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 # [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.7...@react-navigation/native@5.0.0-alpha.8) (2019-09-16)


--- a/packages/native/package.json
+++ b/packages/native/package.json
@@ -7,7 +7,7 @@
    "ios",
    "android"
  ],
-  "version": "5.0.0-alpha.8",
+  "version": "5.0.0-alpha.9",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -31,12 +31,12 @@
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.8.24",
-    "@types/react-native": "^0.60.2",
-    "del-cli": "^2.0.0",
+    "@types/react": "^16.9.4",
+    "@types/react-native": "^0.60.17",
+    "del-cli": "^3.0.0",
    "react": "16.8.3",
    "react-native": "0.59.10",
-    "typescript": "^3.5.3"
+    "typescript": "^3.6.3"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0",
--- a/packages/routers/CHANGELOG.md
+++ b/packages/routers/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.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
+
+
+
+
+
+# [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.7...@react-navigation/routers@5.0.0-alpha.8) (2019-09-27)
+
+
+### Bug Fixes
+
+* close drawer on navigate ([655a220](https://github.com/react-navigation/navigation-ex/commit/655a220))
+
+
+
+
+
 # [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.6...@react-navigation/routers@5.0.0-alpha.7) (2019-08-31)


--- a/packages/routers/tests/DrawerRouter.test.tsx
+++ b/packages/routers/tests/DrawerRouter.test.tsx
@@ -215,6 +215,36 @@ it('handles navigate action', () => {
  });
 });

+it('handles navigate action with open drawer', () => {
+  const router = DrawerRouter({});
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar'],
+        routeKeyHistory: [],
+        isDrawerOpen: true,
+        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+      },
+      CommonActions.navigate('baz', { answer: 42 })
+    )
+  ).toEqual({
+    stale: false,
+    key: 'root',
+    index: 0,
+    routeNames: ['baz', 'bar'],
+    isDrawerOpen: false,
+    routeKeyHistory: ['bar'],
+    routes: [
+      { key: 'baz', name: 'baz', params: { answer: 42 } },
+      { key: 'bar', name: 'bar' },
+    ],
+  });
+});
+
 it('handles open drawer action', () => {
  const router = DrawerRouter({});

--- a/packages/routers/package.json
+++ b/packages/routers/package.json
@@ -6,7 +6,7 @@
    "react-native",
    "react-navigation"
  ],
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.9",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -29,12 +29,12 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "shortid": "^2.2.14"
+    "shortid": "^2.2.15"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
-    "del-cli": "^2.0.0",
-    "typescript": "^3.5.3"
+    "del-cli": "^3.0.0",
+    "typescript": "^3.6.3"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0"
--- a/packages/routers/src/DrawerRouter.tsx
+++ b/packages/routers/src/DrawerRouter.tsx
@@ -135,6 +135,15 @@ export default function DrawerRouter(
            isDrawerOpen: !state.isDrawerOpen,
          };

+        case 'NAVIGATE':
+          return router.getStateForAction(
+            {
+              ...state,
+              isDrawerOpen: false,
+            },
+            action
+          );
+
        default:
          return router.getStateForAction(state, action);
      }
--- a/packages/stack/CHANGELOG.md
+++ b/packages/stack/CHANGELOG.md
@@ -3,6 +3,70 @@
 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.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.20...@react-navigation/stack@5.0.0-alpha.21) (2019-10-03)
+
+
+### Bug Fixes
+
+* add missing React import ([ece6e38](https://github.com/react-navigation/navigation-ex/commit/ece6e38))
+* fix header buttons not clickable on Android. fixes [#108](https://github.com/react-navigation/navigation-ex/issues/108) ([da944cc](https://github.com/react-navigation/navigation-ex/commit/da944cc))
+* keep the routes we are closing or replacing ([bc3586a](https://github.com/react-navigation/navigation-ex/commit/bc3586a))
+
+
+
+
+
+# [5.0.0-alpha.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.19...@react-navigation/stack@5.0.0-alpha.20) (2019-09-27)
+
+
+### Features
+
+* export some more type aliases ([8b78d61](https://github.com/react-navigation/navigation-ex/commit/8b78d61))
+
+
+
+
+
+# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.18...@react-navigation/stack@5.0.0-alpha.19) (2019-09-23)
+
+
+### Bug Fixes
+
+* vertical gesture in stack ([4ee19bc](https://github.com/react-navigation/navigation-ex/commit/4ee19bc))
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.17...@react-navigation/stack@5.0.0-alpha.18) (2019-09-23)
+
+
+### Bug Fixes
+
+* fix header rendered behind card. closes [#108](https://github.com/react-navigation/navigation-ex/issues/108) ([2f66556](https://github.com/react-navigation/navigation-ex/commit/2f66556))
+
+
+### Features
+
+* **stack:** use Animated.Text for header title ([#105](https://github.com/react-navigation/navigation-ex/issues/105)) ([f398136](https://github.com/react-navigation/navigation-ex/commit/f398136))
+* **stack:** use Animated.View for header background ([#106](https://github.com/react-navigation/navigation-ex/issues/106)) ([089390c](https://github.com/react-navigation/navigation-ex/commit/089390c))
+
+
+
+
+
+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.16...@react-navigation/stack@5.0.0-alpha.17) (2019-09-17)
+
+
+### Bug Fixes
+
+* add fallbacks for non-web modules ([b4bbf9b](https://github.com/react-navigation/navigation-ex/commit/b4bbf9b)), closes [#95](https://github.com/react-navigation/navigation-ex/issues/95) [#96](https://github.com/react-navigation/navigation-ex/issues/96)
+* provide navigation prop in header ([30e510d](https://github.com/react-navigation/navigation-ex/commit/30e510d))
+
+
+
+
+
 # [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.15...@react-navigation/stack@5.0.0-alpha.16) (2019-09-16)


--- a/packages/stack/package.json
+++ b/packages/stack/package.json
@@ -10,7 +10,7 @@
    "android",
    "stack"
  ],
-  "version": "5.0.0-alpha.16",
+  "version": "5.0.0-alpha.21",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -33,21 +33,21 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.7",
-    "react-native-safe-area-view": "^0.14.6"
+    "@react-navigation/routers": "^5.0.0-alpha.9",
+    "react-native-safe-area-view": "^0.14.7"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
    "@react-native-community/masked-view": "^0.1.1",
-    "@types/react": "^16.8.24",
-    "@types/react-native": "^0.60.2",
-    "del-cli": "^2.0.0",
+    "@types/react": "^16.9.4",
+    "@types/react-native": "^0.60.17",
+    "del-cli": "^3.0.0",
    "react": "16.8.3",
    "react-native": "0.59.10",
    "react-native-gesture-handler": "^1.3.0",
-    "react-native-reanimated": "^1.1.0",
+    "react-native-reanimated": "^1.3.0",
    "react-native-screens": "^1.0.0-alpha.22",
-    "typescript": "^3.5.3"
+    "typescript": "^3.6.3"
  },
  "peerDependencies": {
    "@react-native-community/masked-view": "^0.1.1",
--- a/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx
+++ b/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx
@@ -1,7 +1,10 @@
 import { I18nManager } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { CardInterpolationProps, CardInterpolatedStyle } from '../types';
-import { getStatusBarHeight } from 'react-native-safe-area-view';
+import getStatusBarHeight from '../utils/getStatusBarHeight';
+import {
+  StackCardInterpolationProps,
+  StackCardInterpolatedStyle,
+} from '../types';

 const { cond, add, multiply, interpolate } = Animated;

@@ -12,7 +15,7 @@ export function forHorizontalIOS({
  current,
  next,
  layouts: { screen },
-}: CardInterpolationProps): CardInterpolatedStyle {
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
  const translateFocused = interpolate(current.progress, {
    inputRange: [0, 1],
    outputRange: [I18nManager.isRTL ? -screen.width : screen.width, 0],
@@ -57,7 +60,7 @@ export function forHorizontalIOS({
 export function forVerticalIOS({
  current,
  layouts: { screen },
-}: CardInterpolationProps): CardInterpolatedStyle {
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
  const translateY = interpolate(current.progress, {
    inputRange: [0, 1],
    outputRange: [screen.height, 0],
@@ -81,7 +84,7 @@ export function forModalPresentationIOS({
  current,
  next,
  layouts: { screen },
-}: CardInterpolationProps): CardInterpolatedStyle {
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
  const topOffset = 10;
  const statusBarHeight = getStatusBarHeight(screen.width > screen.height);
  const aspectRatio = screen.height / screen.width;
@@ -134,7 +137,7 @@ export function forFadeFromBottomAndroid({
  current,
  layouts: { screen },
  closing,
-}: CardInterpolationProps): CardInterpolatedStyle {
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
  const translateY = interpolate(current.progress, {
    inputRange: [0, 1],
    outputRange: [multiply(screen.height, 0.08), 0],
@@ -164,7 +167,7 @@ export function forRevealFromBottomAndroid({
  current,
  next,
  layouts: { screen },
-}: CardInterpolationProps): CardInterpolatedStyle {
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
  const containerTranslateY = interpolate(current.progress, {
    inputRange: [0, 1],
    outputRange: [screen.height, 0],
@@ -206,7 +209,7 @@ export function forScaleFromCenterAndroid({
  current,
  next,
  closing,
-}: CardInterpolationProps): CardInterpolatedStyle {
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
  const progress = add(current.progress, next ? next.progress : 0);

  const opacity = interpolate(progress, {
--- a/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx
+++ b/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx
@@ -1,6 +1,9 @@
 import { I18nManager } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { HeaderInterpolationProps, HeaderInterpolatedStyle } from '../types';
+import {
+  StackHeaderInterpolationProps,
+  StackHeaderInterpolatedStyle,
+} from '../types';

 const { interpolate, add } = Animated;

@@ -11,7 +14,7 @@ export function forUIKit({
  current,
  next,
  layouts,
-}: HeaderInterpolationProps): HeaderInterpolatedStyle {
+}: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
  const defaultOffset = 100;
  const leftSpacing = 27;

@@ -95,7 +98,7 @@ export function forUIKit({
 export function forFade({
  current,
  next,
-}: HeaderInterpolationProps): HeaderInterpolatedStyle {
+}: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
  const progress = add(current.progress, next ? next.progress : 0);
  const opacity = interpolate(progress, {
    inputRange: [0, 1, 2],
@@ -117,7 +120,7 @@ export function forStatic({
  current,
  next,
  layouts: { screen },
-}: HeaderInterpolationProps): HeaderInterpolatedStyle {
+}: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
  const progress = add(current.progress, next ? next.progress : 0);
  const translateX = interpolate(progress, {
    inputRange: [0, 1, 2],
@@ -136,6 +139,6 @@ export function forStatic({
  };
 }

-export function forNoAnimation(): HeaderInterpolatedStyle {
+export function forNoAnimation(): StackHeaderInterpolatedStyle {
  return {};
 }
--- a/packages/stack/src/index.tsx
+++ b/packages/stack/src/index.tsx
@@ -34,4 +34,16 @@ export { default as StackGestureContext } from './utils/StackGestureContext';
 /**
 * Types
 */
-export { StackNavigationOptions, StackNavigationProp } from './types';
+export {
+  StackNavigationOptions,
+  StackNavigationProp,
+  StackHeaderProps,
+  StackHeaderLeftButtonProps,
+  StackHeaderTitleProps,
+  StackCardInterpolatedStyle,
+  StackCardInterpolationProps,
+  StackCardStyleInterpolator,
+  StackHeaderInterpolatedStyle,
+  StackHeaderInterpolationProps,
+  StackHeaderStyleInterpolator,
+} from './types';
--- a/packages/stack/src/types.tsx
+++ b/packages/stack/src/types.tsx
@@ -67,9 +67,7 @@ export type Layout = { width: number; height: number };

 export type GestureDirection = 'horizontal' | 'vertical';

-export type HeaderMode = 'float' | 'screen' | 'none';
-
-export type HeaderScene<T> = {
+export type Scene<T> = {
  /**
   * Current route object,
   */
@@ -99,14 +97,16 @@ export type HeaderScene<T> = {
  };
 };

-export type HeaderOptions = {
+export type StackHeaderMode = 'float' | 'screen' | 'none';
+
+export type StackHeaderOptions = {
  /**
   * String or a function that returns a React Element to be used by the header.
   * Defaults to scene `title`.
   * It receives `allowFontScaling`, `onLayout`, `style` and `children` in the options object as an argument.
   * The title string is passed in `children`.
   */
-  headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode);
+  headerTitle?: string | ((props: StackHeaderTitleProps) => React.ReactNode);
  /**
   * Style object for the title component.
   */
@@ -151,7 +151,7 @@ export type HeaderOptions = {
   * Function which returns a React Element to display on the left side of the header.
   * It receives a number of arguments when rendered (`onPress`, `label`, `labelStyle` and more.
   */
-  headerLeft?: (props: HeaderLeftButtonProps) => React.ReactNode;
+  headerLeft?: (props: StackHeaderLeftButtonProps) => React.ReactNode;
  /**
   * Style object for the container of the `headerLeft` component, for example to add padding.
   */
@@ -169,7 +169,7 @@ export type HeaderOptions = {
   * It receives the `tintColor` in in the options object as an argument. object.
   * Defaults to Image component with a the default back icon image for the platform (a chevron on iOS and an arrow on Android).
   */
-  headerBackImage?: HeaderLeftButtonProps['backImage'];
+  headerBackImage?: StackHeaderLeftButtonProps['backImage'];
  /**
   * Color for material ripple (Android >= 5.0 only).
   */
@@ -196,7 +196,7 @@ export type HeaderOptions = {
  headerTransparent?: boolean;
 };

-export type HeaderProps = {
+export type StackHeaderProps = {
  /**
   * Mode of the header: `float` renders a single floating header across all screens,
   * `screen` renders separate headers for each screen.
@@ -209,11 +209,11 @@ export type HeaderProps = {
  /**
   * Object representing the current scene, such as the route object and animation progress.
   */
-  scene: HeaderScene<Route<string>>;
+  scene: Scene<Route<string>>;
  /**
   * Object representing the previous scene.
   */
-  previous?: HeaderScene<Route<string>>;
+  previous?: Scene<Route<string>>;
  /**
   * Navigation prop for the header.
   */
@@ -221,7 +221,7 @@ export type HeaderProps = {
  /**
   * Interpolated styles for various elements in the header.
   */
-  styleInterpolator: HeaderStyleInterpolator;
+  styleInterpolator: StackHeaderStyleInterpolator;
 };

 export type StackDescriptor = Descriptor<
@@ -235,7 +235,7 @@ export type StackDescriptorMap = {
  [key: string]: StackDescriptor;
 };

-export type StackNavigationOptions = HeaderOptions &
+export type StackNavigationOptions = StackHeaderOptions &
  Partial<TransitionPreset> & {
    /**
     * String that can be displayed in the header as a fallback for `headerTitle`.
@@ -245,7 +245,7 @@ export type StackNavigationOptions = HeaderOptions &
     * Function that given `HeaderProps` returns a React Element to display as a header.
     * Setting to `null` hides header.
     */
-    header?: null | ((props: HeaderProps) => React.ReactNode);
+    header?: null | ((props: StackHeaderProps) => React.ReactNode);
    /**
     * Whether a shadow is visible for the card during transitions. Defaults to `true`.
     */
@@ -295,7 +295,7 @@ export type StackNavigationOptions = HeaderOptions &

 export type StackNavigationConfig = {
  mode?: 'card' | 'modal';
-  headerMode?: HeaderMode;
+  headerMode?: StackHeaderMode;
  /**
   * If `false`, the keyboard will NOT automatically dismiss when navigating to a new screen.
   * Defaults to `true`.
@@ -303,7 +303,7 @@ export type StackNavigationConfig = {
  keyboardHandlingEnabled?: boolean;
 };

-export type HeaderLeftButtonProps = {
+export type StackHeaderLeftButtonProps = {
  /**
   * Whether the button is disabled.
   */
@@ -365,7 +365,7 @@ export type HeaderLeftButtonProps = {
  canGoBack?: boolean;
 };

-export type HeaderTitleProps = {
+export type StackHeaderTitleProps = {
  /**
   * Callback to trigger when the size of the title element changes.
   */
@@ -408,7 +408,7 @@ export type TransitionSpec =
  | { animation: 'spring'; config: SpringConfig }
  | { animation: 'timing'; config: TimingConfig };

-export type CardInterpolationProps = {
+export type StackCardInterpolationProps = {
  /**
   * Values for the current screen.
   */
@@ -447,7 +447,7 @@ export type CardInterpolationProps = {
  };
 };

-export type CardInterpolatedStyle = {
+export type StackCardInterpolatedStyle = {
  /**
   * Interpolated style for the container view wrapping the card.
   */
@@ -466,11 +466,11 @@ export type CardInterpolatedStyle = {
  shadowStyle?: any;
 };

-export type CardStyleInterpolator = (
-  props: CardInterpolationProps
-) => CardInterpolatedStyle;
+export type StackCardStyleInterpolator = (
+  props: StackCardInterpolationProps
+) => StackCardInterpolatedStyle;

-export type HeaderInterpolationProps = {
+export type StackHeaderInterpolationProps = {
  /**
   * Values for the current screen (the screen which owns this header).
   */
@@ -509,7 +509,7 @@ export type HeaderInterpolationProps = {
  };
 };

-export type HeaderInterpolatedStyle = {
+export type StackHeaderInterpolatedStyle = {
  /**
   * Interpolated style for the label of the left button (back button label).
   */
@@ -532,9 +532,9 @@ export type HeaderInterpolatedStyle = {
  backgroundStyle?: any;
 };

-export type HeaderStyleInterpolator = (
-  props: HeaderInterpolationProps
-) => HeaderInterpolatedStyle;
+export type StackHeaderStyleInterpolator = (
+  props: StackHeaderInterpolationProps
+) => StackHeaderInterpolatedStyle;

 export type TransitionPreset = {
  /**
@@ -557,9 +557,9 @@ export type TransitionPreset = {
  /**
   * Function which specifies interpolated styles for various parts of the card, e.g. the overlay, shadow etc.
   */
-  cardStyleInterpolator: CardStyleInterpolator;
+  cardStyleInterpolator: StackCardStyleInterpolator;
  /**
   * Function which specifies interpolated styles for various parts of the header, e.g. the title, left button etc.
   */
-  headerStyleInterpolator: HeaderStyleInterpolator;
+  headerStyleInterpolator: StackHeaderStyleInterpolator;
 };
--- a/packages/stack/src/utils/getStatusBarHeight.tsx
+++ b/packages/stack/src/utils/getStatusBarHeight.tsx
@@ -0,0 +1,9 @@
+import { Platform } from 'react-native';
+import { getStatusBarHeight as getStatusBarHeightNative } from 'react-native-safe-area-view';
+
+const getStatusBarHeight = Platform.select({
+  default: getStatusBarHeightNative,
+  web: () => 0,
+});
+
+export default getStatusBarHeight;
--- a/packages/stack/src/views/Header/Header.tsx
+++ b/packages/stack/src/views/Header/Header.tsx
@@ -1,67 +1,59 @@
 import * as React from 'react';
 import { StackActions } from '@react-navigation/routers';
 import HeaderSegment from './HeaderSegment';
-import { HeaderProps, HeaderTitleProps } from '../../types';
+import { StackHeaderProps, StackHeaderTitleProps } from '../../types';
 import HeaderTitle from './HeaderTitle';

-export default class Header extends React.PureComponent<HeaderProps> {
-  render() {
-    const {
-      scene,
-      previous,
-      layout,
-      navigation,
-      styleInterpolator,
-    } = this.props;
-    const { options } = scene.descriptor;
-    const title =
-      typeof options.headerTitle !== 'function' &&
-      options.headerTitle !== undefined
-        ? options.headerTitle
-        : options.title !== undefined
-        ? options.title
-        : scene.route.name;
+export default React.memo(function Header(props: StackHeaderProps) {
+  const { scene, previous, layout, navigation, styleInterpolator } = props;
+  const { options } = scene.descriptor;
+  const title =
+    typeof options.headerTitle !== 'function' &&
+    options.headerTitle !== undefined
+      ? options.headerTitle
+      : options.title !== undefined
+      ? options.title
+      : scene.route.name;

-    let leftLabel;
+  let leftLabel;

-    // The label for the left back button shows the title of the previous screen
-    // If a custom label is specified, we use it, otherwise use previous screen's title
-    if (options.headerBackTitle !== undefined) {
-      leftLabel = options.headerBackTitle;
-    } else if (previous) {
-      const o = previous.descriptor.options;
+  // The label for the left back button shows the title of the previous screen
+  // If a custom label is specified, we use it, otherwise use previous screen's title
+  if (options.headerBackTitle !== undefined) {
+    leftLabel = options.headerBackTitle;
+  } else if (previous) {
+    const o = previous.descriptor.options;

-      leftLabel =
-        typeof o.headerTitle !== 'function' && o.headerTitle !== undefined
-          ? o.headerTitle
-          : o.title !== undefined
-          ? o.title
-          : previous.route.name;
-    }
-
-    return (
-      <HeaderSegment
-        {...options}
-        layout={layout}
-        scene={scene}
-        title={title}
-        leftLabel={leftLabel}
-        headerTitle={
-          typeof options.headerTitle !== 'function'
-            ? (props: HeaderTitleProps) => <HeaderTitle {...props} />
-            : options.headerTitle
-        }
-        onGoBack={
-          previous
-            ? () =>
-                navigation.dispatch({
-                  ...StackActions.pop(),
-                  source: scene.route.key,
-                })
-            : undefined
-        }
-        styleInterpolator={styleInterpolator}
-      />
-    );
+    leftLabel =
+      typeof o.headerTitle !== 'function' && o.headerTitle !== undefined
+        ? o.headerTitle
+        : o.title !== undefined
+        ? o.title
+        : previous.route.name;
  }
-}
+
+  return (
+    <HeaderSegment
+      {...options}
+      layout={layout}
+      scene={scene}
+      title={title}
+      leftLabel={leftLabel}
+      headerTitle={
+        typeof options.headerTitle !== 'function'
+          ? (props: StackHeaderTitleProps) => <HeaderTitle {...props} />
+          : options.headerTitle
+      }
+      onGoBack={
+        previous
+          ? () =>
+              navigation.dispatch({
+                ...StackActions.pop(),
+                source: scene.route.key,
+              })
+          : undefined
+      }
+      styleInterpolator={styleInterpolator}
+    />
+  );
+});
--- a/packages/stack/src/views/Header/HeaderBackButton.tsx
+++ b/packages/stack/src/views/Header/HeaderBackButton.tsx
@@ -6,18 +6,13 @@ import {
  Platform,
  StyleSheet,
  LayoutChangeEvent,
-  UIManager,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
-import MaskedView from '@react-native-community/masked-view';
+import MaskedView from '../MaskedView';
 import TouchableItem from '../TouchableItem';
-import { HeaderLeftButtonProps } from '../../types';
+import { StackHeaderLeftButtonProps } from '../../types';

-const isMaskedViewAvailable =
-  // @ts-ignore
-  UIManager.getViewManagerConfig('RNCMaskedView') != null;
-
-type Props = HeaderLeftButtonProps & {
+type Props = StackHeaderLeftButtonProps & {
  tintColor: string;
 };

@@ -129,7 +124,7 @@ class HeaderBackButton extends React.Component<Props, State> {
      </View>
    );

-    if (!isMaskedViewAvailable || backImage || Platform.OS !== 'ios') {
+    if (backImage || Platform.OS !== 'ios') {
      // When a custom backimage is specified, we can't mask the label
      // Otherwise there might be weird effect due to our mask not being the same as the image
      return labelElement;
--- a/packages/stack/src/views/Header/HeaderBackground.tsx
+++ b/packages/stack/src/views/Header/HeaderBackground.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { View, StyleSheet, Platform, ViewProps } from 'react-native';
+import { StyleSheet, Platform, ViewProps } from 'react-native';
+import Animated from 'react-native-reanimated';

 export default function HeaderBackground({ style, ...rest }: ViewProps) {
-  return <View style={[styles.container, style]} {...rest} />;
+  return <Animated.View style={[styles.container, style]} {...rest} />;
 }

 const styles = StyleSheet.create({
--- a/packages/stack/src/views/Header/HeaderContainer.tsx
+++ b/packages/stack/src/views/Header/HeaderContainer.tsx
@@ -1,21 +1,25 @@
 import * as React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-import { Route, ParamListBase } from '@react-navigation/core';
+import {
+  NavigationContext,
+  Route,
+  ParamListBase,
+} from '@react-navigation/core';
 import { StackNavigationState } from '@react-navigation/routers';

 import Header from './Header';
 import { forStatic } from '../../TransitionConfigs/HeaderStyleInterpolators';
 import {
  Layout,
-  HeaderScene,
-  HeaderStyleInterpolator,
+  Scene,
+  StackHeaderStyleInterpolator,
  StackNavigationProp,
 } from '../../types';

 export type Props = {
  mode: 'float' | 'screen';
  layout: Layout;
-  scenes: Array<HeaderScene<Route<string>> | undefined>;
+  scenes: Array<Scene<Route<string>> | undefined>;
  state: StackNavigationState;
  getPreviousRoute: (props: {
    route: Route<string>;
@@ -24,7 +28,7 @@ export type Props = {
    route: Route<string>;
    height: number;
  }) => void;
-  styleInterpolator: HeaderStyleInterpolator;
+  styleInterpolator: StackHeaderStyleInterpolator;
  style?: StyleProp<ViewStyle>;
 };

@@ -92,36 +96,40 @@ export default function HeaderContainer({
        };

        return (
-          <View
+          <NavigationContext.Provider
            key={scene.route.key}
-            onLayout={
-              onContentHeightChange
-                ? e =>
-                    onContentHeightChange({
-                      route: scene.route,
-                      height: e.nativeEvent.layout.height,
-                    })
-                : undefined
-            }
-            pointerEvents="box-none"
-            accessibilityElementsHidden={!isFocused}
-            importantForAccessibility={
-              isFocused ? 'auto' : 'no-hide-descendants'
-            }
-            style={
-              mode === 'float' || options.headerTransparent
-                ? styles.header
-                : null
-            }
+            value={scene.descriptor.navigation}
          >
-            {options.header !== undefined ? (
-              options.header === null ? null : (
-                options.header(props)
-              )
-            ) : (
-              <Header {...props} />
-            )}
-          </View>
+            <View
+              onLayout={
+                onContentHeightChange
+                  ? e =>
+                      onContentHeightChange({
+                        route: scene.route,
+                        height: e.nativeEvent.layout.height,
+                      })
+                  : undefined
+              }
+              pointerEvents="box-none"
+              accessibilityElementsHidden={!isFocused}
+              importantForAccessibility={
+                isFocused ? 'auto' : 'no-hide-descendants'
+              }
+              style={
+                mode === 'float' || options.headerTransparent
+                  ? styles.header
+                  : null
+              }
+            >
+              {options.header !== undefined ? (
+                options.header === null ? null : (
+                  options.header(props)
+                )
+              ) : (
+                <Header {...props} />
+              )}
+            </View>
+          </NavigationContext.Provider>
        );
      })}
    </View>
--- a/packages/stack/src/views/Header/HeaderSegment.tsx
+++ b/packages/stack/src/views/Header/HeaderSegment.tsx
@@ -7,18 +7,18 @@ import {
  ViewStyle,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { getStatusBarHeight } from 'react-native-safe-area-view';
 import { Route } from '@react-navigation/core';
 import HeaderBackButton from './HeaderBackButton';
 import HeaderBackground from './HeaderBackground';
+import getStatusBarHeight from '../../utils/getStatusBarHeight';
 import memoize from '../../utils/memoize';
 import {
  Layout,
-  HeaderStyleInterpolator,
-  HeaderLeftButtonProps,
-  HeaderTitleProps,
-  HeaderOptions,
-  HeaderScene,
+  StackHeaderStyleInterpolator,
+  StackHeaderLeftButtonProps,
+  StackHeaderTitleProps,
+  StackHeaderOptions,
+  Scene,
 } from '../../types';

 export type Scene<T> = {
@@ -26,14 +26,14 @@ export type Scene<T> = {
  progress: Animated.Node<number>;
 };

-type Props = HeaderOptions & {
-  headerTitle: (props: HeaderTitleProps) => React.ReactNode;
+type Props = StackHeaderOptions & {
+  headerTitle: (props: StackHeaderTitleProps) => React.ReactNode;
  layout: Layout;
  onGoBack?: () => void;
  title?: string;
  leftLabel?: string;
-  scene: HeaderScene<Route<string>>;
-  styleInterpolator: HeaderStyleInterpolator;
+  scene: Scene<Route<string>>;
+  styleInterpolator: StackHeaderStyleInterpolator;
 };

 type State = {
@@ -113,7 +113,7 @@ export default class HeaderSegment extends React.Component<Props, State> {

  private getInterpolatedStyle = memoize(
    (
-      styleInterpolator: HeaderStyleInterpolator,
+      styleInterpolator: StackHeaderStyleInterpolator,
      layout: Layout,
      current: Animated.Node<number>,
      next: Animated.Node<number> | undefined,
@@ -140,7 +140,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
      onGoBack,
      headerTitle,
      headerLeft: left = onGoBack
-        ? (props: HeaderLeftButtonProps) => <HeaderBackButton {...props} />
+        ? (props: StackHeaderLeftButtonProps) => <HeaderBackButton {...props} />
        : undefined,
      // @ts-ignore
      headerStatusBarHeight = getStatusBarHeight(layout.width > layout.height),
--- a/packages/stack/src/views/Header/HeaderTitle.tsx
+++ b/packages/stack/src/views/Header/HeaderTitle.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { Text, StyleSheet, Platform, TextProps } from 'react-native';
+import { StyleSheet, Platform, TextProps } from 'react-native';
+import Animated from 'react-native-reanimated';

 type Props = TextProps & {
  children?: string;
 };

 export default function HeaderTitle({ style, ...rest }: Props) {
-  return <Text {...rest} style={[styles.title, style]} />;
+  return <Animated.Text {...rest} style={[styles.title, style]} />;
 }

 const styles = StyleSheet.create({
--- a/packages/stack/src/views/MaskedView.tsx
+++ b/packages/stack/src/views/MaskedView.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { UIManager } from 'react-native';
+import RNCMaskedView from '@react-native-community/masked-view';
+
+type Props = React.ComponentProps<typeof RNCMaskedView> & {
+  children: React.ReactElement;
+};
+
+const isMaskedViewAvailable =
+  // @ts-ignore
+  UIManager.getViewManagerConfig('RNCMaskedView') != null;
+
+export default function MaskedView({ children, ...rest }: Props) {
+  if (isMaskedViewAvailable) {
+    return <RNCMaskedView {...rest}>{children}</RNCMaskedView>;
+  }
+
+  return children;
+}
--- a/packages/stack/src/views/MaskedView.web.tsx
+++ b/packages/stack/src/views/MaskedView.web.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+type Props = {
+  children: React.ReactElement;
+};
+
+export default function MaskedView({ children }: Props) {
+  return children;
+}
--- a/packages/stack/src/views/Stack/Card.tsx
+++ b/packages/stack/src/views/Stack/Card.tsx
@@ -16,7 +16,7 @@ import {
 } from 'react-native-gesture-handler';
 import {
  TransitionSpec,
-  CardStyleInterpolator,
+  StackCardStyleInterpolator,
  Layout,
  SpringConfig,
  TimingConfig,
@@ -52,7 +52,7 @@ type Props = ViewProps & {
    open: TransitionSpec;
    close: TransitionSpec;
  };
-  styleInterpolator: CardStyleInterpolator;
+  styleInterpolator: StackCardStyleInterpolator;
  containerStyle?: StyleProp<ViewStyle>;
  contentStyle?: StyleProp<ViewStyle>;
 };
@@ -122,9 +122,8 @@ const {

 // We need to be prepared for both version of reanimated. With and w/out proc
 let memoizedSpring = spring;
-// @ts-ignore
+
 if (Animated.proc) {
-  // @ts-ignore
  const springHelper = Animated.proc(
    (
      finished: Animated.Value<number>,
@@ -136,7 +135,7 @@ if (Animated.proc) {
      damping: Animated.Adaptable<number>,
      mass: Animated.Adaptable<number>,
      stiffness: Animated.Adaptable<number>,
-      overshootClamping: Animated.Adaptable<boolean>,
+      overshootClamping: Animated.Adaptable<number>,
      restSpeedThreshold: Animated.Adaptable<number>,
      restDisplacementThreshold: Animated.Adaptable<number>,
      clock: Animated.Clock
@@ -177,7 +176,7 @@ if (Animated.proc) {
      damping: Animated.Adaptable<number>;
      mass: Animated.Adaptable<number>;
      stiffness: Animated.Adaptable<number>;
-      overshootClamping: Animated.Adaptable<boolean>;
+      overshootClamping: Animated.Adaptable<number>;
      restSpeedThreshold: Animated.Adaptable<number>;
      restDisplacementThreshold: Animated.Adaptable<number>;
    }
@@ -476,11 +475,14 @@ export default class Card extends React.Component<Props> {
  );

  private exec = [
-    set(
-      this.gesture,
-      multiply(
-        this.gestureUntraversed,
-        I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
+    cond(
+      eq(this.direction, DIRECTION_HORIZONTAL),
+      set(
+        this.gesture,
+        multiply(
+          this.gestureUntraversed,
+          I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
+        )
      )
    ),
    set(
@@ -655,7 +657,7 @@ export default class Card extends React.Component<Props> {
  // Changing it during an animations can result in unexpected results
  private getInterpolatedStyle = memoize(
    (
-      styleInterpolator: CardStyleInterpolator,
+      styleInterpolator: StackCardStyleInterpolator,
      index: number,
      current: Animated.Node<number>,
      next: Animated.Node<number> | undefined,
--- a/packages/stack/src/views/Stack/Stack.tsx
+++ b/packages/stack/src/views/Stack/Stack.tsx
@@ -23,8 +23,8 @@ import {
 import { forNoAnimation } from '../../TransitionConfigs/HeaderStyleInterpolators';
 import {
  Layout,
-  HeaderMode,
-  HeaderScene,
+  StackHeaderMode,
+  Scene,
  StackDescriptorMap,
  StackNavigationOptions,
  StackNavigationHelpers,
@@ -51,7 +51,7 @@ type Props = {
  getGesturesEnabled: (props: { route: Route<string> }) => boolean;
  renderHeader: (props: HeaderContainerProps) => React.ReactNode;
  renderScene: (props: { route: Route<string> }) => React.ReactNode;
-  headerMode: HeaderMode;
+  headerMode: StackHeaderMode;
  onPageChangeStart?: () => void;
  onPageChangeConfirm?: () => void;
  onPageChangeCancel?: () => void;
@@ -60,7 +60,7 @@ type Props = {
 type State = {
  routes: Route<string>[];
  descriptors: StackDescriptorMap;
-  scenes: HeaderScene<Route<string>>[];
+  scenes: Scene<Route<string>>[];
  progress: ProgressValues;
  layout: Layout;
  floatingHeaderHeights: { [key: string]: number };
--- a/packages/stack/src/views/Stack/StackItem.tsx
+++ b/packages/stack/src/views/Stack/StackItem.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, Platform, StyleProp, ViewStyle } from 'react-native';
+import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { StackNavigationState } from '@react-navigation/routers';
 import { Route } from '@react-navigation/core';
@@ -7,9 +7,9 @@ import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import Card from './Card';
 import {
  StackNavigationHelpers,
-  HeaderScene,
+  Scene,
  Layout,
-  HeaderMode,
+  StackHeaderMode,
  TransitionPreset,
 } from '../../types';

@@ -20,8 +20,8 @@ type Props = TransitionPreset & {
  closing: boolean;
  layout: Layout;
  current: Animated.Value<number>;
-  previousScene?: HeaderScene<Route<string>>;
-  scene: HeaderScene<Route<string>>;
+  previousScene?: Scene<Route<string>>;
+  scene: Scene<Route<string>>;
  state: StackNavigationState;
  navigation: StackNavigationHelpers;
  cardTransparent?: boolean;
@@ -49,7 +49,7 @@ type Props = TransitionPreset & {
    vertical?: number;
    horizontal?: number;
  };
-  headerMode: HeaderMode;
+  headerMode: StackHeaderMode;
  headerTransparent?: boolean;
  floatingHeaderHeight: number;
  hasCustomHeader: boolean;
@@ -153,26 +153,32 @@ export default class StackItem extends React.PureComponent<Props> {
        contentStyle={cardStyle}
        style={StyleSheet.absoluteFill}
      >
-        {headerMode === 'screen'
-          ? renderHeader({
-              mode: 'screen',
-              layout,
-              scenes: [previousScene, scene],
-              state,
-              getPreviousRoute,
-              styleInterpolator: headerStyleInterpolator,
-              style: styles.header,
-            })
-          : null}
-        {renderScene({ route: scene.route })}
+        <View style={styles.container}>
+          <View style={styles.scene}>
+            {renderScene({ route: scene.route })}
+          </View>
+          {headerMode === 'screen'
+            ? renderHeader({
+                mode: 'screen',
+                layout,
+                scenes: [previousScene, scene],
+                state,
+                getPreviousRoute,
+                styleInterpolator: headerStyleInterpolator,
+              })
+            : null}
+        </View>
      </Card>
    );
  }
 }

 const styles = StyleSheet.create({
-  header: {
-    // This is needed to show elevation shadow
-    zIndex: Platform.OS === 'android' ? 1 : 0,
+  container: {
+    flex: 1,
+    flexDirection: 'column-reverse',
+  },
+  scene: {
+    flex: 1,
  },
 });
--- a/packages/stack/src/views/Stack/StackView.tsx
+++ b/packages/stack/src/views/Stack/StackView.tsx
@@ -57,10 +57,6 @@ class StackView extends React.Component<Props, State> {
      );
    }

-    if (!routes.length) {
-      throw new Error(`There should always be at least one route.`);
-    }
-
    // If there was no change in routes, we don't need to compute anything
    if (routes === state.routes || !state.routes.length) {
      return {
@@ -144,6 +140,20 @@ class StackView extends React.Component<Props, State> {
        // i.e. the currently focused route already existed and the previously focused route still exists
        // We don't know how to animate this
      }
+    } else {
+      // Keep the routes we are closing or replacing
+      routes = routes.slice();
+      routes.splice(
+        routes.length - 1,
+        0,
+        ...state.routes.filter(
+          ({ key }) => replacing.includes(key) || closing.includes(key)
+        )
+      );
+    }
+
+    if (!routes.length) {
+      throw new Error(`There should always be at least one route.`);
    }

    const descriptors = routes.reduce(
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
satyajit.happy	8318c49331	chore: publish - @react-navigation/bottom-tabs@5.0.0-alpha.11 - @react-navigation/compat@5.0.0-alpha.5 - @react-navigation/core@5.0.0-alpha.12 - @react-navigation/drawer@5.0.0-alpha.11 - @react-navigation/example@5.0.0-alpha.9 - @react-navigation/material-bottom-tabs@5.0.0-alpha.10 - @react-navigation/material-top-tabs@5.0.0-alpha.9 - @react-navigation/native@5.0.0-alpha.9 - @react-navigation/routers@5.0.0-alpha.9 - @react-navigation/stack@5.0.0-alpha.21	2019-10-03 19:47:41 +02:00
satyajit.happy	ece6e3899e	fix: add missing React import	2019-10-03 19:07:56 +02:00
satyajit.happy	da944ccef9	fix: fix header buttons not clickable on Android. fixes #108	2019-10-03 19:07:21 +02:00
satyajit.happy	bc3586ae3e	fix: keep the routes we are closing or replacing	2019-10-03 18:44:18 +02:00
satyajit.happy	19be2b4bbc	fix: don't throw when switching navigator. fixes #91	2019-10-03 17:51:13 +02:00
satyajit.happy	a8851b730d	chore: upgrade deps	2019-10-03 17:35:24 +02:00
Michał Osadnik	7a5bcb446b	feat: add a getRootState method (#119 )	2019-10-01 23:17:28 +02:00
satyajit.happy	1345a8fec6	chore: upgrade eslint config	2019-09-28 11:58:21 +02:00
satyajit.happy	7393464515	fix: don't merge state with existing state during reset. fixes #111	2019-09-28 11:49:45 +02:00
osdnk	9810a06061	chore: publish - @react-navigation/bottom-tabs@5.0.0-alpha.10 - @react-navigation/compat@5.0.0-alpha.4 - @react-navigation/core@5.0.0-alpha.11 - @react-navigation/drawer@5.0.0-alpha.10 - @react-navigation/example@5.0.0-alpha.8 - @react-navigation/material-bottom-tabs@5.0.0-alpha.9 - @react-navigation/material-top-tabs@5.0.0-alpha.8 - @react-navigation/routers@5.0.0-alpha.8 - @react-navigation/stack@5.0.0-alpha.20	2019-09-27 17:30:35 +02:00
osdnk	655a220137	fix: close drawer on navigate	2019-09-27 17:29:59 +02:00
satyajit.happy	e61f5941d7	feat: add a method to reset root navigator state	2019-09-26 16:34:34 +02:00
satyajit.happy	8b78d617c0	feat: export some more type aliases	2019-09-25 23:09:58 +02:00
Dulmandakh	1fd5a868a3	feat: export BottomTabBar props type (#109 )	2019-09-25 16:41:40 +02:00
satyajit.happy	1153d5575b	fix: fire blur event when a route is removed with a delay closes #110	2019-09-24 20:27:54 +02:00
osdnk	76de32f441	chore: publish - @react-navigation/stack@5.0.0-alpha.19	2019-09-23 18:26:26 +02:00
osdnk	4ee19bcdb9	fix: vertical gesture in stack	2019-09-23 18:25:06 +02:00
satyajit.happy	06cc8b9142	chore: publish - @react-navigation/compat@5.0.0-alpha.3 - @react-navigation/stack@5.0.0-alpha.18	2019-09-23 17:26:27 +02:00
satyajit.happy	2f66556b10	fix: fix header rendered behind card. closes #108	2019-09-23 17:24:43 +02:00
Dulmandakh	f39813626a	feat(stack): use Animated.Text for header title (#105 )	2019-09-21 17:55:11 +02:00
Dulmandakh	089390ce87	feat(stack): use Animated.View for header background (#106 )	2019-09-21 17:54:21 +02:00
Dulmandakh	d09c9ae643	refactor(stack): convert Header component to function (#104 )	2019-09-21 17:53:44 +02:00
satyajit.happy	8920da68a7	fix: throw when wrapping a compat navigatofor compat	2019-09-19 14:57:31 +02:00
satyajit.happy	98a9487cda	chore: publish - @react-navigation/bottom-tabs@5.0.0-alpha.9 - @react-navigation/compat@5.0.0-alpha.2 - @react-navigation/core@5.0.0-alpha.10 - @react-navigation/stack@5.0.0-alpha.17	2019-09-17 18:44:55 +02:00
satyajit.happy	ff502820c7	feat: add createSwitchNavigator	2019-09-17 18:32:07 +02:00
satyajit.happy	30e510d123	fix: provide navigation prop in header	2019-09-17 18:13:42 +02:00
satyajit.happy	114a5dc888	feat: add withNavigation and withNavigationFocus	2019-09-17 17:57:01 +02:00
Ryan Stelly	b4bbf9b0c3	fix: add fallbacks for non-web modules closes #95, #96	2019-09-17 16:58:17 +02:00
satyajit.happy	98f0de088f	refactor: make dispatch accept thunks	2019-09-17 13:05:45 +02:00