chore: publish

- @react-navigation/bottom-tabs@5.0.0-alpha.16 - @react-navigation/compat@5.0.0-alpha.10 - @react-navigation/core@5.0.0-alpha.18 - @react-navigation/drawer@5.0.0-alpha.17 - @react-navigation/example@5.0.0-alpha.17 - @react-navigation/material-bottom-tabs@5.0.0-alpha.16 - @react-navigation/material-top-tabs@5.0.0-alpha.13 - @react-navigation/native-stack@5.0.0-alpha.5 - @react-navigation/routers@5.0.0-alpha.10 - @react-navigation/stack@5.0.0-alpha.30
fix: use index of first route when rehydrating tab state
2026-01-14 09:32:32 +08:00 · 2019-10-29 21:20:18 +01:00 · 2019-10-29 21:15:02 +01:00 · 2019-10-29 02:42:37 +01:00 · 2019-10-25 09:29:36 +02:00 · 2019-10-24 19:32:33 +02:00
63 changed files with 851 additions and 248 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -14,11 +14,11 @@ jobs:
          at: ~/project
      - restore_cache:
          keys:
-            - v1-dependencies-{{ checksum "package.json" }}
+            - v1-dependencies-{{ checksum "yarn.lock" }}
            - v1-dependencies-
-      - run: yarn install
+      - run: yarn install --frozen-lockfile
      - save_cache:
-          key: v1-dependencies-{{ checksum "package.json" }}
+          key: v1-dependencies-{{ checksum "yarn.lock" }}
          paths: node_modules
      - persist_to_workspace:
          root: .
--- a/packages/bottom-tabs/CHANGELOG.md
+++ b/packages/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.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.15...@react-navigation/bottom-tabs@5.0.0-alpha.16) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.14...@react-navigation/bottom-tabs@5.0.0-alpha.15) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.13...@react-navigation/bottom-tabs@5.0.0-alpha.14) (2019-10-15)


--- a/packages/bottom-tabs/package.json
+++ b/packages/bottom-tabs/package.json
@@ -10,7 +10,7 @@
    "android",
    "tab"
  ],
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.16",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -33,7 +33,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@react-navigation/routers": "^5.0.0-alpha.10"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
--- a/packages/bottom-tabs/src/types.tsx
+++ b/packages/bottom-tabs/src/types.tsx
@@ -71,11 +71,7 @@ export type BottomTabNavigationOptions = {
   */
  tabBarLabel?:
    | React.ReactNode
-    | ((props: {
-        focused: boolean;
-        color: string;
-        size: number;
-      }) => React.ReactNode);
+    | ((props: { focused: boolean; color: string }) => React.ReactNode);

  /**
   * React Element or a function that given { focused: boolean, color: string } returns a React.Node, to display in the tab bar.
@@ -221,7 +217,6 @@ export type BottomTabBarProps = BottomTabBarOptions & {
    | ((scene: {
        focused: boolean;
        color: string;
-        orientation: 'horizontal' | 'vertical';
      }) => React.ReactNode | undefined)
    | React.ReactNode;
  getTestID: (props: { route: Route<string> }) => string | undefined;
--- a/packages/bottom-tabs/src/views/BottomTabBar.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -157,11 +157,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
    }

    if (typeof label === 'function') {
-      return label({
-        focused,
-        color,
-        orientation: horizontal ? 'horizontal' : 'vertical',
-      });
+      return label({ focused, color });
    }

    return label;
--- a/packages/compat/CHANGELOG.md
+++ b/packages/compat/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/compat@5.0.0-alpha.9...@react-navigation/compat@5.0.0-alpha.10) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.8...@react-navigation/compat@5.0.0-alpha.9) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 # [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.7...@react-navigation/compat@5.0.0-alpha.8) (2019-10-15)


--- 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.8",
+  "version": "5.0.0-alpha.10",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -24,7 +24,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@react-navigation/routers": "^5.0.0-alpha.10"
  },
  "devDependencies": {
    "@types/react": "^16.9.4",
--- a/packages/compat/src/createCompatNavigatorFactory.tsx
+++ b/packages/compat/src/createCompatNavigatorFactory.tsx
@@ -49,7 +49,7 @@ export default function createCompatNavigatorFactory<
    navigationConfig: Partial<Omit<NavigationConfig, 'screenOptions'>> & {
      order?: Array<Extract<keyof ParamList, string>>;
      defaultNavigationOptions?: ScreenOptions;
-      navigationOptions?: { [key: string]: any };
+      navigationOptions?: Record<string, any>;
    } = {}
  ) => {
    const Pair = createNavigator();
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.17...@react-navigation/core@5.0.0-alpha.18) (2019-10-29)
+
+
+### Bug Fixes
+
+* improve type annotation for screens ([8f16085](https://github.com/react-navigation/navigation-ex/commit/8f16085))
+
+
+
+
+
+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.16...@react-navigation/core@5.0.0-alpha.17) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.15...@react-navigation/core@5.0.0-alpha.16) (2019-10-18)
+
+
+### Bug Fixes
+
+* rehydrate state before using it ([3e92e22](https://github.com/react-navigation/navigation-ex/commit/3e92e22))
+
+
+### Features
+
+* make it easier to navigate to a specific route in navigator ([#114](https://github.com/react-navigation/navigation-ex/issues/114)) ([a543f1b](https://github.com/react-navigation/navigation-ex/commit/a543f1b)), closes [#90](https://github.com/react-navigation/navigation-ex/issues/90)
+
+
+
+
+
 # [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.14...@react-navigation/core@5.0.0-alpha.15) (2019-10-15)


--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -6,7 +6,7 @@
    "react-native",
    "react-navigation"
  ],
-  "version": "5.0.0-alpha.15",
+  "version": "5.0.0-alpha.18",
  "license": "MIT",
  "repository": {
    "type": "git",
--- a/packages/core/src/SceneView.tsx
+++ b/packages/core/src/SceneView.tsx
@@ -90,8 +90,10 @@ export default function SceneView<
              route={route}
            >
              {'component' in screen && screen.component !== undefined ? (
+                // @ts-ignore
                <screen.component navigation={navigation} route={route} />
              ) : 'children' in screen && screen.children !== undefined ? (
+                // @ts-ignore
                screen.children({ navigation, route })
              ) : null}
            </StaticContainer>
--- a/packages/core/src/tests/fixtures/MockRouter.tsx
+++ b/packages/core/src/tests/fixtures/MockRouter.tsx
@@ -108,7 +108,24 @@ export default function MockRouter(options: DefaultRouterOptions) {
            return null;
          }

-          return { ...state, index };
+          return {
+            ...state,
+            index,
+            routes:
+              action.payload.params !== undefined
+                ? state.routes.map((route, i) =>
+                    i === index
+                      ? {
+                          ...route,
+                          params: {
+                            ...route.params,
+                            ...action.payload.params,
+                          },
+                        }
+                      : route
+                  )
+                : state.routes,
+          };
        }

        default:
--- a/packages/core/src/tests/index.test.tsx
+++ b/packages/core/src/tests/index.test.tsx
@@ -5,7 +5,7 @@ import NavigationContainer from '../NavigationContainer';
 import useNavigationBuilder from '../useNavigationBuilder';
 import useNavigation from '../useNavigation';
 import MockRouter, { MockRouterKey } from './__fixtures__/MockRouter';
-import { NavigationState } from '../types';
+import { NavigationState, NavigationContainerRef } from '../types';

 beforeEach(() => (MockRouterKey.current = 0));

@@ -523,6 +523,80 @@ it('handles change in route names', () => {
  });
 });

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

 type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>;

-type StringifyConfig = { [key: string]: (value: any) => string };
+type StringifyConfig = Record<string, (value: any) => string>;

 type Options = {
  [routeName: string]: string | { path: string; stringify?: StringifyConfig };
--- a/packages/core/src/getStateFromPath.tsx
+++ b/packages/core/src/getStateFromPath.tsx
@@ -2,7 +2,7 @@ import escape from 'escape-string-regexp';
 import queryString from 'query-string';
 import { NavigationState, PartialState } from './types';

-type ParseConfig = { [key: string]: (value: string) => any };
+type ParseConfig = Record<string, (value: string) => any>;

 type Options = {
  [routeName: string]: string | { path: string; parse?: ParseConfig };
@@ -78,7 +78,7 @@ export default function getStateFromPath(
          .filter(p => p.startsWith(':'));

        if (paramPatterns.length) {
-          params = paramPatterns.reduce<{ [key: string]: any }>((acc, p, i) => {
+          params = paramPatterns.reduce<Record<string, any>>((acc, p, i) => {
            const key = p.replace(/^:/, '');
            const value = match[i + 1]; // The param segments start from index 1 in the regex match result

--- a/packages/core/src/types.tsx
+++ b/packages/core/src/types.tsx
@@ -189,7 +189,7 @@ export type Router<
  actionCreators?: ActionCreators<Action>;
 };

-export type ParamListBase = { [key: string]: object | undefined };
+export type ParamListBase = Record<string, object | undefined>;

 export type EventMapBase = {
  focus: undefined;
@@ -215,7 +215,7 @@ export type EventListenerCallback<EventName extends string, Data> = (
  e: EventArg<EventName, Data>
 ) => void;

-export type EventConsumer<EventMap extends { [key: string]: any }> = {
+export type EventConsumer<EventMap extends Record<string, any>> = {
  /**
   * Subscribe to events from the parent navigator.
   *
@@ -232,7 +232,7 @@ export type EventConsumer<EventMap extends { [key: string]: any }> = {
  ): void;
 };

-export type EventEmitter<EventMap extends { [key: string]: any }> = {
+export type EventEmitter<EventMap extends Record<string, any>> = {
  /**
   * Emit an event to child screens.
   *
@@ -349,7 +349,7 @@ type NavigationHelpersCommon<

 export type NavigationHelpers<
  ParamList extends ParamListBase,
-  EventMap extends { [key: string]: any } = {}
+  EventMap extends Record<string, any> = {}
 > = NavigationHelpersCommon<ParamList> &
  EventEmitter<EventMap> & {
    /**
@@ -376,7 +376,7 @@ export type NavigationProp<
  RouteName extends keyof ParamList = string,
  State extends NavigationState = NavigationState,
  ScreenOptions extends object = {},
-  EventMap extends { [key: string]: any } = {}
+  EventMap extends Record<string, any> = {}
 > = NavigationHelpersCommon<ParamList, State> & {
  /**
   * Update the param object for the route.
@@ -468,7 +468,7 @@ export type Descriptor<
  RouteName extends keyof ParamList = string,
  State extends NavigationState = NavigationState,
  ScreenOptions extends object = {},
-  EventMap extends { [key: string]: any } = {}
+  EventMap extends Record<string, any> = {}
 > = {
  /**
   * Render the component associated with this route.
@@ -521,13 +521,19 @@ export type RouteConfig<
      /**
       * React component to render for this screen.
       */
-      component: React.ComponentType<any>;
+      component: React.ComponentType<{
+        route: RouteProp<ParamList, RouteName>;
+        navigation: any;
+      }>;
    }
  | {
      /**
       * Render callback to render content of this screen.
       */
-      children: (props: any) => React.ReactNode;
+      children: (props: {
+        route: RouteProp<ParamList, RouteName>;
+        navigation: any;
+      }) => React.ReactNode;
    });

 export type NavigationContainerRef =
