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

.circleci/config.yml

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

README.md

@@ -35,7 +35,7 @@ Navigators bundle a router and a view which takes the navigation state and decid
 A simple navigator could look like this:
 
 ```js
-import { createNavigator } from '@react-navigation/core';
+import { createNavigatorFactory } from '@react-navigation/core';
 
 function StackNavigator({ initialRouteName, children, ...rest }) {
   // The `navigation` object contains the navigation state and some helpers (e.g. push, pop)
@@ -56,7 +56,7 @@ function StackNavigator({ initialRouteName, children, ...rest }) {
   );
 }
 
-export default createNavigator(StackNavigator);
+export default createNavigatorFactory(StackNavigator);
 ```
 
 The navigator can render a screen by calling `descriptors[route.key].render()`. Internally, the descriptor adds appropriate wrappers to handle nested state.

package.json

@@ -22,23 +22,23 @@
     "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.6.3"
+    "typescript": "^3.7.2"
   },
   "resolutions": {
     "react": "~16.8.3",

packages/bottom-tabs/CHANGELOG.md

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

packages/bottom-tabs/package.json

@@ -10,7 +10,7 @@
     "android",
     "tab"
   ],
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.23",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,17 +33,17 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@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.6.3"
+    "typescript": "^3.7.2"
   },
   "peerDependencies": {
     "@react-navigation/core": "^5.0.0-alpha.0",

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/navigators/createBottomTabNavigator.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   useNavigationBuilder,
-  createNavigator,
+  createNavigatorFactory,
   DefaultNavigatorOptions,
 } from '@react-navigation/core';
 import {
@@ -49,7 +49,7 @@ function BottomTabNavigator({
   );
 }
 
-export default createNavigator<
+export default createNavigatorFactory<
   BottomTabNavigationOptions,
   typeof BottomTabNavigator
 >(BottomTabNavigator);

packages/bottom-tabs/src/types.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  TouchableWithoutFeedbackProps,
   AccessibilityRole,
   AccessibilityStates,
   StyleProp,
@@ -26,8 +27,6 @@ export type BottomTabNavigationEventMap = {
   tabLongPress: undefined;
 };
 
-export type Orientation = 'horizontal' | 'vertical';
-
 export type LabelPosition = 'beside-icon' | 'below-icon';
 
 export type BottomTabNavigationHelpers = NavigationHelpers<
@@ -52,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;
@@ -65,28 +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: {
+    | ((props: { focused: boolean; color: string }) => React.ReactNode);
-        focused: boolean;
-        color: string;
-        size: number;
-      }) => 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.
@@ -105,9 +98,10 @@ export type BottomTabNavigationOptions = {
   tabBarVisible?: boolean;
 
   /**
-   * Buttton component to render for the tab items instead of the default `TouchableWithoutFeedback`
+   * Function which returns a React element to render as the tab bar button.
+   * Renders `TouchableWithoutFeedback` by default.
    */
-  tabBarButtonComponent?: React.ComponentType<any>;
+  tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
 };
 
 export type BottomTabDescriptor = Descriptor<
@@ -128,9 +122,14 @@ export type BottomTabNavigationConfig = {
    */
   lazy?: boolean;
   /**
-   * Custom tab bar component.
+   * Whether a screen should be unmounted when navigating away from it.
+   * Defaults to `false`.
    */
-  tabBarComponent?: React.ComponentType<BottomTabBarProps>;
+  unmountInactiveScreens?: boolean;
+  /**
+   * Function that returns a React element to display as the tab bar.
+   */
+  tabBar?: (props: BottomTabBarProps) => React.ReactNode;
   /**
    * Options for the tab bar which will be passed as props to the tab bar component.
    */
@@ -180,12 +179,14 @@ export type BottomTabBarOptions = {
   tabStyle?: StyleProp<ViewStyle>;
   /**
    * Whether the label is renderd below the icon or beside the icon.
-   * When a function is passed, it receives the device orientation to render the label differently.
+   * When a function is passed, it receives the device dimensions to render the label differently.
    * By default, in `vertical` orinetation, label is rendered below and in `horizontal` orientation, it's renderd beside.
    */
   labelPosition?:
     | LabelPosition
-    | ((options: { deviceOrientation: Orientation }) => LabelPosition);
+    | ((options: {
+        dimensions: { height: number; width: number };
+      }) => LabelPosition);
   /**
    * Whether the label position should adapt to the orientation.
    */
@@ -212,25 +213,26 @@ export type BottomTabBarProps = BottomTabBarOptions & {
     route: Route<string>;
     focused: boolean;
   }) => AccessibilityStates[];
-  getButtonComponent: (props: {
-    route: Route<string>;
-  }) => React.ComponentType<any> | undefined;
   getLabelText: (props: {
     route: Route<string>;
   }) =>
     | ((scene: {
         focused: boolean;
         color: string;
-        orientation: 'horizontal' | 'vertical';
       }) => React.ReactNode | undefined)
-    | React.ReactNode;
+    | string;
   getTestID: (props: { route: Route<string> }) => string | undefined;
+  renderButton: (
+    props: { route: Route<string> } & BottomTabBarButtonProps
+  ) => React.ReactNode;
   renderIcon: (props: {
     route: Route<string>;
     focused: boolean;
     color: string;
     size: number;
   }) => React.ReactNode;
-  activeTintColor: string;
+};
-  inactiveTintColor: string;
+
+export type BottomTabBarButtonProps = TouchableWithoutFeedbackProps & {
+  children: React.ReactNode;
 };

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

@@ -13,7 +13,6 @@ import { Route, NavigationContext } from '@react-navigation/core';
 import { SafeAreaConsumer } from 'react-native-safe-area-context';
 
 import TabBarIcon from './TabBarIcon';
