chore: publish

- @react-navigation/bottom-tabs@5.0.0-alpha.21
 - @react-navigation/compat@5.0.0-alpha.14
 - @react-navigation/core@5.0.0-alpha.22
 - @react-navigation/drawer@5.0.0-alpha.22
 - @react-navigation/example@5.0.0-alpha.21
 - @react-navigation/material-bottom-tabs@5.0.0-alpha.20
 - @react-navigation/material-top-tabs@5.0.0-alpha.17
 - @react-navigation/native-stack@5.0.0-alpha.12
 - @react-navigation/routers@5.0.0-alpha.14
 - @react-navigation/stack@5.0.0-alpha.36

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

@@ -38,7 +38,7 @@
     "jest": "^24.8.0",
     "lerna": "^3.16.4",
     "prettier": "^1.18.2",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
   },
   "resolutions": {
     "react": "~16.8.3",

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/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)
 
 

packages/bottom-tabs/package.json

@@ -10,7 +10,7 @@
     "android",
     "tab"
   ],
-  "version": "5.0.0-alpha.17",
+  "version": "5.0.0-alpha.21",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.14"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
@@ -43,7 +43,7 @@
     "react": "~16.8.3",
     "react-native": "~0.59.10",
     "react-native-safe-area-context": "^0.3.6",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
   },
   "peerDependencies": {
     "@react-navigation/core": "^5.0.0-alpha.0",

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<
@@ -101,9 +100,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<
@@ -129,9 +129,9 @@ export type BottomTabNavigationConfig = {
    */
   unmountInactiveScreens?: boolean;
   /**
-   * Custom tab bar component.
+   * Function that returns a React element to display as the tab bar.
    */
-  tabBarComponent?: React.ComponentType<BottomTabBarProps>;
+  tabBar?: (props: BottomTabBarProps) => React.ReactNode;
   /**
    * Options for the tab bar which will be passed as props to the tab bar component.
    */
@@ -181,12 +181,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.
    */
@@ -213,9 +215,6 @@ export type BottomTabBarProps = BottomTabBarOptions & {
     route: Route<string>;
     focused: boolean;
   }) => AccessibilityStates[];
-  getButtonComponent: (props: {
-    route: Route<string>;
-  }) => React.ComponentType<any> | undefined;
   getLabelText: (props: {
     route: Route<string>;
   }) =>
@@ -225,12 +224,17 @@ export type BottomTabBarProps = BottomTabBarOptions & {
       }) => React.ReactNode | undefined)
     | React.ReactNode;
   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 = {
@@ -175,7 +174,6 @@ export default class TabBarBottom extends React.Component<Props, State> {
       inactiveTintColor,
       renderIcon,
       showIcon,
-      showLabel,
     } = this.props;
 
     if (showIcon === false) {
@@ -196,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,
-        ]}
       />
     );
   };
@@ -213,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) {
@@ -230,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);
@@ -262,7 +255,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
       getAccessibilityLabel,
       getAccessibilityRole,
       getAccessibilityStates,
-      getButtonComponent,
+      renderButton,
       getTestID,
       style,
       tabStyle,
@@ -292,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,
@@ -325,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>
                 );
               })}
