chore: publish

- @react-navigation/bottom-tabs@5.0.0-alpha.23
 - @react-navigation/core@5.0.0-alpha.26
 - @react-navigation/drawer@5.0.0-alpha.25
 - @react-navigation/material-bottom-tabs@5.0.0-alpha.22
 - @react-navigation/material-top-tabs@5.0.0-alpha.20
 - @react-navigation/native-stack@5.0.0-alpha.15
 - @react-navigation/stack@5.0.0-alpha.40

package.json

@@ -22,22 +22,22 @@
     "example": "yarn --cwd packages/example"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.7.0",
-    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-env": "^7.7.1",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-react": "^7.7.0",
-    "@babel/preset-typescript": "^7.6.0",
+    "@babel/preset-typescript": "^7.7.2",
-    "@babel/runtime": "^7.6.2",
+    "@babel/runtime": "^7.7.2",
     "@commitlint/config-conventional": "^8.2.0",
-    "@types/jest": "^24.0.13",
+    "@types/jest": "^24.0.23",
     "codecov": "^3.6.1",
     "commitlint": "^8.2.0",
-    "core-js": "^3.2.1",
+    "core-js": "^3.4.1",
-    "eslint": "^6.5.1",
+    "eslint": "^6.6.0",
     "eslint-config-satya164": "^3.1.2",
-    "husky": "^3.0.8",
+    "husky": "^3.0.9",
     "jest": "^24.8.0",