-import TouchableWithoutFeedbackWrapper from './TouchableWithoutFeedbackWrapper';
 import { BottomTabBarProps } from '../types';
 
 type State = {
@@ -23,12 +22,12 @@ type State = {
   visible: Animated.Value;
 };
 
-type Props = BottomTabBarProps;
+type Props = BottomTabBarProps & {
-
+  activeTintColor: string;
-const majorVersion = parseInt(Platform.Version as string, 10);
+  inactiveTintColor: string;
-const isIos = Platform.OS === 'ios';
+};
-const isIOS11 = majorVersion >= 11 && isIos;
 
+const DEFAULT_TABBAR_HEIGHT = 50;
 const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
 
 export default class TabBarBottom extends React.Component<Props, State> {
@@ -41,7 +40,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
     showLabel: true,
     showIcon: true,
     allowFontScaling: true,
-    adaptive: isIOS11,
+    adaptive: true,
   };
 
   state = {
@@ -156,15 +155,11 @@ export default class TabBarBottom extends React.Component<Props, State> {
       );
     }
 
-    if (typeof label === 'function') {
+    if (typeof label === 'string') {
-      return label({
+      return label;
-        focused,
-        color,
-        orientation: horizontal ? 'horizontal' : 'vertical',
-      });
     }
 
-    return label;
+    return label({ focused, color });
   };
 
   private renderIcon = ({
@@ -179,7 +174,6 @@ export default class TabBarBottom extends React.Component<Props, State> {
       inactiveTintColor,
       renderIcon,
       showIcon,
-      showLabel,
     } = this.props;
 
     if (showIcon === false) {
@@ -200,11 +194,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}
         renderIcon={renderIcon}
-        style={[
+        style={horizontal ? styles.iconHorizontal : styles.iconVertical}
-          styles.iconWithExplicitHeight,
-          showLabel === false && !horizontal && styles.iconWithoutLabel,
-          showLabel !== false && !horizontal && styles.iconWithLabel,
-        ]}
       />
     );
   };
@@ -217,12 +207,11 @@ export default class TabBarBottom extends React.Component<Props, State> {
 
     if (labelPosition) {
       let position;
+
       if (typeof labelPosition === 'string') {
         position = labelPosition;
       } else {
-        position = labelPosition({
+        position = labelPosition({ dimensions });
-          deviceOrientation: isLandscape ? 'horizontal' : 'vertical',
-        });
       }
 
       if (position) {
@@ -234,8 +223,8 @@ export default class TabBarBottom extends React.Component<Props, State> {
       return false;
     }
 
-    // @ts-ignore
+    if (dimensions.width >= 768) {
-    if (Platform.isPad) {
+      // Screen size matches a tablet
       let maxTabItemWidth = DEFAULT_MAX_TAB_ITEM_WIDTH;
 
       const flattenedStyle = StyleSheet.flatten(tabStyle);
@@ -266,7 +255,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
       getAccessibilityLabel,
       getAccessibilityRole,
       getAccessibilityStates,
-      getButtonComponent,
+      renderButton,
       getTestID,
       style,
       tabStyle,
@@ -296,11 +285,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
                   }
                 : null,
               {
-                height:
+                height: DEFAULT_TABBAR_HEIGHT + (insets ? insets.bottom : 0),
-                  // @ts-ignore
-                  (this.shouldUseHorizontalLabels() && !Platform.isPad
-                    ? COMPACT_HEIGHT
-                    : DEFAULT_HEIGHT) + (insets ? insets.bottom : 0),
                 paddingBottom: insets ? insets.bottom : 0,
               },
               style,
@@ -329,34 +314,34 @@ export default class TabBarBottom extends React.Component<Props, State> {
                   ? activeBackgroundColor
                   : inactiveBackgroundColor;
 
-                const ButtonComponent =
-                  getButtonComponent({ route }) ||
-                  TouchableWithoutFeedbackWrapper;
-
                 return (
                   <NavigationContext.Provider
                     key={route.key}
                     value={descriptors[route.key].navigation}
                   >
-                    <ButtonComponent
+                    {renderButton({
-                      onPress={() => onTabPress({ route })}
+                      route,
-                      onLongPress={() => onTabLongPress({ route })}
+                      onPress: () => onTabPress({ route }),
-                      testID={testID}
+                      onLongPress: () => onTabLongPress({ route }),
-                      accessibilityLabel={accessibilityLabel}
+                      testID,
-                      accessibilityRole={accessibilityRole}
+                      accessibilityLabel,
-                      accessibilityStates={accessibilityStates}
+                      accessibilityRole,
-                      style={[
+                      accessibilityStates,
+                      style: [
                         styles.tab,
                         { backgroundColor },
                         this.shouldUseHorizontalLabels()
                           ? styles.tabLandscape
                           : styles.tabPortrait,
                         tabStyle,
-                      ]}
+                      ],
-                    >
+                      children: (
-                      {this.renderIcon(scene)}
+                        <React.Fragment>
-                      {this.renderLabel(scene)}
+                          {this.renderIcon(scene)}
-                    </ButtonComponent>
+                          {this.renderLabel(scene)}
+                        </React.Fragment>
+                      ),
+                    })}
                   </NavigationContext.Provider>
                 );
               })}
@@ -368,9 +353,6 @@ export default class TabBarBottom extends React.Component<Props, State> {
   }
 }
 
-const DEFAULT_HEIGHT = 49;
-const COMPACT_HEIGHT = 29;
-
 const styles = StyleSheet.create({
   tabBar: {
     left: 0,
@@ -387,7 +369,7 @@ const styles = StyleSheet.create({
   },
   tab: {
     flex: 1,
-    alignItems: isIos ? 'center' : 'stretch',
+    alignItems: 'center',
   },
   tabPortrait: {
     justifyContent: 'flex-end',
@@ -397,15 +379,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
   },
-  iconWithoutLabel: {
+  iconVertical: {
     flex: 1,
   },
-  iconWithLabel: {
+  iconHorizontal: {
-    flex: 1,
+    height: '100%',
-  },
-  iconWithExplicitHeight: {
-    // @ts-ignore
-    height: Platform.isPad ? DEFAULT_HEIGHT : COMPACT_HEIGHT,
   },
   label: {
     textAlign: 'center',

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

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

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/bottom-tabs/src/views/TouchableWithoutFeedbackWrapper.tsx

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

packages/compat/CHANGELOG.md

@@ -3,6 +3,65 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.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
+
+
+
+
+
+# [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.12...@react-navigation/compat@5.0.0-alpha.13) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.11...@react-navigation/compat@5.0.0-alpha.12) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.10...@react-navigation/compat@5.0.0-alpha.11) (2019-10-30)
+
+
+### Bug Fixes
+
+* drop isFirstRouteInParent method ([#145](https://github.com/react-navigation/navigation-ex/issues/145)) ([3a77107](https://github.com/react-navigation/navigation-ex/commit/3a77107))
+
+
+
+
+
+# [5.0.0-alpha.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.9...@react-navigation/compat@5.0.0-alpha.10) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.8...@react-navigation/compat@5.0.0-alpha.9) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 # [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.7...@react-navigation/compat@5.0.0-alpha.8) (2019-10-15)
 
 

packages/compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.0.0-alpha.8",
+  "version": "5.0.0-alpha.15",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -24,12 +24,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@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.6.3"
+    "typescript": "^3.7.2"
   },
   "peerDependencies": {
     "@react-navigation/core": "^5.0.0-alpha.0",

packages/compat/src/createCompatNavigationProp.tsx

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

packages/compat/src/createCompatNavigatorFactory.tsx

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

packages/compat/src/createSwitchNavigator.tsx

@@ -1,6 +1,6 @@
 import {
   useNavigationBuilder,
-  createNavigator,
+  createNavigatorFactory,
   DefaultNavigatorOptions,
 } from '@react-navigation/core';
 import {
@@ -24,5 +24,5 @@ function SwitchNavigator(props: Props) {
 }
 
 export default createCompatNavigatorFactory(
-  createNavigator<{}, typeof SwitchNavigator>(SwitchNavigator)
+  createNavigatorFactory<{}, typeof SwitchNavigator>(SwitchNavigator)
 );

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

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

packages/core/CHANGELOG.md

@@ -3,6 +3,130 @@
 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)
+
+
+### Bug Fixes
+
+* throw when containers are nested within another ([d4072e7](https://github.com/react-navigation/navigation-ex/commit/d4072e7))
+
+
+
+
+
+# [5.0.0-alpha.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.20...@react-navigation/core@5.0.0-alpha.21) (2019-11-08)
+
+
+### Bug Fixes
+
+* don't crash if initialState is null ([270fbdc](https://github.com/react-navigation/navigation-ex/commit/270fbdc))
+* fix types for resetRoot to accept undefined ([e871fdb](https://github.com/react-navigation/navigation-ex/commit/e871fdb))
+
+
+
+
+
+# [5.0.0-alpha.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.19...@react-navigation/core@5.0.0-alpha.20) (2019-11-02)
+
+
+### Bug Fixes
+
+* pass rehydrated state in onStateChange and devtools ([5a34764](https://github.com/react-navigation/navigation-ex/commit/5a34764))
+
+
+
+
+
+# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.18...@react-navigation/core@5.0.0-alpha.19) (2019-10-30)
+
+
+### Bug Fixes
+
+* drop isFirstRouteInParent method ([#145](https://github.com/react-navigation/navigation-ex/issues/145)) ([3a77107](https://github.com/react-navigation/navigation-ex/commit/3a77107))
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.17...@react-navigation/core@5.0.0-alpha.18) (2019-10-29)
+
+
+### Bug Fixes
+
+* improve type annotation for screens ([8f16085](https://github.com/react-navigation/navigation-ex/commit/8f16085))
+
+
+
+
+
+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.16...@react-navigation/core@5.0.0-alpha.17) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.15...@react-navigation/core@5.0.0-alpha.16) (2019-10-18)
+
+
+### Bug Fixes
+
+* rehydrate state before using it ([3e92e22](https://github.com/react-navigation/navigation-ex/commit/3e92e22))
+
+
+### Features
+
+* make it easier to navigate to a specific route in navigator ([#114](https://github.com/react-navigation/navigation-ex/issues/114)) ([a543f1b](https://github.com/react-navigation/navigation-ex/commit/a543f1b)), closes [#90](https://github.com/react-navigation/navigation-ex/issues/90)
+
+
+
+
+
 # [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.14...@react-navigation/core@5.0.0-alpha.15) (2019-10-15)
 
 

packages/core/README.md

@@ -15,7 +15,7 @@ yarn add @react-navigation/core
 A basic custom navigator bundling a router and a view looks like this:
 
 ```js
-import { useNavigationBuilder } from '@react-navigation/core';
+import { createNavigatorFactory, useNavigationBuilder } from '@react-navigation/core';
 import { StackRouter } from '@react-navigation/routers';
 
 function StackNavigator({ initialRouteName, children, ...rest }) {
@@ -34,5 +34,5 @@ function StackNavigator({ initialRouteName, children, ...rest }) {
   );
 }
 
-export default createNavigator(StackNavigator);
+export default createNavigatorFactory(StackNavigator);
 ```

packages/core/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.15",
+  "version": "5.0.0-alpha.26",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -30,20 +30,20 @@
   },
   "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",
     "react-native-testing-library": "^1.9.1",
     "react-test-renderer": "~16.8.3",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
   },
   "peerDependencies": {
     "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

@@ -23,6 +23,7 @@ const MISSING_CONTEXT_ERROR =
   "We couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?";
 
 export const NavigationStateContext = React.createContext<{
+  isDefault?: true;
   state?: NavigationState | PartialState<NavigationState>;
   getState: () => NavigationState | PartialState<NavigationState> | undefined;
   setState: (
@@ -31,6 +32,8 @@ export const NavigationStateContext = React.createContext<{
   key?: string;
   performTransaction: (action: () => void) => void;
 }>({
+  isDefault: true,
+
   get getState(): any {
     throw new Error(MISSING_CONTEXT_ERROR);
   },
@@ -83,11 +86,24 @@ const getPartialState = (
  * @param props.ref Ref object which refers to the navigation object containing helper methods.
  */
 const Container = React.forwardRef(function NavigationContainer(
-  { initialState, onStateChange, children }: NavigationContainerProps,
+  {
+    initialState,
+    onStateChange,
+    independent,
+    children,
+  }: NavigationContainerProps,
   ref: React.Ref<NavigationContainerRef>
 ) {
+  const parent = React.useContext(NavigationStateContext);
+
+  if (!parent.isDefault && !independent) {
+    throw new Error(
+      "Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitely."
+    );
+  }
+
   const [state, setNavigationState] = React.useState<State>(() =>
-    getPartialState(initialState)
+    getPartialState(initialState == null ? undefined : initialState)
   );
 
   const navigationStateRef = React.useRef<State>();
@@ -96,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 = () => {
-    return getStateForRoute('root');
-  };
-
-  React.useImperativeHandle(ref, () => ({
-    ...(Object.keys(CommonActions) as Array<keyof typeof CommonActions>).reduce<
-      any
-    >((acc, name) => {
-      acc[name] = (...args: any[]) =>
-        dispatch(
-          CommonActions[name](
-            // @ts-ignore
-            ...args
-          )
-        );
-      return acc;
-    }, {}),
-    resetRoot,
-    dispatch,
-    canGoBack,
-    getRootState,
-  }));
-
-  const builderContext = React.useMemo(
-    () => ({
-      addFocusedListener,
-      addStateGetter,
-      trackAction,
-    }),
-    [addFocusedListener, trackAction, addStateGetter]
-  );
-
   const performTransaction = React.useCallback((callback: () => void) => {
     if (isTransactionActiveRef.current) {
       throw new Error(
@@ -206,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,
@@ -220,18 +243,18 @@ const Container = React.forwardRef(function NavigationContainer(
     if (skipTrackingRef.current) {
       skipTrackingRef.current = false;
     } else {
-      trackState(state);
+      trackState(getRootState);
     }
 
     navigationStateRef.current = state;
     transactionStateRef.current = null;
 
     if (!isFirstMountRef.current && onStateChange) {
-      onStateChange(state);
+      onStateChange(getRootState());
     }
 
     isFirstMountRef.current = false;
-  }, [state, onStateChange, trackState]);
+  }, [state, onStateChange, trackState, getRootState]);
 
   return (
     <NavigationBuilderContext.Provider value={builderContext}>

packages/core/src/SceneView.tsx

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

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

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

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

@@ -122,6 +122,32 @@ it('throws when nesting performTransaction', () => {
   );
 });
 
+it('throws when nesting containers', () => {
+  expect(() =>
+    render(
+      <NavigationContainer>
+        <NavigationContainer>
+          <React.Fragment />
+        </NavigationContainer>
+      </NavigationContainer>
+    )
+  ).toThrowError(
+    "Looks like you have nested a 'NavigationContainer' inside another."
+  );
+
+  expect(() =>
+    render(
+      <NavigationContainer>
+        <NavigationContainer independent>
+          <React.Fragment />
+        </NavigationContainer>
+      </NavigationContainer>
+    )
+  ).not.toThrowError(
+    "Looks like you have nested a 'NavigationContainer' inside another."
+  );
+});
+
 it('handle dispatching with ref', () => {
   const CurrentParentRouter = MockRouter;
 
@@ -137,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;
@@ -186,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' },
@@ -233,6 +262,7 @@ it('handle dispatching with ref', () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).lastCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'foo2', 'bar', 'baz'],
@@ -242,10 +272,14 @@ it('handle dispatching with ref', () => {
         name: 'baz',
         state: {
           stale: false,
+          type: 'test',
           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' },
@@ -305,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' },
@@ -319,7 +356,31 @@ it('handle resetting state with ref', () => {
   });
 
   expect(onStateChange).toBeCalledTimes(1);
-  expect(onStateChange).lastCalledWith(state);
+  expect(onStateChange).lastCalledWith({
+    index: 1,
+    key: '5',
+    routeNames: ['foo', 'foo2', 'bar', 'baz'],
+    routes: [
+      {
+        key: 'baz',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: '6',
+          routeNames: ['qux', 'lex'],
+          routes: [
+            { key: 'qux', name: 'qux' },
+            { key: 'lex', name: 'lex' },
+          ],
+          stale: false,
+          type: 'test',
+        },
+      },
+      { key: 'bar', name: 'bar' },
+    ],
+    stale: false,
+    type: 'test',
+  });
 });
 
 it('handle getRootState', () => {
@@ -365,12 +426,17 @@ 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',
         },
       },
       { key: 'bar', name: 'bar' },
     ],
     stale: false,
+    type: 'test',
   });
 });

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

@@ -13,6 +13,8 @@ export const MockRouterKey = { current: 0 };
 
 export default function MockRouter(options: DefaultRouterOptions) {
   const router: Router<NavigationState, MockActions> = {
+    type: 'test',
+
     getInitialState({ routeNames, routeParamList }) {
       const index =
         options.initialRouteName === undefined
@@ -21,6 +23,7 @@ export default function MockRouter(options: DefaultRouterOptions) {
 
       return {
         stale: false,
+        type: 'test',
         key: String(MockRouterKey.current++),
         index,
         routeNames,
@@ -58,6 +61,7 @@ export default function MockRouter(options: DefaultRouterOptions) {
 
       return {
         stale: false,
+        type: 'test',
         key: String(MockRouterKey.current++),
         index:
           typeof state.index === 'number' && state.index < routes.length
@@ -108,7 +112,24 @@ export default function MockRouter(options: DefaultRouterOptions) {
             return null;
           }
 
-          return { ...state, index };
+          return {
+            ...state,
+            index,
+            routes:
+              action.payload.params !== undefined
+                ? state.routes.map((route, i) =>
+                    i === index
+                      ? {
+                          ...route,
+                          params: {
+                            ...route.params,
+                            ...action.payload.params,
+                          },
+                        }
+                      : route
+                  )
+                : state.routes,
+          };
         }
 
         default:

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

@@ -5,7 +5,7 @@ import NavigationContainer from '../NavigationContainer';
 import useNavigationBuilder from '../useNavigationBuilder';
 import useNavigation from '../useNavigation';
 import MockRouter, { MockRouterKey } from './__fixtures__/MockRouter';
-import { NavigationState } from '../types';
+import { NavigationState, NavigationContainerRef } from '../types';
 
 beforeEach(() => (MockRouterKey.current = 0));
 
@@ -52,6 +52,7 @@ it('initializes state for a navigator on navigation', () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).toBeCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar', 'baz'],
@@ -63,6 +64,27 @@ it('initializes state for a navigator on navigation', () => {
   });
 });
 
+it("doesn't crash when initialState is null", () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const TestScreen = () => null;
+
+  const element = (
+    // @ts-ignore
+    <NavigationContainer initialState={null}>
+      <TestNavigator>
+        <Screen name="foo" component={TestScreen} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(() => render(element)).not.toThrowError();
+});
+
 it('rehydrates state for a navigator on navigation', () => {
   const TestNavigator = (props: any) => {
     const { state, descriptors } = useNavigationBuilder(MockRouter, props);
@@ -81,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();
@@ -104,8 +129,74 @@ 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',
+  });
+});
+
+it("doesn't rehydrate state if the type of state didn't match router", () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const FooScreen = (props: any) => {
+    React.useEffect(() => {
+      props.navigation.dispatch({ type: 'UPDATE' });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return null;
+  };
+
+  const initialState = {
+    index: 1,
+    type: 'something-else',
+    routes: [
+      { key: 'foo', name: 'foo' },
+      { key: 'bar', name: 'bar' },
+    ],
+  };
+
+  const onStateChange = jest.fn();
+
+  const element = (
+    <NavigationContainer
+      initialState={initialState}
+      onStateChange={onStateChange}
+    >
+      <TestNavigator initialRouteName="foo">
+        <Screen
+          name="foo"
+          component={FooScreen}
+          initialParams={{ answer: 42 }}
+        />
+        <Screen name="bar" component={jest.fn()} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  render(element).update(element);
+
+  expect(onStateChange).lastCalledWith({
+    index: 0,
+    key: '0',
+    routeNames: ['foo', 'bar'],
+    routes: [
+      {
+        key: 'foo',
+        name: 'foo',
+        params: { answer: 42 },
+      },
+      { key: 'bar', name: 'bar' },
+    ],
+    stale: false,
+    type: 'test',
   });
 });
 
@@ -144,6 +235,7 @@ it('initializes state for nested screens in React.Fragment', () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).toBeCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar', 'baz'],
@@ -194,6 +286,7 @@ it('initializes state for nested navigator on navigation', () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).toBeCalledWith({
     stale: false,
+    type: 'test',
     index: 2,
     key: '0',
     routeNames: ['foo', 'bar', 'baz'],
@@ -205,6 +298,7 @@ it('initializes state for nested navigator on navigation', () => {
         name: 'baz',
         state: {
           stale: false,
+          type: 'test',
           index: 0,
           key: '1',
           routeNames: ['qux'],
@@ -309,10 +403,14 @@ it('cleans up state when the navigator unmounts', () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).lastCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar'],
-    routes: [{ key: 'foo', name: 'foo' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      { key: 'bar', name: 'bar' },
+    ],
   });
 
   root.update(
@@ -361,10 +459,14 @@ it('allows state updates by dispatching a function returning an action', () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).toBeCalledWith({
     stale: false,
+    type: 'test',
     index: 1,
     key: '0',
     routeNames: ['foo', 'bar'],
-    routes: [{ key: 'foo', name: 'foo' }, { key: 'bar', name: 'bar' }],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      { key: 'bar', name: 'bar' },
+    ],
   });
 });
 
@@ -399,6 +501,7 @@ it('updates route params with setParams', () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).lastCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar'],
@@ -413,6 +516,7 @@ it('updates route params with setParams', () => {
   expect(onStateChange).toBeCalledTimes(2);
   expect(onStateChange).lastCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar'],
@@ -466,10 +570,23 @@ it('updates route params with setParams applied to parent', () => {
     key: '0',
     routeNames: ['foo', 'bar'],
     routes: [
-      { key: 'foo', name: 'foo', params: { username: 'alice' } },
+      {
+        key: 'foo',
+        name: 'foo',
+        params: { username: 'alice' },
+        state: {
+          index: 0,
+          key: '1',
+          routeNames: ['baz'],
+          routes: [{ key: 'baz', name: 'baz' }],
+          stale: false,
+          type: 'test',
+        },
+      },
       { key: 'bar', name: 'bar' },
     ],
     stale: false,
+    type: 'test',
   });
 
   act(() => setParams({ age: 25 }));
@@ -480,10 +597,23 @@ it('updates route params with setParams applied to parent', () => {
     key: '0',
     routeNames: ['foo', 'bar'],
     routes: [
-      { key: 'foo', name: 'foo', params: { username: 'alice', age: 25 } },
+      {
+        key: 'foo',
+        name: 'foo',
+        params: { username: 'alice', age: 25 },
+        state: {
+          index: 0,
+          key: '1',
+          routeNames: ['baz'],
+          routes: [{ key: 'baz', name: 'baz' }],
+          stale: false,
+          type: 'test',
+        },
+      },
       { key: 'bar', name: 'bar' },
     ],
     stale: false,
+    type: 'test',
   });
 });
 
@@ -516,6 +646,7 @@ it('handles change in route names', () => {
 
   expect(onStateChange).toBeCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'baz', 'qux'],
@@ -523,6 +654,80 @@ it('handles change in route names', () => {
   });
 });
 
+it('navigates to nested child in a navigator', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const TestComponent = ({ route }: any): any =>
+    `[${route.name}, ${JSON.stringify(route.params)}]`;
+
+  const onStateChange = jest.fn();
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const element = render(
+    <NavigationContainer ref={navigation} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">
+          {() => (
+            <TestNavigator>
+              <Screen name="foo-a" component={TestComponent} />
+              <Screen name="foo-b" component={TestComponent} />
+            </TestNavigator>
+          )}
+        </Screen>
+        <Screen name="bar">
+          {() => (
+            <TestNavigator initialRouteName="bar-a">
+              <Screen
+                name="bar-a"
+                component={TestComponent}
+                initialParams={{ lol: 'why' }}
+              />
+              <Screen
+                name="bar-b"
+                component={TestComponent}
+                initialParams={{ some: 'stuff' }}
+              />
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(element).toMatchInlineSnapshot(`"[foo-a, undefined]"`);
+
+  act(
+    () =>
+      navigation.current &&
+      navigation.current.navigate('bar', {
+        screen: 'bar-b',
+        params: { test: 42 },
+      })
+  );
+
+  expect(element).toMatchInlineSnapshot(
+    `"[bar-b, {\\"some\\":\\"stuff\\",\\"test\\":42}]"`
+  );
+
+  act(
+    () =>
+      navigation.current &&
+      navigation.current.navigate('bar', {
+        screen: 'bar-a',
+        params: { whoa: 'test' },
+      })
+  );
+
+  expect(element).toMatchInlineSnapshot(
+    `"[bar-a, {\\"lol\\":\\"why\\",\\"whoa\\":\\"test\\"}]"`
+  );
+});
+
 it('gives access to internal state', () => {
   const TestNavigator = (props: any): any => {
     const { state, descriptors } = useNavigationBuilder(MockRouter, props);
@@ -554,6 +759,7 @@ it('gives access to internal state', () => {
     routeNames: ['bar'],
     routes: [{ key: 'bar', name: 'bar' }],
     stale: false,
+    type: 'test',
   });
 });
 

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

@@ -216,6 +216,7 @@ it('fires blur event when a route is removed with a delay', async () => {
 
         return {
           stale: false,
+          type: 'test',
           key: 'stack',
           index: 0,
           routeNames,
@@ -229,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 {
@@ -247,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;
@@ -76,6 +76,7 @@ it("lets parent handle the action if child didn't", () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).lastCalledWith({
     stale: false,
+    type: 'test',
     index: 2,
     key: '0',
     routeNames: ['foo', 'bar', 'baz'],
@@ -102,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;
@@ -159,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' },
@@ -191,6 +195,7 @@ it("lets children handle the action if parent didn't", () => {
   expect(onStateChange).toBeCalledTimes(1);
   expect(onStateChange).lastCalledWith({
     stale: false,
+    type: 'test',
     index: 0,
     key: '0',
     routeNames: ['foo', 'bar', 'baz'],
@@ -200,10 +205,14 @@ it("lets children handle the action if parent didn't", () => {
         name: 'baz',
         state: {
           stale: false,
+          type: 'test',
           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' },
@@ -226,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,
@@ -234,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;
@@ -330,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/createNavigatorFactory.tsx

@@ -9,7 +9,7 @@ import { ParamListBase, TypedNavigator } from './types';
  * @param Navigator The navigtor component to wrap.
  * @returns Factory method to create a `Navigator` and `Screen` pair.
  */
-export default function createNavigator<
+export default function createNavigatorFactory<
   ScreenOptions extends object,
   NavigatorComponent extends React.ComponentType<any>
 >(Navigator: NavigatorComponent) {

packages/core/src/getPathFromState.tsx

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

packages/core/src/getStateFromPath.tsx

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

packages/core/src/index.tsx

@@ -4,7 +4,7 @@ export { CommonActions };
 
 export { default as BaseRouter } from './BaseRouter';
 export { default as NavigationContainer } from './NavigationContainer';
-export { default as createNavigator } from './createNavigator';
+export { default as createNavigatorFactory } from './createNavigatorFactory';
 
 export { default as NavigationContext } from './NavigationContext';
 export { default as NavigationRouteContext } from './NavigationRouteContext';

packages/core/src/types.tsx

@@ -23,6 +23,12 @@ export type NavigationState = {
   routes: Array<
     Route<string> & { state?: NavigationState | PartialState<NavigationState> }
   >;
+  /**
+   * Custom type for the state, whether it's for tab, stack, drawer etc.
+   * During rehydration, the state will be discarded if type doesn't match with router type.
+   * It can also be used to detect the type of the navigator we're dealing with.
+   */
+  type: string;
   /**
    * Whether the navigation state has been rehydrated.
    */
@@ -36,9 +42,10 @@ export type InitialState = Partial<
 };
 
 export type PartialState<State extends NavigationState> = Partial<
-  Omit<State, 'stale' | 'key' | 'routes' | 'routeNames'>
+  Omit<State, 'stale' | 'type' | 'key' | 'routes' | 'routeNames'>
 > & {
   stale?: true;
+  type?: string;
   routes: Array<
     Omit<Route<string>, 'key'> & { key?: string; state?: InitialState }
   >;
@@ -111,20 +118,28 @@ 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
 > = {
+  /**
+   * Type of the router. Should match the `type` property in state.
+   * If the type doesn't match, the state will be discarded during rehydration.
+   */
+  type: State['type'];
+
   /**
    * Initialize the navigation state.
    *
    * @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.
@@ -135,10 +150,7 @@ export type Router<
    */
   getRehydratedState(
     partialState: PartialState<State> | State,
-    options: {
+    options: RouterConfigOptions
-      routeNames: string[];
-      routeParamList: ParamListBase;
-    }
   ): State;
 
   /**
@@ -150,10 +162,7 @@ export type Router<
    */
   getStateForRouteNamesChange(
     state: State,
-    options: {
+    options: RouterConfigOptions
-      routeNames: string[];
-      routeParamList: ParamListBase;
-    }
   ): State;
 
   /**
@@ -170,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;
 
   /**
@@ -189,7 +201,7 @@ export type Router<
   actionCreators?: ActionCreators<Action>;
 };
 
-export type ParamListBase = { [key: string]: object | undefined };
+export type ParamListBase = Record<string, object | undefined>;
 
 export type EventMapBase = {
   focus: undefined;
@@ -215,7 +227,7 @@ export type EventListenerCallback<EventName extends string, Data> = (
   e: EventArg<EventName, Data>
 ) => void;
 
-export type EventConsumer<EventMap extends { [key: string]: any }> = {
+export type EventConsumer<EventMap extends Record<string, any>> = {
   /**
    * Subscribe to events from the parent navigator.
    *
@@ -232,7 +244,7 @@ export type EventConsumer<EventMap extends { [key: string]: any }> = {
   ): void;
 };
 
-export type EventEmitter<EventMap extends { [key: string]: any }> = {
+export type EventEmitter<EventMap extends Record<string, any>> = {
   /**
    * Emit an event to child screens.
    *
@@ -285,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;
@@ -325,7 +337,7 @@ type NavigationHelpersCommon<
    *
    * @param state Navigation state object.
    */
-  resetRoot(state: PartialState<NavigationState> | NavigationState): void;
+  resetRoot(state?: PartialState<NavigationState> | NavigationState): void;
 
   /**
    * Go back to the previous route in history.
@@ -349,7 +361,7 @@ type NavigationHelpersCommon<
 
 export type NavigationHelpers<
   ParamList extends ParamListBase,
-  EventMap extends { [key: string]: any } = {}
+  EventMap extends Record<string, any> = {}
 > = NavigationHelpersCommon<ParamList> &
   EventEmitter<EventMap> & {
     /**
@@ -359,15 +371,28 @@ export type NavigationHelpers<
      * @param params Params object for the current route.
      */
     setParams<RouteName extends keyof ParamList>(
-      params: ParamList[RouteName]
+      params: Partial<ParamList[RouteName]>
     ): void;
   };
 
 export type NavigationContainerProps = {
+  /**
+   * Initial navigation state for the child navigators.
+   */
   initialState?: InitialState;
-  onStateChange?: (
+  /**
-    state: NavigationState | PartialState<NavigationState> | undefined
+   * Callback which is called with the latest navigation state when it changes.
-  ) => void;
+   */
+  onStateChange?: (state: NavigationState | undefined) => void;
+  /**
+   * Whether this navigation container should be independent of parent containers.
+   * If this is not set to `true`, this container cannot be nested inside another container.
+   * Setting it to `true` disconnects any children navigators from parent container.
+   */
+  independent?: boolean;
+  /**
+   * Children elements to render.
+   */
   children: React.ReactNode;
 };
 
@@ -376,7 +401,7 @@ export type NavigationProp<
   RouteName extends keyof ParamList = string,
   State extends NavigationState = NavigationState,
   ScreenOptions extends object = {},
-  EventMap extends { [key: string]: any } = {}
+  EventMap extends Record<string, any> = {}
 > = NavigationHelpersCommon<ParamList, State> & {
   /**
    * Update the param object for the route.
@@ -384,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.
@@ -394,13 +419,6 @@ export type NavigationProp<
    */
   setOptions(options: Partial<ScreenOptions>): void;
 
-  /**
-   * Check if the screen is the first route in the navigator.
-   * This method returns `true` if the index of the route is `0`, `false` otherwise.
-   * It can be useful to decide whether to display a back button in a stack.
-   */
-  isFirstRouteInParent(): boolean;
-
   /**
    * Returns the parent navigator, if any. Reason why the function is called
    * dangerouslyGetParent is to warn developers against overusing it to eg. get parent
@@ -468,7 +486,7 @@ export type Descriptor<
   RouteName extends keyof ParamList = string,
   State extends NavigationState = NavigationState,
   ScreenOptions extends object = {},
-  EventMap extends { [key: string]: any } = {}
+  EventMap extends Record<string, any> = {}
 > = {
   /**
    * Render the component associated with this route.
@@ -521,25 +539,32 @@ export type RouteConfig<
       /**
        * React component to render for this screen.
        */
-      component: React.ComponentType<any>;
+      component: React.ComponentType<{
+        route: RouteProp<ParamList, RouteName>;
+        navigation: any;
+      }>;
     }
   | {
       /**
        * Render callback to render content of this screen.
        */
-      children: (props: any) => React.ReactNode;
+      children: (props: {
-    });
+        route: RouteProp<ParamList, RouteName>;
+        navigation: any;
+      }) => React.ReactNode;
+    }
+);
 
 export type NavigationContainerRef =
-  | NavigationHelpers<ParamListBase> & {
+  | (NavigationHelpers<ParamListBase> & {
       /**
        * Reset the navigation state of the root navigator to the provided state.
        *
        * @param state Navigation state object.
        */
-      resetRoot(state: PartialState<NavigationState> | NavigationState): void;
+      resetRoot(state?: PartialState<NavigationState> | NavigationState): void;
       getRootState(): NavigationState;
-    }
+    })
   | undefined
   | null;
 

packages/core/src/useDescriptors.tsx

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

packages/core/src/useDevTools.tsx

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

packages/core/src/useEventEmitter.tsx

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

packages/core/src/useNavigationBuilder.tsx

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

packages/core/src/useNavigationCache.tsx

@@ -18,7 +18,7 @@ type Options<State extends NavigationState> = {
   navigation: NavigationHelpers<ParamListBase> &
     Partial<NavigationProp<ParamListBase, string, any, any, any>>;
   setOptions: (
-    cb: (options: { [key: string]: object }) => { [key: string]: object }
+    cb: (options: Record<string, object>) => Record<string, object>
   ) => void;
   router: Router<State, NavigationAction>;
   emitter: NavigationEventEmitter;
@@ -66,11 +66,9 @@ export default function useNavigationCache<
   cache.current = state.routes.reduce<NavigationCache<State, ScreenOptions>>(
     (acc, route, index) => {
       const previous = cache.current[route.key];
-      const isFirst = route.key === state.routes[0].key;
 
-      if (previous && previous.isFirstRouteInParent() === isFirst) {
+      if (previous) {
-        // If a cached navigation object already exists and has same `isFirstRouteInParent`, reuse it
+        // If a cached navigation object already exists, reuse it
-        // This method could return different result if the index of the route changes somehow
         acc[route.key] = previous;
       } else {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -89,13 +87,13 @@ export default function useNavigationCache<
           );
         };
 
-        const helpers = Object.keys(actions).reduce(
+        const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
           (acc, name) => {
             // @ts-ignore
             acc[name] = (...args: any) => dispatch(actions[name](...args));
             return acc;
           },
-          {} as { [key: string]: () => void }
+          {}
         );
 
         acc[route.key] = {
@@ -121,7 +119,6 @@ export default function useNavigationCache<
             // This makes sure that we return the focus state in the whole tree, not just this navigator
             return navigation ? navigation.isFocused() : true;
           },
-          isFirstRouteInParent: () => isFirst,
         };
       }
 

packages/core/src/useNavigationHelpers.tsx

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

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

packages/core/src/useStateGetters.tsx

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

packages/drawer/CHANGELOG.md

@@ -3,6 +3,118 @@
 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
+
+
+
+
+
+# [5.0.0-alpha.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.20...@react-navigation/drawer@5.0.0-alpha.21) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.19...@react-navigation/drawer@5.0.0-alpha.20) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.18...@react-navigation/drawer@5.0.0-alpha.19) (2019-11-02)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.17...@react-navigation/drawer@5.0.0-alpha.18) (2019-10-30)
+
+
+### Bug Fixes
+
+* hide screen from screen reader when drawer is open ([#147](https://github.com/react-navigation/navigation-ex/issues/147)) ([fb749ac](https://github.com/react-navigation/navigation-ex/commit/fb749ac))
+
+
+### Features
+
+* add an 'unmountInactiveScreens' option ([12d597f](https://github.com/react-navigation/navigation-ex/commit/12d597f))
+
+
+
+
+
+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.16...@react-navigation/drawer@5.0.0-alpha.17) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.15...@react-navigation/drawer@5.0.0-alpha.16) (2019-10-22)
+
+
+### Bug Fixes
+
+* navigation drawer sometimes not closing when pressed outside ([0d8cdc8](https://github.com/react-navigation/navigation-ex/commit/0d8cdc8))
+
+
+
+
+
+# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.14...@react-navigation/drawer@5.0.0-alpha.15) (2019-10-17)
+
+
+### Bug Fixes
+
+* fix passing content options in drawer ([cab6160](https://github.com/react-navigation/navigation-ex/commit/cab6160))
+
+
+
+
+
 # [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.13...@react-navigation/drawer@5.0.0-alpha.14) (2019-10-15)
 
 

packages/drawer/package.json

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

packages/drawer/src/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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  createNavigator,
+  createNavigatorFactory,
   useNavigationBuilder,
   DefaultNavigatorOptions,
 } from '@react-navigation/core';
@@ -40,14 +40,15 @@ function DrawerNavigator({
 
   return (
     <DrawerView
+      {...rest}
       state={state}
       descriptors={descriptors}
       navigation={navigation}
-      {...rest}
     />
   );
 }
 
-export default createNavigator<DrawerNavigationOptions, typeof DrawerNavigator>(
+export default createNavigatorFactory<
-  DrawerNavigator
+  DrawerNavigationOptions,
-);
+  typeof DrawerNavigator
+>(DrawerNavigator);

packages/drawer/src/types.tsx

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

@@ -8,6 +8,7 @@ import {
   Keyboard,
   StatusBar,
   StyleProp,
+  View,
 } from 'react-native';
 import {
   PanGestureHandler,
@@ -77,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';
@@ -96,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',
@@ -111,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 (
@@ -167,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);
@@ -428,7 +431,14 @@ export default class DrawerView extends React.PureComponent<Props> {
         x: this.touchX,
         translationX: this.gestureX,
         velocityX: this.velocityX,
-        state: this.gestureState,
+      },
+    },
+  ]);
+
+  private handleGestureStateChange = event([
+    {
+      nativeEvent: {
+        state: (s: Animated.Value<number>) => set(this.gestureState, s),
       },
     },
   ]);
@@ -437,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)
-          ),
       },
     },
   ]);
@@ -480,7 +487,7 @@ export default class DrawerView extends React.PureComponent<Props> {
   render() {
     const {
       open,
-      locked,
+      gestureEnabled,
       drawerPosition,
       drawerType,
       swipeEdgeWidth,
@@ -519,9 +526,9 @@ export default class DrawerView extends React.PureComponent<Props> {
         activeOffsetX={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
         failOffsetY={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
         onGestureEvent={this.handleGestureEvent}
-        onHandlerStateChange={this.handleGestureEvent}
+        onHandlerStateChange={this.handleGestureStateChange}
         hitSlop={hitSlop}
-        enabled={!locked}
+        enabled={gestureEnabled}
         {...gestureHandlerProps}
       >
         <Animated.View
@@ -537,7 +544,13 @@ export default class DrawerView extends React.PureComponent<Props> {
               sceneContainerStyle as any,
             ]}
           >
-            {renderSceneContent({ progress: this.progress })}
+            <View
+              accessibilityElementsHidden={open}
+              importantForAccessibility={open ? 'no-hide-descendants' : 'auto'}
+              style={styles.content}
+            >
+              {renderSceneContent({ progress: this.progress })}
+            </View>
             <TapGestureHandler onHandlerStateChange={this.handleTapStateChange}>
               <Animated.View
                 style={[

packages/drawer/src/views/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';
@@ -23,6 +23,7 @@ import {
   DrawerDescriptorMap,
   DrawerNavigationConfig,
   DrawerNavigationHelpers,
+  DrawerContentComponentProps,
 } from '../types';
 
 type Props = Omit<DrawerNavigationConfig, 'overlayColor'> & {
@@ -64,7 +65,9 @@ const getDefaultDrawerWidth = ({
 export default class DrawerView extends React.PureComponent<Props, State> {
   static defaultProps = {
     lazy: true,
-    contentComponent: DrawerContent,
+    drawerContent: (props: DrawerContentComponentProps) => (
+      <DrawerContent {...props} />
+    ),
     drawerPosition: I18nManager.isRTL ? 'right' : 'left',
     keyboardDismissMode: 'on-drag',
     overlayColor: 'rgba(0, 0, 0, 0.5)',
@@ -135,58 +138,52 @@ export default class DrawerView extends React.PureComponent<Props, State> {
       navigation,
       descriptors,
       drawerPosition,
-      contentComponent: ContentComponent,
+      drawerContent,
+      drawerContentOptions,
     } = this.props;
 
-    return (
+    return drawerContent({
-      <ContentComponent
+      ...drawerContentOptions,
-        progress={progress}
+      progress: progress,
-        state={state}
+      state: state,
-        navigation={navigation}
+      navigation: navigation,
-        descriptors={descriptors}
+      descriptors: descriptors,
-        drawerPosition={drawerPosition}
+      drawerPosition: drawerPosition,
-      />
+    });
-    );
   };
 
   private renderContent = () => {
-    let { lazy, state, descriptors, unmountInactiveRoutes } = this.props;
+    let { lazy, state, descriptors, unmountInactiveScreens } = this.props;
 
     const { loaded } = this.state;
 
-    if (unmountInactiveRoutes) {
+    return (
-      const activeKey = state.routes[state.index].key;
+      <ScreenContainer style={styles.content}>
-      const descriptor = descriptors[activeKey];
+        {state.routes.map((route, index) => {
+          if (unmountInactiveScreens && index !== state.index) {
+            return null;
+          }
 
-      return descriptor.render();
+          if (lazy && !loaded.includes(index)) {
-    } else {
+            // Don't render a screen if we've never navigated to it
-      return (
+            return null;
-        <ScreenContainer style={styles.content}>
+          }
-          {state.routes.map((route, index) => {
-            if (lazy && !loaded.includes(index)) {
-              // Don't render a screen if we've never navigated to it
-              return null;
-            }
 
-            const isFocused = state.index === index;
+          const isFocused = state.index === index;
-            const descriptor = descriptors[route.key];
+          const descriptor = descriptors[route.key];
 
-            return (
+          return (
-              <ResourceSavingScene
+            <ResourceSavingScene
-                key={route.key}
+              key={route.key}
-                style={[
+              style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
-                  StyleSheet.absoluteFill,
+              isVisible={isFocused}
-                  { opacity: isFocused ? 1 : 0 },
+            >
-                ]}
+              {descriptor.render()}
-                isVisible={isFocused}
+            </ResourceSavingScene>
-              >
+          );
-                {descriptor.render()}
+        })}
-              </ResourceSavingScene>
+      </ScreenContainer>
-            );
+    );
-          })}
-        </ScreenContainer>
-      );
-    }
   };
 
   private setDrawerGestureRef = (ref: PanGestureHandler | null) => {
@@ -213,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}
@@ -248,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,92 @@
 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
+
+
+
+
+
+# [5.0.0-alpha.20](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.19...@react-navigation/example@5.0.0-alpha.20) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.19](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.18...@react-navigation/example@5.0.0-alpha.19) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.17...@react-navigation/example@5.0.0-alpha.18) (2019-11-02)
+
+
+### Bug Fixes
+
+* minor tweaks for web and fix example ([67fd69a](https://github.com/satya164/navigation-ex/commit/67fd69a))
+
+
+
+
+
+# [5.0.0-alpha.17](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.16...@react-navigation/example@5.0.0-alpha.17) (2019-10-29)
+
+
+### Bug Fixes
+
+* improve type annotation for screens ([8f16085](https://github.com/satya164/navigation-ex/commit/8f16085))
+
+
+
+
+
+# [5.0.0-alpha.16](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.15...@react-navigation/example@5.0.0-alpha.16) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.15](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.14...@react-navigation/example@5.0.0-alpha.15) (2019-10-22)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.14](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.13...@react-navigation/example@5.0.0-alpha.14) (2019-10-17)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
 # [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.12...@react-navigation/example@5.0.0-alpha.13) (2019-10-15)
 
 

packages/example/ios/Podfile

@@ -28,7 +28,7 @@ target 'ReactNavigationExample' do
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
   pod 'RNGestureHandler', :podspec => '../node_modules/react-native-gesture-handler/RNGestureHandler.podspec'
   pod 'RNReanimated', :podspec => '../node_modules/react-native-reanimated/RNReanimated.podspec'
-  pod 'RNScreens', :podspec => '../node_modules/react-native-screens/RNScreens.podspec'
+  pod 'RNScreens', :path => '../node_modules/react-native-screens/RNScreens.podspec'
 
   use_unimodules!
   pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'

packages/example/ios/Podfile.lock

@@ -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.4):
+  - RNScreens (2.0.0-alpha.11):
     - React
   - UMBarCodeScannerInterface (4.0.0)
   - UMCameraInterface (4.0.0)
@@ -159,7 +159,7 @@ DEPENDENCIES:
   - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  https://github.com/cocoapods/specs.git:
+  trunk:
     - boost-for-react-native
 
 EXTERNAL SOURCES:
@@ -208,7 +208,7 @@ EXTERNAL SOURCES:
   RNReanimated:
     :podspec: "../node_modules/react-native-reanimated/RNReanimated.podspec"
   RNScreens:
-    :podspec: "../node_modules/react-native-screens/RNScreens.podspec"
+    :path: "../node_modules/react-native-screens/RNScreens.podspec"
   UMBarCodeScannerInterface:
     :path: !ruby/object:Pathname
     path: "../node_modules/unimodules-barcode-scanner-interface/ios"
@@ -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: 84be1a2369a580beb2fea0755cc62ef16b83fffe
+  RNScreens: ad3661f864ef18d952e9a4799b6791683e33c1fc
   UMBarCodeScannerInterface: d5a6fdc98ed6241225b0a8432a7f4e2b397668bc
   UMCameraInterface: 68870a3197fee85bd5afca5609ba4a5b7257d19d
   UMConstantsInterface: d25b8e8887ca7aaf568c06caf08f4d40734ee4ef
@@ -282,6 +282,6 @@ SPEC CHECKSUMS:
   UMTaskManagerInterface: 1e70fe58b872355f0ecb44fb81bb1a16484047f0
   yoga: 684513b14b03201579ba3cee20218c9d1298b0cc
 
-PODFILE CHECKSUM: 1276a2dd000c142ccc03272023bb8a6b2d5b9933
+PODFILE CHECKSUM: 277599ab8fceae1c57f639a14203691239c429ab
 
-COCOAPODS: 1.7.5
+COCOAPODS: 1.8.4

packages/example/ios/ReactNavigationExample/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -1,38 +1 @@
-{
+{"images":[{"size":"60x60","expected-size":"180","filename":"180.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"3x"},{"size":"40x40","expected-size":"80","filename":"80.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"40x40","expected-size":"120","filename":"120.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"3x"},{"size":"60x60","expected-size":"120","filename":"120.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"57x57","expected-size":"57","filename":"57.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"1x"},{"size":"29x29","expected-size":"58","filename":"58.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"29x29","expected-size":"29","filename":"29.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"1x"},{"size":"29x29","expected-size":"87","filename":"87.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"3x"},{"size":"57x57","expected-size":"114","filename":"114.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"20x20","expected-size":"40","filename":"40.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"20x20","expected-size":"60","filename":"60.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"3x"},{"size":"1024x1024","filename":"1024.png","expected-size":"1024","idiom":"ios-marketing","folder":"Assets.xcassets/AppIcon.appiconset/","scale":"1x"},{"size":"40x40","expected-size":"80","filename":"80.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"ipad","scale":"2x"},{"size":"72x72","expected-size":"72","filename":"72.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"ipad","scale":"1x"},{"size":"76x76","expected-size":"152","filename":"152.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"ipad","scale":"2x"},{"size":"50x50","expected-size":"100","filename":"100.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"ipad","scale":"2x"},{"size":"29x29","expected-size":"58","filename":"58.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"ipad","scale":"2x"},{"size":"76x76","expected-size":"76","filename":"76.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"ipad","scale":"1x"},{"size":"29x29","expected-size":"29","filename":"29.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"ipad","scale":"1x"},{"size":"50x50","expected-size":"50","filename":"50.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"ipad","scale":"1x"},{"size":"72x72","expected-size":"144","filename":"144.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"ipad","scale":"2x"},{"size":"40x40","expected-size":"40","filename":"40.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"ipad","scale":"1x"},{"size":"83.5x83.5","expected-size":"167","filename":"167.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"ipad","scale":"2x"},{"size":"20x20","expected-size":"20","filename":"20.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"ipad","scale":"1x"},{"size":"20x20","expected-size":"40","filename":"40.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"ipad","scale":"2x"}]}
-  "images" : [
-    {
-      "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "3x"
-    },
-    {
-      "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "3x"
-    },
-    {
-      "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

packages/example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/example",
   "description": "Demo app to showcase various functionality of React Navigation",
-  "version": "5.0.0-alpha.13",
+  "version": "5.0.0-alpha.23",
   "private": true,
   "workspaces": {
     "nohoist": [
@@ -18,34 +18,35 @@
     "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.0.0-alpha.3",
+    "react-native-paper": "^3.2.1",
     "react-native-reanimated": "~1.2.0",
-    "react-native-safe-area-context": "~0.3.6",
+    "react-native-reanimated-web": "npm:react-native-reanimated@^1.3.2",
-    "react-native-screens": "2.0.0-alpha.4",
+    "react-native-safe-area-context": "~0.6.0",
-    "react-native-tab-view": "2.10.0",
+    "react-native-screens": "^2.0.0-alpha.11",
+    "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.3.0",
+    "expo-cli": "^3.8.0",
     "jetifier": "^1.6.4",
-    "typescript": "^3.6.3"
+    "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;
@@ -32,26 +26,26 @@ const BottomTabs = createBottomTabNavigator<BottomTabParams>();
 
 export default function BottomTabsScreen() {
   return (
-    <BottomTabs.Navigator>
+    <BottomTabs.Navigator
+      screenOptions={{
+        tabBarButton: props => <TouchableBounce {...props} />,
+      }}
+    >
       <BottomTabs.Screen
         name="article"
         options={{
           title: 'Article',
           tabBarIcon: getTabBarIcon('file-document-box'),
-          tabBarButtonComponent: TouchableBounce,
         }}
       >
-        {props => (
+        {props => <SimpleStackScreen {...props} headerMode="none" />}
-          <SimpleStackScreen {...props} options={{ headerMode: 'none' }} />
-        )}
       </BottomTabs.Screen>
       <BottomTabs.Screen
         name="chat"
         component={Chat}
         options={{
-          title: 'Chat',
+          tabBarLabel: 'Chat',
           tabBarIcon: getTabBarIcon('message-reply'),
-          tabBarButtonComponent: TouchableBounce,
         }}
       />
       <BottomTabs.Screen
@@ -60,7 +54,6 @@ export default function BottomTabsScreen() {
         options={{
           title: 'Contacts',
           tabBarIcon: getTabBarIcon('contacts'),
-          tabBarButtonComponent: TouchableBounce,
         }}
       />
       <BottomTabs.Screen
@@ -69,7 +62,6 @@ export default function BottomTabsScreen() {
         options={{
           title: 'Albums',
           tabBarIcon: getTabBarIcon('image-album'),
-          tabBarButtonComponent: TouchableBounce,
         }}
       />
     </BottomTabs.Navigator>

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

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

packages/example/src/Screens/NativeStack.tsx

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+export default function NativeStack() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Not supported on Web :(</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#eceff1',
+  },
+  text: {
+    fontSize: 16,
+    color: '#999',
+  },
+});

packages/example/src/Screens/SimpleStack.tsx

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

packages/example/webpack.config.js

@@ -10,6 +10,7 @@ module.exports = async function(env, argv) {
   config.module.rules.push({
     test: /\.(js|ts|tsx)$/,
     include: /packages\/.+/,
+    exclude: /node_modules/,
     use: 'babel-loader',
   });
 
@@ -17,25 +18,23 @@ module.exports = async function(env, argv) {
     p => !(p instanceof ModuleScopePlugin)
   );
 
-  config.resolve.alias['react'] = path.resolve(
+  Object.assign(config.resolve.alias, {
-    __dirname,
+    react: path.resolve(__dirname, 'node_modules', 'react'),
-    'node_modules',
+    'react-native': path.resolve(__dirname, 'node_modules', 'react-native-web'),
-    'react'
+    'react-native-web': path.resolve(
-  );
+      __dirname,
-  config.resolve.alias['react-native'] = path.resolve(
+      'node_modules',
-    __dirname,
+      'react-native-web'
-    'node_modules',
+    ),
-    'react-native-web'
+    'react-native-reanimated': path.resolve(
-  );
+      __dirname,
-  config.resolve.alias['react-native-web'] = path.resolve(
+      'node_modules',
-    __dirname,
+      'react-native-reanimated-web'
-    'node_modules',
+    ),
-    'react-native-web'
+    '@expo/vector-icons/MaterialCommunityIcons': require.resolve(
-  );
+      '@expo/vector-icons/MaterialCommunityIcons'
-
+    ),
-  config.resolve.alias[
+  });
-    '@expo/vector-icons/MaterialCommunityIcons'
-  ] = require.resolve('@expo/vector-icons/MaterialCommunityIcons');
 
   fs.readdirSync(path.join(__dirname, '..')).forEach(name => {
     config.resolve.alias[`@react-navigation/${name}`] = path.resolve(

packages/material-bottom-tabs/CHANGELOG.md

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

packages/material-bottom-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.13",
+  "version": "5.0.0-alpha.22",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,25 +34,25 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@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.0.0-alpha.3",
+    "react-native-paper": "^3.2.1",
     "react-native-vector-icons": "^6.6.0",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
   },
   "peerDependencies": {
     "@react-navigation/core": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
-    "react-native-paper": "^3.0.0-alpha.3",
+    "react-native-paper": "^3.0.0",
     "react-native-vector-icons": "^6.0.0"
   },
   "@react-native-community/bob": {

packages/material-bottom-tabs/src/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/navigators/createMaterialBottomTabNavigator.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   useNavigationBuilder,
-  createNavigator,
+  createNavigatorFactory,
   DefaultNavigatorOptions,
 } from '@react-navigation/core';
 import {
@@ -50,7 +50,7 @@ function MaterialBottomTabNavigator({
   );
 }
 
-export default createNavigator<
+export default createNavigatorFactory<
   MaterialBottomTabNavigationOptions,
   typeof MaterialBottomTabNavigator
 >(MaterialBottomTabNavigator);

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

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

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

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,73 @@
 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
+
+
+
+
+
+# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.15...@react-navigation/material-top-tabs@5.0.0-alpha.16) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.14...@react-navigation/material-top-tabs@5.0.0-alpha.15) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.13...@react-navigation/material-top-tabs@5.0.0-alpha.14) (2019-10-30)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.12...@react-navigation/material-top-tabs@5.0.0-alpha.13) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 # [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.11...@react-navigation/material-top-tabs@5.0.0-alpha.12) (2019-10-15)
 
 

packages/material-top-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.12",
+  "version": "5.0.0-alpha.20",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,19 +34,19 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.9"
+    "@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.6.3"
+    "typescript": "^3.7.2"
   },
   "peerDependencies": {
     "@react-navigation/core": "^5.0.0-alpha.0",
@@ -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/navigators/createMaterialTopTabNavigator.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   useNavigationBuilder,
-  createNavigator,
+  createNavigatorFactory,
   DefaultNavigatorOptions,
 } from '@react-navigation/core';
 import {
@@ -49,7 +49,7 @@ function MaterialTopTabNavigator({
   );
 }
 
-export default createNavigator<
+export default createNavigatorFactory<
   MaterialTopTabNavigationOptions,
   typeof MaterialTopTabNavigator
 >(MaterialTopTabNavigator);

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

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

packages/native-stack/CHANGELOG.md

@@ -3,6 +3,139 @@
 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
+
+
+
+
+
+# [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.10...@react-navigation/native-stack@5.0.0-alpha.11) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.9...@react-navigation/native-stack@5.0.0-alpha.10) (2019-11-04)
+
+
+### Bug Fixes
+
+* popToTop on tab press in native stack ([301c35e](https://github.com/react-navigation/navigation-ex/commit/301c35e))
+
+
+
+
+
+# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.8...@react-navigation/native-stack@5.0.0-alpha.9) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.7...@react-navigation/native-stack@5.0.0-alpha.8) (2019-11-02)
+
+
+### Features
+
+* add headerBackTitleVisible to navigation options in native stack ([77f29d3](https://github.com/react-navigation/navigation-ex/commit/77f29d3))
+
+
+
+
+
+# [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.6...@react-navigation/native-stack@5.0.0-alpha.7) (2019-11-02)
+
+
+### Bug Fixes
+
+* remove top margin from screen in native stack on Android ([5cd6940](https://github.com/react-navigation/navigation-ex/commit/5cd6940))
+
+
+
+
+
+# [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.5...@react-navigation/native-stack@5.0.0-alpha.6) (2019-10-30)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.4...@react-navigation/native-stack@5.0.0-alpha.5) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.3...@react-navigation/native-stack@5.0.0-alpha.4) (2019-10-22)
+
+
+### Features
+
+* **native-stack:** add support for large title attributes ([#135](https://github.com/react-navigation/navigation-ex/issues/135)) ([6cf1a04](https://github.com/react-navigation/navigation-ex/commit/6cf1a04))
+
+
+
+
+
+# [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.2...@react-navigation/native-stack@5.0.0-alpha.3) (2019-10-18)
+
+
+### Bug Fixes
+
+* remove top margin when header is hidden in native stack. fixes [#131](https://github.com/react-navigation/navigation-ex/issues/131) ([fb726ee](https://github.com/react-navigation/navigation-ex/commit/fb726ee))
+
+
+
+
+
+# [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.1...@react-navigation/native-stack@5.0.0-alpha.2) (2019-10-18)
+
+
+### Bug Fixes
+
+* fix header font size config in native stack ([#128](https://github.com/react-navigation/navigation-ex/issues/128)) ([477c088](https://github.com/react-navigation/navigation-ex/commit/477c088))
+
+
+
+
+
 # 5.0.0-alpha.1 (2019-10-15)