chore: publish

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

.circleci/config.yml

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

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

packages/compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.0.0-alpha.8",
+  "version": "5.0.0-alpha.9",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/compat/src/createCompatNavigatorFactory.tsx

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

packages/core/CHANGELOG.md

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

packages/core/package.json

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

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

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

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

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

packages/core/src/getPathFromState.tsx

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

packages/core/src/getStateFromPath.tsx

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

packages/core/src/types.tsx

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

packages/core/src/useDescriptors.tsx

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

packages/core/src/useEventEmitter.tsx

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

packages/core/src/useNavigationBuilder.tsx

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

packages/core/src/useNavigationCache.tsx

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

packages/core/src/useNavigationHelpers.tsx

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

packages/drawer/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.15...@react-navigation/drawer@5.0.0-alpha.16) (2019-10-22)
+
+
+### Bug Fixes
+
+* navigation drawer sometimes not closing when pressed outside ([0d8cdc8](https://github.com/react-navigation/navigation-ex/commit/0d8cdc8))
+
+
+
+
+
+# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.14...@react-navigation/drawer@5.0.0-alpha.15) (2019-10-17)
+
+
+### Bug Fixes
+
+* fix passing content options in drawer ([cab6160](https://github.com/react-navigation/navigation-ex/commit/cab6160))
+
+
+
+
+
 # [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.13...@react-navigation/drawer@5.0.0-alpha.14) (2019-10-15)
 
 

packages/drawer/package.json

@@ -11,7 +11,7 @@
     "material",
     "drawer"
   ],
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.16",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -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.5",
     "typescript": "^3.6.3"
   },
   "peerDependencies": {
@@ -56,7 +56,7 @@
     "react-native-gesture-handler": "^1.0.0",
     "react-native-reanimated": "^1.0.0",
     "react-native-safe-area-context": "^0.3.6",
-    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.3"
+    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.0"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/drawer/src/views/Drawer.tsx

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

packages/drawer/src/views/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}
       />
     );
   };

packages/example/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.15](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.14...@react-navigation/example@5.0.0-alpha.15) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.14](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.13...@react-navigation/example@5.0.0-alpha.14) (2019-10-17)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
 # [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.12...@react-navigation/example@5.0.0-alpha.13) (2019-10-15)
 
 

packages/example/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.15",
   "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.0.0-alpha.7",
     "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.5",
     "react-native-tab-view": "2.10.0",
     "react-native-unimodules": "^0.7.0-rc.1",
     "react-native-web": "^0.11.7",

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

packages/material-bottom-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.13",
+  "version": "5.0.0-alpha.15",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -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.0.0-alpha.7",
     "react-native-vector-icons": "^6.6.0",
     "typescript": "^3.6.3"
   },
@@ -52,7 +52,7 @@
     "@react-navigation/core": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