-    "lerna": "^3.16.4",
+    "lerna": "^3.18.4",
-    "prettier": "^1.18.2",
+    "prettier": "^1.19.1",
     "typescript": "^3.7.2"
   },
   "resolutions": {

packages/bottom-tabs/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.23](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.22...@react-navigation/bottom-tabs@5.0.0-alpha.23) (2019-12-07)
+
+
+### Features
+
+* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
+
+
+
+
+
+# [5.0.0-alpha.22](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.21...@react-navigation/bottom-tabs@5.0.0-alpha.22) (2019-11-17)
+
+
+### Bug Fixes
+
+* workaround SafereaProvider causing jumping ([c17ad18](https://github.com/react-navigation/navigation-ex/commit/c17ad18b20cb05c577e1235a58ccc1c856fee086)), closes [#174](https://github.com/react-navigation/navigation-ex/issues/174)
+
+
+
+
+
 # [5.0.0-alpha.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.20...@react-navigation/bottom-tabs@5.0.0-alpha.21) (2019-11-10)
 
 

packages/bottom-tabs/package.json

@@ -10,7 +10,7 @@
     "android",
     "tab"
   ],
-  "version": "5.0.0-alpha.21",
+  "version": "5.0.0-alpha.23",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,16 +33,16 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.14"
+    "@react-navigation/routers": "^5.0.0-alpha.15"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.4",
+    "@types/react": "^16.9.11",
-    "@types/react-native": "^0.60.17",
+    "@types/react-native": "^0.60.22",
     "del-cli": "^3.0.0",
     "react": "~16.8.3",
     "react-native": "~0.59.10",
-    "react-native-safe-area-context": "^0.3.6",
+    "react-native-safe-area-context": "^0.6.0",
     "typescript": "^3.7.2"
   },
   "peerDependencies": {

packages/bottom-tabs/src/index.tsx

@@ -1,13 +1,12 @@
 /**
  * Navigators
  */
-export {
+export { default as createBottomTabNavigator } from './navigators/createBottomTabNavigator';
-  default as createBottomTabNavigator,
-} from './navigators/createBottomTabNavigator';
 
 /**
  * Views
  */
+export { default as BottomTabView } from './views/BottomTabView';
 export { default as BottomTabBar } from './views/BottomTabBar';
 
 /**

packages/bottom-tabs/src/types.tsx

@@ -51,7 +51,7 @@ export type BottomTabNavigationProp<
    * @param [params] Params object for the route.
    */
   jumpTo<RouteName extends Extract<keyof ParamList, string>>(
-    ...args: ParamList[RouteName] extends (undefined | any)
+    ...args: ParamList[RouteName] extends undefined | any
       ? [RouteName] | [RouteName, ParamList[RouteName]]
       : [RouteName, ParamList[RouteName]]
   ): void;
@@ -64,24 +64,22 @@ export type BottomTabNavigationOptions = {
   title?: string;
 
   /**
-   * Title string of a tab displayed in the tab bar or React Element
+   * Title string of a tab displayed in the tab bar
-   * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar.
+   * or a function that given { focused: boolean, color: string } returns a React.Node to display in tab bar.
    * When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section.
    */
   tabBarLabel?:
-    | React.ReactNode
+    | string
     | ((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.
+   * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
    */
-  tabBarIcon?:
+  tabBarIcon?: (props: {
-    | React.ReactNode
+    focused: boolean;
-    | ((props: {
+    color: string;
-        focused: boolean;
+    size: number;
-        color: string;
+  }) => React.ReactNode;
-        size: number;
-      }) => React.ReactNode);
 
   /**
    * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
@@ -222,7 +220,7 @@ export type BottomTabBarProps = BottomTabBarOptions & {
         focused: boolean;
         color: string;
       }) => React.ReactNode | undefined)
-    | React.ReactNode;
+    | string;
   getTestID: (props: { route: Route<string> }) => string | undefined;
   renderButton: (
     props: { route: Route<string> } & BottomTabBarButtonProps

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

@@ -155,11 +155,11 @@ export default class TabBarBottom extends React.Component<Props, State> {
       );
     }
 
-    if (typeof label === 'function') {
+    if (typeof label === 'string') {
-      return label({ focused, color });
+      return label;
     }
 
-    return label;
+    return label({ focused, color });
   };
 
   private renderIcon = ({

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

@@ -11,8 +11,8 @@ import { Route, CommonActions } from '@react-navigation/core';
 import { TabNavigationState } from '@react-navigation/routers';
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 
+import SafeAreaProviderCompat from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
 import BottomTabBar from './BottomTabBar';
 import {
@@ -90,9 +90,9 @@ export default class BottomTabView extends React.Component<Props, State> {
     const options = descriptor.options;
 
     if (options.tabBarIcon) {
-      return typeof options.tabBarIcon === 'function'
+      return typeof options.tabBarIcon === 'string'
-        ? options.tabBarIcon({ focused, color, size })
+        ? options.tabBarIcon
-        : options.tabBarIcon;
+        : options.tabBarIcon({ focused, color, size });
     }
 
     return null;
@@ -210,7 +210,7 @@ export default class BottomTabView extends React.Component<Props, State> {
     const { loaded } = this.state;
 
     return (
-      <SafeAreaProvider>
+      <SafeAreaProviderCompat>
         <View style={styles.container}>
           <ScreenContainer style={styles.pages}>
             {routes.map((route, index) => {
@@ -246,7 +246,7 @@ export default class BottomTabView extends React.Component<Props, State> {
           </ScreenContainer>
           {this.renderTabBar()}
         </View>
-      </SafeAreaProvider>
+      </SafeAreaProviderCompat>
     );
   }
 }

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import {
+  SafeAreaProvider,
+  SafeAreaConsumer,
+} from 'react-native-safe-area-context';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function SafeAreaProviderCompat({ children }: Props) {
+  return (
+    <SafeAreaConsumer>
+      {insets => {
+        if (insets) {
+          // If we already have insets, don't wrap the stack in another safe area provider
+          // This avoids an issue with updates at the cost of potentially incorrect values
+          // https://github.com/react-navigation/navigation-ex/issues/174
+          return children;
+        }
+
+        return <SafeAreaProvider>{children}</SafeAreaProvider>;
+      }}
+    </SafeAreaConsumer>
+  );
+}

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

packages/compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.15",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -24,10 +24,10 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.14"
+    "@react-navigation/routers": "^5.0.0-alpha.15"
   },
   "devDependencies": {
-    "@types/react": "^16.9.4",
+    "@types/react": "^16.9.11",
     "react": "~16.8.3",
     "typescript": "^3.7.2"
   },

packages/compat/src/index.tsx

@@ -5,13 +5,9 @@ import * as SwitchActions from './SwitchActions';
 
 export { NavigationActions, StackActions, DrawerActions, SwitchActions };
 
-export {
+export { default as createCompatNavigatorFactory } from './createCompatNavigatorFactory';
-  default as createCompatNavigatorFactory,
-} from './createCompatNavigatorFactory';
 
-export {
+export { default as createCompatNavigationProp } from './createCompatNavigationProp';
-  default as createCompatNavigationProp,
-} from './createCompatNavigationProp';
 
 export { default as createSwitchNavigator } from './createSwitchNavigator';
 

packages/core/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.25...@react-navigation/core@5.0.0-alpha.26) (2019-12-07)
+
+
+### Bug Fixes
+
+* don't handle replace if screen to replace with isn't present ([7b13a81](https://github.com/react-navigation/navigation-ex/commit/7b13a81ac8260879c8658be5704f46db59a72c73)), closes [#193](https://github.com/react-navigation/navigation-ex/issues/193)
+
+
+
+
+
+# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.24...@react-navigation/core@5.0.0-alpha.25) (2019-11-29)
+
+
+### Bug Fixes
+
+* wrap reset and resetRoot inside transaction ([#189](https://github.com/react-navigation/navigation-ex/issues/189)) ([5a0dfa1](https://github.com/react-navigation/navigation-ex/commit/5a0dfa1a155715714c8483fafc5a94dbc5120754)), closes [#185](https://github.com/react-navigation/navigation-ex/issues/185)
+
+
+
+
+
+# [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.23...@react-navigation/core@5.0.0-alpha.24) (2019-11-20)
+
+
+### Bug Fixes
+
+* allow passing partial params to `setParams` ([#177](https://github.com/react-navigation/navigation-ex/issues/177)) ([c3e9e45](https://github.com/react-navigation/navigation-ex/commit/c3e9e4578e98aa5b0635949a288e19eaeec12c85))
+
+
+
+
+
+# [5.0.0-alpha.23](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.22...@react-navigation/core@5.0.0-alpha.23) (2019-11-17)
+
+
+### Bug Fixes
+
+* merge initial params on push ([11efb06](https://github.com/react-navigation/navigation-ex/commit/11efb066429a3fc8b7e8e48d897286208d9a5449))
+
+
+
+
+
 # [5.0.0-alpha.22](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.21...@react-navigation/core@5.0.0-alpha.22) (2019-11-10)
 
 

packages/core/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.22",
+  "version": "5.0.0-alpha.26",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -30,14 +30,14 @@
   },
   "dependencies": {
     "escape-string-regexp": "^2.0.0",
-    "query-string": "^6.8.3",
+    "query-string": "^6.9.0",
     "shortid": "^2.2.15",
-    "use-subscription": "^1.1.1"
+    "use-subscription": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
+    "@babel/core": "^7.7.2",
     "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.4",
+    "@types/react": "^16.9.11",
     "@types/shortid": "^0.0.29",
     "del-cli": "^3.0.0",
     "react": "~16.8.3",

packages/core/src/BaseRouter.tsx

@@ -22,6 +22,10 @@ const BaseRouter = {
 
         const { name, key, params } = action.payload;
 
+        if (!state.routeNames.includes(name)) {
+          return null;
+        }
+
         return {
           ...state,
           routes: state.routes.map((route, i) =>

packages/core/src/NavigationContainer.tsx

@@ -112,79 +112,6 @@ const Container = React.forwardRef(function NavigationContainer(
   const isFirstMountRef = React.useRef<boolean>(true);
   const skipTrackingRef = React.useRef<boolean>(false);
 
-  const reset = React.useCallback((state: NavigationState) => {
-    skipTrackingRef.current = true;
-    setNavigationState(state);
-  }, []);
-
-  const { trackState, trackAction } = useDevTools({
-    name: '@react-navigation',
-    reset,
-    state,
-  });
-
-  const { listeners, addListener: addFocusedListener } = useFocusedListeners();
-
-  const { getStateForRoute, addStateGetter } = useStateGetters();
-
-  const dispatch = (
-    action: NavigationAction | ((state: NavigationState) => NavigationAction)
-  ) => {
-    listeners[0](navigation => navigation.dispatch(action));
-  };
-
-  const canGoBack = () => {
-    const { result, handled } = listeners[0](navigation =>
-      navigation.canGoBack()
-    );
-
-    if (handled) {
-      return result;
-    } else {
-      return false;
-    }
-  };
-
-  const resetRoot = React.useCallback(
-    (state?: PartialState<NavigationState> | NavigationState) => {
-      trackAction('@@RESET_ROOT');
-      setNavigationState(state);
-    },
-    [trackAction]
-  );
-
-  const getRootState = React.useCallback(() => {
-    return getStateForRoute('root');
-  }, [getStateForRoute]);
-
-  React.useImperativeHandle(ref, () => ({
-    ...(Object.keys(CommonActions) as Array<keyof typeof CommonActions>).reduce<
-      any
-    >((acc, name) => {
-      acc[name] = (...args: any[]) =>
-        dispatch(
-          CommonActions[name](
-            // @ts-ignore
-            ...args
-          )
-        );
-      return acc;
-    }, {}),
-    resetRoot,
-    dispatch,
-    canGoBack,
-    getRootState,
-  }));
-
-  const builderContext = React.useMemo(
-    () => ({
-      addFocusedListener,
-      addStateGetter,
-      trackAction,
-    }),
-    [addFocusedListener, trackAction, addStateGetter]
-  );
-
   const performTransaction = React.useCallback((callback: () => void) => {
     if (isTransactionActiveRef.current) {
       throw new Error(
@@ -222,6 +149,86 @@ const Container = React.forwardRef(function NavigationContainer(
     transactionStateRef.current = navigationState;
   }, []);
 
+  const reset = React.useCallback(
+    (state: NavigationState) => {
+      performTransaction(() => {
+        skipTrackingRef.current = true;
+        setState(state);
+      });
+    },
+    [performTransaction, setState]
+  );
+
+  const { trackState, trackAction } = useDevTools({
+    name: '@react-navigation',
+    reset,
+    state,
+  });
+
+  const { listeners, addListener: addFocusedListener } = useFocusedListeners();
+
+  const { getStateForRoute, addStateGetter } = useStateGetters();
+
+  const dispatch = (
+    action: NavigationAction | ((state: NavigationState) => NavigationAction)
+  ) => {
+    listeners[0](navigation => navigation.dispatch(action));
+  };
+
+  const canGoBack = () => {
+    const { result, handled } = listeners[0](navigation =>
+      navigation.canGoBack()
+    );
+
+    if (handled) {
+      return result;
+    } else {
+      return false;
+    }
+  };
+
+  const resetRoot = React.useCallback(
+    (state?: PartialState<NavigationState> | NavigationState) => {
+      performTransaction(() => {
+        trackAction('@@RESET_ROOT');
+        setState(state);
+      });
+    },
+    [performTransaction, setState, trackAction]
+  );
+
+  const getRootState = React.useCallback(() => {
+    return getStateForRoute('root');
+  }, [getStateForRoute]);
+
+  React.useImperativeHandle(ref, () => ({
+    ...(Object.keys(CommonActions) as Array<keyof typeof CommonActions>).reduce<
+      any
+    >((acc, name) => {
+      acc[name] = (...args: any[]) =>
+        dispatch(
+          CommonActions[name](
+            // @ts-ignore
+            ...args
+          )
+        );
+      return acc;
+    }, {}),
+    resetRoot,
+    dispatch,
+    canGoBack,
+    getRootState,
+  }));
+
+  const builderContext = React.useMemo(
+    () => ({
+      addFocusedListener,
+      addStateGetter,
+      trackAction,
+    }),
+    [addFocusedListener, trackAction, addStateGetter]
+  );
+
   const context = React.useMemo(
     () => ({
       state,

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

@@ -65,6 +65,15 @@ it("doesn't handle REPLACE if source key isn't present", () => {
   expect(result).toBe(null);
 });
 
+it("doesn't handle REPLACE if screen to replace with isn't present", () => {
+  const result = BaseRouter.getStateForAction(
+    STATE,
+    CommonActions.replace('nonexistent', { answer: 42 })
+  );
+
+  expect(result).toBe(null);
+});
+
 it('sets params for the focused screen with SET_PARAMS', () => {
   const result = BaseRouter.getStateForAction(
     STATE,

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

@@ -163,14 +163,14 @@ it('handle dispatching with ref', () => {
         return true;
       },
 
-      getStateForAction(state, action) {
+      getStateForAction(state, action, options) {
         if (action.type === 'REVERSE') {
           return {
             ...state,
             routes: state.routes.slice().reverse(),
           };
         }
-        return CurrentMockRouter.getStateForAction(state, action);
+        return CurrentMockRouter.getStateForAction(state, action, options);
       },
     };
     return ChildRouter;
@@ -212,7 +212,10 @@ it('handle dispatching with ref', () => {
           index: 0,
           key: '4',
           routeNames: ['qux', 'lex'],
-          routes: [{ key: 'qux', name: 'qux' }, { key: 'lex', name: 'lex' }],
+          routes: [
+            { key: 'qux', name: 'qux' },
+            { key: 'lex', name: 'lex' },
+          ],
         },
       },
       { key: 'bar', name: 'bar' },
@@ -273,7 +276,10 @@ it('handle dispatching with ref', () => {
           index: 0,
           key: '1',
           routeNames: ['qux', 'lex'],
-          routes: [{ key: 'lex', name: 'lex' }, { key: 'qux', name: 'qux' }],
+          routes: [
+            { key: 'lex', name: 'lex' },
+            { key: 'qux', name: 'qux' },
+          ],
         },
       },
       { key: 'bar', name: 'bar' },
@@ -333,7 +339,10 @@ it('handle resetting state with ref', () => {
           index: 0,
           key: '4',
           routeNames: ['qux', 'lex'],
-          routes: [{ key: 'qux', name: 'qux' }, { key: 'lex', name: 'lex' }],
+          routes: [
+            { key: 'qux', name: 'qux' },
+            { key: 'lex', name: 'lex' },
+          ],
         },
       },
       { key: 'bar', name: 'bar' },
@@ -359,7 +368,10 @@ it('handle resetting state with ref', () => {
           index: 0,
           key: '6',
           routeNames: ['qux', 'lex'],
-          routes: [{ key: 'qux', name: 'qux' }, { key: 'lex', name: 'lex' }],
+          routes: [
+            { key: 'qux', name: 'qux' },
+            { key: 'lex', name: 'lex' },
+          ],
           stale: false,
           type: 'test',
         },
@@ -414,7 +426,10 @@ it('handle getRootState', () => {
           index: 0,
           key: '8',
           routeNames: ['qux', 'lex'],
-          routes: [{ key: 'qux', name: 'qux' }, { key: 'lex', name: 'lex' }],
+          routes: [
+            { key: 'qux', name: 'qux' },
+            { key: 'lex', name: 'lex' },
+          ],
           stale: false,
           type: 'test',
         },

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

@@ -103,7 +103,10 @@ it('rehydrates state for a navigator on navigation', () => {
 
   const initialState = {
     index: 1,
-    routes: [{ key: 'foo', name: 'foo' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      { key: 'bar', name: 'bar' },
+    ],
   };
 
   const onStateChange = jest.fn();
@@ -126,7 +129,10 @@ it('rehydrates state for a navigator on navigation', () => {
     index: 1,
     key: '0',
     routeNames: ['foo', 'bar'],
-    routes: [{ key: 'foo', name: 'foo' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      { key: 'bar', name: 'bar' },
+    ],
     stale: false,
     type: 'test',
   });
@@ -151,7 +157,10 @@ it("doesn't rehydrate state if the type of state didn't match router", () => {
   const initialState = {
     index: 1,
     type: 'something-else',
-    routes: [{ key: 'foo', name: 'foo' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      { key: 'bar', name: 'bar' },
+    ],
   };
 
   const onStateChange = jest.fn();
@@ -398,7 +407,10 @@ it('cleans up state when the navigator unmounts', () => {
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar'],
-    routes: [{ key: 'foo', name: 'foo' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      { key: 'bar', name: 'bar' },
+    ],
   });
 
   root.update(
@@ -451,7 +463,10 @@ it('allows state updates by dispatching a function returning an action', () => {
     index: 1,
     key: '0',
     routeNames: ['foo', 'bar'],
-    routes: [{ key: 'foo', name: 'foo' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      { key: 'bar', name: 'bar' },
+    ],
   });
 });
 

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

@@ -419,12 +419,12 @@ it(`returns false for canGoBack when current router doesn't handle GO_BACK`, ()
     const ChildRouter: Router<NavigationState, MockActions> = {
       ...CurrentMockRouter,
 
-      getStateForAction(state, action) {
+      getStateForAction(state, action, options) {
         if (action.type === 'GO_BACK') {
           return null;
         }
 
-        return CurrentMockRouter.getStateForAction(state, action);
+        return CurrentMockRouter.getStateForAction(state, action, options);
       },
     };
     return ChildRouter;
@@ -470,12 +470,12 @@ it('returns true for canGoBack when current router handles GO_BACK', () => {
     const ChildRouter: Router<NavigationState, MockActions> = {
       ...CurrentMockRouter,
 
-      getStateForAction(state, action) {
+      getStateForAction(state, action, options) {
         if (action.type === 'GO_BACK') {
           return state;
         }
 
-        return CurrentMockRouter.getStateForAction(state, action);
+        return CurrentMockRouter.getStateForAction(state, action, options);
       },
     };
     return ChildRouter;
@@ -537,12 +537,12 @@ it('returns true for canGoBack when parent router handles GO_BACK', () => {
     const ChildRouter: Router<NavigationState, MockActions> = {
       ...CurrentMockRouter,
 
-      getStateForAction(state, action) {
+      getStateForAction(state, action, options) {
         if (action.type === 'GO_BACK') {
           return state;
         }
 
-        return CurrentMockRouter.getStateForAction(state, action);
+        return CurrentMockRouter.getStateForAction(state, action, options);
       },
     };
     return ChildRouter;

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

@@ -230,7 +230,7 @@ it('fires blur event when a route is removed with a delay', async () => {
         };
       },
 
-      getStateForAction(state, action) {
+      getStateForAction(state, action, options) {
         switch (action.type) {
           case 'PUSH':
             return {
@@ -248,7 +248,7 @@ it('fires blur event when a route is removed with a delay', async () => {
             };
           }
           default:
-            return router.getStateForAction(state, action);
+            return router.getStateForAction(state, action, options);
         }
       },
 

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

@@ -20,7 +20,7 @@ it("lets parent handle the action if child didn't", () => {
     > = {
       ...CurrentMockRouter,
 
-      getStateForAction(state, action) {
+      getStateForAction(state, action, options) {
         if (action.type === 'REVERSE') {
           return {
             ...state,
@@ -28,7 +28,7 @@ it("lets parent handle the action if child didn't", () => {
           };
         }
 
-        return CurrentMockRouter.getStateForAction(state, action);
+        return CurrentMockRouter.getStateForAction(state, action, options);
       },
     };
     return ParentRouter;
@@ -103,14 +103,14 @@ it("lets children handle the action if parent didn't", () => {
         return true;
       },
 
-      getStateForAction(state, action) {
+      getStateForAction(state, action, options) {
         if (action.type === 'REVERSE') {
           return {
             ...state,
             routes: state.routes.slice().reverse(),
           };
         }
-        return CurrentMockRouter.getStateForAction(state, action);
+        return CurrentMockRouter.getStateForAction(state, action, options);
       },
     };
     return ChildRouter;
@@ -160,7 +160,10 @@ it("lets children handle the action if parent didn't", () => {
           index: 0,
           key: '4',
           routeNames: ['qux', 'lex'],
-          routes: [{ key: 'qux', name: 'qux' }, { key: 'lex', name: 'lex' }],
+          routes: [
+            { key: 'qux', name: 'qux' },
+            { key: 'lex', name: 'lex' },
+          ],
         },
       },
       { key: 'bar', name: 'bar' },
@@ -206,7 +209,10 @@ it("lets children handle the action if parent didn't", () => {
           index: 0,
           key: '1',
           routeNames: ['qux', 'lex'],
-          routes: [{ key: 'lex', name: 'lex' }, { key: 'qux', name: 'qux' }],
+          routes: [
+            { key: 'lex', name: 'lex' },
+            { key: 'qux', name: 'qux' },
+          ],
         },
       },
       { key: 'bar', name: 'bar' },
@@ -229,7 +235,7 @@ it("action doesn't bubble if target is specified", () => {
         return true;
       },
 
-      getStateForAction(state, action) {
+      getStateForAction(state, action, options) {
         if (action.type === 'REVERSE') {
           return {
             ...state,
@@ -237,7 +243,7 @@ it("action doesn't bubble if target is specified", () => {
           };
         }
 
-        return CurrentMockRouter.getStateForAction(state, action);
+        return CurrentMockRouter.getStateForAction(state, action, options);
       },
     };
     return ChildRouter;
@@ -333,7 +339,10 @@ it("doesn't crash if no navigator handled the action", () => {
           index: 0,
           key: '4',
           routeNames: ['qux', 'lex'],
-          routes: [{ key: 'qux', name: 'qux' }, { key: 'lex', name: 'lex' }],
+          routes: [
+            { key: 'qux', name: 'qux' },
+            { key: 'lex', name: 'lex' },
+          ],
         },
       },
       { key: 'bar', name: 'bar' },

packages/core/src/types.tsx

@@ -118,6 +118,11 @@ export type RouterFactory<
   RouterOptions extends DefaultRouterOptions
 > = (options: RouterOptions) => Router<State, Action>;
 
+export type RouterConfigOptions = {
+  routeNames: string[];
+  routeParamList: ParamListBase;
+};
+
 export type Router<
   State extends NavigationState,
   Action extends NavigationAction
@@ -134,10 +139,7 @@ export type Router<
    * @param options.routeNames List of valid route names as defined in the screen components.
    * @param options.routeParamsList Object containing params for each route.
    */
-  getInitialState(options: {
+  getInitialState(options: RouterConfigOptions): State;
-    routeNames: string[];
-    routeParamList: ParamListBase;
-  }): State;
 
   /**
    * Rehydrate the full navigation state from a given partial state.
@@ -148,10 +150,7 @@ export type Router<
    */
   getRehydratedState(
     partialState: PartialState<State> | State,
-    options: {
+    options: RouterConfigOptions
-      routeNames: string[];
-      routeParamList: ParamListBase;
-    }
   ): State;
 
   /**
@@ -163,10 +162,7 @@ export type Router<
    */
   getStateForRouteNamesChange(
     state: State,
-    options: {
+    options: RouterConfigOptions
-      routeNames: string[];
-      routeParamList: ParamListBase;
-    }
   ): State;
 
   /**
@@ -183,10 +179,13 @@ export type Router<
    *
    * @param state State object to apply the action on.
    * @param action Action object to apply.
+   * @param options.routeNames List of valid route names as defined in the screen components.
+   * @param options.routeParamsList Object containing params for each route.
    */
   getStateForAction(
     state: State,
-    action: Action
+    action: Action,
+    options: RouterConfigOptions
   ): State | PartialState<State> | null;
 
   /**
@@ -298,7 +297,7 @@ type NavigationHelpersCommon<
    * @param [params] Params object for the route.
    */
   navigate<RouteName extends keyof ParamList>(
-    ...args: ParamList[RouteName] extends (undefined | any)
+    ...args: ParamList[RouteName] extends undefined | any
       ? [RouteName] | [RouteName, ParamList[RouteName]]
       : [RouteName, ParamList[RouteName]]
   ): void;
@@ -372,7 +371,7 @@ export type NavigationHelpers<
      * @param params Params object for the current route.
      */
     setParams<RouteName extends keyof ParamList>(
-      params: ParamList[RouteName]
+      params: Partial<ParamList[RouteName]>
     ): void;
   };
 
@@ -410,7 +409,7 @@ export type NavigationProp<
    *
    * @param params Params object for the current route.
    */
-  setParams(params: ParamList[RouteName]): void;
+  setParams(params: Partial<ParamList[RouteName]>): void;
 
   /**
    * Update the options for the route.
@@ -553,10 +552,11 @@ export type RouteConfig<
         route: RouteProp<ParamList, RouteName>;
         navigation: any;
       }) => React.ReactNode;
-    });
+    }
+);
 
 export type NavigationContainerRef =
-  | NavigationHelpers<ParamListBase> & {
+  | (NavigationHelpers<ParamListBase> & {
       /**
        * Reset the navigation state of the root navigator to the provided state.
        *
@@ -564,7 +564,7 @@ export type NavigationContainerRef =
        */
       resetRoot(state?: PartialState<NavigationState> | NavigationState): void;
       getRootState(): NavigationState;
-    }
+    })
   | undefined
   | null;
 