@@ -364,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,
@@ -383,7 +369,7 @@ const styles = StyleSheet.create({
   },
   tab: {
     flex: 1,
-    alignItems: isIos ? 'center' : 'stretch',
+    alignItems: 'center',
   },
   tabPortrait: {
     justifyContent: 'flex-end',
@@ -393,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 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 = ({
@@ -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,23 +187,21 @@ 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() {

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,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.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)
 
 

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.11",
+  "version": "5.0.0-alpha.14",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -24,12 +24,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.14"
   },
   "devDependencies": {
     "@types/react": "^16.9.4",
     "react": "~16.8.3",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
   },
   "peerDependencies": {
     "@react-navigation/core": "^5.0.0-alpha.0",

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/core/CHANGELOG.md

@@ -3,6 +3,29 @@
 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/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)
 
 

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.20",
+  "version": "5.0.0-alpha.22",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "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/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>();
@@ -130,7 +146,7 @@ const Container = React.forwardRef(function NavigationContainer(
   };
 
   const resetRoot = React.useCallback(
-    (state: PartialState<NavigationState> | NavigationState) => {
+    (state?: PartialState<NavigationState> | NavigationState) => {
       trackAction('@@RESET_ROOT');
       setNavigationState(state);
     },

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;
 

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

@@ -64,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);

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/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

@@ -338,7 +338,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.
@@ -377,10 +377,23 @@ export type NavigationHelpers<
   };
 
 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;
 };
 
@@ -549,7 +562,7 @@ export type NavigationContainerRef =
        *
        * @param state Navigation state object.
        */
-      resetRoot(state: PartialState<NavigationState> | NavigationState): void;
+      resetRoot(state?: PartialState<NavigationState> | NavigationState): void;
       getRootState(): NavigationState;
     }
   | undefined

packages/drawer/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.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

packages/drawer/package.json

@@ -11,7 +11,7 @@
     "material",
     "drawer"
   ],
-  "version": "5.0.0-alpha.19",
+  "version": "5.0.0-alpha.22",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.14"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
@@ -46,8 +46,8 @@
     "react-native-gesture-handler": "^1.3.0",
     "react-native-reanimated": "^1.3.0",
     "react-native-safe-area-context": "^0.3.6",
-    "react-native-screens": "^2.0.0-alpha.7",
+    "react-native-screens": "^2.0.0-alpha.8",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
   },
   "peerDependencies": {
     "@react-navigation/core": "^5.0.0-alpha.0",

packages/drawer/src/navigators/createDrawerNavigator.tsx

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

packages/drawer/src/types.tsx

@@ -69,14 +69,14 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
    */
   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.
    */

packages/drawer/src/views/DrawerView.tsx

@@ -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,20 +138,18 @@ export default class DrawerView extends React.PureComponent<Props, State> {
       navigation,
       descriptors,
       drawerPosition,
-      contentComponent: ContentComponent,
+      drawerContent,
-      contentOptions,
+      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,
-        {...contentOptions}
+    });
-      />
-    );
   };
 
   private renderContent = () => {

packages/example/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.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)
 
 

packages/example/ios/Podfile.lock

@@ -93,7 +93,7 @@ PODS:
     - React
   - RNReanimated (1.2.0):
     - React
-  - RNScreens (2.0.0-alpha.7):
+  - RNScreens (2.0.0-alpha.8):
     - React
   - UMBarCodeScannerInterface (4.0.0)
   - UMCameraInterface (4.0.0)
@@ -267,7 +267,7 @@ SPEC CHECKSUMS:
   react-native-safe-area-context: e380a6f783ccaec848e2f3cc8eb205a62362950d
   RNGestureHandler: 5329a942fce3d41c68b84c2c2276ce06a696d8b0
   RNReanimated: 1b52415c4302f198cb581282a0166690bad62c43
-  RNScreens: 2f53466846305189a0cfd1745f26b6ca141b3a08
+  RNScreens: bfa9143ca291bcf3804c932f77b9617ff324704f
   UMBarCodeScannerInterface: d5a6fdc98ed6241225b0a8432a7f4e2b397668bc
   UMCameraInterface: 68870a3197fee85bd5afca5609ba4a5b7257d19d
   UMConstantsInterface: d25b8e8887ca7aaf568c06caf08f4d40734ee4ef

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.18",
+  "version": "5.0.0-alpha.21",
   "private": true,
   "workspaces": {
     "nohoist": [
@@ -31,7 +31,7 @@
     "react-native-reanimated": "~1.2.0",
     "react-native-reanimated-web": "npm:react-native-reanimated@^1.3.2",
     "react-native-safe-area-context": "~0.3.6",
-    "react-native-screens": "^2.0.0-alpha.7",
+    "react-native-screens": "^2.0.0-alpha.8",
     "react-native-tab-view": "2.10.0",
     "react-native-unimodules": "^0.7.0-rc.1",
     "react-native-web": "^0.11.7",
@@ -47,6 +47,6 @@
     "babel-preset-expo": "^7.0.0",
     "expo-cli": "^3.4.1",
     "jetifier": "^1.6.4",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
   }
 }