-    "react-native-paper": "^3.0.0-alpha.3",
+    "react-native-paper": "^3.0.0-alpha.0",
     "react-native-vector-icons": "^6.0.0"
   },
   "@react-native-community/bob": {

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

@@ -96,6 +96,16 @@ export type MaterialBottomTabDescriptorMap = {
 export type MaterialBottomTabNavigationConfig = Partial<
   Omit<
     React.ComponentProps<typeof BottomNavigation>,
-    'navigationState' | 'onIndexChange' | 'renderScene'
+    | 'navigationState'
+    | 'onIndexChange'
+    | 'onTabPress'
+    | 'renderScene'
+    | 'renderLabel'
+    | 'renderIcon'
+    | 'getAccessibilityLabel'
+    | 'getBadge'
+    | 'getColor'
+    | 'getLabelText'
+    | 'getTestID'
   >
 >;

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

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

packages/native-stack/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.3...@react-navigation/native-stack@5.0.0-alpha.4) (2019-10-22)
+
+
+### Features
+
+* **native-stack:** add support for large title attributes ([#135](https://github.com/react-navigation/navigation-ex/issues/135)) ([6cf1a04](https://github.com/react-navigation/navigation-ex/commit/6cf1a04))
+
+
+
+
+
+# [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.2...@react-navigation/native-stack@5.0.0-alpha.3) (2019-10-18)
+
+
+### Bug Fixes
+
+* remove top margin when header is hidden in native stack. fixes [#131](https://github.com/react-navigation/navigation-ex/issues/131) ([fb726ee](https://github.com/react-navigation/navigation-ex/commit/fb726ee))
+
+
+
+
+
+# [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.1...@react-navigation/native-stack@5.0.0-alpha.2) (2019-10-18)
+
+
+### Bug Fixes
+
+* fix header font size config in native stack ([#128](https://github.com/react-navigation/navigation-ex/issues/128)) ([477c088](https://github.com/react-navigation/navigation-ex/commit/477c088))
+
+
+
+
+
 # 5.0.0-alpha.1 (2019-10-15)
 
 

packages/native-stack/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.4",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,14 +34,14 @@
   "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.5",
     "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.5"
   },
   "@react-native-community/bob": {
     "source": "src",

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

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 ? (

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,

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)
 
 

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",

packages/native/src/useLinking.tsx

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

packages/stack/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.27...@react-navigation/stack@5.0.0-alpha.28) (2019-10-22)
+
+
+### Bug Fixes
+
+* don't fire onOpen when screen is unmounting ([#137](https://github.com/react-navigation/navigation-ex/issues/137)) ([f22abb7](https://github.com/react-navigation/navigation-ex/commit/f22abb7)), closes [#136](https://github.com/react-navigation/navigation-ex/issues/136)
+* don't keep unfocused header backgrounds visible ([031c4d2](https://github.com/react-navigation/navigation-ex/commit/031c4d2))
+
+
+
+
+
+# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.26...@react-navigation/stack@5.0.0-alpha.27) (2019-10-18)
+
+
+### Features
+
+* add an option to override safe area insets ([300791a](https://github.com/react-navigation/navigation-ex/commit/300791a))
+
+
+
+
+
+# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.25...@react-navigation/stack@5.0.0-alpha.26) (2019-10-17)
+
+
+### Bug Fixes
+
+* don't fade incoming background when fading header ([#127](https://github.com/react-navigation/navigation-ex/issues/127)) ([c6d0c19](https://github.com/react-navigation/navigation-ex/commit/c6d0c19))
+* fix incorrect type ([731cf7d](https://github.com/react-navigation/navigation-ex/commit/731cf7d))
+* use header height from style if specified ([442b95d](https://github.com/react-navigation/navigation-ex/commit/442b95d))
+
+
+
+
+
 # [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.24...@react-navigation/stack@5.0.0-alpha.25) (2019-10-15)
 
 

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.25",
+  "version": "5.0.0-alpha.28",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -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.5",
     "typescript": "^3.6.3"
   },
   "peerDependencies": {
@@ -57,7 +57,7 @@
     "react-native-gesture-handler": "^1.0.0",
     "react-native-reanimated": "^1.0.0",
     "react-native-safe-area-context": "^0.3.6",
-    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.3"
+    "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.0"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx

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

packages/stack/src/types.tsx

@@ -5,6 +5,7 @@ import {
   LayoutChangeEvent,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { EdgeInsets } from 'react-native-safe-area-context';
 import {
   NavigationProp,
   ParamListBase,
@@ -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 = {

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

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

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

@@ -6,6 +6,7 @@ import {
   ParamListBase,
 } from '@react-navigation/core';
 import { StackNavigationState } from '@react-navigation/routers';
+import { EdgeInsets } from 'react-native-safe-area-context';
 
 import Header from './Header';
 import { forStatic } from '../../TransitionConfigs/HeaderStyleInterpolators';
@@ -19,6 +20,7 @@ import {
 export type Props = {
   mode: 'float' | 'screen';
   layout: Layout;
+  insets: EdgeInsets;
   scenes: Array<Scene<Route<string>> | undefined>;
   state: StackNavigationState;
   getPreviousRoute: (props: {
@@ -36,6 +38,7 @@ export default function HeaderContainer({
   mode,
   scenes,
   layout,
+  insets,
   state,
   getPreviousRoute,
   onContentHeightChange,
@@ -87,6 +90,7 @@ export default function HeaderContainer({
         const props = {
           mode,
           layout,
+          insets,
           scene,
           previous,
           navigation: scene.descriptor.navigation as StackNavigationProp<

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

@@ -42,7 +42,7 @@ type State = {
   leftLabelLayout?: Layout;
 };
 
-const warnIfHeaderStylesDefined = (styles: { [key: string]: any }) => {
+const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
   Object.keys(styles).forEach(styleProp => {
     const value = styles[styleProp];
 

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,7 +704,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
   );
 
   private gestureActivationCriteria() {
@@ -776,7 +775,10 @@ export default class Card extends React.Component<Props> {
         current,
         next,
         layout,
-        insets
+        insets.top,
+        insets.right,
+        insets.bottom,
+        insets.left
       );
     }
 

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

@@ -65,7 +65,7 @@ type State = {
   scenes: Scene<Route<string>>[];
   progress: ProgressValues;
   layout: Layout;
-  floatingHeaderHeights: { [key: string]: number };
+  floatingHeaderHeights: Record<string, number>;
 };
 
 const dimensions = Dimensions.get('window');
@@ -117,19 +117,22 @@ const FALLBACK_DESCRIPTOR = Object.freeze({ options: {} });
 const getFloatingHeaderHeights = (
   routes: Route<string>[],
   insets: EdgeInsets,
+  descriptors: StackDescriptorMap,
   layout: Layout,
-  previous: { [key: string]: number }
+  previous: Record<string, number>
 ) => {
   const defaultHeaderHeight = getDefaultHeaderHeight(layout, insets);
 
-  return routes.reduce(
-    (acc, curr) => {
-      acc[curr.key] = previous[curr.key] || defaultHeaderHeight;
+  return routes.reduce<Record<string, number>>((acc, curr) => {
+    const { options = {} } = descriptors[curr.key] || {};
+    const { height = previous[curr.key] } = StyleSheet.flatten(
+      options.headerStyle || {}
+    );
 
-      return acc;
-    },
-    {} as { [key: string]: number }
-  );
+    acc[curr.key] = typeof height === 'number' ? height : defaultHeaderHeight;
+
+    return acc;
+  }, {});
 };
 
 export default class Stack extends React.Component<Props, State> {
@@ -141,24 +144,21 @@ export default class Stack extends React.Component<Props, State> {
       return null;
     }
 
-    const progress = props.routes.reduce(
-      (acc, curr) => {
-        const descriptor = props.descriptors[curr.key];
+    const progress = props.routes.reduce<ProgressValues>((acc, curr) => {
+      const descriptor = props.descriptors[curr.key];
 
-        acc[curr.key] =
-          state.progress[curr.key] ||
-          new Animated.Value(
-            props.openingRouteKeys.includes(curr.key) &&
-            descriptor &&
-            descriptor.options.animationEnabled !== false
-              ? 0
-              : 1
-          );
+      acc[curr.key] =
+        state.progress[curr.key] ||
+        new Animated.Value(
+          props.openingRouteKeys.includes(curr.key) &&
+          descriptor &&
+          descriptor.options.animationEnabled !== false
+            ? 0
+            : 1
+        );
 
-        return acc;
-      },
-      {} as ProgressValues
-    );
+      return acc;
+    }, {});
 
     return {
       routes: props.routes,
@@ -205,6 +205,7 @@ export default class Stack extends React.Component<Props, State> {
       floatingHeaderHeights: getFloatingHeaderHeights(
         props.routes,
         props.insets,
+        state.descriptors,
         state.layout,
         state.floatingHeaderHeights
       ),
@@ -237,15 +238,16 @@ export default class Stack extends React.Component<Props, State> {
 
     const layout = { width, height };
 
-    this.setState({
+    this.setState(state => ({
       layout,
       floatingHeaderHeights: getFloatingHeaderHeights(
         this.props.routes,
         this.props.insets,
+        state.descriptors,
         layout,
         {}
       ),
-    });
+    }));
   };
 
   private handleFloatingHeaderLayout = ({
@@ -327,6 +329,13 @@ export default class Stack extends React.Component<Props, State> {
       };
     }
 
+    const {
+      top = insets.top,
+      right = insets.right,
+      bottom = insets.bottom,
+      left = insets.left,
+    } = focusedOptions.safeAreaInsets || {};
+
     return (
       <React.Fragment>
         <MaybeScreenContainer
@@ -353,6 +362,7 @@ export default class Stack extends React.Component<Props, State> {
                 : 0;
 
             const {
+              safeAreaInsets,
               headerShown,
               headerTransparent,
               cardTransparent,
@@ -401,6 +411,13 @@ export default class Stack extends React.Component<Props, State> {
               }
             }
 
+            const {
+              top: safeAreaInsetTop = insets.top,
+              right: safeAreaInsetRight = insets.right,
+              bottom: safeAreaInsetBottom = insets.bottom,
+              left: safeAreaInsetLeft = insets.left,
+            } = safeAreaInsets || {};
+
             return (
               <MaybeScreen
                 key={route.key}
@@ -415,12 +432,15 @@ export default class Stack extends React.Component<Props, State> {
                   focused={focused}
                   closing={closingRouteKeys.includes(route.key)}
                   layout={layout}
-                  insets={insets}
                   current={current}
                   scene={scene}
                   previousScene={scenes[index - 1]}
                   navigation={navigation}
                   state={state}
+                  safeAreaInsetTop={safeAreaInsetTop}
+                  safeAreaInsetRight={safeAreaInsetRight}
+                  safeAreaInsetBottom={safeAreaInsetBottom}
+                  safeAreaInsetLeft={safeAreaInsetLeft}
                   cardTransparent={cardTransparent}
                   cardOverlayEnabled={cardOverlayEnabled}
                   cardShadowEnabled={cardShadowEnabled}
@@ -454,6 +474,7 @@ export default class Stack extends React.Component<Props, State> {
           ? renderHeader({
               mode: 'float',
               layout,
+              insets: { top, right, bottom, left },
               scenes,
               state,
               getPreviousRoute,

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { EdgeInsets } from 'react-native-safe-area-context';
 import { StackNavigationState } from '@react-navigation/routers';
 import { Route } from '@react-navigation/core';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
@@ -20,12 +19,15 @@ type Props = TransitionPreset & {
   focused: boolean;
   closing: boolean;
   layout: Layout;
-  insets: EdgeInsets;
   current: Animated.Value<number>;
   previousScene?: Scene<Route<string>>;
   scene: Scene<Route<string>>;
   state: StackNavigationState;
   navigation: StackNavigationHelpers;
+  safeAreaInsetTop: number;
+  safeAreaInsetRight: number;
+  safeAreaInsetBottom: number;
+  safeAreaInsetLeft: number;
   cardTransparent?: boolean;
   cardOverlayEnabled?: boolean;
   cardShadowEnabled?: boolean;
@@ -96,7 +98,6 @@ export default class StackItem extends React.PureComponent<Props> {
     const {
       index,
       layout,
-      insets,
       active,
       focused,
       closing,
@@ -104,6 +105,10 @@ export default class StackItem extends React.PureComponent<Props> {
       state,
       scene,
       previousScene,
+      safeAreaInsetTop,
+      safeAreaInsetRight,
+      safeAreaInsetBottom,
+      safeAreaInsetLeft,
       cardTransparent,
       cardOverlayEnabled,
       cardShadowEnabled,
@@ -126,6 +131,13 @@ export default class StackItem extends React.PureComponent<Props> {
       headerStyleInterpolator,
     } = this.props;
 
+    const insets = {
+      top: safeAreaInsetTop,
+      right: safeAreaInsetRight,
+      bottom: safeAreaInsetBottom,
+      left: safeAreaInsetLeft,
+    };
+
     return (
       <Card
         index={index}
@@ -168,6 +180,7 @@ export default class StackItem extends React.PureComponent<Props> {
             ? renderHeader({
                 mode: 'screen',
                 layout,
+                insets,
                 scenes: [previousScene, scene],
                 state,
                 getPreviousRoute,

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

@@ -53,14 +53,14 @@ class StackView extends React.Component<Props, State> {
     // If there was no change in routes, we don't need to compute anything
     if (props.state.routes === state.previousRoutes && state.routes.length) {
       if (props.descriptors !== state.previousDescriptors) {
-        const descriptors = state.routes.reduce(
+        const descriptors = state.routes.reduce<StackDescriptorMap>(
           (acc, route) => {
             acc[route.key] =
               props.descriptors[route.key] || state.descriptors[route.key];
 
             return acc;
           },
-          {} as StackDescriptorMap
+          {}
         );
 
         return {
@@ -195,15 +195,12 @@ class StackView extends React.Component<Props, State> {
       throw new Error(`There should always be at least one route.`);
     }
 
-    const descriptors = routes.reduce(
-      (acc, route) => {
-        acc[route.key] =
-          props.descriptors[route.key] || state.descriptors[route.key];
+    const descriptors = routes.reduce<StackDescriptorMap>((acc, route) => {
+      acc[route.key] =
+        props.descriptors[route.key] || state.descriptors[route.key];
 
-        return acc;
-      },
-      {} as StackDescriptorMap
-    );
+      return acc;
+    }, {});
 
     return {
       routes,

yarn.lock

@@ -864,12 +864,11 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@callstack/react-theme-provider@^3.0.2":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.3.tgz#f964dda28cd6e731c3fbcf916b0579c6f9fb2db7"
-  integrity sha512-B+9JBK7zsND/AdVkjwHvbb4cR05fJofLFG30hOeoXke8WkKAWN36yFljauAhI8qwlXlGFGZMYE1wQvsqBSccrA==
+"@callstack/react-theme-provider@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.5.tgz#a173e455e9603c9c45357a3b6ace1273086527ca"
+  integrity sha512-Iec+ybWN0FvNj87sD3oWo/49edGUP0UOSdMnzCJEFJIDYr992ECIuOV89burAAh2/ibPCxgLiK6dmgv2mO/8Tg==
   dependencies:
-    "@types/hoist-non-react-statics" "^3.3.1"
     deepmerge "^3.2.0"
     hoist-non-react-statics "^3.3.0"
 
@@ -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.0.0-alpha.7:
+  version "3.0.0-alpha.7"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-3.0.0-alpha.7.tgz#fbbfe5dc9ef8dbd18932786aa3d7f0479501538b"
+  integrity sha512-tjqewrUMnucLM4yqMiVtCOnrqilnvDDNr2guIImwsUpJ6HWaJKBEFKqB25SEdMvuo88MWSdA0gyRNtS3WRpS3w==
   dependencies:
-    "@callstack/react-theme-provider" "^3.0.2"
+    "@callstack/react-theme-provider" "^3.0.5"
     color "^3.1.2"
     react-native-safe-area-view "^0.12.0"
 
@@ -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.5:
+  version "2.0.0-alpha.5"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.5.tgz#5b6a72df959d31ffaf7045cd5eb753477e80689b"
+  integrity sha512-uKVc+JYEC59Dz2RPBI4tnaIB8W6T0dHGY6PjUtvkvaBmZBjfxhpezd3m2t8o913Xarx6EvT2maSH8816+MNJnw==
   dependencies:
     debounce "^1.2.0"