packages/core/src/useNavigationBuilder.tsx

@@ -61,11 +61,9 @@ const getRouteConfigsFromChildren = <ScreenOptions extends object>(
       if (child.type === Screen) {
         // We can only extract the config from `Screen` elements
         // If something else was rendered, it's probably a bug
-        acc.push(child.props as RouteConfig<
+        acc.push(
-          ParamListBase,
+          child.props as RouteConfig<ParamListBase, string, ScreenOptions>
-          string,
+        );
-          ScreenOptions
-        >);
         return acc;
       }
 
@@ -105,9 +103,9 @@ export default function useNavigationBuilder<
 ) {
   useRegisterNavigator();
 
-  const route = React.useContext(NavigationRouteContext) as (
+  const route = React.useContext(NavigationRouteContext) as
     | NavigatorRoute
-    | undefined);
+    | undefined;
 
   const previousRouteRef = React.useRef(route);
 
@@ -243,7 +241,11 @@ export default function useNavigationBuilder<
     // 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)
+      navigate(route.params.screen, route.params.params),
+      {
+        routeNames,
+        routeParamList,
+      }
     );
 
     nextState =
@@ -309,6 +311,10 @@ export default function useNavigationBuilder<
     setState,
     key,
     listeners: actionListeners,
+    routerConfigOptions: {
+      routeNames,
+      routeParamList,
+    },
   });
 
   const onRouteFocus = useOnRouteFocus({

packages/core/src/useNavigationHelpers.tsx

@@ -73,13 +73,18 @@ export default function useNavigationHelpers<
       isFocused: parentNavigationHelpers
         ? parentNavigationHelpers.isFocused
         : () => true,
-      canGoBack: () =>
+      canGoBack: () => {
-        router.getStateForAction(
+        const state = getState();
-          getState(),
+
-          CommonActions.goBack() as Action
+        return (
-        ) !== null ||
+          router.getStateForAction(state, CommonActions.goBack() as Action, {
-        (parentNavigationHelpers && parentNavigationHelpers.canGoBack()) ||
+            routeNames: state.routeNames,
-        false,
+            routeParamList: {},
+          }) !== null ||
+          (parentNavigationHelpers && parentNavigationHelpers.canGoBack()) ||
+          false
+        );
+      },
     } as NavigationHelpers<ParamListBase, EventMap> &
       (NavigationProp<ParamListBase, string, any, any, any> | undefined);
   }, [

packages/core/src/useOnAction.tsx

@@ -7,6 +7,7 @@ import {
   NavigationState,
   PartialState,
   Router,
+  RouterConfigOptions,
 } from './types';
 
 type Options = {
@@ -15,6 +16,7 @@ type Options = {
   getState: () => NavigationState;
   setState: (state: NavigationState | PartialState<NavigationState>) => void;
   listeners: ChildActionListener[];
+  routerConfigOptions: RouterConfigOptions;
 };
 
 /**
@@ -32,6 +34,7 @@ export default function useOnAction({
   setState,
   key,
   listeners,
+  routerConfigOptions,
 }: Options) {
   const {
     onAction: onActionParent,
@@ -40,6 +43,14 @@ export default function useOnAction({
     trackAction,
   } = React.useContext(NavigationBuilderContext);
 
+  const routerConfigOptionsRef = React.useRef<RouterConfigOptions>(
+    routerConfigOptions
+  );
+
+  React.useEffect(() => {
+    routerConfigOptionsRef.current = routerConfigOptions;
+  });
+
   const onAction = React.useCallback(
     (
       action: NavigationAction,
@@ -59,7 +70,11 @@ export default function useOnAction({
         return false;
       }
 
-      let result = router.getStateForAction(state, action);
+      let result = router.getStateForAction(
+        state,
+        action,
+        routerConfigOptionsRef.current
+      );
 
       // If a target is specified and set to current navigator, the action shouldn't bubble
       // So instead of `null`, we use the state object for such cases to signal that action was handled

packages/drawer/CHANGELOG.md

@@ -3,6 +3,40 @@
 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.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.24...@react-navigation/drawer@5.0.0-alpha.25) (2019-12-07)
+
+
+### Features
+
+* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
+
+
+
+
+
+# [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.23...@react-navigation/drawer@5.0.0-alpha.24) (2019-11-27)
+
+
+### Bug Fixes
+
+* enable gestures by default in drawer. closes [#188](https://github.com/react-navigation/navigation-ex/issues/188) ([7080517](https://github.com/react-navigation/navigation-ex/commit/7080517c914b4821e07a6320de94660e50d02950))
+
+
+
+
+
+# [5.0.0-alpha.23](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.22...@react-navigation/drawer@5.0.0-alpha.23) (2019-11-17)
+
+
+### Bug Fixes
+
+* pass labelStyle prop in DrawerItem label ([#170](https://github.com/react-navigation/navigation-ex/issues/170)) ([cd7c9c4](https://github.com/react-navigation/navigation-ex/commit/cd7c9c4398ce12a1e965786d91fdbe6e3c42ee0a))
+* workaround SafereaProvider causing jumping ([c17ad18](https://github.com/react-navigation/navigation-ex/commit/c17ad18b20cb05c577e1235a58ccc1c856fee086)), closes [#174](https://github.com/react-navigation/navigation-ex/issues/174)
+
+
+
+
+
 # [5.0.0-alpha.22](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.21...@react-navigation/drawer@5.0.0-alpha.22) (2019-11-10)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/package.json

@@ -11,7 +11,7 @@
     "material",
     "drawer"
   ],
-  "version": "5.0.0-alpha.22",
+  "version": "5.0.0-alpha.25",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,19 +34,19 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.14"
+    "@react-navigation/routers": "^5.0.0-alpha.15"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.4",
+    "@types/react": "^16.9.11",
-    "@types/react-native": "^0.60.17",
+    "@types/react-native": "^0.60.22",
     "del-cli": "^3.0.0",
     "react": "~16.8.3",
     "react-native": "~0.59.10",
-    "react-native-gesture-handler": "^1.3.0",
+    "react-native-gesture-handler": "^1.5.0",
-    "react-native-reanimated": "^1.3.0",
+    "react-native-reanimated": "^1.4.0",
-    "react-native-safe-area-context": "^0.3.6",
+    "react-native-safe-area-context": "^0.6.0",
-    "react-native-screens": "^2.0.0-alpha.8",
+    "react-native-screens": "^2.0.0-alpha.11",
     "typescript": "^3.7.2"
   },
   "peerDependencies": {

packages/drawer/src/index.tsx

@@ -1,17 +1,15 @@
 /**
  * Navigators
  */
-export {
+export { default as createDrawerNavigator } from './navigators/createDrawerNavigator';
-  default as createDrawerNavigator,
-} from './navigators/createDrawerNavigator';
 
 /**
  * Views
  */
+export { default as DrawerView } from './views/DrawerView';
 export { default as DrawerItem } from './views/DrawerItem';
 export { default as DrawerItemList } from './views/DrawerItemList';
 export { default as DrawerContent } from './views/DrawerContent';
-export { default as DrawerView } from './views/DrawerView';
 
 /**
  * Utilities

packages/drawer/src/navigators/createDrawerNavigator.tsx

@@ -40,10 +40,10 @@ function DrawerNavigator({
 
   return (
     <DrawerView
+      {...rest}
       state={state}
       descriptors={descriptors}
       navigation={navigation}
-      {...rest}
     />
   );
 }

packages/drawer/src/types.tsx

@@ -89,16 +89,34 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
 };
 
 export type DrawerNavigationOptions = {
+  /**
+   * Title text for the screen.
+   */
   title?: string;
+
+  /**
+   * Title string of a screen displayed in the drawer
+   * or a function that given { focused: boolean, color: string } returns a React.Node
+   * When undefined, scene title is used.
+   */
   drawerLabel?:
     | string
     | ((props: { color: string; focused: boolean }) => React.ReactNode);
+
+  /**
+   * A function that given { focused: boolean, color: string } returns a React.Node to display an icon the drawer.
+   */
   drawerIcon?: (props: {
     color: string;
     size: number;
     focused: boolean;
   }) => React.ReactNode;
-  drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open';
+
+  /**
+   * Whether you can use gestures to open or close the drawer.
+   * Defaults to `true`
+   */
+  gestureEnabled?: boolean;
 };
 
 export type DrawerContentComponentProps<T = DrawerContentOptions> = T & {

packages/drawer/src/views/Drawer.tsx

@@ -78,7 +78,7 @@ type Props = {
   onOpen: () => void;
   onClose: () => void;
   onGestureRef?: (ref: PanGestureHandler | null) => void;
-  locked: boolean;
+  gestureEnabled: boolean;
   drawerPosition: 'left' | 'right';
   drawerType: 'front' | 'back' | 'slide';
   keyboardDismissMode: 'none' | 'on-drag';
@@ -97,9 +97,9 @@ type Props = {
 
 export default class DrawerView extends React.PureComponent<Props> {
   static defaultProps = {
-    locked: false,
     drawerPostion: I18nManager.isRTL ? 'left' : 'right',
     drawerType: 'front',
+    gestureEnabled: true,
     swipeEdgeWidth: 32,
     swipeVelocityThreshold: 500,
     keyboardDismissMode: 'on-drag',
@@ -112,14 +112,14 @@ export default class DrawerView extends React.PureComponent<Props> {
       open,
       drawerPosition,
       drawerType,
-      locked,
+      gestureEnabled,
       swipeDistanceThreshold,
       swipeVelocityThreshold,
       hideStatusBar,
     } = this.props;
 
-    if (prevProps.locked !== locked) {
+    if (prevProps.gestureEnabled !== gestureEnabled) {
-      this.isLocked.setValue(locked ? TRUE : FALSE);
+      this.isGestureEnabled.setValue(gestureEnabled ? TRUE : FALSE);
     }
 
     if (
@@ -168,7 +168,9 @@ export default class DrawerView extends React.PureComponent<Props> {
   private isDrawerTypeFront = new Value<Binary>(
     this.props.drawerType === 'front' ? TRUE : FALSE
   );
-  private isLocked = new Value(this.props.locked ? TRUE : FALSE);
+  private isGestureEnabled = new Value(
+    this.props.gestureEnabled ? TRUE : FALSE
+  );
 
   private isOpen = new Value<Binary>(this.props.open ? TRUE : FALSE);
   private nextIsOpen = new Value<Binary | -1>(UNSET);
@@ -445,10 +447,7 @@ export default class DrawerView extends React.PureComponent<Props> {
     {
       nativeEvent: {
         oldState: (s: Animated.Value<number>) =>
-          cond(
+          cond(eq(s, State.ACTIVE), set(this.manuallyTriggerSpring, TRUE)),
-            and(eq(s, State.ACTIVE), eq(this.isLocked, FALSE)),
-            set(this.manuallyTriggerSpring, TRUE)
-          ),
       },
     },
   ]);
@@ -488,7 +487,7 @@ export default class DrawerView extends React.PureComponent<Props> {
   render() {
     const {
       open,
-      locked,
+      gestureEnabled,
       drawerPosition,
       drawerType,
       swipeEdgeWidth,
@@ -529,7 +528,7 @@ export default class DrawerView extends React.PureComponent<Props> {
         onGestureEvent={this.handleGestureEvent}
         onHandlerStateChange={this.handleGestureStateChange}
         hitSlop={hitSlop}
-        enabled={!locked}
+        enabled={gestureEnabled}
         {...gestureHandlerProps}
       >
         <Animated.View

packages/drawer/src/views/DrawerItem.tsx

@@ -64,6 +64,7 @@ type Props = {
 export default function DrawerItem({
   icon,
   label,
+  labelStyle,
   focused = false,
   activeTintColor = '#6200ee',
   inactiveTintColor = 'rgba(0, 0, 0, .68)',
@@ -99,24 +100,29 @@ export default function DrawerItem({
       >
         <React.Fragment>
           {iconNode}
-          {typeof label === 'function' ? (
+          <View
-            label({ color, focused })
+            style={[
-          ) : (
+              styles.label,
-            <Text
+              { marginLeft: iconNode ? 32 : 0, marginVertical: 5 },
-              numberOfLines={1}
+            ]}
-              style={[
+          >
-                styles.label,
+            {typeof label === 'string' ? (
-                {
+              <Text
-                  color,
+                numberOfLines={1}
-                  fontWeight: '500',
+                style={[
-                  marginLeft: iconNode ? 32 : 0,
+                  {
-                  marginVertical: 5,
+                    color,
-                },
+                    fontWeight: '500',
-              ]}
+                  },
-            >
+                  labelStyle,
-              {label}
+                ]}
-            </Text>
+              >
-          )}
+                {label}
+              </Text>
+            ) : (
+              label({ color, focused })
+            )}
+          </View>
         </React.Fragment>
       </TouchableItem>
     </View>

packages/drawer/src/views/DrawerView.tsx

@@ -6,7 +6,6 @@ import {
   Platform,
   ScaledSize,
 } from 'react-native';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
 import { PanGestureHandler } from 'react-native-gesture-handler';
@@ -16,6 +15,7 @@ import {
 } from '@react-navigation/routers';
 
 import DrawerGestureContext from '../utils/DrawerGestureContext';
+import SafeAreaProviderCompat from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
 import DrawerContent from './DrawerContent';
 import Drawer from './Drawer';
@@ -210,24 +210,14 @@ export default class DrawerView extends React.PureComponent<Props, State> {
     const { drawerWidth } = this.state;
 
     const activeKey = state.routes[state.index].key;
-    const { drawerLockMode } = descriptors[activeKey].options;
+    const { gestureEnabled } = descriptors[activeKey].options;
-
-    const isOpen =
-      drawerLockMode === 'locked-closed'
-        ? false
-        : drawerLockMode === 'locked-open'
-        ? true
-        : state.isDrawerOpen;
 
     return (
-      <SafeAreaProvider>
+      <SafeAreaProviderCompat>
         <DrawerGestureContext.Provider value={this.drawerGestureRef}>
           <Drawer
-            open={isOpen}
+            open={state.isDrawerOpen}
-            locked={
+            gestureEnabled={gestureEnabled !== false}
-              drawerLockMode === 'locked-open' ||
-              drawerLockMode === 'locked-closed'
-            }
             onOpen={this.handleDrawerOpen}
             onClose={this.handleDrawerClose}
             onGestureRef={this.setDrawerGestureRef}
@@ -245,7 +235,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
             renderSceneContent={this.renderContent}
           />
         </DrawerGestureContext.Provider>
-      </SafeAreaProvider>
+      </SafeAreaProviderCompat>
     );
   }
 }

packages/drawer/src/views/SafeAreaProviderCompat.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import {
+  SafeAreaProvider,
+  SafeAreaConsumer,
+} from 'react-native-safe-area-context';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function SafeAreaProviderCompat({ children }: Props) {
+  return (
+    <SafeAreaConsumer>
+      {insets => {
+        if (insets) {
+          // If we already have insets, don't wrap the stack in another safe area provider
+          // This avoids an issue with updates at the cost of potentially incorrect values
+          // https://github.com/react-navigation/navigation-ex/issues/174
+          return children;
+        }
+
+        return <SafeAreaProvider>{children}</SafeAreaProvider>;
+      }}
+    </SafeAreaConsumer>
+  );
+}

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

packages/example/ios/Podfile.lock

@@ -34,7 +34,7 @@ PODS:
   - glog (0.3.5)
   - React (0.59.10):
     - React/Core (= 0.59.10)
-  - react-native-safe-area-context (0.3.6):
+  - react-native-safe-area-context (0.6.0):
     - React
   - React/Core (0.59.10):
     - yoga (= 0.59.10.React)
@@ -93,7 +93,7 @@ PODS:
     - React
   - RNReanimated (1.2.0):
     - React
-  - RNScreens (2.0.0-alpha.8):
+  - RNScreens (2.0.0-alpha.11):
     - React
   - UMBarCodeScannerInterface (4.0.0)
   - UMCameraInterface (4.0.0)
@@ -264,10 +264,10 @@ SPEC CHECKSUMS:
   Folly: de497beb10f102453a1afa9edbf8cf8a251890de
   glog: aefd1eb5dda2ab95ba0938556f34b98e2da3a60d
   React: 36d0768f9e93be2473b37e7fa64f92c1d5341eef
-  react-native-safe-area-context: e380a6f783ccaec848e2f3cc8eb205a62362950d
+  react-native-safe-area-context: d288138da2c800caa111f9352e9333f186a06ead
   RNGestureHandler: 5329a942fce3d41c68b84c2c2276ce06a696d8b0
   RNReanimated: 1b52415c4302f198cb581282a0166690bad62c43
-  RNScreens: bfa9143ca291bcf3804c932f77b9617ff324704f
+  RNScreens: ad3661f864ef18d952e9a4799b6791683e33c1fc
   UMBarCodeScannerInterface: d5a6fdc98ed6241225b0a8432a7f4e2b397668bc
   UMCameraInterface: 68870a3197fee85bd5afca5609ba4a5b7257d19d
   UMConstantsInterface: d25b8e8887ca7aaf568c06caf08f4d40734ee4ef

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.21",
+  "version": "5.0.0-alpha.23",
   "private": true,
   "workspaces": {
     "nohoist": [
@@ -18,34 +18,34 @@
     "postinstall": "jetify"
   },
   "dependencies": {
-    "@expo/vector-icons": "^10.0.0",
+    "@expo/vector-icons": "^10.0.5",
-    "@react-native-community/masked-view": "^0.1.1",
+    "@react-native-community/masked-view": "^0.1.5",
-    "expo": "^35.0.0",
+    "expo": "^35.0.1",
     "expo-asset": "~7.0.0",
-    "query-string": "^6.8.3",
+    "query-string": "^6.9.0",
     "react": "~16.8.3",
     "react-dom": "~16.8.3",
     "react-native": "~0.59.10",
-    "react-native-gesture-handler": "~1.3.0",
+    "react-native-gesture-handler": "~1.5.0",
-    "react-native-paper": "^3.1.1",
+    "react-native-paper": "^3.2.1",
     "react-native-reanimated": "~1.2.0",
     "react-native-reanimated-web": "npm:react-native-reanimated@^1.3.2",
-    "react-native-safe-area-context": "~0.3.6",
+    "react-native-safe-area-context": "~0.6.0",
-    "react-native-screens": "^2.0.0-alpha.8",
+    "react-native-screens": "^2.0.0-alpha.11",
-    "react-native-tab-view": "2.10.0",
+    "react-native-tab-view": "2.11.0",
     "react-native-unimodules": "^0.7.0-rc.1",
     "react-native-web": "^0.11.7",
-    "scheduler": "^0.16.1",
+    "scheduler": "^0.18.0",
     "shortid": "^2.2.15",
-    "use-subscription": "^1.1.1"
+    "use-subscription": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
+    "@babel/core": "^7.7.2",
-    "@expo/webpack-config": "^0.7.12",
+    "@expo/webpack-config": "^0.10.1",
-    "@types/react": "^16.9.4",
+    "@types/react": "^16.9.11",
-    "@types/react-native": "^0.60.19",
+    "@types/react-native": "^0.60.22",
-    "babel-preset-expo": "^7.0.0",
+    "babel-preset-expo": "^7.1.0",
-    "expo-cli": "^3.4.1",
+    "expo-cli": "^3.8.0",
     "jetifier": "^1.6.4",
     "typescript": "^3.7.2"
   }

packages/example/src/Screens/BottomTabs.tsx

@@ -9,17 +9,11 @@ import SimpleStackScreen from './SimpleStack';
 
 const getTabBarIcon = (name: string) => ({
   color,
-  horizontal,
+  size,
 }: {
   color: string;
-  horizontal: boolean;
+  size: number;
-}) => (
+}) => <MaterialCommunityIcons name={name} color={color} size={size} />;
-  <MaterialCommunityIcons
-    name={name}
-    color={color}
-    size={horizontal ? 17 : 24}
-  />
-);
 
 type BottomTabParams = {
   article: undefined;

packages/example/src/Screens/CompatAPI.tsx

@@ -17,9 +17,10 @@ type CompatStackParams = {
   Album: undefined;
 };
 
-const ArticleScreen: CompatScreenType<
+const ArticleScreen: CompatScreenType<StackNavigationProp<
-  StackNavigationProp<CompatStackParams, 'Article'>
+  CompatStackParams,
-> = ({ navigation }) => {
+  'Article'
+>> = ({ navigation }) => {
   return (
     <React.Fragment>
       <View style={styles.buttons}>
@@ -47,9 +48,9 @@ ArticleScreen.navigationOptions = ({ navigation }) => ({
   title: `Article by ${navigation.getParam('author')}`,
 });
 
-const AlbumsScreen: CompatScreenType<
+const AlbumsScreen: CompatScreenType<StackNavigationProp<
-  StackNavigationProp<CompatStackParams>
+  CompatStackParams
-> = ({ navigation }) => {
+>> = ({ navigation }) => {
   return (
     <React.Fragment>
       <View style={styles.buttons}>

packages/example/src/Screens/NativeStack.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
 import { Button } from 'react-native-paper';
 // eslint-disable-next-line import/no-unresolved
 import { enableScreens } from 'react-native-screens';
@@ -14,7 +14,6 @@ import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from '@react-navigation/native-stack';
-import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 
 type NativeStackParams = {
@@ -26,12 +25,11 @@ type NativeStackNavigation = NativeStackNavigationProp<NativeStackParams>;
 
 const ArticleScreen = ({
   navigation,
-  route,
 }: {
   navigation: NativeStackNavigation;
   route: RouteProp<NativeStackParams, 'article'>;
 }) => (
-  <React.Fragment>
+  <ScrollView style={styles.container} contentContainerStyle={styles.content}>
     <View style={styles.buttons}>
       <Button
         mode="contained"
@@ -48,8 +46,66 @@ const ArticleScreen = ({
         Go back
       </Button>
     </View>
-    <Article author={{ name: route.params.author }} />
+    <Text style={styles.title}>What is Lorem Ipsum?</Text>
-  </React.Fragment>
+    <Text style={styles.paragraph}>
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry&apos;s standard dummy text ever since
+      the 1500s, when an unknown printer took a galley of type and scrambled it
+      to make a type specimen book. It has survived not only five centuries, but
+      also the leap into electronic typesetting, remaining essentially
+      unchanged. It was popularised in the 1960s with the release of Letraset
+      sheets containing Lorem Ipsum passages, and more recently with desktop
+      publishing software like Aldus PageMaker including versions of Lorem
+      Ipsum.
+    </Text>
+    <Text style={styles.title}>Where does it come from?</Text>
+    <Text style={styles.paragraph}>
+      Contrary to popular belief, Lorem Ipsum is not simply random text. It has
+      roots in a piece of classical Latin literature from 45 BC, making it over
+      2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
+      College in Virginia, looked up one of the more obscure Latin words,
+      consectetur, from a Lorem Ipsum passage, and going through the cites of
+      the word in classical literature, discovered the undoubtable source. Lorem
+      Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus Bonorum
+      et Malorum&quot; (The Extremes of Good and Evil) by Cicero, written in 45
+      BC. This book is a treatise on the theory of ethics, very popular during
+      the Renaissance. The first line of Lorem Ipsum, &quot;Lorem ipsum dolor
+      sit amet..&quot;, comes from a line in section 1.10.32.
+    </Text>
+    <Text style={styles.paragraph}>
+      The standard chunk of Lorem Ipsum used since the 1500s is reproduced below
+      for those interested. Sections 1.10.32 and 1.10.33 from &quot;de Finibus
+      Bonorum et Malorum&quot; by Cicero are also reproduced in their exact
+      original form, accompanied by English versions from the 1914 translation
+      by H. Rackham.
+    </Text>
+    <Text style={styles.title}>Why do we use it?</Text>
+    <Text style={styles.paragraph}>
+      It is a long established fact that a reader will be distracted by the
+      readable content of a page when looking at its layout. The point of using
+      Lorem Ipsum is that it has a more-or-less normal distribution of letters,
+      as opposed to using &quot;Content here, content here&quot;, making it look
+      like readable English. Many desktop publishing packages and web page
+      editors now use Lorem Ipsum as their default model text, and a search for
+      &quot;lorem ipsum&quot; will uncover many web sites still in their
+      infancy. Various versions have evolved over the years, sometimes by
+      accident, sometimes on purpose (injected humour and the like).
+    </Text>
+    <Text style={styles.title}>Where can I get some?</Text>
+    <Text style={styles.paragraph}>
+      There are many variations of passages of Lorem Ipsum available, but the
+      majority have suffered alteration in some form, by injected humour, or
+      randomised words which don&apos;t look even slightly believable. If you
+      are going to use a passage of Lorem Ipsum, you need to be sure there
+      isn&apos;t anything embarrassing hidden in the middle of text. All the
+      Lorem Ipsum generators on the Internet tend to repeat predefined chunks as
+      necessary, making this the first true generator on the Internet. It uses a
+      dictionary of over 200 Latin words, combined with a handful of model
+      sentence structures, to generate Lorem Ipsum which looks reasonable. The
+      generated Lorem Ipsum is therefore always free from repetition, injected
+      humour, or non-characteristic words etc.
+    </Text>
+  </ScrollView>
 );
 
 const AlbumsScreen = ({
@@ -96,11 +152,11 @@ export default function NativeStackScreen({ navigation }: Props) {
       >;
 
       navigation.setOptions({ gestureEnabled: false });
-      drawer.setOptions({ drawerLockMode: 'locked-closed' });
+      drawer.setOptions({ gestureEnabled: false });
 
       return () => {
         navigation.setOptions({ gestureEnabled: true });
-        drawer.setOptions({ drawerLockMode: 'unlocked' });
+        drawer.setOptions({ gestureEnabled: true });
       };
     }, [navigation])
   );
@@ -110,10 +166,11 @@ export default function NativeStackScreen({ navigation }: Props) {
       <NativeStack.Screen
         name="article"
         component={ArticleScreen}
-        options={({ route }) => ({
+        options={{
-          title: `Article by ${route.params.author}`,
+          title: 'Lorem Ipsum',
-        })}
+          headerLargeTitle: true,
-        initialParams={{ author: 'Gandalf' }}
+          headerHideShadow: true,
+        }}
       />
       <NativeStack.Screen
         name="album"
@@ -134,4 +191,24 @@ const styles = StyleSheet.create({
   button: {
     margin: 8,
   },
+  container: {
+    backgroundColor: 'white',
+  },
+  content: {
+    paddingVertical: 16,
+  },
+  title: {
+    color: '#000',
+    fontWeight: 'bold',
+    fontSize: 24,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  paragraph: {
+    color: '#000',
+    fontSize: 16,
+    lineHeight: 24,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
 });

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.22](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.21...@react-navigation/material-bottom-tabs@5.0.0-alpha.22) (2019-12-07)
+
+
+### Features
+
+* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
+
+
+
+
+
+# [5.0.0-alpha.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.20...@react-navigation/material-bottom-tabs@5.0.0-alpha.21) (2019-11-17)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.19...@react-navigation/material-bottom-tabs@5.0.0-alpha.20) (2019-11-10)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.20",
+  "version": "5.0.0-alpha.22",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,17 +34,17 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.14"
+    "@react-navigation/routers": "^5.0.0-alpha.15"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.4",
+    "@types/react": "^16.9.11",
-    "@types/react-native": "^0.60.17",
+    "@types/react-native": "^0.60.22",
     "@types/react-native-vector-icons": "^6.4.4",
     "del-cli": "^3.0.0",
     "react": "~16.8.3",
     "react-native": "~0.59.10",
-    "react-native-paper": "^3.1.1",
+    "react-native-paper": "^3.2.1",
     "react-native-vector-icons": "^6.6.0",
     "typescript": "^3.7.2"
   },

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

@@ -1,9 +1,12 @@
 /**
  * Navigators
  */
-export {
+export { default as createMaterialBottomTabNavigator } from './navigators/createMaterialBottomTabNavigator';
-  default as createMaterialBottomTabNavigator,
+
-} from './navigators/createMaterialBottomTabNavigator';
+/**
+ * Views
+ */
+export { default as MaterialBottomTabView } from './views/MaterialBottomTabView';
 
 /**
  * Types

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

@@ -36,7 +36,7 @@ export type MaterialBottomTabNavigationProp<
    * @param [params] Params object for the route.
    */
   jumpTo<RouteName extends Extract<keyof ParamList, string>>(
-    ...args: ParamList[RouteName] extends (undefined | any)
+    ...args: ParamList[RouteName] extends undefined | any
       ? [RouteName] | [RouteName, ParamList[RouteName]]
       : [RouteName, ParamList[RouteName]]
   ): void;

packages/material-top-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.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.19...@react-navigation/material-top-tabs@5.0.0-alpha.20) (2019-12-07)
+
+
+### Features
+
+* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
+
+
+
+
+
+# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.18...@react-navigation/material-top-tabs@5.0.0-alpha.19) (2019-11-20)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.17...@react-navigation/material-top-tabs@5.0.0-alpha.18) (2019-11-17)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 # [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.16...@react-navigation/material-top-tabs@5.0.0-alpha.17) (2019-11-10)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.17",
+  "version": "5.0.0-alpha.20",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,18 +34,18 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.14"
+    "@react-navigation/routers": "^5.0.0-alpha.15"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.4",
+    "@types/react": "^16.9.11",
-    "@types/react-native": "^0.60.17",
+    "@types/react-native": "^0.60.22",
     "del-cli": "^3.0.0",
     "react": "~16.8.3",
     "react-native": "~0.59.10",
-    "react-native-gesture-handler": "^1.3.0",
+    "react-native-gesture-handler": "^1.5.0",
-    "react-native-reanimated": "^1.3.0",
+    "react-native-reanimated": "^1.4.0",
-    "react-native-tab-view": "^2.10.0",
+    "react-native-tab-view": "^2.11.0",
     "typescript": "^3.7.2"
   },
   "peerDependencies": {
@@ -54,7 +54,7 @@
     "react-native": "*",
     "react-native-gesture-handler": "^1.0.0",
     "react-native-reanimated": "^1.0.0",
-    "react-native-tab-view": "^2.10.0"
+    "react-native-tab-view": "^2.11.0"
   },
   "@react-native-community/bob": {
     "source": "src",

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

@@ -1,13 +1,12 @@
 /**
  * Navigators
  */
-export {
+export { default as createMaterialTopTabNavigator } from './navigators/createMaterialTopTabNavigator';
-  default as createMaterialTopTabNavigator,
-} from './navigators/createMaterialTopTabNavigator';
 
 /**
  * Views
  */
+export { default as MaterialTopTabView } from './views/MaterialTopTabView';
 export { default as MaterialTopTabBar } from './views/MaterialTopTabBar';
 
 /**

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

@@ -50,7 +50,7 @@ export type MaterialTopTabNavigationProp<
    * @param [params] Params object for the route.
    */
   jumpTo<RouteName extends Extract<keyof ParamList, string>>(
-    ...args: ParamList[RouteName] extends (undefined | any)
+    ...args: ParamList[RouteName] extends undefined | any
       ? [RouteName] | [RouteName, ParamList[RouteName]]
       : [RouteName, ParamList[RouteName]]
   ): void;
@@ -63,20 +63,18 @@ export type MaterialTopTabNavigationOptions = {
   title?: string;
 
   /**
-   * Title string of a tab displayed in the tab bar or React Element
+   * Title string of a tab displayed in the tab bar
    * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar.
    * When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section.
    */
   tabBarLabel?:
-    | React.ReactNode
+    | string
     | ((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.
+   * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
    */
-  tabBarIcon?:
+  tabBarIcon?: (props: { focused: boolean; color: string }) => React.ReactNode;
-    | React.ReactNode
-    | ((props: { focused: boolean; color: string }) => React.ReactNode);
 
   /**
    * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
@@ -197,7 +195,7 @@ export type MaterialTopTabBarProps = MaterialTopTabBarOptions &
       route: Route<string>;
     }) =>
       | ((scene: { focused: boolean; color: string }) => React.ReactNode)
-      | React.ReactNode;
+      | string;
     getAccessibilityLabel: (props: {
       route: Route<string>;
     }) => string | undefined;

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

@@ -52,11 +52,7 @@ export default class TabBarTop extends React.PureComponent<
       );
     }
 
-    if (typeof label === 'function') {
+    return label({ focused, color });
-      return label({ focused, color });
-    }
-
-    return label;
   };
 
   private renderIcon = ({
@@ -77,10 +73,7 @@ export default class TabBarTop extends React.PureComponent<
     const { options } = descriptors[route.key];
 
     if (options.tabBarIcon !== undefined) {
-      const icon =
+      const icon = options.tabBarIcon({ focused, color });
-        typeof options.tabBarIcon === 'function'
-          ? options.tabBarIcon({ focused, color })
-          : options.tabBarIcon;
 
       return <View style={[styles.icon, iconStyle]}>{icon}</View>;
     }

packages/native-stack/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.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.14...@react-navigation/native-stack@5.0.0-alpha.15) (2019-12-07)
+
+
+### Features
+
+* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
+
+
+
+
+
+# [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.13...@react-navigation/native-stack@5.0.0-alpha.14) (2019-11-20)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.12...@react-navigation/native-stack@5.0.0-alpha.13) (2019-11-17)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
 # [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.11...@react-navigation/native-stack@5.0.0-alpha.12) (2019-11-10)
 
 **Note:** Version bump only for package @react-navigation/native-stack

packages/native-stack/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.12",
+  "version": "5.0.0-alpha.15",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,12 +29,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.14"
+    "@react-navigation/routers": "^5.0.0-alpha.15"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
-    "del-cli": "^2.0.0",
+    "del-cli": "^3.0.0",
-    "react-native-screens": "^2.0.0-alpha.8",
+    "react-native-screens": "^2.0.0-alpha.11",
     "typescript": "^3.7.2"
   },
   "peerDependencies": {

packages/native-stack/src/index.tsx

@@ -1,9 +1,12 @@
 /**
  * Navigators
  */
-export {
+export { default as createNativeStackNavigator } from './navigators/createNativeStackNavigator';
-  default as createNativeStackNavigator,
+
-} from './navigators/createNativeStackNavigator';
+/**
+ * Views
+ */
+export { default as NativeStackView } from './views/NativeStackView';
 
 /**
  * Types

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

@@ -16,7 +16,7 @@ import {
   screensEnabled,
   // eslint-disable-next-line import/no-unresolved
 } from 'react-native-screens';
-import StackView from '../views/StackView';
+import NativeStackView from '../views/NativeStackView';
 import {
   NativeStackNavigatorProps,
   NativeStackNavigationOptions,
@@ -64,11 +64,11 @@ function NativeStackNavigator(props: NativeStackNavigatorProps) {
   );
 
   return (
-    <StackView
+    <NativeStackView
+      {...rest}
       state={state}
       navigation={navigation}
       descriptors={descriptors}
-      {...rest}
     />
   );
 }

packages/native-stack/src/types.tsx

@@ -29,7 +29,7 @@ export type NativeStackNavigationProp<
    * @param [params] Params object for the route.
    */
   push<RouteName extends keyof ParamList>(
-    ...args: ParamList[RouteName] extends (undefined | any)
+    ...args: ParamList[RouteName] extends undefined | any
       ? [RouteName] | [RouteName, ParamList[RouteName]]
       : [RouteName, ParamList[RouteName]]
   ): void;
@@ -85,6 +85,8 @@ export type NativeStackNavigationOptions = {
   headerTranslucent?: boolean;
   /**
    * Boolean to set native property to prefer large title header (like in iOS setting).
+   * For large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as `ScrollView` or `FlatList`.
+   * If the scrollable area doesn't fill the screen, the large title won't collapse on scroll.
    * Only supported on iOS.
    *
    * @platform ios
@@ -106,10 +108,7 @@ export type NativeStackNavigationOptions = {
    */
   headerHideBackButton?: boolean;
   /**
-   * Boolean indicating whether to hide the elevation shadow on the header.
+   * Boolean indicating whether to hide the elevation shadow or the bottom border on the header.
-   * Only supported on Android.
-   *
-   * @platform android
    */
   headerHideShadow?: boolean;
   /**

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

@@ -29,7 +29,11 @@ type Props = {
   descriptors: NativeStackDescriptorMap;
 };
 
-export default function StackView({ state, navigation, descriptors }: Props) {
+export default function NativeStackView({
+  state,
+  navigation,
+  descriptors,
+}: Props) {
   return (
     <ScreenStack style={styles.scenes}>
       {state.routes.map(route => {

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.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.15...@react-navigation/native@5.0.0-alpha.16) (2019-11-17)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 # [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.14...@react-navigation/native@5.0.0-alpha.15) (2019-11-08)
 
 

packages/native/package.json

@@ -7,7 +7,7 @@
     "ios",
     "android"
   ],
-  "version": "5.0.0-alpha.15",
+  "version": "5.0.0-alpha.16",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -31,8 +31,8 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.4",
+    "@types/react": "^16.9.11",
-    "@types/react-native": "^0.60.17",
+    "@types/react-native": "^0.60.22",
     "del-cli": "^3.0.0",
     "react": "~16.8.3",
     "react-native": "~0.59.10",

packages/native/src/index.tsx

@@ -1,6 +1,4 @@
-export {
+export { default as NavigationNativeContainer } from './NavigationNativeContainer';
-  default as NavigationNativeContainer,
-} from './NavigationNativeContainer';
 
 export { default as useBackButton } from './useBackButton';
 export { default as useLinking } from './useLinking';

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.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.14...@react-navigation/routers@5.0.0-alpha.15) (2019-11-17)
+
+
+### Bug Fixes
+
+* merge initial params on push ([11efb06](https://github.com/react-navigation/navigation-ex/commit/11efb066429a3fc8b7e8e48d897286208d9a5449))
+
+
+
+
+
 # [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.13...@react-navigation/routers@5.0.0-alpha.14) (2019-11-10)
 
 **Note:** Version bump only for package @react-navigation/routers

packages/routers/__tests__/DrawerRouter.test.tsx

@@ -71,7 +71,10 @@ it('gets rehydrated state from partial state', () => {
   expect(
     router.getRehydratedState(
       {
-        routes: [{ key: 'bar-0', name: 'bar' }, { key: 'qux-1', name: 'qux' }],
+        routes: [
+          { key: 'bar-0', name: 'bar' },
+          { key: 'qux-1', name: 'qux' },
+        ],
       },
       options
     )
@@ -216,6 +219,10 @@ it("doesn't rehydrate state if it's not stale", () => {
 
 it('handles navigate action', () => {
   const router = DrawerRouter({});
+  const options = {
+    routeNames: ['baz', 'bar'],
+    routeParamList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -227,9 +234,13 @@ it('handles navigate action', () => {
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
         isDrawerOpen: false,
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.navigate('baz', { answer: 42 })
+      CommonActions.navigate('baz', { answer: 42 }),
+      options
     )
   ).toEqual({
     stale: false,
@@ -248,6 +259,10 @@ it('handles navigate action', () => {
 
 it('handles navigate action with open drawer', () => {
   const router = DrawerRouter({});
+  const options = {
+    routeNames: ['baz', 'bar'],
+    routeParamList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -259,9 +274,13 @@ it('handles navigate action with open drawer', () => {
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
         isDrawerOpen: true,
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.navigate('baz', { answer: 42 })
+      CommonActions.navigate('baz', { answer: 42 }),
+      options
     )
   ).toEqual({
     stale: false,
@@ -280,6 +299,10 @@ it('handles navigate action with open drawer', () => {
 
 it('handles open drawer action', () => {
   const router = DrawerRouter({});
+  const options = {
+    routeNames: ['baz', 'bar'],
+    routeParamList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -291,9 +314,13 @@ it('handles open drawer action', () => {
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
         isDrawerOpen: false,
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      DrawerActions.openDrawer()
+      DrawerActions.openDrawer(),
+      options
     )
   ).toEqual({
     stale: false,
@@ -303,7 +330,10 @@ it('handles open drawer action', () => {
     routeNames: ['baz', 'bar'],
     isDrawerOpen: true,
     routeKeyHistory: [],
-    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+    ],
   });
 
   const state = {
@@ -314,16 +344,23 @@ it('handles open drawer action', () => {
     routeNames: ['baz', 'bar'],
     isDrawerOpen: true,
     routeKeyHistory: [],
-    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+    ],
   };
 
-  expect(router.getStateForAction(state, DrawerActions.openDrawer())).toBe(
+  expect(
-    state
+    router.getStateForAction(state, DrawerActions.openDrawer(), options)
-  );
+  ).toBe(state);
 });
 
 it('handles close drawer action', () => {
   const router = DrawerRouter({});
+  const options = {
+    routeNames: ['baz', 'bar'],
+    routeParamList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -335,9 +372,13 @@ it('handles close drawer action', () => {
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
         isDrawerOpen: true,
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      DrawerActions.closeDrawer()
+      DrawerActions.closeDrawer(),
+      options
     )
   ).toEqual({
     stale: false,
@@ -347,7 +388,10 @@ it('handles close drawer action', () => {
     routeNames: ['baz', 'bar'],
     isDrawerOpen: false,
     routeKeyHistory: [],
-    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+    ],
   });
 
   const state = {
@@ -358,16 +402,23 @@ it('handles close drawer action', () => {
     routeNames: ['baz', 'bar'],
     isDrawerOpen: false,
     routeKeyHistory: [],
-    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+    ],
   };
 
-  expect(router.getStateForAction(state, DrawerActions.closeDrawer())).toBe(
+  expect(
-    state
+    router.getStateForAction(state, DrawerActions.closeDrawer(), options)
-  );
+  ).toBe(state);
 });
 
 it('handles toggle drawer action', () => {
   const router = DrawerRouter({});
+  const options = {
+    routeNames: ['baz', 'bar'],
+    routeParamList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -379,9 +430,13 @@ it('handles toggle drawer action', () => {
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
         isDrawerOpen: true,
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      DrawerActions.toggleDrawer()
+      DrawerActions.toggleDrawer(),
+      options
     )
   ).toEqual({
     stale: false,
@@ -391,7 +446,10 @@ it('handles toggle drawer action', () => {
     routeNames: ['baz', 'bar'],
     isDrawerOpen: false,
     routeKeyHistory: [],
-    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+    ],
   });
 
   expect(
@@ -404,9 +462,13 @@ it('handles toggle drawer action', () => {
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
         isDrawerOpen: false,
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      DrawerActions.toggleDrawer()
+      DrawerActions.toggleDrawer(),
+      options
     )
   ).toEqual({
     stale: false,
@@ -416,7 +478,10 @@ it('handles toggle drawer action', () => {
     routeNames: ['baz', 'bar'],
     isDrawerOpen: true,
     routeKeyHistory: [],
-    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+    ],
   });
 });
 

packages/routers/__tests__/StackRouter.test.tsx

@@ -59,7 +59,10 @@ it('gets rehydrated state from partial state', () => {
   expect(
     router.getRehydratedState(
       {
-        routes: [{ key: 'bar-0', name: 'bar' }, { key: 'qux-1', name: 'qux' }],
+        routes: [
+          { key: 'bar-0', name: 'bar' },
+          { key: 'qux-1', name: 'qux' },
+        ],
       },
       options
     )
@@ -240,6 +243,10 @@ it('gets state on route names change with initialRouteName', () => {
 
 it('handles navigate action', () => {
   const router = StackRouter({});
+  const options = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -249,9 +256,13 @@ it('handles navigate action', () => {
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.navigate('qux', { answer: 42 })
+      CommonActions.navigate('qux', { answer: 42 }),
+      options
     )
   ).toEqual({
     stale: false,
@@ -278,9 +289,13 @@ it('handles navigate action', () => {
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.navigate('baz', { answer: 42 })
+      CommonActions.navigate('baz', { answer: 42 }),
+      options
     )
   ).toEqual({
     stale: false,
@@ -304,7 +319,8 @@ it('handles navigate action', () => {
           { key: 'bar', name: 'bar', params: { answer: 42 } },
         ],
       },
-      CommonActions.navigate('bar', { answer: 96 })
+      CommonActions.navigate('bar', { answer: 96 }),
+      options
     )
   ).toEqual({
     stale: false,
@@ -326,9 +342,13 @@ it('handles navigate action', () => {
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.navigate('unknown')
+      CommonActions.navigate('unknown'),
+      options
     )
   ).toBe(null);
 
@@ -340,9 +360,13 @@ it('handles navigate action', () => {
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
-        routes: [{ key: 'baz-0', name: 'baz' }, { key: 'bar-0', name: 'bar' }],
+        routes: [
+          { key: 'baz-0', name: 'baz' },
+          { key: 'bar-0', name: 'bar' },
+        ],
       },
-      CommonActions.navigate({ key: 'unknown' })
+      CommonActions.navigate({ key: 'unknown' }),
+      options
     )
   ).toBe(null);
 
@@ -354,12 +378,16 @@ it('handles navigate action', () => {
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
-        routes: [{ key: 'baz-0', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz-0', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
       {
         type: 'NAVIGATE',
         payload: { key: 'baz-0', name: 'baz' },
-      }
+      },
+      options
     )
   ).toEqual({
     stale: false,
@@ -378,9 +406,13 @@ it('handles navigate action', () => {
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
-        routes: [{ key: 'baz-0', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz-0', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.navigate({ key: 'baz-1', name: 'baz' })
+      CommonActions.navigate({ key: 'baz-1', name: 'baz' }),
+      options
     )
   ).toEqual({
     stale: false,
@@ -398,6 +430,10 @@ it('handles navigate action', () => {
 
 it('handles go back action', () => {
   const router = StackRouter({});
+  const options = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -407,9 +443,13 @@ it('handles go back action', () => {
         key: 'root',
         index: 1,
         routeNames: ['baz', 'bar', 'qux'],
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.goBack()
+      CommonActions.goBack(),
+      options
     )
   ).toEqual({
     stale: false,
@@ -430,13 +470,18 @@ it('handles go back action', () => {
         routeNames: ['baz', 'bar', 'qux'],
         routes: [{ key: 'baz', name: 'baz' }],
       },
-      CommonActions.goBack()
+      CommonActions.goBack(),
+      options
     )
   ).toBe(null);
 });
 
 it('handles pop action', () => {
   const router = StackRouter({});
+  const options = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -452,7 +497,8 @@ it('handles pop action', () => {
           { key: 'qux', name: 'qux' },
         ],
       },
-      StackActions.pop()
+      StackActions.pop(),
+      options
     )
   ).toEqual({
     stale: false,
@@ -460,7 +506,10 @@ it('handles pop action', () => {
     key: 'root',
     index: 1,
     routeNames: ['baz', 'bar', 'qux'],
-    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+    ],
   });
 
   expect(
@@ -477,7 +526,8 @@ it('handles pop action', () => {
           { key: 'qux', name: 'qux' },
         ],
       },
-      StackActions.pop(2)
+      StackActions.pop(2),
+      options
     )
   ).toEqual({
     stale: false,
@@ -506,7 +556,8 @@ it('handles pop action', () => {
         ...StackActions.pop(),
         target: 'root',
         source: 'bar-0',
-      }
+      },
+      options
     )
   ).toEqual({
     stale: false,
@@ -527,13 +578,18 @@ it('handles pop action', () => {
         routeNames: ['baz', 'bar', 'qux'],
         routes: [{ key: 'baz-0', name: 'baz' }],
       },
-      StackActions.pop()
+      StackActions.pop(),
+      options
     )
   ).toBe(null);
 });
 
 it('handles pop to top action', () => {
   const router = StackRouter({});
+  const options = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -549,7 +605,8 @@ it('handles pop to top action', () => {
           { key: 'qux', name: 'qux' },
         ],
       },
-      StackActions.popToTop()
+      StackActions.popToTop(),
+      options
     )
   ).toEqual({
     stale: false,
@@ -563,6 +620,12 @@ it('handles pop to top action', () => {
 
 it('handles push action', () => {
   const router = StackRouter({});
+  const options = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {
+      baz: { foo: 21 },
+    },
+  };
 
   expect(
     router.getStateForAction(
@@ -574,7 +637,8 @@ it('handles push action', () => {
         routeNames: ['baz', 'bar', 'qux'],
         routes: [{ key: 'bar', name: 'bar' }],
       },
-      StackActions.push('baz')
+      StackActions.push('baz'),
+      options
     )
   ).toEqual({
     stale: false,
@@ -582,7 +646,10 @@ it('handles push action', () => {
     key: 'root',
     index: 3,
     routeNames: ['baz', 'bar', 'qux'],
-    routes: [{ key: 'bar', name: 'bar' }, { key: 'baz-test', name: 'baz' }],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { foo: 21 } },
+    ],
   });
 
   expect(
@@ -595,7 +662,33 @@ it('handles push action', () => {
         routeNames: ['baz', 'bar', 'qux'],
         routes: [{ key: 'bar', name: 'bar' }],
       },
-      StackActions.push('unknown')
+      StackActions.push('baz', { bar: 29 }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 3,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { foo: 21, bar: 29 } },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 2,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'bar', name: 'bar' }],
+      },
+      StackActions.push('unknown'),
+      options
     )
   ).toBe(null);
 });
@@ -623,7 +716,10 @@ it('changes index on focus change', () => {
     index: 1,
     key: 'stack-test',
     routeNames: ['bar', 'baz', 'qux'],
-    routes: [{ key: 'bar-0', name: 'bar' }, { key: 'baz-0', name: 'baz' }],
+    routes: [
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-0', name: 'baz' },
+    ],
     stale: false,
     type: 'stack',
   });
@@ -632,7 +728,10 @@ it('changes index on focus change', () => {
     index: 0,
     key: 'stack-test',
     routeNames: ['bar', 'baz', 'qux'],
-    routes: [{ key: 'bar-0', name: 'bar' }, { key: 'baz-0', name: 'baz' }],
+    routes: [
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-0', name: 'baz' },
+    ],
     stale: false as const,
     type: 'stack' as const,
   };

packages/routers/__tests__/TabRouter.test.tsx

@@ -69,7 +69,10 @@ it('gets rehydrated state from partial state', () => {
   expect(
     router.getRehydratedState(
       {
-        routes: [{ key: 'bar-0', name: 'bar' }, { key: 'qux-1', name: 'qux' }],
+        routes: [
+          { key: 'bar-0', name: 'bar' },
+          { key: 'qux-1', name: 'qux' },
+        ],
       },
       options
     )
@@ -249,6 +252,10 @@ it('gets state on route names change', () => {
 
 it('handles navigate action', () => {
   const router = TabRouter({});
+  const options = {
+    routeNames: ['bar', 'baz'],
+    routeParamList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -259,9 +266,13 @@ it('handles navigate action', () => {
         index: 1,
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
-        routes: [{ key: 'baz-1', name: 'baz' }, { key: 'bar-1', name: 'bar' }],
+        routes: [
+          { key: 'baz-1', name: 'baz' },
+          { key: 'bar-1', name: 'bar' },
+        ],
       },
-      CommonActions.navigate({ key: 'bar-1', params: { answer: 42 } })
+      CommonActions.navigate({ key: 'bar-1', params: { answer: 42 } }),
+      options
     )
   ).toEqual({
     stale: false,
@@ -285,9 +296,13 @@ it('handles navigate action', () => {
         index: 1,
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.navigate('baz', { answer: 42 })
+      CommonActions.navigate('baz', { answer: 42 }),
+      options
     )
   ).toEqual({
     stale: false,
@@ -311,15 +326,23 @@ it('handles navigate action', () => {
         index: 1,
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.navigate('non-existent')
+      CommonActions.navigate('non-existent'),
+      options
     )
   ).toBe(null);
 });
 
 it('handles jump to action', () => {
   const router = TabRouter({});
+  const options = {
+    routeNames: ['bar', 'baz'],
+    routeParamList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -330,9 +353,13 @@ it('handles jump to action', () => {
         index: 0,
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      TabActions.jumpTo('bar')
+      TabActions.jumpTo('bar'),
+      options
     )
   ).toEqual({
     stale: false,
@@ -341,12 +368,19 @@ it('handles jump to action', () => {
     index: 1,
     routeNames: ['baz', 'bar'],
     routeKeyHistory: ['baz'],
-    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+    ],
   });
 });
 
 it('handles back action with backBehavior: history', () => {
   const router = TabRouter({ backBehavior: 'history' });
+  const options = {
+    routeNames: ['bar', 'baz'],
+    routeParamList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -357,9 +391,13 @@ it('handles back action with backBehavior: history', () => {
         index: 0,
         routeNames: ['baz', 'bar'],
         routeKeyHistory: ['bar'],
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.goBack()
+      CommonActions.goBack(),
+      options
     )
   ).toEqual({
     stale: false,
@@ -368,7 +406,10 @@ it('handles back action with backBehavior: history', () => {
     index: 1,
     routeNames: ['baz', 'bar'],
     routeKeyHistory: [],
-    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+    ],
   });
 
   expect(
@@ -380,15 +421,23 @@ it('handles back action with backBehavior: history', () => {
         index: 0,
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.goBack()
+      CommonActions.goBack(),
+      options
     )
   ).toBe(null);
 });
 
 it('handles back action with backBehavior: order', () => {
   const router = TabRouter({ backBehavior: 'order' });
+  const options = {
+    routeNames: ['bar', 'baz'],
+    routeParamList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -399,9 +448,13 @@ it('handles back action with backBehavior: order', () => {
         index: 1,
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.goBack()
+      CommonActions.goBack(),
+      options
     )
   ).toEqual({
     stale: false,
@@ -410,7 +463,10 @@ it('handles back action with backBehavior: order', () => {
     index: 0,
     routeNames: ['baz', 'bar'],
     routeKeyHistory: [],
-    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+    ],
   });
 
   expect(
@@ -422,9 +478,13 @@ it('handles back action with backBehavior: order', () => {
         index: 0,
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.goBack()
+      CommonActions.goBack(),
+      options
     )
   ).toBe(null);
 });
@@ -435,6 +495,11 @@ it('handles back action with backBehavior: initialRoute', () => {
     initialRouteName: 'bar',
   });
 
+  const options = {
+    routeNames: ['bar', 'baz'],
+    routeParamList: {},
+  };
+
   expect(
     router.getStateForAction(
       {
@@ -444,9 +509,13 @@ it('handles back action with backBehavior: initialRoute', () => {
         index: 0,
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.goBack()
+      CommonActions.goBack(),
+      options
     )
   ).toEqual({
     stale: false,
@@ -455,7 +524,10 @@ it('handles back action with backBehavior: initialRoute', () => {
     index: 1,
     routeNames: ['baz', 'bar'],
     routeKeyHistory: [],
-    routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+    ],
   });
 
   expect(
@@ -467,15 +539,23 @@ it('handles back action with backBehavior: initialRoute', () => {
         index: 1,
         routeNames: ['baz', 'bar'],
         routeKeyHistory: [],
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.goBack()
+      CommonActions.goBack(),
+      options
     )
   ).toBe(null);
 });
 
 it('handles back action with backBehavior: none', () => {
   const router = TabRouter({ backBehavior: 'none' });
+  const options = {
+    routeNames: ['bar', 'baz'],
+    routeParamList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -484,17 +564,25 @@ it('handles back action with backBehavior: none', () => {
         type: 'tab',
         key: 'root',
         index: 0,
-        routeNames: ['baz', 'bar'],
+        routeNames: ['bar', 'baz'],
         routeKeyHistory: [],
-        routes: [{ key: 'baz', name: 'baz' }, { key: 'bar', name: 'bar' }],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
       },
-      CommonActions.goBack()
+      CommonActions.goBack(),
+      options
     )
   ).toEqual(null);
 });
 
 it('updates route key history on navigate and jump to', () => {
   const router = TabRouter({ backBehavior: 'history' });
+  const options = {
+    routeNames: ['bar', 'baz', 'qux'],
+    routeParamList: {},
+  };
 
   let state: TabNavigationState = {
     index: 1,
@@ -514,35 +602,40 @@ it('updates route key history on navigate and jump to', () => {
 
   state = router.getStateForAction(
     state,
-    TabActions.jumpTo('qux')
+    TabActions.jumpTo('qux'),
+    options
   ) as TabNavigationState;
 
   expect(state.routeKeyHistory).toEqual(['baz-0']);
 
   state = router.getStateForAction(
     state,
-    CommonActions.navigate('bar')
+    CommonActions.navigate('bar'),
+    options
   ) as TabNavigationState;
 
   expect(state.routeKeyHistory).toEqual(['baz-0', 'qux-0']);
 
   state = router.getStateForAction(
     state,
-    TabActions.jumpTo('baz')
+    TabActions.jumpTo('baz'),
+    options
   ) as TabNavigationState;
 
   expect(state.routeKeyHistory).toEqual(['qux-0', 'bar-0']);
 
   state = router.getStateForAction(
     state,
-    CommonActions.goBack()
+    CommonActions.goBack(),
+    options
   ) as TabNavigationState;
 
   expect(state.routeKeyHistory).toEqual(['qux-0']);
 
   state = router.getStateForAction(
     state,
-    CommonActions.goBack()
+    CommonActions.goBack(),
+    options
   ) as TabNavigationState;
 
   expect(state.routeKeyHistory).toEqual([]);

packages/routers/package.json

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

packages/routers/src/DrawerRouter.tsx

@@ -115,7 +115,7 @@ export default function DrawerRouter(
       return result;
     },
 
-    getStateForAction(state, action) {
+    getStateForAction(state, action, options) {
       switch (action.type) {
         case 'OPEN_DRAWER':
           if (state.isDrawerOpen) {
@@ -149,7 +149,8 @@ export default function DrawerRouter(
               ...state,
               isDrawerOpen: false,
             },
-            action
+            action,
+            options
           );
 
         case 'GO_BACK':
@@ -160,10 +161,10 @@ export default function DrawerRouter(
             };
           }
 
-          return router.getStateForAction(state, action);
+          return router.getStateForAction(state, action, options);
 
         default:
-          return router.getStateForAction(state, action);
+          return router.getStateForAction(state, action, options);
       }
     },
 

packages/routers/src/StackRouter.tsx

@@ -165,7 +165,9 @@ export default function StackRouter(options: StackRouterOptions) {
       };
     },
 
-    getStateForAction(state, action) {
+    getStateForAction(state, action, options) {
+      const { routeParamList } = options;
+
       switch (action.type) {
         case 'PUSH':
           if (state.routeNames.includes(action.payload.name)) {
@@ -180,7 +182,13 @@ export default function StackRouter(options: StackRouterOptions) {
                       ? `${action.payload.name}-${shortid()}`
                       : action.payload.key,
                   name: action.payload.name,
-                  params: action.payload.params,
+                  params:
+                    routeParamList[action.payload.name] !== undefined
+                      ? {
+                          ...routeParamList[action.payload.name],
+                          ...action.payload.params,
+                        }
+                      : action.payload.params,
                 },
               ],
             };
@@ -211,10 +219,14 @@ export default function StackRouter(options: StackRouterOptions) {
         }
 
         case 'POP_TO_TOP':
-          return router.getStateForAction(state, {
+          return router.getStateForAction(
-            type: 'POP',
+            state,
-            payload: { count: state.routes.length - 1 },
+            {
-          });
+              type: 'POP',
+              payload: { count: state.routes.length - 1 },
+            },
+            options
+          );
 
         case 'NAVIGATE':
           if (
@@ -253,14 +265,18 @@ export default function StackRouter(options: StackRouterOptions) {
             }
 
             if (index === -1 && action.payload.name !== undefined) {
-              return router.getStateForAction(state, {
+              return router.getStateForAction(
-                type: 'PUSH',
+                state,
-                payload: {
+                {
-                  key: action.payload.key,
+                  type: 'PUSH',
-                  name: action.payload.name,
+                  payload: {
-                  params: action.payload.params,
+                    key: action.payload.key,
+                    name: action.payload.name,
+                    params: action.payload.params,
+                  },
                 },
-              });
+                options
+              );
             }
 
             return {
@@ -285,12 +301,16 @@ export default function StackRouter(options: StackRouterOptions) {
 
         case 'GO_BACK':
           if (state.index > 0) {
-            return router.getStateForAction(state, {
+            return router.getStateForAction(
-              type: 'POP',
+              state,
-              payload: { count: 1 },
+              {
-              target: action.target,
+                type: 'POP',
-              source: action.source,
+                payload: { count: 1 },
-            });
+                target: action.target,
+                source: action.source,
+              },
+              options
+            );
           }
 
           return null;

packages/stack/CHANGELOG.md

@@ -3,6 +3,51 @@
 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.40](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.39...@react-navigation/stack@5.0.0-alpha.40) (2019-12-07)
+
+
+### Features
+
+* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
+
+
+
+
+
+# [5.0.0-alpha.39](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.38...@react-navigation/stack@5.0.0-alpha.39) (2019-12-03)
+
+
+### Bug Fixes
+
+* correctly update layout on onLayout events ([eaf8847](https://github.com/react-navigation/navigation-ex/commit/eaf88478cc392fb9ff0b69c7539595920db8e010))
+* disable pointerEvents on header when not focused ([87d445b](https://github.com/react-navigation/navigation-ex/commit/87d445b4e4468cf6c17787f47dd875ab8a95598a))
+
+
+
+
+
+# [5.0.0-alpha.38](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.37...@react-navigation/stack@5.0.0-alpha.38) (2019-11-29)
+
+
+### Bug Fixes
+
+* respect custom safearea insets when calculating header height ([2750cad](https://github.com/react-navigation/navigation-ex/commit/2750cad272def2e701ba2823a6e5693cee61eff0)), closes [#190](https://github.com/react-navigation/navigation-ex/issues/190)
+
+
+
+
+
+# [5.0.0-alpha.37](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.36...@react-navigation/stack@5.0.0-alpha.37) (2019-11-17)
+
+
+### Bug Fixes
+
+* workaround SafereaProvider causing jumping ([c17ad18](https://github.com/react-navigation/navigation-ex/commit/c17ad18b20cb05c577e1235a58ccc1c856fee086)), closes [#174](https://github.com/react-navigation/navigation-ex/issues/174)
+
+
+
+
+
 # [5.0.0-alpha.36](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.35...@react-navigation/stack@5.0.0-alpha.36) (2019-11-10)
 
 **Note:** Version bump only for package @react-navigation/stack

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.36",
+  "version": "5.0.0-alpha.40",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,20 +33,20 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.14"
+    "@react-navigation/routers": "^5.0.0-alpha.15"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
-    "@react-native-community/masked-view": "^0.1.1",
+    "@react-native-community/masked-view": "^0.1.5",
-    "@types/react": "^16.9.4",
+    "@types/react": "^16.9.11",
-    "@types/react-native": "^0.60.17",
+    "@types/react-native": "^0.60.22",
     "del-cli": "^3.0.0",
     "react": "~16.8.3",
     "react-native": "~0.59.10",
-    "react-native-gesture-handler": "^1.3.0",
+    "react-native-gesture-handler": "^1.5.0",
-    "react-native-reanimated": "^1.3.0",
+    "react-native-reanimated": "^1.4.0",
-    "react-native-safe-area-context": "^0.3.6",
+    "react-native-safe-area-context": "^0.6.0",
-    "react-native-screens": "^2.0.0-alpha.8",
+    "react-native-screens": "^2.0.0-alpha.11",
     "typescript": "^3.7.2"
   },
   "peerDependencies": {

packages/stack/src/index.tsx

@@ -6,9 +6,7 @@ import * as TransitionPresets from './TransitionConfigs/TransitionPresets';
 /**
  * Navigators
  */
-export {
+export { default as createStackNavigator } from './navigators/createStackNavigator';
-  default as createStackNavigator,
-} from './navigators/createStackNavigator';
 
 export const Assets = [
   require('./views/assets/back-icon.png'),
@@ -18,6 +16,7 @@ export const Assets = [
 /**
  * Views
  */
+export { default as StackView } from './views/Stack/StackView';
 export { default as Header } from './views/Header/Header';
 export { default as HeaderTitle } from './views/Header/HeaderTitle';
 export { default as HeaderBackButton } from './views/Header/HeaderBackButton';

packages/stack/src/navigators/createStackNavigator.tsx

@@ -11,7 +11,6 @@ import {
   StackNavigationState,
   StackActions,
 } from '@react-navigation/routers';
-import KeyboardManager from '../views/KeyboardManager';
 import StackView from '../views/Stack/StackView';
 import {
   StackNavigationConfig,
@@ -24,7 +23,6 @@ type Props = DefaultNavigatorOptions<StackNavigationOptions> &
   StackNavigationConfig;
 
 function StackNavigator({
-  keyboardHandlingEnabled,
   initialRouteName,
   children,
   screenOptions,
@@ -64,17 +62,12 @@ function StackNavigator({
   );
 
   return (
-    <KeyboardManager enabled={keyboardHandlingEnabled !== false}>
+    <StackView
-      {props => (
+      {...rest}
-        <StackView
+      state={state}
-          state={state}
+      descriptors={descriptors}
-          descriptors={descriptors}
+      navigation={navigation}
-          navigation={navigation}
+    />
-          {...rest}
-          {...props}
-        />
-      )}
-    </KeyboardManager>
   );
 }
 

packages/stack/src/types.tsx

@@ -48,7 +48,7 @@ export type StackNavigationProp<
    * @param [params] Params object for the route.
    */
   push<RouteName extends keyof ParamList>(
-    ...args: ParamList[RouteName] extends (undefined | any)
+    ...args: ParamList[RouteName] extends undefined | any
       ? [RouteName] | [RouteName, ParamList[RouteName]]
       : [RouteName, ParamList[RouteName]]
   ): void;

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

@@ -114,7 +114,7 @@ export default function HeaderContainer({
                       })
                   : undefined
               }
-              pointerEvents="box-none"
+              pointerEvents={isFocused ? 'box-none' : 'none'}
               accessibilityElementsHidden={!isFocused}
               importantForAccessibility={
                 isFocused ? 'auto' : 'no-hide-descendants'

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

@@ -79,17 +79,20 @@ export default class HeaderSegment extends React.Component<Props, State> {
 
   private handleTitleLayout = (e: LayoutChangeEvent) => {
     const { height, width } = e.nativeEvent.layout;
-    const { titleLayout } = this.state;
 
-    if (
+    this.setState(({ titleLayout }) => {
-      titleLayout &&
+      if (
-      height === titleLayout.height &&
+        titleLayout &&
-      width === titleLayout.width
+        height === titleLayout.height &&
-    ) {
+        width === titleLayout.width
-      return;
+      ) {
-    }
+        return null;
+      }
 
-    this.setState({ titleLayout: { height, width } });
+      return {
+        titleLayout: { height, width },
+      };
+    });
   };
 
   private handleLeftLabelLayout = (e: LayoutChangeEvent) => {

packages/stack/src/views/SafeAreaProviderCompat.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import {
+  SafeAreaProvider,
+  SafeAreaConsumer,
+} from 'react-native-safe-area-context';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function SafeAreaProviderCompat({ children }: Props) {
+  return (
+    <SafeAreaConsumer>
+      {insets => {
+        if (insets) {
+          // If we already have insets, don't wrap the stack in another safe area provider
+          // This avoids an issue with updates at the cost of potentially incorrect values
+          // https://github.com/react-navigation/navigation-ex/issues/174
+          return children;
+        }
+
+        return <SafeAreaProvider>{children}</SafeAreaProvider>;
+      }}
+    </SafeAreaConsumer>
+  );
+}

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

@@ -60,7 +60,7 @@ type Props = TransitionPreset & {
   floatingHeaderHeight: number;
 };
 
-export default class StackItem extends React.PureComponent<Props> {
+export default class CardContainer extends React.PureComponent<Props> {
   private handleOpen = () => {
     const { scene, onTransitionEnd, onOpenRoute } = this.props;
 

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

@@ -16,7 +16,7 @@ import { StackNavigationState } from '@react-navigation/routers';
 
 import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
-import StackItem from './StackItem';
+import CardContainer from './CardContainer';
 import {
   DefaultTransition,
   ModalTransition,
@@ -71,9 +71,9 @@ type State = {
 const dimensions = Dimensions.get('window');
 const layout = { width: dimensions.width, height: dimensions.height };
 
-let AnimatedScreen: React.ComponentType<
+let AnimatedScreen: React.ComponentType<ViewProps & {
-  ViewProps & { active: number | Animated.Node<number> }
+  active: number | Animated.Node<number>;
->;
+}>;
 
 const MaybeScreenContainer = ({
   enabled,
@@ -121,21 +121,25 @@ const getFloatingHeaderHeights = (
   layout: Layout,
   previous: Record<string, number>
 ) => {
-  const defaultHeaderHeight = getDefaultHeaderHeight(layout, insets);
-
   return routes.reduce<Record<string, number>>((acc, curr) => {
     const { options = {} } = descriptors[curr.key] || {};
     const { height = previous[curr.key] } = StyleSheet.flatten(
       options.headerStyle || {}
     );
 
-    acc[curr.key] = typeof height === 'number' ? height : defaultHeaderHeight;
+    acc[curr.key] =
+      typeof height === 'number'
+        ? height
+        : getDefaultHeaderHeight(layout, {
+            ...insets,
+            ...options.safeAreaInsets,
+          });
 
     return acc;
   }, {});
 };
 
-export default class Stack extends React.Component<Props, State> {
+export default class CardStack extends React.Component<Props, State> {
   static getDerivedStateFromProps(props: Props, state: State) {
     if (
       props.routes === state.routes &&
@@ -229,25 +233,24 @@ export default class Stack extends React.Component<Props, State> {
   private handleLayout = (e: LayoutChangeEvent) => {
     const { height, width } = e.nativeEvent.layout;
 
-    if (
-      height === this.state.layout.height &&
-      width === this.state.layout.width
-    ) {
-      return;
-    }
-
     const layout = { width, height };
 
-    this.setState(state => ({
+    this.setState((state, props) => {
-      layout,
+      if (height === state.layout.height && width === state.layout.width) {
-      floatingHeaderHeights: getFloatingHeaderHeights(
+        return null;
-        this.props.routes,
+      }
-        this.props.insets,
+
-        state.descriptors,
+      return {
         layout,
-        {}
+        floatingHeaderHeights: getFloatingHeaderHeights(
-      ),
+          props.routes,
-    }));
+          props.insets,
+          state.descriptors,
+          layout,
+          {}
+        ),
+      };
+    });
   };
 
   private handleFloatingHeaderLayout = ({
@@ -257,18 +260,20 @@ export default class Stack extends React.Component<Props, State> {
     route: Route<string>;
     height: number;
   }) => {
-    const previousHeight = this.state.floatingHeaderHeights[route.key];
+    this.setState(({ floatingHeaderHeights }) => {
+      const previousHeight = this.state.floatingHeaderHeights[route.key];
 
-    if (previousHeight && previousHeight === height) {
+      if (previousHeight && previousHeight === height) {
-      return;
+        return null;
-    }
+      }
 
-    this.setState(state => ({
+      return {
-      floatingHeaderHeights: {
+        floatingHeaderHeights: {
-        ...state.floatingHeaderHeights,
+          ...floatingHeaderHeights,
-        [route.key]: height,
+          [route.key]: height,
-      },
+        },
-    }));
+      };
+    });
   };
 
   private handleTransitionStart = (
@@ -426,7 +431,7 @@ export default class Stack extends React.Component<Props, State> {
                 active={isScreenActive}
                 pointerEvents="box-none"
               >
-                <StackItem
+                <CardContainer
                   index={index}
                   active={index === self.length - 1}
                   focused={focused}

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

@@ -1,17 +1,15 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
-import {
+import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
-  SafeAreaProvider,
-  SafeAreaConsumer,
-  EdgeInsets,
-} from 'react-native-safe-area-context';
 import { Route } from '@react-navigation/core';
 import { StackActions, StackNavigationState } from '@react-navigation/routers';
 
-import Stack from './Stack';
+import CardStack from './CardStack';
+import KeyboardManager from '../KeyboardManager';
 import HeaderContainer, {
   Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
+import SafeAreaProviderCompat from '../SafeAreaProviderCompat';
 import {
   StackNavigationHelpers,
   StackNavigationConfig,
@@ -22,9 +20,6 @@ type Props = StackNavigationConfig & {
   state: StackNavigationState;
   navigation: StackNavigationHelpers;
   descriptors: StackDescriptorMap;
-  onPageChangeStart?: () => void;
-  onPageChangeConfirm?: () => void;
-  onPageChangeCancel?: () => void;
 };
 
 type State = {
@@ -310,9 +305,7 @@ class StackView extends React.Component<Props, State> {
     const {
       state,
       navigation,
-      onPageChangeStart,
+      keyboardHandlingEnabled,
-      onPageChangeConfirm,
-      onPageChangeCancel,
       mode = 'card',
       ...rest
     } = this.props;
@@ -328,34 +321,36 @@ class StackView extends React.Component<Props, State> {
       mode !== 'modal' && Platform.OS === 'ios' ? 'float' : 'screen';
 
     return (
-      <SafeAreaProvider>
+      <SafeAreaProviderCompat>
         <SafeAreaConsumer>
           {insets => (
-            <Stack
+            <KeyboardManager enabled={keyboardHandlingEnabled !== false}>
-              mode={mode}
+              {props => (
-              insets={insets as EdgeInsets}
+                <CardStack
-              getPreviousRoute={this.getPreviousRoute}
+                  mode={mode}
-              getGesturesEnabled={this.getGesturesEnabled}
+                  insets={insets as EdgeInsets}
-              routes={routes}
+                  getPreviousRoute={this.getPreviousRoute}
-              openingRouteKeys={openingRouteKeys}
+                  getGesturesEnabled={this.getGesturesEnabled}
-              closingRouteKeys={closingRouteKeys}
+                  routes={routes}
-              onGoBack={this.handleGoBack}
+                  openingRouteKeys={openingRouteKeys}
-              onOpenRoute={this.handleOpenRoute}
+                  closingRouteKeys={closingRouteKeys}
-              onCloseRoute={this.handleCloseRoute}
+                  onGoBack={this.handleGoBack}
-              onPageChangeStart={onPageChangeStart}
+                  onOpenRoute={this.handleOpenRoute}
-              onPageChangeConfirm={onPageChangeConfirm}
+                  onCloseRoute={this.handleCloseRoute}
-              onPageChangeCancel={onPageChangeCancel}
+                  renderHeader={this.renderHeader}
-              renderHeader={this.renderHeader}
+                  renderScene={this.renderScene}
-              renderScene={this.renderScene}
+                  headerMode={headerMode}
-              headerMode={headerMode}
+                  state={state}
-              state={state}
+                  navigation={navigation}
-              navigation={navigation}
+                  descriptors={descriptors}
-              descriptors={descriptors}
+                  {...rest}
-              {...rest}
+                  {...props}
-            />
+                />
+              )}
+            </KeyboardManager>
           )}
         </SafeAreaConsumer>
-      </SafeAreaProvider>
+      </SafeAreaProviderCompat>
     );
   }
 }