packages/example/src/Screens/BottomTabs.tsx

@@ -32,13 +32,16 @@ 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 => <SimpleStackScreen {...props} headerMode="none" />}
@@ -49,7 +52,6 @@ export default function BottomTabsScreen() {
         options={{
           tabBarLabel: 'Chat',
           tabBarIcon: getTabBarIcon('message-reply'),
-          tabBarButtonComponent: TouchableBounce,
         }}
       />
       <BottomTabs.Screen
@@ -58,7 +60,6 @@ export default function BottomTabsScreen() {
         options={{
           title: 'Contacts',
           tabBarIcon: getTabBarIcon('contacts'),
-          tabBarButtonComponent: TouchableBounce,
         }}
       />
       <BottomTabs.Screen
@@ -67,7 +68,6 @@ export default function BottomTabsScreen() {
         options={{
           title: 'Albums',
           tabBarIcon: getTabBarIcon('image-album'),
-          tabBarButtonComponent: TouchableBounce,
         }}
       />
     </BottomTabs.Navigator>

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.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

packages/material-bottom-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.17",
+  "version": "5.0.0-alpha.20",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.14"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
@@ -46,7 +46,7 @@
     "react-native": "~0.59.10",
     "react-native-paper": "^3.1.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",

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-top-tabs/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/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

packages/material-top-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.17",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.14"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
@@ -46,7 +46,7 @@
     "react-native-gesture-handler": "^1.3.0",
     "react-native-reanimated": "^1.3.0",
     "react-native-tab-view": "^2.10.0",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
   },
   "peerDependencies": {
     "@react-navigation/core": "^5.0.0-alpha.0",

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

@@ -119,7 +119,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 +127,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.
    */

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,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.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)
 
 

packages/native-stack/package.json

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

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

@@ -1,10 +1,15 @@
 import React from 'react';
-import { createNavigator, useNavigationBuilder } from '@react-navigation/core';
+import {
+  createNavigatorFactory,
+  useNavigationBuilder,
+  EventArg,
+} from '@react-navigation/core';
 
 import {
   StackRouter,
   StackNavigationState,
   StackRouterOptions,
+  StackActions,
 } from '@react-navigation/routers';
 
 import {
@@ -36,6 +41,28 @@ function NativeStackNavigator(props: NativeStackNavigatorProps) {
     screenOptions,
   });
 
+  React.useEffect(
+    () =>
+      navigation.addListener &&
+      navigation.addListener('tabPress', (e: EventArg<'tabPress'>) => {
+        const isFocused = navigation.isFocused();
+
+        // Run the operation in the next frame so we're sure all listeners have been run
+        // This is necessary to know if preventDefault() has been called
+        requestAnimationFrame(() => {
+          if (state.index > 0 && isFocused && !e.defaultPrevented) {
+            // When user taps on already focused tab and we're inside the tab,
+            // reset the stack to replicate native behaviour
+            navigation.dispatch({
+              ...StackActions.popToTop(),
+              target: state.key,
+            });
+          }
+        });
+      }),
+    [navigation, state.index, state.key]
+  );
+
   return (
     <StackView
       state={state}
@@ -46,7 +73,7 @@ function NativeStackNavigator(props: NativeStackNavigatorProps) {
   );
 }
 
-export default createNavigator<
+export default createNavigatorFactory<
   NativeStackNavigationOptions,
   typeof NativeStackNavigator
 >(NativeStackNavigator);

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

@@ -5,7 +5,8 @@ import { StackNavigationState, StackActions } from '@react-navigation/routers';
 import {
   // @ts-ignore
   ScreenStack,
-  Screen,
+  Screen as ScreenComponent,
+  ScreenProps,
   // eslint-disable-next-line import/no-unresolved
 } from 'react-native-screens';
 import HeaderConfig from './HeaderConfig';
@@ -14,6 +15,14 @@ import {
   NativeStackDescriptorMap,
 } from '../types';
 
+const Screen = (ScreenComponent as unknown) as React.ComponentType<
+  ScreenProps & {
+    stackPresentation?: 'push' | 'modal' | 'transparentModal';
+    stackAnimation?: 'default' | 'fade' | 'none';
+    onDismissed?: () => void;
+  }
+>;
+
 type Props = {
   state: StackNavigationState;
   navigation: NativeStackNavigationHelpers;
@@ -28,7 +37,6 @@ export default function StackView({ state, navigation, descriptors }: Props) {
         const { presentation = 'push', animation, contentStyle } = options;
 
         return (
-          // @ts-ignore
           <Screen
             key={route.key}
             style={StyleSheet.absoluteFill}

packages/native/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.14...@react-navigation/native@5.0.0-alpha.15) (2019-11-08)
+
+
+### Bug Fixes
+
+* don't call getNode if ref is already scrollable ([#162](https://github.com/react-navigation/navigation-ex/issues/162)) ([66551f2](https://github.com/react-navigation/navigation-ex/commit/66551f2))
+
+
+
+
+
 # [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.13...@react-navigation/native@5.0.0-alpha.14) (2019-10-30)
 
 

packages/native/package.json

@@ -7,7 +7,7 @@
     "ios",
     "android"
   ],
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.15",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
     "del-cli": "^3.0.0",
     "react": "~16.8.3",
     "react-native": "~0.59.10",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
   },
   "peerDependencies": {
     "@react-navigation/core": "^5.0.0-alpha.0",

packages/native/src/useScrollToTop.tsx

@@ -19,13 +19,23 @@ function getScrollableNode(ref: React.RefObject<ScrollableWrapper>) {
     return null;
   }
 
-  if ('getScrollResponder' in ref.current) {
+  if (
+    'scrollToTop' in ref.current ||
+    'scrollTo' in ref.current ||
+    'scrollToOffset' in ref.current ||
+    'scrollResponderScrollTo' in ref.current
+  ) {
+    // This is already a scrollable node.
+    return ref.current;
+  } else if ('getScrollResponder' in ref.current) {
     // If the view is a wrapper like FlatList, SectionList etc.
     // We need to use `getScrollResponder` to get access to the scroll responder
     return ref.current.getScrollResponder();
   } else if ('getNode' in ref.current) {
     // When a `ScrollView` is wraped in `Animated.createAnimatedComponent`
-    // we need to use `getNode` to get the ref to the actual scrollview
+    // we need to use `getNode` to get the ref to the actual scrollview.
+    // Note that `getNode` is deprecated in newer versions of react-native
+    // this is why we check if we already have a scrollable node above.
     return ref.current.getNode();
   } else {
     return ref.current;

packages/routers/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.13...@react-navigation/routers@5.0.0-alpha.14) (2019-11-10)
+
+**Note:** Version bump only for package @react-navigation/routers
+
+
+
+
+
+# [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.12...@react-navigation/routers@5.0.0-alpha.13) (2019-11-08)
+
+
+### Bug Fixes
+
+* handle invalid initialRouteName gracefully ([b5d9ad9](https://github.com/react-navigation/navigation-ex/commit/b5d9ad9))
+
+
+
+
+
+# [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.11...@react-navigation/routers@5.0.0-alpha.12) (2019-11-04)
+
+
+### Bug Fixes
+
+* close drawer on back button press ([3a4c38b](https://github.com/react-navigation/navigation-ex/commit/3a4c38b))
+
+
+
+
+
 # [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.10...@react-navigation/routers@5.0.0-alpha.11) (2019-10-30)
 
 **Note:** Version bump only for package @react-navigation/routers

packages/routers/README.md

@@ -17,7 +17,7 @@ yarn add @react-navigation/core @react-navigation/routers
 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 }) {
@@ -36,5 +36,5 @@ function StackNavigator({ initialRouteName, children, ...rest }) {
   );
 }
 
-export default createNavigator(StackNavigator);
+export default createNavigatorFactory(StackNavigator);
 ```

packages/routers/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.11",
+  "version": "5.0.0-alpha.14",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
     "del-cli": "^3.0.0",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
   },
   "peerDependencies": {
     "@react-navigation/core": "^5.0.0-alpha.0"

packages/routers/src/DrawerRouter.tsx

@@ -152,6 +152,16 @@ export default function DrawerRouter(
             action
           );
 
+        case 'GO_BACK':
+          if (state.isDrawerOpen) {
+            return {
+              ...state,
+              isDrawerOpen: false,
+            };
+          }
+
+          return router.getStateForAction(state, action);
+
         default:
           return router.getStateForAction(state, action);
       }

packages/routers/src/StackRouter.tsx

@@ -56,7 +56,8 @@ export default function StackRouter(options: StackRouterOptions) {
 
     getInitialState({ routeNames, routeParamList }) {
       const initialRouteName =
-        options.initialRouteName !== undefined
+        options.initialRouteName !== undefined &&
+        routeNames.includes(options.initialRouteName)
           ? options.initialRouteName
           : routeNames[0];
 

packages/routers/src/TabRouter.tsx

@@ -62,9 +62,9 @@ export default function TabRouter({
 
     getInitialState({ routeNames, routeParamList }) {
       const index =
-        initialRouteName === undefined
+        initialRouteName !== undefined && routeNames.includes(initialRouteName)
-          ? 0
+          ? routeNames.indexOf(initialRouteName)
-          : routeNames.indexOf(initialRouteName);
+          : 0;
 
       return {
         stale: false,

packages/stack/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.36](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.35...@react-navigation/stack@5.0.0-alpha.36) (2019-11-10)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [5.0.0-alpha.35](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.34...@react-navigation/stack@5.0.0-alpha.35) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [5.0.0-alpha.34](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.33...@react-navigation/stack@5.0.0-alpha.34) (2019-11-04)
+
+
+### Features
+
+* support transform style for header ([#158](https://github.com/react-navigation/navigation-ex/issues/158)) ([a93a81e](https://github.com/react-navigation/navigation-ex/commit/a93a81e))
+
+
+
+
+
 # [5.0.0-alpha.33](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.32...@react-navigation/stack@5.0.0-alpha.33) (2019-11-02)
 
 

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.33",
+  "version": "5.0.0-alpha.36",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.14"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
@@ -46,8 +46,8 @@
     "react-native-gesture-handler": "^1.3.0",
     "react-native-reanimated": "^1.3.0",
     "react-native-safe-area-context": "^0.3.6",
-    "react-native-screens": "^2.0.0-alpha.7",
+    "react-native-screens": "^2.0.0-alpha.8",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
   },
   "peerDependencies": {
     "@react-native-community/masked-view": "^0.1.1",

packages/stack/src/navigators/createStackNavigator.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   useNavigationBuilder,
-  createNavigator,
+  createNavigatorFactory,
   DefaultNavigatorOptions,
   EventArg,
 } from '@react-navigation/core';
@@ -78,6 +78,7 @@ function StackNavigator({
   );
 }
 
-export default createNavigator<StackNavigationOptions, typeof StackNavigator>(
+export default createNavigatorFactory<
-  StackNavigator
+  StackNavigationOptions,
-);
+  typeof StackNavigator
+>(StackNavigator);

packages/stack/src/types.tsx

@@ -185,7 +185,9 @@ export type StackHeaderOptions = {
    * This is useful for using backgrounds such as an image or a gradient.
    * You can use this with `headerTransparent` to render a blur view, for example, to create a translucent header.
    */
-  headerBackground?: () => React.ReactNode;
+  headerBackground?: (props: {
+    style: StyleProp<ViewStyle>;
+  }) => React.ReactNode;
   /**
    * Style object for the header. You can specify a custom background color here, for example.
    */
@@ -249,7 +251,6 @@ export type StackNavigationOptions = StackHeaderOptions &
     title?: string;
     /**
      * Function that given `HeaderProps` returns a React Element to display as a header.
-     * Setting to `null` hides header.
      */
     header?: (props: StackHeaderProps) => React.ReactNode;
     /**

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

@@ -21,11 +21,6 @@ import {
   Scene,
 } from '../../types';
 
-export type Scene<T> = {
-  route: T;
-  progress: Animated.Node<number>;
-};
-
 type Props = StackHeaderOptions & {
   headerTitle: (props: StackHeaderTitleProps) => React.ReactNode;
   layout: Layout;
@@ -222,6 +217,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
       shadowOpacity,
       shadowRadius,
       opacity,
+      transform,
       ...unsafeStyles
     } = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;
 
@@ -263,6 +259,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
       shadowOpacity,
       shadowRadius,
       opacity,
+      transform,
     };
 
     // Setting a property to undefined triggers default style
@@ -301,14 +298,14 @@ export default class HeaderSegment extends React.Component<Props, State> {
           style={[StyleSheet.absoluteFill, backgroundStyle]}
         >
           {headerBackground ? (
-            headerBackground()
+            headerBackground({ style: safeStyles })
           ) : headerTransparent ? null : (
             <HeaderBackground style={safeStyles} />
           )}
         </Animated.View>
         <Animated.View
           pointerEvents="box-none"
-          style={[{ height, minHeight, maxHeight, opacity }]}
+          style={[{ height, minHeight, maxHeight, opacity, transform }]}
         >
           <View pointerEvents="none" style={{ height: insets.top }} />
           <View pointerEvents="box-none" style={styles.content}>

yarn.lock

@@ -13114,10 +13114,10 @@ react-native-safe-area-view@^0.12.0:
   dependencies:
     hoist-non-react-statics "^2.3.1"
 
-react-native-screens@^2.0.0-alpha.7:
+react-native-screens@^2.0.0-alpha.8:
-  version "2.0.0-alpha.7"
+  version "2.0.0-alpha.8"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.7.tgz#7cc2e4000591613cfc9cd92c2e2d83e9b2104a2e"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.8.tgz#18ac2b60216a165c6cc206266bc96efd7f6b3ea9"
-  integrity sha512-Lst3pOrtXgVrC6GFRO86MMhlFYwCZd0Jz3JBDHnnmWcYb1mzgPmMvooCDv6OdoU2Rv2WZXiaUZh4RQdoyr6YeQ==
+  integrity sha512-LfDHDk6TS1W2JGlEDUOy6dh3/PhWzhidQy5vZJL0uoUHVXDmLdPy7j7OP4PHPNeTHwQ9DS9nthBj7XMyUJhW/Q==
   dependencies:
     debounce "^1.2.0"
 
@@ -15424,10 +15424,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^3.5.3, typescript@^3.6.3:
+typescript@^3.7.2:
-  version "3.6.3"
+  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.6.3.tgz#fea942fabb20f7e1ca7164ff626f1a9f3f70b4da"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.2.tgz#27e489b95fa5909445e9fef5ee48d81697ad18fb"
-  integrity sha512-N7bceJL1CtRQ2RiG0AQME13ksR7DiuQh/QehubYcghzv20tnh+MQnQIuJddTmsbqYj+dztchykemz0zFzlvdQw==
+  integrity sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ==
 
 ua-parser-js@^0.7.18, ua-parser-js@^0.7.19:
   version "0.7.20"