--- a/packages/core/src/useDescriptors.tsx
+++ b/packages/core/src/useDescriptors.tsx
@@ -20,7 +20,7 @@ import {

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

  const context = React.useMemo(
--- a/packages/core/src/useEventEmitter.tsx
+++ b/packages/core/src/useEventEmitter.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { EventEmitter, EventConsumer, EventArg } from './types';

-export type NavigationEventEmitter = EventEmitter<{ [key: string]: any }> & {
-  create: (target: string) => EventConsumer<{ [key: string]: any }>;
+export type NavigationEventEmitter = EventEmitter<Record<string, any>> & {
+  create: (target: string) => EventConsumer<Record<string, any>>;
 };

 type Listeners = Array<(data: any) => void>;
@@ -11,9 +11,7 @@ type Listeners = Array<(data: any) => void>;
 * Hook to manage the event system used by the navigator to notify screens of various events.
 */
 export default function useEventEmitter(): NavigationEventEmitter {
-  const listeners = React.useRef<{
-    [key: string]: { [key: string]: Listeners };
-  }>({});
+  const listeners = React.useRef<Record<string, Record<string, Listeners>>>({});

  const create = React.useCallback((target: string) => {
    const removeListener = (type: string, callback: (data: any) => void) => {
--- a/packages/core/src/useNavigationBuilder.tsx
+++ b/packages/core/src/useNavigationBuilder.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { NavigationStateContext } from './NavigationContainer';
+import NavigationRouteContext from './NavigationRouteContext';
 import Screen from './Screen';
+import { navigate } from './CommonActions';
 import useEventEmitter from './useEventEmitter';
 import useRegisterNavigator from './useRegisterNavigator';
 import useDescriptors from './useDescriptors';
@@ -30,6 +32,13 @@ import useOnGetState from './useOnGetState';
 // eslint-disable-next-line babel/no-unused-expressions
 PrivateValueStore;

+type NavigatorRoute = {
+  params?: {
+    screen?: string;
+    params?: object;
+  };
+};
+
 /**
 * Compare two arrays with primitive values as the content.
 * We need to make sure that both values and order match.
@@ -89,39 +98,66 @@ export default function useNavigationBuilder<
  State extends NavigationState,
  RouterOptions extends DefaultRouterOptions,
  ScreenOptions extends object,
-  EventMap extends { [key: string]: any }
+  EventMap extends Record<string, any>
 >(
  createRouter: RouterFactory<State, any, RouterOptions>,
  options: DefaultNavigatorOptions<ScreenOptions> & RouterOptions
 ) {
  useRegisterNavigator();

+  const route = React.useContext(NavigationRouteContext) as (
+    | NavigatorRoute
+    | undefined);
+
+  const previousRouteRef = React.useRef(route);
+
+  React.useEffect(() => {
+    previousRouteRef.current = route;
+  }, [route]);
+
  const { children, ...rest } = options;
  const { current: router } = React.useRef<Router<State, any>>(
-    createRouter((rest as unknown) as RouterOptions)
+    createRouter({
+      ...((rest as unknown) as RouterOptions),
+      ...(route && route.params && typeof route.params.screen === 'string'
+        ? { initialRouteName: route.params.screen }
+        : null),
+    })
  );

-  const screens = getRouteConfigsFromChildren<ScreenOptions>(children).reduce(
-    (acc, curr) => {
-      if (curr.name in acc) {
-        throw new Error(
-          `A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named '${curr.name}')`
-        );
-      }
+  const screens = getRouteConfigsFromChildren<ScreenOptions>(children).reduce<
+    Record<string, RouteConfig<ParamListBase, string, ScreenOptions>>
+  >((acc, curr) => {
+    if (curr.name in acc) {
+      throw new Error(
+        `A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named '${curr.name}')`
+      );
+    }

-      acc[curr.name] = curr;
-      return acc;
-    },
-    {} as { [key: string]: RouteConfig<ParamListBase, string, ScreenOptions> }
-  );
+    acc[curr.name] = curr;
+    return acc;
+  }, {});

  const routeNames = Object.keys(screens);
-  const routeParamList = routeNames.reduce(
+  const routeParamList = routeNames.reduce<Record<string, object | undefined>>(
    (acc, curr) => {
-      acc[curr] = screens[curr].initialParams;
+      const { initialParams } = screens[curr];
+      const initialParamsFromParams =
+        route && route.params && route.params.screen === curr
+          ? route.params.params
+          : undefined;
+
+      acc[curr] =
+        initialParams !== undefined || initialParamsFromParams !== undefined
+          ? {
+              ...initialParams,
+              ...initialParamsFromParams,
+            }
+          : undefined;
+
      return acc;
    },
-    {} as { [key: string]: object | undefined }
+    {}
  );

  if (!routeNames.length) {
@@ -175,28 +211,53 @@ export default function useNavigationBuilder<
      ? (initializedStateRef.current as State)
      : (currentState as State);

+  let nextState: State = state;
+
  if (!isArrayEqual(state.routeNames, routeNames)) {
    // When the list of route names change, the router should handle it to remove invalid routes
-    const nextState = router.getStateForRouteNamesChange(state, {
+    nextState = router.getStateForRouteNamesChange(state, {
      routeNames,
      routeParamList,
    });
-
-    if (state !== nextState) {
-      // If the state needs to be updated, we'll schedule an update with React
-      // setState in render seems hacky, but that's how React docs implement getDerivedPropsFromState
-      // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
-      performTransaction(() => {
-        setState(nextState);
-      });
-    }
-
-    // The up-to-date state will come in next render, but we don't need to wait for it
-    // We can't use the outdated state since the screens have changed, which will cause error due to mismatched config
-    // So we override the state objec we return to use the latest state as soon as possible
-    state = nextState;
  }

+  if (
+    previousRouteRef.current &&
+    route &&
+    route.params &&
+    typeof route.params.screen === 'string' &&
+    route.params !== previousRouteRef.current.params
+  ) {
+    // If the route was updated with new name and/or params, we should navigate there
+    // The update should be limited to current navigator only, so we call the router manually
+    const updatedState = router.getStateForAction(
+      state,
+      navigate(route.params.screen, route.params.params)
+    );
+
+    nextState =
+      updatedState !== null
+        ? router.getRehydratedState(updatedState, {
+            routeNames,
+            routeParamList,
+          })
+        : state;
+  }
+
+  if (state !== nextState) {
+    // If the state needs to be updated, we'll schedule an update with React
+    // setState in render seems hacky, but that's how React docs implement getDerivedPropsFromState
+    // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
+    performTransaction(() => {
+      setState(nextState);
+    });
+  }
+
+  // The up-to-date state will come in next render, but we don't need to wait for it
+  // We can't use the outdated state since the screens have changed, which will cause error due to mismatched config
+  // So we override the state objec we return to use the latest state as soon as possible
+  state = nextState;
+
  React.useEffect(() => {
    return () => {
      // We need to clean up state for this navigator on unmount
--- a/packages/core/src/useNavigationCache.tsx
+++ b/packages/core/src/useNavigationCache.tsx
@@ -18,7 +18,7 @@ type Options<State extends NavigationState> = {
  navigation: NavigationHelpers<ParamListBase> &
    Partial<NavigationProp<ParamListBase, string, any, any, any>>;
  setOptions: (
-    cb: (options: { [key: string]: object }) => { [key: string]: object }
+    cb: (options: Record<string, object>) => Record<string, object>
  ) => void;
  router: Router<State, NavigationAction>;
  emitter: NavigationEventEmitter;
@@ -89,13 +89,13 @@ export default function useNavigationCache<
          );
        };

-        const helpers = Object.keys(actions).reduce(
+        const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
          (acc, name) => {
            // @ts-ignore
            acc[name] = (...args: any) => dispatch(actions[name](...args));
            return acc;
          },
-          {} as { [key: string]: () => void }
+          {}
        );

        acc[route.key] = {
--- a/packages/core/src/useNavigationHelpers.tsx
+++ b/packages/core/src/useNavigationHelpers.tsx
@@ -35,7 +35,7 @@ type Options<State extends NavigationState, Action extends NavigationAction> = {
 export default function useNavigationHelpers<
  State extends NavigationState,
  Action extends NavigationAction,
-  EventMap extends { [key: string]: any }
+  EventMap extends Record<string, any>
 >({ onAction, getState, emitter, router }: Options<State, Action>) {
  const resetRoot = React.useContext(ResetRootContext);
  const parentNavigationHelpers = React.useContext(NavigationContext);
@@ -55,13 +55,13 @@ export default function useNavigationHelpers<
      ...CommonActions,
    };

-    const helpers = Object.keys(actions).reduce(
+    const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
      (acc, name) => {
        // @ts-ignore
        acc[name] = (...args: any) => dispatch(actions[name](...args));
        return acc;
      },
-      {} as { [key: string]: () => void }
+      {}
    );

    return {
--- a/packages/drawer/CHANGELOG.md
+++ b/packages/drawer/CHANGELOG.md
@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.16...@react-navigation/drawer@5.0.0-alpha.17) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.15...@react-navigation/drawer@5.0.0-alpha.16) (2019-10-22)
+
+
+### Bug Fixes
+
+* navigation drawer sometimes not closing when pressed outside ([0d8cdc8](https://github.com/react-navigation/navigation-ex/commit/0d8cdc8))
+
+
+
+
+
+# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.14...@react-navigation/drawer@5.0.0-alpha.15) (2019-10-17)
+
+
+### Bug Fixes
+
+* fix passing content options in drawer ([cab6160](https://github.com/react-navigation/navigation-ex/commit/cab6160))
+
+
+
+
+
 # [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.13...@react-navigation/drawer@5.0.0-alpha.14) (2019-10-15)


--- a/packages/drawer/package.json
+++ b/packages/drawer/package.json
@@ -11,7 +11,7 @@
    "material",
    "drawer"
  ],
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.17",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -34,7 +34,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@react-navigation/routers": "^5.0.0-alpha.10"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
@@ -46,7 +46,7 @@
    "react-native-gesture-handler": "^1.3.0",
    "react-native-reanimated": "^1.3.0",
    "react-native-safe-area-context": "^0.3.6",
-    "react-native-screens": "^2.0.0-alpha.3",
+    "react-native-screens": "^2.0.0-alpha.6",
    "typescript": "^3.6.3"
  },
  "peerDependencies": {
@@ -56,7 +56,7 @@
    "react-native-gesture-handler": "^1.0.0",
    "react-native-reanimated": "^1.0.0",
    "react-native-safe-area-context": "^0.3.6",
-    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.3"
+    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.0"
  },
  "@react-native-community/bob": {
    "source": "src",
--- a/packages/drawer/src/views/Drawer.tsx
+++ b/packages/drawer/src/views/Drawer.tsx
@@ -428,7 +428,14 @@ export default class DrawerView extends React.PureComponent<Props> {
        x: this.touchX,
        translationX: this.gestureX,
        velocityX: this.velocityX,
-        state: this.gestureState,
+      },
+    },
+  ]);
+
+  private handleGestureStateChange = event([
+    {
+      nativeEvent: {
+        state: (s: Animated.Value<number>) => set(this.gestureState, s),
      },
    },
  ]);
@@ -519,7 +526,7 @@ export default class DrawerView extends React.PureComponent<Props> {
        activeOffsetX={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
        failOffsetY={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
        onGestureEvent={this.handleGestureEvent}
-        onHandlerStateChange={this.handleGestureEvent}
+        onHandlerStateChange={this.handleGestureStateChange}
        hitSlop={hitSlop}
        enabled={!locked}
        {...gestureHandlerProps}
--- a/packages/drawer/src/views/DrawerView.tsx
+++ b/packages/drawer/src/views/DrawerView.tsx
@@ -136,6 +136,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
      descriptors,
      drawerPosition,
      contentComponent: ContentComponent,
+      contentOptions,
    } = this.props;

    return (
@@ -145,6 +146,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
        navigation={navigation}
        descriptors={descriptors}
        drawerPosition={drawerPosition}
+        {...contentOptions}
      />
    );
  };
--- a/packages/example/CHANGELOG.md
+++ b/packages/example/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [5.0.0-alpha.17](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.16...@react-navigation/example@5.0.0-alpha.17) (2019-10-29)
+
+
+### Bug Fixes
+
+* improve type annotation for screens ([8f16085](https://github.com/satya164/navigation-ex/commit/8f16085))
+
+
+
+
+
+# [5.0.0-alpha.16](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.15...@react-navigation/example@5.0.0-alpha.16) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.15](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.14...@react-navigation/example@5.0.0-alpha.15) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.14](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.13...@react-navigation/example@5.0.0-alpha.14) (2019-10-17)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
 # [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.12...@react-navigation/example@5.0.0-alpha.13) (2019-10-15)


--- a/packages/example/ios/Podfile.lock
+++ b/packages/example/ios/Podfile.lock
@@ -93,7 +93,7 @@ PODS:
    - React
  - RNReanimated (1.2.0):
    - React
-  - RNScreens (2.0.0-alpha.4):
+  - RNScreens (2.0.0-alpha.6):
    - React
  - UMBarCodeScannerInterface (4.0.0)
  - UMCameraInterface (4.0.0)
@@ -159,7 +159,7 @@ DEPENDENCIES:
  - yoga (from `../node_modules/react-native/ReactCommon/yoga`)

 SPEC REPOS:
-  https://github.com/cocoapods/specs.git:
+  trunk:
    - boost-for-react-native

 EXTERNAL SOURCES:
@@ -267,7 +267,7 @@ SPEC CHECKSUMS:
  react-native-safe-area-context: e380a6f783ccaec848e2f3cc8eb205a62362950d
  RNGestureHandler: 5329a942fce3d41c68b84c2c2276ce06a696d8b0
  RNReanimated: 1b52415c4302f198cb581282a0166690bad62c43
-  RNScreens: 84be1a2369a580beb2fea0755cc62ef16b83fffe
+  RNScreens: 73691421e207a57b85af0fea931e620b05a35e89
  UMBarCodeScannerInterface: d5a6fdc98ed6241225b0a8432a7f4e2b397668bc
  UMCameraInterface: 68870a3197fee85bd5afca5609ba4a5b7257d19d
  UMConstantsInterface: d25b8e8887ca7aaf568c06caf08f4d40734ee4ef
@@ -284,4 +284,4 @@ SPEC CHECKSUMS:

 PODFILE CHECKSUM: 1276a2dd000c142ccc03272023bb8a6b2d5b9933

-COCOAPODS: 1.7.5
+COCOAPODS: 1.8.3
--- 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.13",
+  "version": "5.0.0-alpha.17",
  "private": true,
  "workspaces": {
    "nohoist": [
@@ -27,10 +27,10 @@
    "react-dom": "~16.8.3",
    "react-native": "~0.59.10",
    "react-native-gesture-handler": "~1.3.0",
-    "react-native-paper": "^3.0.0-alpha.3",
+    "react-native-paper": "^3.1.1",
    "react-native-reanimated": "~1.2.0",
    "react-native-safe-area-context": "~0.3.6",
-    "react-native-screens": "2.0.0-alpha.4",
+    "react-native-screens": "^2.0.0-alpha.6",
    "react-native-tab-view": "2.10.0",
    "react-native-unimodules": "^0.7.0-rc.1",
    "react-native-web": "^0.11.7",
--- a/packages/example/src/Screens/BottomTabs.tsx
+++ b/packages/example/src/Screens/BottomTabs.tsx
@@ -41,15 +41,13 @@ export default function BottomTabsScreen() {
          tabBarButtonComponent: TouchableBounce,
        }}
      >
-        {props => (
-          <SimpleStackScreen {...props} options={{ headerMode: 'none' }} />
-        )}
+        {props => <SimpleStackScreen {...props} headerMode="none" />}
      </BottomTabs.Screen>
      <BottomTabs.Screen
        name="chat"
        component={Chat}
        options={{
-          title: 'Chat',
+          tabBarLabel: 'Chat',
          tabBarIcon: getTabBarIcon('message-reply'),
          tabBarButtonComponent: TouchableBounce,
        }}
--- a/packages/example/src/Screens/MaterialBottomTabs.tsx
+++ b/packages/example/src/Screens/MaterialBottomTabs.tsx
@@ -28,9 +28,7 @@ export default function MaterialBottomTabsScreen() {
          tabBarColor: '#C9E7F8',
        }}
      >
-        {props => (
-          <SimpleStackScreen {...props} options={{ headerMode: 'none' }} />
-        )}
+        {props => <SimpleStackScreen {...props} headerMode="none" />}
      </MaterialBottomTabs.Screen>
      <MaterialBottomTabs.Screen
        name="chat"
--- a/packages/example/src/Screens/SimpleStack.tsx
+++ b/packages/example/src/Screens/SimpleStack.tsx
@@ -5,7 +5,6 @@ import { RouteProp, ParamListBase } from '@react-navigation/core';
 import {
  createStackNavigator,
  StackNavigationProp,
-  StackNavigationOptions,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
@@ -77,18 +76,17 @@ const AlbumsScreen = ({

 const SimpleStack = createStackNavigator<SimpleStackParams>();

-type Props = {
-  options?: StackNavigationOptions;
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
  navigation: StackNavigationProp<ParamListBase>;
 };

-export default function SimpleStackScreen({ navigation, options }: Props) {
+export default function SimpleStackScreen({ navigation, ...rest }: Props) {
  navigation.setOptions({
    headerShown: false,
  });

  return (
-    <SimpleStack.Navigator {...options}>
+    <SimpleStack.Navigator {...rest}>
      <SimpleStack.Screen
        name="article"
        component={ArticleScreen}
--- a/packages/material-bottom-tabs/CHANGELOG.md
+++ b/packages/material-bottom-tabs/CHANGELOG.md
@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.15...@react-navigation/material-bottom-tabs@5.0.0-alpha.16) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.14...@react-navigation/material-bottom-tabs@5.0.0-alpha.15) (2019-10-22)
+
+
+### Bug Fixes
+
+* navigation drawer sometimes not closing when pressed outside ([0d8cdc8](https://github.com/react-navigation/navigation-ex/commit/0d8cdc8))
+
+
+
+
+
+# [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.13...@react-navigation/material-bottom-tabs@5.0.0-alpha.14) (2019-10-17)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.12...@react-navigation/material-bottom-tabs@5.0.0-alpha.13) (2019-10-15)


--- 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.13",
+  "version": "5.0.0-alpha.16",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -34,7 +34,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@react-navigation/routers": "^5.0.0-alpha.10"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
@@ -44,7 +44,7 @@
    "del-cli": "^3.0.0",
    "react": "~16.8.3",
    "react-native": "~0.59.10",
-    "react-native-paper": "^3.0.0-alpha.3",
+    "react-native-paper": "^3.1.1",
    "react-native-vector-icons": "^6.6.0",
    "typescript": "^3.6.3"
  },
@@ -52,7 +52,7 @@
    "@react-navigation/core": "^5.0.0-alpha.0",
    "react": "*",
    "react-native": "*",
-    "react-native-paper": "^3.0.0-alpha.3",
+    "react-native-paper": "^3.0.0",
    "react-native-vector-icons": "^6.0.0"
  },
  "@react-native-community/bob": {
--- a/packages/material-bottom-tabs/src/types.tsx
+++ b/packages/material-bottom-tabs/src/types.tsx
@@ -96,6 +96,16 @@ export type MaterialBottomTabDescriptorMap = {
 export type MaterialBottomTabNavigationConfig = Partial<
  Omit<
    React.ComponentProps<typeof BottomNavigation>,
-    'navigationState' | 'onIndexChange' | 'renderScene'
+    | 'navigationState'
+    | 'onIndexChange'
+    | 'onTabPress'
+    | 'renderScene'
+    | 'renderLabel'
+    | 'renderIcon'
+    | 'getAccessibilityLabel'
+    | 'getBadge'
+    | 'getColor'
+    | 'getLabelText'
+    | 'getTestID'
  >
 >;
--- a/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx
+++ b/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { BottomNavigation } from 'react-native-paper';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { Route } from '@react-navigation/core';
 import { TabNavigationState, TabActions } from '@react-navigation/routers';

 import {
@@ -17,7 +16,7 @@ type Props = MaterialBottomTabNavigationConfig & {
  descriptors: MaterialBottomTabDescriptorMap;
 };

-type Scene = { route: Route<string> };
+type Scene = { route: { key: string } };

 export default class MaterialBottomTabView extends React.PureComponent<Props> {
  private getColor = ({ route }: Scene) => {
@@ -35,7 +34,7 @@ export default class MaterialBottomTabView extends React.PureComponent<Props> {
      ? options.tabBarLabel
      : typeof options.title === 'string'
      ? options.title
-      : route.name;
+      : ((route as any) as { name: string }).name;
  };

  private getAccessibilityLabel = ({ route }: Scene) => {
@@ -49,9 +48,9 @@ export default class MaterialBottomTabView extends React.PureComponent<Props> {
    const label = this.getLabelText({ route });

    if (typeof label === 'string') {
-      return `${label}, tab, ${state.routes.indexOf(route) + 1} of ${
-        state.routes.length
-      }`;
+      return `${label}, tab, ${state.routes.findIndex(
+        r => r.key === route.key
+      ) + 1} of ${state.routes.length}`;
    }

    return undefined;
@@ -75,7 +74,7 @@ export default class MaterialBottomTabView extends React.PureComponent<Props> {
    focused,
    color,
  }: {
-    route: Route<string>;
+    route: { key: string };
    focused: boolean;
    color: string;
  }) => {
--- a/packages/material-top-tabs/CHANGELOG.md
+++ b/packages/material-top-tabs/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.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.12...@react-navigation/material-top-tabs@5.0.0-alpha.13) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 # [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.11...@react-navigation/material-top-tabs@5.0.0-alpha.12) (2019-10-15)


--- 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.12",
+  "version": "5.0.0-alpha.13",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -34,7 +34,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@react-navigation/routers": "^5.0.0-alpha.10"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
--- a/packages/native-stack/CHANGELOG.md
+++ b/packages/native-stack/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.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.4...@react-navigation/native-stack@5.0.0-alpha.5) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.3...@react-navigation/native-stack@5.0.0-alpha.4) (2019-10-22)
+
+
+### Features
+
+* **native-stack:** add support for large title attributes ([#135](https://github.com/react-navigation/navigation-ex/issues/135)) ([6cf1a04](https://github.com/react-navigation/navigation-ex/commit/6cf1a04))
+
+
+
+
+
+# [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.2...@react-navigation/native-stack@5.0.0-alpha.3) (2019-10-18)
+
+
+### Bug Fixes
+
+* remove top margin when header is hidden in native stack. fixes [#131](https://github.com/react-navigation/navigation-ex/issues/131) ([fb726ee](https://github.com/react-navigation/navigation-ex/commit/fb726ee))
+
+
+
+
+
+# [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.1...@react-navigation/native-stack@5.0.0-alpha.2) (2019-10-18)
+
+
+### Bug Fixes
+
+* fix header font size config in native stack ([#128](https://github.com/react-navigation/navigation-ex/issues/128)) ([477c088](https://github.com/react-navigation/navigation-ex/commit/477c088))
+
+
+
+
+
 # 5.0.0-alpha.1 (2019-10-15)


--- a/packages/native-stack/package.json
+++ b/packages/native-stack/package.json
@@ -6,7 +6,7 @@
    "react-native",
    "react-navigation"
  ],
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.5",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -29,19 +29,19 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@react-navigation/routers": "^5.0.0-alpha.10"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
    "del-cli": "^2.0.0",
-    "react-native-screens": "^2.0.0-alpha.3",
+    "react-native-screens": "^2.0.0-alpha.6",
    "typescript": "^3.5.3"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0",
    "react": "*",
    "react-native": "*",
-    "react-native-screens": "^2.0.0-alpha.3"
+    "react-native-screens": "^2.0.0-alpha.6"
  },
  "@react-native-community/bob": {
    "source": "src",
--- a/packages/native-stack/src/types.tsx
+++ b/packages/native-stack/src/types.tsx
@@ -123,6 +123,19 @@ export type NativeStackNavigationOptions = {
    fontSize?: number;
    color?: string;
  };
+  /**
+   * Style object for header large title. Supported properties:
+   * - fontFamily
+   * - fontSize
+   *
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  headerLargeTitleStyle?: {
+    fontFamily?: string;
+    fontSize?: number;
+  };
  /**
   * Style object for header back title. Supported properties:
   * - fontFamily
--- a/packages/native-stack/src/views/HeaderConfig.tsx
+++ b/packages/native-stack/src/views/HeaderConfig.tsx
@@ -27,6 +27,7 @@ export default function HeaderConfig(props: Props) {
    headerTranslucent,
    headerStyle = {},
    headerTitleStyle = {},
+    headerLargeTitleStyle = {},
    headerBackTitleStyle = {},
    headerShown,
    gestureEnabled,
@@ -46,7 +47,7 @@ export default function HeaderConfig(props: Props) {
          : route.name
      }
      titleFontFamily={headerTitleStyle.fontFamily}
-      titleFontSize={headerTitleStyle.fontFamily}
+      titleFontSize={headerTitleStyle.fontSize}
      titleColor={
        headerTitleStyle.color !== undefined
          ? headerTitleStyle.color
@@ -58,6 +59,8 @@ export default function HeaderConfig(props: Props) {
      color={headerTintColor}
      gestureEnabled={gestureEnabled === undefined ? true : gestureEnabled}
      largeTitle={headerLargeTitle}
+      largeTitleFontFamily={headerLargeTitleStyle.fontFamily}
+      largeTitleFontSize={headerLargeTitleStyle.fontSize}
      backgroundColor={headerStyle.backgroundColor}
    >
      {headerRight !== undefined ? (
--- a/packages/native-stack/src/views/StackView.tsx
+++ b/packages/native-stack/src/views/StackView.tsx
@@ -43,7 +43,20 @@ export default function StackView({ state, navigation, descriptors }: Props) {
            }}
          >
            <HeaderConfig {...options} route={route} />
-            <View style={[styles.content, contentStyle]}>{renderScene()}</View>
+            <View
+              style={[
+                styles.content,
+                {
+                  marginTop:
+                    Platform.OS === 'android' && options.headerShown !== false
+                      ? 56
+                      : 0,
+                },
+                contentStyle,
+              ]}
+            >
+              {renderScene()}
+            </View>
          </Screen>
        );
      })}
@@ -55,7 +68,6 @@ const styles = StyleSheet.create({
  content: {
    flex: 1,
    backgroundColor: '#eee',
-    marginTop: Platform.OS === 'android' ? 56 : 0,
  },
  scenes: {
    flex: 1,
--- 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.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.12...@react-navigation/native@5.0.0-alpha.13) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 # [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.11...@react-navigation/native@5.0.0-alpha.12) (2019-10-15)


--- a/packages/native/package.json
+++ b/packages/native/package.json
@@ -7,7 +7,7 @@
    "ios",
    "android"
  ],
-  "version": "5.0.0-alpha.12",
+  "version": "5.0.0-alpha.13",
  "license": "MIT",
  "repository": {
    "type": "git",
--- a/packages/native/src/useLinking.tsx
+++ b/packages/native/src/useLinking.tsx
@@ -10,7 +10,7 @@ import {
 type Config = {
  [routeName: string]:
    | string
-    | { path: string; parse?: { [key: string]: (value: string) => any } };
+    | { path: string; parse?: Record<string, (value: string) => any> };
 };

 type Options = {
--- a/packages/routers/CHANGELOG.md
+++ b/packages/routers/CHANGELOG.md
@@ -3,6 +3,17 @@
 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/routers@5.0.0-alpha.9...@react-navigation/routers@5.0.0-alpha.10) (2019-10-29)
+
+
+### Bug Fixes
+
+* use index of first route when rehydrating tab state ([7635373](https://github.com/react-navigation/navigation-ex/commit/7635373))
+
+
+
+
+
 # [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.8...@react-navigation/routers@5.0.0-alpha.9) (2019-10-03)

 **Note:** Version bump only for package @react-navigation/routers
--- a/packages/routers/tests/DrawerRouter.test.tsx
+++ b/packages/routers/tests/DrawerRouter.test.tsx
@@ -87,6 +87,27 @@ it('gets rehydrated state from partial state', () => {
    stale: false,
  });

+  expect(
+    router.getRehydratedState(
+      {
+        routes: [{ key: 'baz-0', name: 'baz' }],
+      },
+      options
+    )
+  ).toEqual({
+    index: 1,
+    key: 'drawer-test',
+    isDrawerOpen: false,
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-0', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+
  expect(
    router.getRehydratedState(
      {
@@ -122,7 +143,7 @@ it('gets rehydrated state from partial state', () => {
      options
    )
  ).toEqual({
-    index: 0,
+    index: 2,
    key: 'drawer-test',
    isDrawerOpen: false,
    routeKeyHistory: [],
--- a/packages/routers/tests/TabRouter.test.tsx
+++ b/packages/routers/tests/TabRouter.test.tsx
@@ -84,6 +84,26 @@ it('gets rehydrated state from partial state', () => {
    stale: false,
  });

+  expect(
+    router.getRehydratedState(
+      {
+        routes: [{ key: 'baz-0', name: 'baz' }],
+      },
+      options
+    )
+  ).toEqual({
+    index: 1,
+    key: 'tab-test',
+    routeKeyHistory: [],
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-0', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    stale: false,
+  });
+
  expect(
    router.getRehydratedState(
      {
@@ -118,7 +138,7 @@ it('gets rehydrated state from partial state', () => {
      options
    )
  ).toEqual({
-    index: 0,
+    index: 2,
    key: 'tab-test',
    routeKeyHistory: [],
    routeNames: ['bar', 'baz', 'qux'],
--- a/packages/routers/package.json
+++ b/packages/routers/package.json
@@ -6,7 +6,7 @@
    "react-native",
    "react-navigation"
  ],
-  "version": "5.0.0-alpha.9",
+  "version": "5.0.0-alpha.10",
  "license": "MIT",
  "repository": {
    "type": "git",
--- a/packages/routers/src/TabRouter.tsx
+++ b/packages/routers/src/TabRouter.tsx
@@ -105,6 +105,16 @@ export default function TabRouter({
        } as Route<string>;
      });

+      const index = Math.min(
+        Math.max(
+          typeof state.index === 'number'
+            ? state.index
+            : routeNames.indexOf(state.routes[0].name),
+          0
+        ),
+        routes.length - 1
+      );
+
      const routeKeyHistory = state.routeKeyHistory
        ? state.routeKeyHistory.filter(key => routes.find(r => r.key === key))
        : [];
@@ -112,10 +122,7 @@ export default function TabRouter({
      return {
        stale: false,
        key: `tab-${shortid()}`,
-        index:
-          typeof state.index === 'number' && state.index < routes.length
-            ? state.index
-            : 0,
+        index,
        routeNames,
        routeKeyHistory,
        routes,
--- a/packages/stack/CHANGELOG.md
+++ b/packages/stack/CHANGELOG.md
@@ -3,6 +3,65 @@
 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.30](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.29...@react-navigation/stack@5.0.0-alpha.30) (2019-10-29)
+
+
+### Bug Fixes
+
+* keyboard manager in stack for fast swipe ([07bfc86](https://github.com/react-navigation/navigation-ex/commit/07bfc86))
+* make clearKeyboardTimeout private ([876c318](https://github.com/react-navigation/navigation-ex/commit/876c318))
+
+
+
+
+
+# [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.28...@react-navigation/stack@5.0.0-alpha.29) (2019-10-22)
+
+
+### Bug Fixes
+
+* conditions in gesture direction ([225e760](https://github.com/react-navigation/navigation-ex/commit/225e760))
+
+
+
+
+
+# [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.27...@react-navigation/stack@5.0.0-alpha.28) (2019-10-22)
+
+
+### Bug Fixes
+
+* don't fire onOpen when screen is unmounting ([#137](https://github.com/react-navigation/navigation-ex/issues/137)) ([f22abb7](https://github.com/react-navigation/navigation-ex/commit/f22abb7)), closes [#136](https://github.com/react-navigation/navigation-ex/issues/136)
+* don't keep unfocused header backgrounds visible ([031c4d2](https://github.com/react-navigation/navigation-ex/commit/031c4d2))
+
+
+
+
+
+# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.26...@react-navigation/stack@5.0.0-alpha.27) (2019-10-18)
+
+
+### Features
+
+* add an option to override safe area insets ([300791a](https://github.com/react-navigation/navigation-ex/commit/300791a))
+
+
+
+
+
+# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.25...@react-navigation/stack@5.0.0-alpha.26) (2019-10-17)
+
+
+### Bug Fixes
+
+* don't fade incoming background when fading header ([#127](https://github.com/react-navigation/navigation-ex/issues/127)) ([c6d0c19](https://github.com/react-navigation/navigation-ex/commit/c6d0c19))
+* fix incorrect type ([731cf7d](https://github.com/react-navigation/navigation-ex/commit/731cf7d))
+* use header height from style if specified ([442b95d](https://github.com/react-navigation/navigation-ex/commit/442b95d))
+
+
+
+
+
 # [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.24...@react-navigation/stack@5.0.0-alpha.25) (2019-10-15)


--- a/packages/stack/package.json
+++ b/packages/stack/package.json
@@ -10,7 +10,7 @@
    "android",
    "stack"
  ],
-  "version": "5.0.0-alpha.25",
+  "version": "5.0.0-alpha.30",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -33,7 +33,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@react-navigation/routers": "^5.0.0-alpha.10"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
@@ -46,7 +46,7 @@
    "react-native-gesture-handler": "^1.3.0",
    "react-native-reanimated": "^1.3.0",
    "react-native-safe-area-context": "^0.3.6",
-    "react-native-screens": "^2.0.0-alpha.3",
+    "react-native-screens": "^2.0.0-alpha.6",
    "typescript": "^3.6.3"
  },
  "peerDependencies": {
@@ -57,7 +57,7 @@
    "react-native-gesture-handler": "^1.0.0",
    "react-native-reanimated": "^1.0.0",
    "react-native-safe-area-context": "^0.3.6",
-    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.3"
+    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.0"
  },
  "@react-native-community/bob": {
    "source": "src",
--- a/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx
+++ b/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx
@@ -109,7 +109,12 @@ export function forFade({
    leftButtonStyle: { opacity },
    rightButtonStyle: { opacity },
    titleStyle: { opacity },
-    backgroundStyle: { opacity },
+    backgroundStyle: {
+      opacity: interpolate(progress, {
+        inputRange: [0, 1, 1.9, 2],
+        outputRange: [0, 1, 1, 0],
+      }),
+    },
  };
 }

--- a/packages/stack/src/types.tsx
+++ b/packages/stack/src/types.tsx
@@ -5,6 +5,7 @@ import {
  LayoutChangeEvent,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { EdgeInsets } from 'react-native-safe-area-context';
 import {
  NavigationProp,
  ParamListBase,
@@ -207,6 +208,10 @@ export type StackHeaderProps = {
   * Layout of the screen.
   */
  layout: Layout;
+  /**
+   * Safe area insets to use in the header, e.g. to apply extra spacing for statusbar and notch.
+   */
+  insets: EdgeInsets;
  /**
   * Object representing the current scene, such as the route object and animation progress.
   */
@@ -302,6 +307,17 @@ export type StackNavigationOptions = StackHeaderOptions &
     * Defaults to 0.3.
     */
    gestureVelocityImpact?: number;
+    /**
+     * Safe area insets for the screen. This is used to avoid elements like notch and status bar.
+     * By default, the device's safe area insets are automatically detected. You can override the behavior with this option.
+     * For example, to remove the extra spacing for status bar, pass `safeAreaInsets: { top: 0 }`.
+     */
+    safeAreaInsets?: {
+      top?: number;
+      right?: number;
+      bottom?: number;
+      left?: number;
+    };
  };

 export type StackNavigationConfig = {
--- a/packages/stack/src/views/Header/Header.tsx
+++ b/packages/stack/src/views/Header/Header.tsx
@@ -1,15 +1,19 @@
 import * as React from 'react';
 import { StackActions } from '@react-navigation/routers';
-import { useSafeArea } from 'react-native-safe-area-context';

 import HeaderSegment from './HeaderSegment';
 import { StackHeaderProps, StackHeaderTitleProps } from '../../types';
 import HeaderTitle from './HeaderTitle';

 export default React.memo(function Header(props: StackHeaderProps) {
-  const insets = useSafeArea();
-
-  const { scene, previous, layout, navigation, styleInterpolator } = props;
+  const {
+    scene,
+    previous,
+    layout,
+    insets,
+    navigation,
+    styleInterpolator,
+  } = props;
  const { options } = scene.descriptor;
  const title =
    typeof options.headerTitle !== 'function' &&
--- a/packages/stack/src/views/Header/HeaderContainer.tsx
+++ b/packages/stack/src/views/Header/HeaderContainer.tsx
@@ -6,6 +6,7 @@ import {
  ParamListBase,
 } from '@react-navigation/core';
 import { StackNavigationState } from '@react-navigation/routers';
+import { EdgeInsets } from 'react-native-safe-area-context';

 import Header from './Header';
 import { forStatic } from '../../TransitionConfigs/HeaderStyleInterpolators';
@@ -19,6 +20,7 @@ import {
 export type Props = {
  mode: 'float' | 'screen';
  layout: Layout;
+  insets: EdgeInsets;
  scenes: Array<Scene<Route<string>> | undefined>;
  state: StackNavigationState;
  getPreviousRoute: (props: {
@@ -36,6 +38,7 @@ export default function HeaderContainer({
  mode,
  scenes,
  layout,
+  insets,
  state,
  getPreviousRoute,
  onContentHeightChange,
@@ -87,6 +90,7 @@ export default function HeaderContainer({
        const props = {
          mode,
          layout,
+          insets,
          scene,
          previous,
          navigation: scene.descriptor.navigation as StackNavigationProp<
--- a/packages/stack/src/views/Header/HeaderSegment.tsx
+++ b/packages/stack/src/views/Header/HeaderSegment.tsx
@@ -42,7 +42,7 @@ type State = {
  leftLabelLayout?: Layout;
 };

-const warnIfHeaderStylesDefined = (styles: { [key: string]: any }) => {
+const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
  Object.keys(styles).forEach(styleProp => {
    const value = styles[styleProp];

--- a/packages/stack/src/views/KeyboardManager.tsx
+++ b/packages/stack/src/views/KeyboardManager.tsx
@@ -11,14 +11,27 @@ type Props = {
 };

 export default class KeyboardManager extends React.Component<Props> {
+  componentWillUnmount = () => {
+    this.clearKeyboardTimeout();
+  };
  // Numeric id of the previously focused text input
  // When a gesture didn't change the tab, we can restore the focused input with this
  private previouslyFocusedTextInput: number | null = null;
+  private startTimestamp: number = 0;
+  private keyboardTimeout: NodeJS.Timeout | undefined;
+
+  private clearKeyboardTimeout = () => {
+    if (this.keyboardTimeout !== undefined) {
+      clearTimeout(this.keyboardTimeout);
+      this.keyboardTimeout = undefined;
+    }
+  };

  private handlePageChangeStart = () => {
    if (!this.props.enabled) {
      return;
    }
+    this.clearKeyboardTimeout();

    const input = TextInput.State.currentlyFocusedField();

@@ -27,12 +40,16 @@ export default class KeyboardManager extends React.Component<Props> {

    // Store the id of this input so we can refocus it if change was cancelled
    this.previouslyFocusedTextInput = input;
+
+    // Store timestamp for touch start
+    this.startTimestamp = Date.now();
  };

  private handlePageChangeConfirm = () => {
    if (!this.props.enabled) {
      return;
    }
+    this.clearKeyboardTimeout();

    Keyboard.dismiss();

@@ -44,15 +61,29 @@ export default class KeyboardManager extends React.Component<Props> {
    if (!this.props.enabled) {
      return;
    }
+    this.clearKeyboardTimeout();

    // The page didn't change, we should restore the focus of text input
    const input = this.previouslyFocusedTextInput;

    if (input) {
-      TextInput.State.focusTextInput(input);
-    }
+      // If the interaction was super short we should make sure keyboard won't hide again.

-    this.previouslyFocusedTextInput = null;
+      // Too fast input refocus will result only in keyboard flashing on screen and hiding right away.
+      // During first ~100ms keyboard will be dismissed no matter what,
+      // so we have to make sure it won't interrupt input refocus logic.
+      // That's why when the interaction is shorter than 100ms we add delay so it won't hide once again.
+      // Subtracting timestamps makes us sure the delay is executed only when needed.
+      if (Date.now() - this.startTimestamp < 100) {
+        this.keyboardTimeout = setTimeout(() => {
+          TextInput.State.focusTextInput(input);
+          this.previouslyFocusedTextInput = null;
+        }, 100);
+      } else {
+        TextInput.State.focusTextInput(input);
+        this.previouslyFocusedTextInput = null;
+      }
+    }
  };

  render() {
--- a/packages/stack/src/views/Stack/Card.tsx
+++ b/packages/stack/src/views/Stack/Card.tsx
@@ -281,19 +281,11 @@ export default class Card extends React.Component<Props> {
    // during running. However, we need to invoke listener onClose
    // manually in this case
    if (this.isRunningAnimation || this.noAnimationStartedSoFar) {
-      if (this.isVisibleValue) {
-        this.props.onOpen(false);
-      } else {
-        this.props.onClose(false);
-      }
+      this.props.onClose(false);
    }
  }

  private isVisible = new Value<Binary>(TRUE);
-  private gestureVelocityImpact = new Value<number>(
-    this.props.gestureVelocityImpact
-  );
-  private isVisibleValue: Binary = TRUE;
  private nextIsVisible = new Value<Binary | -1>(UNSET);

  private isClosing = new Value<Binary>(FALSE);
@@ -313,7 +305,11 @@ export default class Card extends React.Component<Props> {
    height: new Value(this.props.layout.height),
  };

-  openingSpecConfig =
+  private gestureVelocityImpact = new Value<number>(
+    this.props.gestureVelocityImpact
+  );
+
+  private openingSpecConfig =
    this.props.transitionSpec.open.animation === 'timing'
      ? transformTimingConfigToAnimatedValues(
          this.props.transitionSpec.open.config
@@ -322,7 +318,7 @@ export default class Card extends React.Component<Props> {
          this.props.transitionSpec.open.config
        );

-  closingSpecConfig =
+  private closingSpecConfig =
    this.props.transitionSpec.close.animation === 'timing'
      ? transformTimingConfigToAnimatedValues(
          this.props.transitionSpec.close.config
@@ -385,7 +381,10 @@ export default class Card extends React.Component<Props> {
      this.props.current,
      this.props.next,
      this.props.layout,
-      this.props.insets
+      this.props.insets.top,
+      this.props.insets.right,
+      this.props.insets.bottom,
+      this.props.insets.left
    );
  };

@@ -530,19 +529,9 @@ export default class Card extends React.Component<Props> {
    ),
  ];

-  private changeVisiblityExec = onChange(
-    this.isVisible,
-    call([this.isVisible], ([isVisible]) => (this.isVisibleValue = isVisible))
-  );
-
  private execNoGesture = block([
    ...this.exec,
    this.runTransition(this.isVisible),
-    onChange(
-      this.isVisible,
-      call([this.isVisible], ([isVisible]) => (this.isVisibleValue = isVisible))
-    ),
-    this.changeVisiblityExec,
  ]);

  private execWithGesture = block([
@@ -651,7 +640,6 @@ export default class Card extends React.Component<Props> {
        ),
      ]
    ),
-    this.changeVisiblityExec,
  ]);

  private handleGestureEventHorizontal = Animated.event([
@@ -684,7 +672,10 @@ export default class Card extends React.Component<Props> {
      current: Animated.Node<number>,
      next: Animated.Node<number> | undefined,
      layout: Layout,
-      insets: EdgeInsets
+      insetTop: number,
+      insetRight: number,
+      insetBottom: number,
+      insetLeft: number
    ) =>
      styleInterpolator({
        index,
@@ -694,7 +685,12 @@ export default class Card extends React.Component<Props> {
        layouts: {
          screen: layout,
        },
-        insets,
+        insets: {
+          top: insetTop,
+          right: insetRight,
+          bottom: insetBottom,
+          left: insetLeft,
+        },
      })
  );

@@ -708,19 +704,25 @@ export default class Card extends React.Component<Props> {
    this.props.current,
    this.props.next,
    this.props.layout,
-    this.props.insets
+    this.props.insets.top,
+    this.props.insets.right,
+    this.props.insets.bottom,
+    this.props.insets.left
  );

  private gestureActivationCriteria() {
    const { layout, gestureDirection, gestureResponseDistance } = this.props;

-    // Doesn't make sense for a response distance of 0, so this works fine
    const distance =
      gestureDirection === 'vertical'
-        ? (gestureResponseDistance && gestureResponseDistance.vertical) ||
-          GESTURE_RESPONSE_DISTANCE_VERTICAL
-        : (gestureResponseDistance && gestureResponseDistance.horizontal) ||
-          GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
+        ? gestureResponseDistance &&
+          gestureResponseDistance.vertical !== undefined
+          ? gestureResponseDistance.vertical
+          : GESTURE_RESPONSE_DISTANCE_VERTICAL
+        : gestureResponseDistance &&
+          gestureResponseDistance.horizontal !== undefined
+        ? gestureResponseDistance.horizontal
+        : GESTURE_RESPONSE_DISTANCE_HORIZONTAL;

    if (gestureDirection === 'vertical') {
      return {
@@ -776,7 +778,10 @@ export default class Card extends React.Component<Props> {
        current,
        next,
        layout,
-        insets
+        insets.top,
+        insets.right,
+        insets.bottom,
+        insets.left
      );
    }

--- a/packages/stack/src/views/Stack/Stack.tsx
+++ b/packages/stack/src/views/Stack/Stack.tsx
@@ -65,7 +65,7 @@ type State = {
  scenes: Scene<Route<string>>[];
  progress: ProgressValues;
  layout: Layout;
-  floatingHeaderHeights: { [key: string]: number };
+  floatingHeaderHeights: Record<string, number>;
 };

 const dimensions = Dimensions.get('window');
@@ -117,19 +117,22 @@ const FALLBACK_DESCRIPTOR = Object.freeze({ options: {} });
 const getFloatingHeaderHeights = (
  routes: Route<string>[],
  insets: EdgeInsets,
+  descriptors: StackDescriptorMap,
  layout: Layout,
-  previous: { [key: string]: number }
+  previous: Record<string, number>
 ) => {
  const defaultHeaderHeight = getDefaultHeaderHeight(layout, insets);

-  return routes.reduce(
-    (acc, curr) => {
-      acc[curr.key] = previous[curr.key] || defaultHeaderHeight;
+  return routes.reduce<Record<string, number>>((acc, curr) => {
+    const { options = {} } = descriptors[curr.key] || {};
+    const { height = previous[curr.key] } = StyleSheet.flatten(
+      options.headerStyle || {}
+    );

-      return acc;
-    },
-    {} as { [key: string]: number }
-  );
+    acc[curr.key] = typeof height === 'number' ? height : defaultHeaderHeight;
+
+    return acc;
+  }, {});
 };

 export default class Stack extends React.Component<Props, State> {
@@ -141,24 +144,21 @@ export default class Stack extends React.Component<Props, State> {
      return null;
    }

-    const progress = props.routes.reduce(
-      (acc, curr) => {
-        const descriptor = props.descriptors[curr.key];
+    const progress = props.routes.reduce<ProgressValues>((acc, curr) => {
+      const descriptor = props.descriptors[curr.key];

-        acc[curr.key] =
-          state.progress[curr.key] ||
-          new Animated.Value(
-            props.openingRouteKeys.includes(curr.key) &&
-            descriptor &&
-            descriptor.options.animationEnabled !== false
-              ? 0
-              : 1
-          );
+      acc[curr.key] =
+        state.progress[curr.key] ||
+        new Animated.Value(
+          props.openingRouteKeys.includes(curr.key) &&
+          descriptor &&
+          descriptor.options.animationEnabled !== false
+            ? 0
+            : 1
+        );

-        return acc;
-      },
-      {} as ProgressValues
-    );
+      return acc;
+    }, {});

    return {
      routes: props.routes,
@@ -205,6 +205,7 @@ export default class Stack extends React.Component<Props, State> {
      floatingHeaderHeights: getFloatingHeaderHeights(
        props.routes,
        props.insets,
+        state.descriptors,
        state.layout,
        state.floatingHeaderHeights
      ),
@@ -237,15 +238,16 @@ export default class Stack extends React.Component<Props, State> {

    const layout = { width, height };

-    this.setState({
+    this.setState(state => ({
      layout,
      floatingHeaderHeights: getFloatingHeaderHeights(
        this.props.routes,
        this.props.insets,
+        state.descriptors,
        layout,
        {}
      ),
-    });
+    }));
  };

  private handleFloatingHeaderLayout = ({
@@ -327,6 +329,13 @@ export default class Stack extends React.Component<Props, State> {
      };
    }

+    const {
+      top = insets.top,
+      right = insets.right,
+      bottom = insets.bottom,
+      left = insets.left,
+    } = focusedOptions.safeAreaInsets || {};
+
    return (
      <React.Fragment>
        <MaybeScreenContainer
@@ -353,6 +362,7 @@ export default class Stack extends React.Component<Props, State> {
                : 0;

            const {
+              safeAreaInsets,
              headerShown,
              headerTransparent,
              cardTransparent,
@@ -401,6 +411,13 @@ export default class Stack extends React.Component<Props, State> {
              }
            }

+            const {
+              top: safeAreaInsetTop = insets.top,
+              right: safeAreaInsetRight = insets.right,
+              bottom: safeAreaInsetBottom = insets.bottom,
+              left: safeAreaInsetLeft = insets.left,
+            } = safeAreaInsets || {};
+
            return (
              <MaybeScreen
                key={route.key}
@@ -415,12 +432,15 @@ export default class Stack extends React.Component<Props, State> {
                  focused={focused}
                  closing={closingRouteKeys.includes(route.key)}
                  layout={layout}
-                  insets={insets}
                  current={current}
                  scene={scene}
                  previousScene={scenes[index - 1]}
                  navigation={navigation}
                  state={state}
+                  safeAreaInsetTop={safeAreaInsetTop}
+                  safeAreaInsetRight={safeAreaInsetRight}
+                  safeAreaInsetBottom={safeAreaInsetBottom}
+                  safeAreaInsetLeft={safeAreaInsetLeft}
                  cardTransparent={cardTransparent}
                  cardOverlayEnabled={cardOverlayEnabled}
                  cardShadowEnabled={cardShadowEnabled}
@@ -454,6 +474,7 @@ export default class Stack extends React.Component<Props, State> {
          ? renderHeader({
              mode: 'float',
              layout,
+              insets: { top, right, bottom, left },
              scenes,
              state,
              getPreviousRoute,
--- a/packages/stack/src/views/Stack/StackItem.tsx
+++ b/packages/stack/src/views/Stack/StackItem.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { EdgeInsets } from 'react-native-safe-area-context';
 import { StackNavigationState } from '@react-navigation/routers';
 import { Route } from '@react-navigation/core';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
@@ -20,12 +19,15 @@ type Props = TransitionPreset & {
  focused: boolean;
  closing: boolean;
  layout: Layout;
-  insets: EdgeInsets;
  current: Animated.Value<number>;
  previousScene?: Scene<Route<string>>;
  scene: Scene<Route<string>>;
  state: StackNavigationState;
  navigation: StackNavigationHelpers;
+  safeAreaInsetTop: number;
+  safeAreaInsetRight: number;
+  safeAreaInsetBottom: number;
+  safeAreaInsetLeft: number;
  cardTransparent?: boolean;
  cardOverlayEnabled?: boolean;
  cardShadowEnabled?: boolean;
@@ -96,7 +98,6 @@ export default class StackItem extends React.PureComponent<Props> {
    const {
      index,
      layout,
-      insets,
      active,
      focused,
      closing,
@@ -104,6 +105,10 @@ export default class StackItem extends React.PureComponent<Props> {
      state,
      scene,
      previousScene,
+      safeAreaInsetTop,
+      safeAreaInsetRight,
+      safeAreaInsetBottom,
+      safeAreaInsetLeft,
      cardTransparent,
      cardOverlayEnabled,
      cardShadowEnabled,
@@ -126,6 +131,13 @@ export default class StackItem extends React.PureComponent<Props> {
      headerStyleInterpolator,
    } = this.props;

+    const insets = {
+      top: safeAreaInsetTop,
+      right: safeAreaInsetRight,
+      bottom: safeAreaInsetBottom,
+      left: safeAreaInsetLeft,
+    };
+
    return (
      <Card
        index={index}
@@ -168,6 +180,7 @@ export default class StackItem extends React.PureComponent<Props> {
            ? renderHeader({
                mode: 'screen',
                layout,
+                insets,
                scenes: [previousScene, scene],
                state,
                getPreviousRoute,
--- a/packages/stack/src/views/Stack/StackView.tsx
+++ b/packages/stack/src/views/Stack/StackView.tsx
@@ -53,14 +53,14 @@ class StackView extends React.Component<Props, State> {
    // If there was no change in routes, we don't need to compute anything
    if (props.state.routes === state.previousRoutes && state.routes.length) {
      if (props.descriptors !== state.previousDescriptors) {
-        const descriptors = state.routes.reduce(
+        const descriptors = state.routes.reduce<StackDescriptorMap>(
          (acc, route) => {
            acc[route.key] =
              props.descriptors[route.key] || state.descriptors[route.key];

            return acc;
          },
-          {} as StackDescriptorMap
+          {}
        );

        return {
@@ -195,15 +195,12 @@ class StackView extends React.Component<Props, State> {
      throw new Error(`There should always be at least one route.`);
    }

-    const descriptors = routes.reduce(
-      (acc, route) => {
-        acc[route.key] =
-          props.descriptors[route.key] || state.descriptors[route.key];
+    const descriptors = routes.reduce<StackDescriptorMap>((acc, route) => {
+      acc[route.key] =
+        props.descriptors[route.key] || state.descriptors[route.key];

-        return acc;
-      },
-      {} as StackDescriptorMap
-    );
+      return acc;
+    }, {});

    return {
      routes,
--- a/yarn.lock
+++ b/yarn.lock
@@ -864,12 +864,11 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

-"@callstack/react-theme-provider@^3.0.2":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.3.tgz#f964dda28cd6e731c3fbcf916b0579c6f9fb2db7"
-  integrity sha512-B+9JBK7zsND/AdVkjwHvbb4cR05fJofLFG30hOeoXke8WkKAWN36yFljauAhI8qwlXlGFGZMYE1wQvsqBSccrA==
+"@callstack/react-theme-provider@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.5.tgz#a173e455e9603c9c45357a3b6ace1273086527ca"
+  integrity sha512-Iec+ybWN0FvNj87sD3oWo/49edGUP0UOSdMnzCJEFJIDYr992ECIuOV89burAAh2/ibPCxgLiK6dmgv2mO/8Tg==
  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.1"
    deepmerge "^3.2.0"
    hoist-non-react-statics "^3.3.0"

@@ -2530,14 +2529,6 @@
    "@types/minimatch" "*"
    "@types/node" "*"

-"@types/hoist-non-react-statics@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
-  dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-
 "@types/http-proxy-middleware@*":
  version "0.19.3"
  resolved "https://registry.yarnpkg.com/@types/http-proxy-middleware/-/http-proxy-middleware-0.19.3.tgz#b2eb96fbc0f9ac7250b5d9c4c53aade049497d03"
@@ -13111,12 +13102,12 @@ react-native-gesture-handler@~1.3.0:
    invariant "^2.2.2"
    prop-types "^15.5.10"

-react-native-paper@^3.0.0-alpha.3:
-  version "3.0.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-3.0.0-alpha.5.tgz#2a3e23c52ec717d7c6a1df1e7adc1005611b08a2"
-  integrity sha512-LSsmhCIo2EgT9azd1usjBmfGBgNkKOMdHWkFJnwmGrXo/JMxhlD/KMt+GRTz4ZjFWmJu3GO635ihYleSJhW6Mg==
+react-native-paper@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-3.1.1.tgz#971f3097eecb4c061bf10768182b8985442a45ab"
+  integrity sha512-GHJ/2z/1Nzm4Y1g22Znu09BV7SV4tsR7h/9HrXuj3kFrsJo7zt5e+t/ELLLvycGEo4z1vhV6MtjtIk/PSaKoDA==
  dependencies:
-    "@callstack/react-theme-provider" "^3.0.2"
+    "@callstack/react-theme-provider" "^3.0.5"
    color "^3.1.2"
    react-native-safe-area-view "^0.12.0"

@@ -13142,17 +13133,10 @@ react-native-safe-area-view@^0.12.0:
  dependencies:
    hoist-non-react-statics "^2.3.1"

-react-native-screens@2.0.0-alpha.4:
-  version "2.0.0-alpha.4"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.4.tgz#cf869bba2a5940f0b71d1dde9cf4e545cc0e97d0"
-  integrity sha512-/MdbyDwmvGncnyH4TVPB4JAawtGVZtyG5NOAbJ14wVmsRZhOqVABmiRP7jGO9tKOCENnoVDKspEw24u66G7EMw==
-  dependencies:
-    debounce "^1.2.0"
-
-react-native-screens@^2.0.0-alpha.3:
-  version "2.0.0-alpha.3"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.3.tgz#af86f265b2fb4293b626cf4396db7743de5a54af"
-  integrity sha512-SA3uGrc3UM1V9y6gfVU1UPf1a3dMyQCj3p5J7y6g81Of8rV5Pc34s6fWzOKNAWgOiviAktZB1z7Jngdl7+acZg==
+react-native-screens@^2.0.0-alpha.6:
+  version "2.0.0-alpha.6"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.6.tgz#238cf7e97ff6008cca75dd1dd4a5a854bce81d57"
+  integrity sha512-5m59glvDDzQvzdBymIn6GfCnzk/9kaxkREEKLVMdANtZlqIuH3Jbgoc+56pcX5LVSZCMaSozPAQBcLaMWO2JUA==
  dependencies:
    debounce "^1.2.0"
Author	SHA1	Message	Date
satyajit.happy	aa40130266	chore: publish - @react-navigation/bottom-tabs@5.0.0-alpha.16 - @react-navigation/compat@5.0.0-alpha.10 - @react-navigation/core@5.0.0-alpha.18 - @react-navigation/drawer@5.0.0-alpha.17 - @react-navigation/example@5.0.0-alpha.17 - @react-navigation/material-bottom-tabs@5.0.0-alpha.16 - @react-navigation/material-top-tabs@5.0.0-alpha.13 - @react-navigation/native-stack@5.0.0-alpha.5 - @react-navigation/routers@5.0.0-alpha.10 - @react-navigation/stack@5.0.0-alpha.30	2019-10-29 21:20:18 +01:00
satyajit.happy	7635373366	fix: use index of first route when rehydrating tab state	2019-10-29 21:15:02 +01:00
satyajit.happy	941f4e2dec	chore: update react-native-paper and screens	2019-10-29 02:42:37 +01:00
osdnk	876c3183e1	fix: make clearKeyboardTimeout private	2019-10-25 09:29:36 +02:00
satyajit.happy	1cc31bf900	chore: fix cocoa pods	2019-10-24 19:32:33 +02:00
satyajit.happy	8f16085808	fix: improve type annotation for screens	2019-10-24 18:56:26 +02:00
satyajit.happy	58fbfdf5c3	chore: remove log	2019-10-24 18:56:26 +02:00
osdnk	07bfc86327	fix: keyboard manager in stack for fast swipe	2019-10-24 18:50:16 +02:00
osdnk	e54d87c41c	chore: publish - @react-navigation/stack@5.0.0-alpha.29	2019-10-22 21:06:37 +02:00
osdnk	225e760a54	fix: conditions in gesture direction	2019-10-22 21:06:02 +02:00
satyajit.happy	f9cfbd01d8	chore: publish - @react-navigation/bottom-tabs@5.0.0-alpha.15 - @react-navigation/example@5.0.0-alpha.16	2019-10-22 15:45:16 +02:00
satyajit.happy	3bf46e1ad2	refactor: don't pass orientation to label	2019-10-22 15:30:49 +02:00
satyajit.happy	de2b6d8715	chore: publish - @react-navigation/compat@5.0.0-alpha.9 - @react-navigation/core@5.0.0-alpha.17 - @react-navigation/drawer@5.0.0-alpha.16 - @react-navigation/example@5.0.0-alpha.15 - @react-navigation/material-bottom-tabs@5.0.0-alpha.15 - @react-navigation/native-stack@5.0.0-alpha.4 - @react-navigation/native@5.0.0-alpha.13 - @react-navigation/stack@5.0.0-alpha.28	2019-10-22 10:58:35 +02:00
Satyajit Sahoo	f22abb726c	fix: don't fire onOpen when screen is unmounting (#137 ) I can't think of a scenario a screen would unmount when opening. So it's probably a safe-bet to always call onClose. Fixes #136	2019-10-22 09:26:59 +02:00
satyajit.happy	031c4d2378	fix: don't keep unfocused header backgrounds visible	2019-10-22 04:54:38 +02:00
satyajit.happy	2b5955efbe	refactor: use Record type for objects	2019-10-22 00:53:11 +02:00
satyajit.happy	70f7e7a7c0	ci: update CI config	2019-10-21 15:34:02 +02:00
David	6cf1a041b2	feat(native-stack): add support for large title attributes (#135 ) Co-Authored-By: Satyajit Sahoo <satyajit.happy@gmail.com>	2019-10-21 15:25:50 +02:00
osdnk	0d8cdc8a27	fix: navigation drawer sometimes not closing when pressed outside	2019-10-21 11:26:30 +02:00
satyajit.happy	2680b461a2	chore: publish - @react-navigation/native-stack@5.0.0-alpha.3	2019-10-18 19:16:33 +02:00
satyajit.happy	fb726eede3	fix: remove top margin when header is hidden in native stack. fixes #131	2019-10-18 19:15:43 +02:00
satyajit.happy	3aaf6eb648	chore: publish - @react-navigation/core@5.0.0-alpha.16 - @react-navigation/native-stack@5.0.0-alpha.2 - @react-navigation/stack@5.0.0-alpha.27	2019-10-18 16:44:00 +02:00
Janic Duplessis	477c08858d	fix: fix header font size config in native stack (#128 ) Oups copy paste mistake :o	2019-10-18 16:43:04 +02:00
satyajit.happy	300791ab49	feat: add an option to override safe area insets	2019-10-18 16:20:53 +02:00
satyajit.happy	3e92e22941	fix: rehydrate state before using it	2019-10-18 16:06:21 +02:00
Satyajit Sahoo	a543f1bfc3	feat: make it easier to navigate to a specific route in navigator (#114 ) We now use the `params` of the route to determine `initialRouteName` and `initialParams` of a navigator. So you can do something like this: ```js navigation.push('Auth', { name: 'Login', params: { token 'xxx' } }) ``` This will navigate to the `Login` screen inside the `Auth` navigator. Closes #90	2019-10-18 15:16:19 +02:00
satyajit.happy	cd5f355bd0	chore: publish - @react-navigation/drawer@5.0.0-alpha.15 - @react-navigation/example@5.0.0-alpha.14 - @react-navigation/material-bottom-tabs@5.0.0-alpha.14 - @react-navigation/stack@5.0.0-alpha.26	2019-10-18 01:57:14 +02:00
satyajit.happy	cab616069f	fix: fix passing content options in drawer	2019-10-18 01:56:04 +02:00
satyajit.happy	f90e00cc93	chore: update paper so types work	2019-10-17 22:52:48 +02:00
satyajit.happy	731cf7d5b1	fix: fix incorrect type	2019-10-16 22:59:45 +02:00
Sirui Li	c6d0c19b49	fix: don't fade incoming background when fading header (#127 )	2019-10-16 22:58:31 +02:00
satyajit.happy	442b95d9e4	fix: use header height from style if specified	2019-10-16 15:02:39 +02:00