chore: publish

- @react-navigation/bottom-tabs@5.11.1 - @react-navigation/compat@5.3.9 - @react-navigation/core@5.14.3 - @react-navigation/devtools@5.1.17 - @react-navigation/drawer@5.11.2 - @react-navigation/material-bottom-tabs@5.3.9 - @react-navigation/material-top-tabs@5.3.9 - @react-navigation/native@5.8.9 - @react-navigation/stack@5.12.6
fix: improve the error message for incorrect screen configuration
2026-01-13 22:42:25 +08:00 · 2020-11-10 20:41:26 +01:00 · 2020-11-10 20:29:59 +01:00 · 2020-11-10 19:44:00 +01:00 · 2020-11-10 18:21:36 +01:00 · 2020-11-09 20:40:11 +01:00
70 changed files with 1407 additions and 336 deletions
--- a/example/metro.config.js
+++ b/example/metro.config.js
@@ -68,14 +68,9 @@ module.exports = {
    enhanceMiddleware: (middleware) => {
      return (req, res, next) => {
        // When an asset is imported outside the project root, it has wrong path on Android
-        // This happens for the back button in stack, so we fix the path to correct one
-        const assets = '/packages/stack/src/views/assets';
-
-        if (req.url.startsWith(assets)) {
-          req.url = req.url.replace(
-            assets,
-            '/assets/../packages/stack/src/views/assets'
-          );
+        // So we fix the path to correct one
+        if (/\/packages\/.+\.png\?.+$/.test(req.url)) {
+          req.url = `/assets/../${req.url}`;
        }

        return middleware(req, res, next);
--- a/example/src/Screens/BottomTabs.tsx
+++ b/example/src/Screens/BottomTabs.tsx
@@ -86,12 +86,18 @@ export default function BottomTabsScreen({
    >
      <BottomTabs.Screen
        name="Article"
-        component={SimpleStackScreen}
        options={{
          title: 'Article',
          tabBarIcon: getTabBarIcon('file-document-box'),
        }}
-      />
+      >
+        {(props) => (
+          <SimpleStackScreen
+            {...props}
+            screenOptions={{ headerShown: false }}
+          />
+        )}
+      </BottomTabs.Screen>
      <BottomTabs.Screen
        name="Chat"
        component={Chat}
--- a/example/src/Screens/MaterialBottomTabs.tsx
+++ b/example/src/Screens/MaterialBottomTabs.tsx
@@ -23,13 +23,19 @@ export default function MaterialBottomTabsScreen() {
    <MaterialBottomTabs.Navigator barStyle={styles.tabBar}>
      <MaterialBottomTabs.Screen
        name="Article"
-        component={SimpleStackScreen}
        options={{
          tabBarLabel: 'Article',
          tabBarIcon: 'file-document-box',
          tabBarColor: '#C9E7F8',
        }}
-      />
+      >
+        {(props) => (
+          <SimpleStackScreen
+            {...props}
+            screenOptions={{ headerShown: false }}
+          />
+        )}
+      </MaterialBottomTabs.Screen>
      <MaterialBottomTabs.Screen
        name="Chat"
        component={Chat}
--- a/example/src/Screens/ModalPresentationStack.tsx
+++ b/example/src/Screens/ModalPresentationStack.tsx
@@ -93,7 +93,9 @@ export default function SimpleStackScreen({ navigation, options }: Props) {
        cardOverlayEnabled: true,
        gestureEnabled: true,
        headerStatusBarHeight:
-          navigation.dangerouslyGetState().routes.indexOf(route) > 0
+          navigation
+            .dangerouslyGetState()
+            .routes.findIndex((r: any) => r.key === route.key) > 0
            ? 0
            : undefined,
      })}
--- a/example/src/Screens/PreventRemove.tsx
+++ b/example/src/Screens/PreventRemove.tsx
@@ -77,18 +77,28 @@ const InputScreen = ({

        e.preventDefault();

-        Alert.alert(
-          'Discard changes?',
-          'You have unsaved changes. Are you sure to discard them and leave the screen?',
-          [
-            { text: "Don't leave", style: 'cancel', onPress: () => {} },
-            {
-              text: 'Discard',
-              style: 'destructive',
-              onPress: () => navigation.dispatch(action),
-            },
-          ]
-        );
+        if (Platform.OS === 'web') {
+          const discard = confirm(
+            'You have unsaved changes. Discard them and leave the screen?'
+          );
+
+          if (discard) {
+            navigation.dispatch(action);
+          }
+        } else {
+          Alert.alert(
+            'Discard changes?',
+            'You have unsaved changes. Discard them and leave the screen?',
+            [
+              { text: "Don't leave", style: 'cancel', onPress: () => {} },
+              {
+                text: 'Discard',
+                style: 'destructive',
+                onPress: () => navigation.dispatch(action),
+              },
+            ]
+          );
+        }
      }),
    [hasUnsavedChanges, navigation]
  );
--- a/example/src/Screens/SimpleStack.tsx
+++ b/example/src/Screens/SimpleStack.tsx
@@ -4,6 +4,7 @@ import { Button } from 'react-native-paper';
 import type { ParamListBase } from '@react-navigation/native';
 import {
  createStackNavigator,
+  StackNavigationOptions,
  StackScreenProps,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
@@ -105,7 +106,10 @@ const SimpleStack = createStackNavigator<SimpleStackParams>();

 export default function SimpleStackScreen({
  navigation,
-}: StackScreenProps<ParamListBase>) {
+  screenOptions,
+}: StackScreenProps<ParamListBase> & {
+  screenOptions?: StackNavigationOptions;
+}) {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false,
@@ -113,7 +117,7 @@ export default function SimpleStackScreen({
  }, [navigation]);

  return (
-    <SimpleStack.Navigator>
+    <SimpleStack.Navigator screenOptions={screenOptions}>
      <SimpleStack.Screen
        name="Article"
        component={ArticleScreen}
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -15,7 +15,6 @@ import {
  Provider as PaperProvider,
  DefaultTheme as PaperLightTheme,
  DarkTheme as PaperDarkTheme,
-  Appbar,
  List,
  Divider,
  Text,
@@ -28,10 +27,7 @@ import {
  PathConfigMap,
  NavigationContainerRef,
 } from '@react-navigation/native';
-import {
-  createDrawerNavigator,
-  DrawerScreenProps,
-} from '@react-navigation/drawer';
+import { createDrawerNavigator } from '@react-navigation/drawer';
 import {
  createStackNavigator,
  StackScreenProps,
@@ -65,8 +61,7 @@ if (Platform.OS !== 'web') {
 enableScreens();

 type RootDrawerParamList = {
-  Root: undefined;
-  Another: undefined;
+  Examples: undefined;
 };

 const SCREENS = {
@@ -231,50 +226,49 @@ export default function App() {
          // The first segment of the link is the the scheme + host (returned by `Linking.makeUrl`)
          prefixes: LinkingPrefixes,
          config: {
-            screens: {
-              Root: {
-                path: '',
-                initialRouteName: 'Home',
-                screens: Object.keys(SCREENS).reduce<PathConfigMap>(
-                  (acc, name) => {
-                    // Convert screen names such as SimpleStack to kebab case (simple-stack)
-                    const path = name
-                      .replace(/([A-Z]+)/g, '-$1')
-                      .replace(/^-/, '')
-                      .toLowerCase();
+            initialRouteName: 'Home',
+            screens: Object.keys(SCREENS).reduce<PathConfigMap>(
+              (acc, name) => {
+                // Convert screen names such as SimpleStack to kebab case (simple-stack)
+                const path = name
+                  .replace(/([A-Z]+)/g, '-$1')
+                  .replace(/^-/, '')
+                  .toLowerCase();

-                    acc[name] = {
-                      path,
-                      screens: {
-                        Article: {
-                          path: 'article/:author?',
-                          parse: {
-                            author: (author) =>
-                              author.charAt(0).toUpperCase() +
-                              author.slice(1).replace(/-/g, ' '),
-                          },
-                          stringify: {
-                            author: (author: string) =>
-                              author.toLowerCase().replace(/\s/g, '-'),
-                          },
-                        },
-                        Albums: 'music',
-                        Chat: 'chat',
-                        Contacts: 'people',
-                        NewsFeed: 'feed',
-                        Dialog: 'dialog',
+                acc[name] = {
+                  path,
+                  screens: {
+                    Article: {
+                      path: 'article/:author?',
+                      parse: {
+                        author: (author) =>
+                          author.charAt(0).toUpperCase() +
+                          author.slice(1).replace(/-/g, ' '),
                      },
-                    };
-
-                    return acc;
+                      stringify: {
+                        author: (author: string) =>
+                          author.toLowerCase().replace(/\s/g, '-'),
+                      },
+                    },
+                    Albums: 'music',
+                    Chat: 'chat',
+                    Contacts: 'people',
+                    NewsFeed: 'feed',
+                    Dialog: 'dialog',
                  },
-                  {
-                    Home: '',
-                    NotFound: '*',
-                  }
-                ),
+                };
+
+                return acc;
              },
-            },
+              {
+                Home: {
+                  screens: {
+                    Examples: '',
+                  },
+                },
+                NotFound: '*',
+              }
+            ),
          },
        }}
        fallback={<Text>Loading…</Text>}
@@ -283,35 +277,28 @@ export default function App() {
            `${options?.title ?? route?.name} - React Navigation Example`,
        }}
      >
-        <Drawer.Navigator drawerType={isLargeScreen ? 'permanent' : undefined}>
-          <Drawer.Screen
-            name="Root"
+        <Stack.Navigator
+          screenOptions={{
+            headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+          }}
+        >
+          <Stack.Screen
+            name="Home"
            options={{
-              title: 'Examples',
-              drawerIcon: ({ size, color }) => (
-                <MaterialIcons size={size} color={color} name="folder" />
-              ),
+              headerShown: false,
            }}
          >
-            {({ navigation }: DrawerScreenProps<RootDrawerParamList>) => (
-              <Stack.Navigator
-                screenOptions={{
-                  headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
-                }}
+            {() => (
+              <Drawer.Navigator
+                drawerType={isLargeScreen ? 'permanent' : undefined}
              >
-                <Stack.Screen
-                  name="Home"
+                <Drawer.Screen
+                  name="Examples"
                  options={{
                    title: 'Examples',
-                    headerLeft: isLargeScreen
-                      ? undefined
-                      : () => (
-                          <Appbar.Action
-                            color={theme.colors.text}
-                            icon="menu"
-                            onPress={() => navigation.toggleDrawer()}
-                          />
-                        ),
+                    drawerIcon: ({ size, color }) => (
+                      <MaterialIcons size={size} color={color} name="folder" />
+                    ),
                  }}
                >
                  {({ navigation }: StackScreenProps<RootStackParamList>) => (
@@ -352,26 +339,24 @@ export default function App() {
                      )}
                    </ScrollView>
                  )}
-                </Stack.Screen>
-                <Stack.Screen
-                  name="NotFound"
-                  component={NotFound}
-                  options={{ title: 'Oops!' }}
-                />
-                {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map(
-                  (name) => (
-                    <Stack.Screen
-                      key={name}
-                      name={name}
-                      getComponent={() => SCREENS[name].component}
-                      options={{ title: SCREENS[name].title }}
-                    />
-                  )
-                )}
-              </Stack.Navigator>
+                </Drawer.Screen>
+              </Drawer.Navigator>
            )}
-          </Drawer.Screen>
-        </Drawer.Navigator>
+          </Stack.Screen>
+          <Stack.Screen
+            name="NotFound"
+            component={NotFound}
+            options={{ title: 'Oops!' }}
+          />
+          {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map((name) => (
+            <Stack.Screen
+              key={name}
+              name={name}
+              getComponent={() => SCREENS[name].component}
+              options={{ title: SCREENS[name].title }}
+            />
+          ))}
+        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
--- a/packages/bottom-tabs/CHANGELOG.md
+++ b/packages/bottom-tabs/CHANGELOG.md
@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [5.11.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.11.0...@react-navigation/bottom-tabs@5.11.1) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.11.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.7...@react-navigation/bottom-tabs@5.11.0) (2020-11-09)
+
+
+### Features
+
+* add a hook to get bottom tab bar height ([e08c91f](https://github.com/react-navigation/react-navigation/commit/e08c91ff0a3df13dc6e6096a3e95f60722e6946b)), closes [#8037](https://github.com/react-navigation/react-navigation/issues/8037) [#8536](https://github.com/react-navigation/react-navigation/issues/8536)
+* add a tabBarBadgeStyle option to customize the badge ([6ac4d40](https://github.com/react-navigation/react-navigation/commit/6ac4d40140189a29d857c4d1203bced6929f7baf))
+
+
+
+
+
+## [5.10.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.6...@react-navigation/bottom-tabs@5.10.7) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 ## [5.10.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.5...@react-navigation/bottom-tabs@5.10.6) (2020-11-04)


--- a/packages/bottom-tabs/package.json
+++ b/packages/bottom-tabs/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/bottom-tabs",
  "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "5.10.6",
+  "version": "5.11.1",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -41,7 +41,7 @@
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.8.6",
+    "@react-navigation/native": "^5.8.9",
    "@testing-library/react-native": "^7.1.0",
    "@types/color": "^3.0.1",
    "@types/react": "^16.9.53",
--- a/packages/bottom-tabs/src/index.tsx
+++ b/packages/bottom-tabs/src/index.tsx
@@ -9,6 +9,13 @@ export { default as createBottomTabNavigator } from './navigators/createBottomTa
 export { default as BottomTabView } from './views/BottomTabView';
 export { default as BottomTabBar } from './views/BottomTabBar';

+/**
+ * Utilities
+ */
+export { default as BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
+
+export { default as useBottomTabBarHeight } from './utils/useBottomTabBarHeight';
+
 /**
 * Types
 */
--- a/packages/bottom-tabs/src/types.tsx
+++ b/packages/bottom-tabs/src/types.tsx
@@ -109,6 +109,12 @@ export type BottomTabNavigationOptions = {
   */
  tabBarBadge?: number | string;

+  /**
+   * Custom style for the tab bar badge.
+   * You can specify a background color or text color here.
+   */
+  tabBarBadgeStyle?: StyleProp<TextStyle>;
+
  /**
   * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
   * It's recommended to set this if you don't have a label for the tab.
--- a/packages/bottom-tabs/src/utils/BottomTabBarHeightCallbackContext.tsx
+++ b/packages/bottom-tabs/src/utils/BottomTabBarHeightCallbackContext.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export default React.createContext<((height: number) => void) | undefined>(
+  undefined
+);
--- a/packages/bottom-tabs/src/utils/BottomTabBarHeightContext.tsx
+++ b/packages/bottom-tabs/src/utils/BottomTabBarHeightContext.tsx
@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default React.createContext<number | undefined>(undefined);
--- a/packages/bottom-tabs/src/utils/useBottomTabBarHeight.tsx
+++ b/packages/bottom-tabs/src/utils/useBottomTabBarHeight.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import BottomTabBarHeightContext from './BottomTabBarHeightContext';
+
+export default function useFloatingBottomTabBarHeight() {
+  const height = React.useContext(BottomTabBarHeightContext);
+
+  if (height === undefined) {
+    throw new Error(
+      "Couldn't find the bottom tab bar height. Are you inside a screen in Bottom Tab Navigator?"
+    );
+  }
+
+  return height;
+}
--- a/packages/bottom-tabs/src/views/BottomTabBar.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -5,20 +5,25 @@ import {
  StyleSheet,
  Platform,
  LayoutChangeEvent,
+  StyleProp,
+  ViewStyle,
 } from 'react-native';
 import {
  NavigationContext,
  NavigationRouteContext,
+  TabNavigationState,
+  ParamListBase,
  CommonActions,
  useTheme,
  useLinkBuilder,
 } from '@react-navigation/native';
-import { useSafeArea } from 'react-native-safe-area-context';
+import { useSafeArea, EdgeInsets } from 'react-native-safe-area-context';

 import BottomTabItem from './BottomTabItem';
+import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
 import useWindowDimensions from '../utils/useWindowDimensions';
 import useIsKeyboardShown from '../utils/useIsKeyboardShown';
-import type { BottomTabBarProps } from '../types';
+import type { BottomTabBarProps, LabelPosition } from '../types';

 type Props = BottomTabBarProps & {
  activeTintColor?: string;
@@ -31,13 +36,93 @@ const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;

 const useNativeDriver = Platform.OS !== 'web';

+type Options = {
+  state: TabNavigationState<ParamListBase>;
+  layout: { height: number; width: number };
+  dimensions: { height: number; width: number };
+  tabStyle: StyleProp<ViewStyle>;
+  labelPosition: LabelPosition | undefined;
+  adaptive: boolean | undefined;
+};
+
+const shouldUseHorizontalLabels = ({
+  state,
+  layout,
+  dimensions,
+  adaptive = true,
+  labelPosition,
+  tabStyle,
+}: Options) => {
+  if (labelPosition) {
+    return labelPosition === 'beside-icon';
+  }
+
+  if (!adaptive) {
+    return false;
+  }
+
+  if (layout.width >= 768) {
+    // Screen size matches a tablet
+    let maxTabItemWidth = DEFAULT_MAX_TAB_ITEM_WIDTH;
+
+    const flattenedStyle = StyleSheet.flatten(tabStyle);
+
+    if (flattenedStyle) {
+      if (typeof flattenedStyle.width === 'number') {
+        maxTabItemWidth = flattenedStyle.width;
+      } else if (typeof flattenedStyle.maxWidth === 'number') {
+        maxTabItemWidth = flattenedStyle.maxWidth;
+      }
+    }
+
+    return state.routes.length * maxTabItemWidth <= layout.width;
+  } else {
+    return dimensions.width > dimensions.height;
+  }
+};
+
+const getPaddingBottom = (insets: EdgeInsets) =>
+  Math.max(insets.bottom - Platform.select({ ios: 4, default: 0 }), 0);
+
+export const getTabBarHeight = ({
+  dimensions,
+  insets,
+  style,
+  ...rest
+}: Options & {
+  insets: EdgeInsets;
+  style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+}) => {
+  // @ts-ignore
+  const customHeight = StyleSheet.flatten(style)?.height;
+
+  if (typeof customHeight === 'number') {
+    return customHeight;
+  }
+
+  const isLandscape = dimensions.width > dimensions.height;
+  const horizontalLabels = shouldUseHorizontalLabels({ dimensions, ...rest });
+  const paddingBottom = getPaddingBottom(insets);
+
+  if (
+    Platform.OS === 'ios' &&
+    !Platform.isPad &&
+    isLandscape &&
+    horizontalLabels
+  ) {
+    return COMPACT_TABBAR_HEIGHT + paddingBottom;
+  }
+
+  return DEFAULT_TABBAR_HEIGHT + paddingBottom;
+};
+
 export default function BottomTabBar({
  state,
  navigation,
  descriptors,
  activeBackgroundColor,
  activeTintColor,
-  adaptive = true,
+  adaptive,
  allowFontScaling,
  inactiveBackgroundColor,
  inactiveTintColor,
@@ -60,6 +145,8 @@ export default function BottomTabBar({
  const dimensions = useWindowDimensions();
  const isKeyboardShown = useIsKeyboardShown();

+  const onHeightChange = React.useContext(BottomTabBarHeightCallbackContext);
+
  const shouldShowTabBar =
    focusedOptions.tabBarVisible !== false &&
    !(keyboardHidesTabBar && isKeyboardShown);
@@ -120,11 +207,19 @@ export default function BottomTabBar({
    width: dimensions.width,
  });

-  const isLandscape = () => dimensions.width > dimensions.height;
-
  const handleLayout = (e: LayoutChangeEvent) => {
    const { height, width } = e.nativeEvent.layout;

+    const topBorderWidth =
+      // @ts-ignore
+      StyleSheet.flatten([styles.tabBar, style])?.borderTopWidth;
+
+    onHeightChange?.(
+      height +
+        paddingBottom +
+        (typeof topBorderWidth === 'number' ? topBorderWidth : 0)
+    );
+
    setLayout((layout) => {
      if (height === layout.height && width === layout.width) {
        return layout;
@@ -138,34 +233,6 @@ export default function BottomTabBar({
  };

  const { routes } = state;
-  const shouldUseHorizontalLabels = () => {
-    if (labelPosition) {
-      return labelPosition === 'beside-icon';
-    }
-
-    if (!adaptive) {
-      return false;
-    }
-
-    if (layout.width >= 768) {
-      // Screen size matches a tablet
-      let maxTabItemWidth = DEFAULT_MAX_TAB_ITEM_WIDTH;
-
-      const flattenedStyle = StyleSheet.flatten(tabStyle);
-
-      if (flattenedStyle) {
-        if (typeof flattenedStyle.width === 'number') {
-          maxTabItemWidth = flattenedStyle.width;
-        } else if (typeof flattenedStyle.maxWidth === 'number') {
-          maxTabItemWidth = flattenedStyle.maxWidth;
-        }
-      }
-
-      return routes.length * maxTabItemWidth <= layout.width;
-    } else {
-      return isLandscape();
-    }
-  };

  const defaultInsets = useSafeArea();

@@ -176,22 +243,26 @@ export default function BottomTabBar({
    left: safeAreaInsets?.left ?? defaultInsets.left,
  };

-  const paddingBottom = Math.max(
-    insets.bottom - Platform.select({ ios: 4, default: 0 }),
-    0
-  );
+  const paddingBottom = getPaddingBottom(insets);
+  const tabBarHeight = getTabBarHeight({
+    state,
+    insets,
+    dimensions,
+    layout,
+    adaptive,
+    labelPosition,
+    tabStyle,
+    style,
+  });

-  const getDefaultTabBarHeight = () => {
-    if (
-      Platform.OS === 'ios' &&
-      !Platform.isPad &&
-      isLandscape() &&
-      shouldUseHorizontalLabels()
-    ) {
-      return COMPACT_TABBAR_HEIGHT;
-    }
-    return DEFAULT_TABBAR_HEIGHT;
-  };
+  const hasHorizontalLabels = shouldUseHorizontalLabels({
+    state,
+    dimensions,
+    layout,
+    adaptive,
+    labelPosition,
+    tabStyle,
+  });

  return (
    <Animated.View
@@ -218,7 +289,7 @@ export default function BottomTabBar({
          position: isTabBarHidden ? 'absolute' : (null as any),
        },
        {
-          height: getDefaultTabBarHeight() + paddingBottom,
+          height: tabBarHeight,
          paddingBottom,
          paddingHorizontal: Math.max(insets.left, insets.right),
        },
@@ -276,7 +347,7 @@ export default function BottomTabBar({
                <BottomTabItem
                  route={route}
                  focused={focused}
-                  horizontal={shouldUseHorizontalLabels()}
+                  horizontal={hasHorizontalLabels}
                  onPress={onPress}
                  onLongPress={onLongPress}
                  accessibilityLabel={accessibilityLabel}
@@ -290,6 +361,7 @@ export default function BottomTabBar({
                  button={options.tabBarButton}
                  icon={options.tabBarIcon}
                  badge={options.tabBarBadge}
+                  badgeStyle={options.tabBarBadgeStyle}
                  label={label}
                  showLabel={showLabel}
                  labelStyle={labelStyle}
--- a/packages/bottom-tabs/src/views/BottomTabItem.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabItem.tsx
@@ -47,6 +47,10 @@ type Props = {
   * Text to show in a badge on the tab icon.
   */
  badge?: number | string;
+  /**
+   * Custom style for the badge.
+   */
+  badgeStyle?: StyleProp<TextStyle>;
  /**
   * URL to use for the link to the tab.
   */
@@ -122,6 +126,7 @@ export default function BottomTabBarItem({
  label,
  icon,
  badge,
+  badgeStyle,
  to,
  button = ({
    children,
@@ -235,6 +240,7 @@ export default function BottomTabBarItem({
        route={route}
        horizontal={horizontal}
        badge={badge}
+        badgeStyle={badgeStyle}
        activeOpacity={activeOpacity}
        inactiveOpacity={inactiveOpacity}
        activeTintColor={activeTintColor}
--- a/packages/bottom-tabs/src/views/BottomTabView.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabView.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';

 import {
  NavigationHelpersContext,
@@ -9,9 +15,13 @@ import {
 } from '@react-navigation/native';
 import { ScreenContainer } from 'react-native-screens';

-import SafeAreaProviderCompat from './SafeAreaProviderCompat';
+import SafeAreaProviderCompat, {
+  initialSafeAreaInsets,
+} from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
-import BottomTabBar from './BottomTabBar';
+import BottomTabBar, { getTabBarHeight } from './BottomTabBar';
+import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
+import BottomTabBarHeightContext from '../utils/BottomTabBarHeightContext';
 import type {
  BottomTabNavigationConfig,
  BottomTabDescriptorMap,
@@ -27,6 +37,7 @@ type Props = BottomTabNavigationConfig & {

 type State = {
  loaded: string[];
+  tabBarHeight: number;
 };

 function SceneContent({
@@ -67,9 +78,28 @@ export default class BottomTabView extends React.Component<Props, State> {
    };
  }

-  state: State = {
-    loaded: [this.props.state.routes[this.props.state.index].key],
-  };
+  constructor(props: Props) {
+    super(props);
+
+    const { state, tabBarOptions } = this.props;
+
+    const dimensions = Dimensions.get('window');
+    const tabBarHeight = getTabBarHeight({
+      state,
+      dimensions,
+      layout: { width: dimensions.width, height: 0 },
+      insets: initialSafeAreaInsets,
+      adaptive: tabBarOptions?.adaptive,
+      labelPosition: tabBarOptions?.labelPosition,
+      tabStyle: tabBarOptions?.tabStyle,
+      style: tabBarOptions?.style,
+    });
+
+    this.state = {
+      loaded: [state.routes[state.index].key],
+      tabBarHeight: tabBarHeight,
+    };
+  }

  private renderTabBar = () => {
    const {
@@ -87,6 +117,16 @@ export default class BottomTabView extends React.Component<Props, State> {
    });
  };

+  private handleTabBarHeightChange = (height: number) => {
+    this.setState((state) => {
+      if (state.tabBarHeight !== height) {
+        return { tabBarHeight: height };
+      }
+
+      return null;
+    });
+  };
+
  render() {
    const {
      state,
@@ -97,7 +137,7 @@ export default class BottomTabView extends React.Component<Props, State> {
      sceneContainerStyle,
    } = this.props;
    const { routes } = state;
-    const { loaded } = this.state;
+    const { loaded, tabBarHeight } = this.state;

    return (
      <NavigationHelpersContext.Provider value={navigation}>
@@ -133,13 +173,19 @@ export default class BottomTabView extends React.Component<Props, State> {
                      isFocused={isFocused}
                      style={sceneContainerStyle}
                    >
-                      {descriptor.render()}
+                      <BottomTabBarHeightContext.Provider value={tabBarHeight}>
+                        {descriptor.render()}
+                      </BottomTabBarHeightContext.Provider>
                    </SceneContent>
                  </ResourceSavingScene>
                );
              })}
            </ScreenContainer>
-            {this.renderTabBar()}
+            <BottomTabBarHeightCallbackContext.Provider
+              value={this.handleTabBarHeightChange}
+            >
+              {this.renderTabBar()}
+            </BottomTabBarHeightCallbackContext.Provider>
          </View>
        </SafeAreaProviderCompat>
      </NavigationHelpersContext.Provider>
--- a/packages/bottom-tabs/src/views/SafeAreaProviderCompat.tsx
+++ b/packages/bottom-tabs/src/views/SafeAreaProviderCompat.tsx
@@ -12,7 +12,7 @@ import {
 // The provider component for safe area initializes asynchornously
 // Until the insets are available, there'll be blank screen
 // To avoid the blank screen, we specify some initial values
-const initialSafeAreaInsets = {
+export const initialSafeAreaInsets = {
  // Approximate values which are good enough for most cases
  top: getStatusBarHeight(true),
  bottom: getBottomSpace(),
--- a/packages/bottom-tabs/src/views/TabBarIcon.tsx
+++ b/packages/bottom-tabs/src/views/TabBarIcon.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 import type { Route } from '@react-navigation/native';
 import Badge from './Badge';

@@ -7,6 +13,7 @@ type Props = {
  route: Route<string>;
  horizontal: boolean;
  badge?: string | number;
+  badgeStyle?: StyleProp<TextStyle>;
  activeOpacity: number;
  inactiveOpacity: number;
  activeTintColor: string;
@@ -22,6 +29,7 @@ type Props = {
 export default function TabBarIcon({
  horizontal,
  badge,
+  badgeStyle,
  activeOpacity,
  inactiveOpacity,
  activeTintColor,
@@ -56,6 +64,7 @@ export default function TabBarIcon({
        style={[
          styles.badge,
          horizontal ? styles.badgeHorizontal : styles.badgeVertical,
+          badgeStyle,
        ]}
        size={(size * 3) / 4}
      >
--- a/packages/compat/CHANGELOG.md
+++ b/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.3.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.8...@react-navigation/compat@5.3.9) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.7...@react-navigation/compat@5.3.8) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.6...@react-navigation/compat@5.3.7) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 ## [5.3.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.5...@react-navigation/compat@5.3.6) (2020-11-04)

 **Note:** Version bump only for package @react-navigation/compat
--- a/packages/compat/package.json
+++ b/packages/compat/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/compat",
  "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.3.6",
+  "version": "5.3.9",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -32,7 +32,7 @@
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.8.6",
+    "@react-navigation/native": "^5.8.9",
    "@types/react": "^16.9.53",
    "react": "~16.13.1",
    "typescript": "^4.0.3"
--- a/packages/compat/src/createCompatNavigationProp.tsx
+++ b/packages/compat/src/createCompatNavigationProp.tsx
@@ -147,7 +147,6 @@ export default function createCompatNavigationProp<
      }
    },
    state: {
-      // @ts-expect-error: these properties may actually exist
      key: state.key,
      // @ts-expect-error
      routeName: state.name,
@@ -202,7 +201,6 @@ export default function createCompatNavigationProp<

      const { routes } = navigation.dangerouslyGetState();

-      // @ts-expect-error
      return routes[0].key === state.key;
    },
    dangerouslyGetParent() {
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [5.14.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.14.2...@react-navigation/core@5.14.3) (2020-11-10)
+
+
+### Bug Fixes
+
+* improve the error message for incorrect screen configuration ([8f764d8](https://github.com/react-navigation/react-navigation/commit/8f764d8b0809604716d5d92ea33cc1beee02e804))
+
+
+
+
+
+## [5.14.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.14.1...@react-navigation/core@5.14.2) (2020-11-09)
+
+
+### Bug Fixes
+
+* throw if the same pattern resolves to multiple screens ([48b2e77](https://github.com/react-navigation/react-navigation/commit/48b2e777307908e8b3fcb49d8555b610dc0e38f2))
+
+
+
+
+
+## [5.14.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.14.0...@react-navigation/core@5.14.1) (2020-11-08)
+
+
+### Bug Fixes
+
+* tweak error message when navigator has non-screen children ([360b0e9](https://github.com/react-navigation/react-navigation/commit/360b0e995835990c55b75898757ebdd120d52446))
+
+
+
+
+
 # [5.14.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.13.5...@react-navigation/core@5.14.0) (2020-11-04)


--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/core",
  "description": "Core utilities for building navigators",
-  "version": "5.14.0",
+  "version": "5.14.3",
  "keywords": [
    "react",
    "react-native",
@@ -35,7 +35,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.6.0",
+    "@react-navigation/routers": "^5.6.2",
    "escape-string-regexp": "^4.0.0",
    "nanoid": "^3.1.15",
    "query-string": "^6.13.6",
--- a/packages/core/src/BaseNavigationContainer.tsx
+++ b/packages/core/src/BaseNavigationContainer.tsx
@@ -160,9 +160,20 @@ const BaseNavigationContainer = React.forwardRef(

    const resetRoot = React.useCallback(
      (state?: PartialState<NavigationState> | NavigationState) => {
-        setState(state);
+        const target = state?.key ?? keyedListeners.getState.root?.().key;
+
+        if (target == null) {
+          throw new Error(NOT_INITIALIZED_ERROR);
+        }
+
+        listeners.focus[0]((navigation) =>
+          navigation.dispatch({
+            ...CommonActions.reset(state),
+            target,
+          })
+        );
      },
-      [setState]
+      [keyedListeners.getState, listeners.focus]
    );

    const getRootState = React.useCallback(() => {
--- a/packages/core/src/tests/getStateFromPath.test.tsx
+++ b/packages/core/src/tests/getStateFromPath.test.tsx
@@ -2673,6 +2673,47 @@ it('uses nearest parent wildcard match for unmatched paths', () => {
  );
 });

+it('throws if two screens map to the same pattern', () => {
+  const path = '/bar/42/baz/test';
+
+  expect(() =>
+    getStateFromPath(path, {
+      screens: {
+        Foo: {
+          screens: {
+            Bar: {
+              path: '/bar/:id/',
+              screens: {
+                Baz: 'baz',
+              },
+            },
+            Bax: '/bar/:id/baz',
+          },
+        },
+      },
+    })
+  ).toThrow(
+    "Found conflicting screens with the same pattern. The pattern 'bar/:id/baz' resolves to both 'Foo > Bax' and 'Foo > Bar > Baz'. Patterns must be unique and cannot resolve to more than one screen."
+  );
+
+  expect(() =>
+    getStateFromPath(path, {
+      screens: {
+        Foo: {
+          screens: {
+            Bar: {
+              path: '/bar/:id/',
+              screens: {
+                Baz: '',
+              },
+            },
+          },
+        },
+      },
+    })
+  ).not.toThrow();
+});
+
 it('throws if wildcard is specified with legacy config', () => {
  const path = '/bar/42/baz/test';
  const config = {
--- a/packages/core/src/tests/index.test.tsx
+++ b/packages/core/src/tests/index.test.tsx
@@ -1462,6 +1462,51 @@ it('throws when Screen is not the direct children', () => {
  );
 });

+it('throws when undefined component is a direct children', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const Undefined = undefined;
+
+  const spy = jest.spyOn(console, 'error').mockImplementation();
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        {/* @ts-ignore */}
+        <Undefined name="foo" component={jest.fn()} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  spy.mockRestore();
+
+  expect(() => render(element).update(element)).toThrowError(
+    "A navigator can only contain 'Screen' components as its direct children (found 'undefined' for the screen 'foo')"
+  );
+});
+
+it('throws when a tag is a direct children', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        {/* @ts-ignore */}
+        <screen name="foo" component={jest.fn()} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    "A navigator can only contain 'Screen' components as its direct children (found 'screen' for the screen 'foo')"
+  );
+});
+
 it('throws when a React Element is not the direct children', () => {
  const TestNavigator = (props: any) => {
    useNavigationBuilder(MockRouter, props);
--- a/packages/core/src/tests/useOnAction.test.tsx
+++ b/packages/core/src/tests/useOnAction.test.tsx
@@ -1178,3 +1178,149 @@ it("prevents removing by multiple screens with 'beforeRemove' event", () => {
    type: 'stack',
  });
 });
+
+it("prevents removing a child screen with 'beforeRemove' event with 'resetRoot'", () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(StackRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const onBeforeRemove = jest.fn();
+
+  let shouldPrevent = true;
+  let shouldContinue = false;
+
+  const TestScreen = (props: any) => {
+    React.useEffect(
+      () =>
+        props.navigation.addListener('beforeRemove', (e: any) => {
+          onBeforeRemove();
+
+          if (shouldPrevent) {
+            e.preventDefault();
+
+            if (shouldContinue) {
+              props.navigation.dispatch(e.data.action);
+            }
+          }
+        }),
+      [props.navigation]
+    );
+
+    return null;
+  };
+
+  const onStateChange = jest.fn();
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">{() => null}</Screen>
+        <Screen name="bar">{() => null}</Screen>
+        <Screen name="baz">
+          {() => (
+            <TestNavigator>
+              <Screen name="qux" component={TestScreen} />
+              <Screen name="lex">{() => null}</Screen>
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element);
+
+  act(() => ref.current?.navigate('baz'));
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onStateChange).toBeCalledWith({
+    index: 1,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      {
+        key: 'baz-4',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: 'stack-6',
+          routeNames: ['qux', 'lex'],
+          routes: [{ key: 'qux-7', name: 'qux' }],
+          stale: false,
+          type: 'stack',
+        },
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  act(() =>
+    ref.current?.resetRoot({
+      index: 0,
+      key: 'stack-2',
+      routeNames: ['foo', 'bar', 'baz'],
+      routes: [{ key: 'foo-3', name: 'foo' }],
+      stale: false,
+      type: 'stack',
+    })
+  );
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onBeforeRemove).toBeCalledTimes(1);
+
+  expect(ref.current?.getRootState()).toEqual({
+    index: 1,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      {
+        key: 'baz-4',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: 'stack-6',
+          routeNames: ['qux', 'lex'],
+          routes: [{ key: 'qux-7', name: 'qux' }],
+          stale: false,
+          type: 'stack',
+        },
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  shouldPrevent = false;
+
+  act(() =>
+    ref.current?.resetRoot({
+      index: 0,
+      key: 'stack-2',
+      routeNames: ['foo', 'bar', 'baz'],
+      routes: [{ key: 'foo-3', name: 'foo' }],
+      stale: false,
+      type: 'stack',
+    })
+  );
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+});
--- a/packages/core/src/getPathFromState.tsx
+++ b/packages/core/src/getPathFromState.tsx
@@ -239,6 +239,10 @@ export default function getPathFromState(
 // Object.fromEntries is not available in older iOS versions
 const fromEntries = <K extends string, V>(entries: (readonly [K, V])[]) =>
  entries.reduce((acc, [k, v]) => {
+    if (acc.hasOwnProperty(k)) {
+      throw new Error(`A value for key '${k}' already exists in the object.`);
+    }
+
    acc[k] = v;
    return acc;
  }, {} as Record<K, V>);
--- a/packages/core/src/getStateFromPath.tsx
+++ b/packages/core/src/getStateFromPath.tsx
@@ -33,6 +33,11 @@ type ResultState = PartialState<NavigationState> & {
  state?: ResultState;
 };

+type ParsedRoute = {
+  name: string;
+  params?: Record<string, any> | undefined;
+};
+
 /**
 * Utility to parse a path string to initial state object accepted by the container.
 * This is useful for deep linking when we need to handle the incoming URL.
@@ -119,6 +124,12 @@ export default function getStateFromPath(
      // - the most exhaustive ones are always at the beginning
      // - patterns with wildcard are always at the end

+      // If 2 patterns are same, move the one with less route names up
+      // This is an error state, so it's only useful for consistent error messages
+      if (a.pattern === b.pattern) {
+        return b.routeNames.join('>').localeCompare(a.routeNames.join('>'));
+      }
+
      // If one of the patterns starts with the other, it's more exhaustive
      // So move it up
      if (a.pattern.startsWith(b.pattern)) {
@@ -155,6 +166,35 @@ export default function getStateFromPath(
      return bWildcardIndex - aWildcardIndex;
    });

+  // Check for duplicate patterns in the config
+  configs.reduce<Record<string, RouteConfig>>((acc, config) => {
+    if (acc[config.pattern]) {
+      const a = acc[config.pattern].routeNames;
+      const b = config.routeNames;
+
+      // It's not a problem if the path string omitted from a inner most screen
+      // For example, it's ok if a path resolves to `A > B > C` or `A > B`
+      const intersects =
+        a.length > b.length
+          ? b.every((it, i) => a[i] === it)
+          : a.every((it, i) => b[i] === it);
+
+      if (!intersects) {
+        throw new Error(
+          `Found conflicting screens with the same pattern. The pattern '${
+            config.pattern
+          }' resolves to both '${a.join(' > ')}' and '${b.join(
+            ' > '
+          )}'. Patterns must be unique and cannot resolve to more than one screen.`
+        );
+      }
+    }
+
+    return Object.assign(acc, {
+      [config.pattern]: config,
+    });
+  }, {});
+
  if (remaining === '/') {
    // We need to add special handling of empty path so navigation to empty path also works
    // When handling empty path, we should only look at the root level config
@@ -189,7 +229,7 @@ export default function getStateFromPath(
  if (legacy === false) {
    // If we're not in legacy mode,, we match the whole path against the regex instead of segments
    // This makes sure matches such as wildcard will catch any unmatched routes, even if nested
-    const { routeNames, allParams, remainingPath } = matchAgainstConfigs(
+    const { routes, remainingPath } = matchAgainstConfigs(
      remaining,
      configs.map((c) => ({
        ...c,
@@ -198,39 +238,30 @@ export default function getStateFromPath(
      }))
    );

-    if (routeNames !== undefined) {
+    if (routes !== undefined) {
      // This will always be empty if full path matched
+      current = createNestedStateObject(routes, initialRoutes);
      remaining = remainingPath;
-      current = createNestedStateObject(
-        createRouteObjects(configs, routeNames, allParams),
-        initialRoutes
-      );
      result = current;
    }
  } else {
    // In legacy mode, we divide the path into segments and match piece by piece
    // This preserves the legacy behaviour, but we should remove it in next major
    while (remaining) {
-      let { routeNames, allParams, remainingPath } = matchAgainstConfigs(
-        remaining,
-        configs
-      );
+      let { routes, remainingPath } = matchAgainstConfigs(remaining, configs);

      remaining = remainingPath;

      // If we hadn't matched any segments earlier, use the path as route name
-      if (routeNames === undefined) {
+      if (routes === undefined) {
        const segments = remaining.split('/');

-        routeNames = [decodeURIComponent(segments[0])];
+        routes = [{ name: decodeURIComponent(segments[0]) }];
        segments.shift();
        remaining = segments.join('/');
      }

-      const state = createNestedStateObject(
-        createRouteObjects(configs, routeNames, allParams),
-        initialRoutes
-      );
+      const state = createNestedStateObject(routes, initialRoutes);

      if (current) {
        // The state should be nested inside the deepest route we parsed before
@@ -274,8 +305,7 @@ const joinPaths = (...paths: string[]): string =>
    .join('/');

 const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
-  let routeNames: string[] | undefined;
-  let allParams: Record<string, any> | undefined;
+  let routes: ParsedRoute[] | undefined;
  let remainingPath = remaining;

  // Go through all configs, and see if the next path segment matches our regex
@@ -288,21 +318,40 @@ const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {

    // If our regex matches, we need to extract params from the path
    if (match) {
-      routeNames = [...config.routeNames];
+      const matchedParams = config.pattern
+        ?.split('/')
+        .filter((p) => p.startsWith(':'))
+        .reduce<Record<string, any>>(
+          (acc, p, i) =>
+            Object.assign(acc, {
+              // The param segments appear every second item starting from 2 in the regex match result
+              [p]: match![(i + 1) * 2].replace(/\//, ''),
+            }),
+          {}
+        );

-      const paramPatterns = config.pattern
-        .split('/')
-        .filter((p) => p.startsWith(':'));
+      routes = config.routeNames.map((name) => {
+        const config = configs.find((c) => c.screen === name);
+        const params = config?.path
+          ?.split('/')
+          .filter((p) => p.startsWith(':'))
+          .reduce<Record<string, any>>((acc, p) => {
+            const value = matchedParams[p];

-      if (paramPatterns.length) {
-        allParams = paramPatterns.reduce<Record<string, any>>((acc, p, i) => {
-          const value = match![(i + 1) * 2].replace(/\//, ''); // The param segments appear every second item starting from 2 in the regex match result
+            if (value) {
+              const key = p.replace(/^:/, '').replace(/\?$/, '');
+              acc[key] = config.parse?.[key] ? config.parse[key](value) : value;
+            }

-          acc[p] = value;
+            return acc;
+          }, {});

-          return acc;
-        }, {});
-      }
+        if (params && Object.keys(params).length) {
+          return { name, params };
+        }
+
+        return { name };
+      });

      remainingPath = remainingPath.replace(match[1], '');

@@ -310,7 +359,7 @@ const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
    }
  }

-  return { routeNames, allParams, remainingPath };
+  return { routes, remainingPath };
 };

 const createNormalizedConfigs = (
@@ -473,57 +522,48 @@ const findInitialRoute = (
 // it is the end of state and if there is initialRoute for this level
 const createStateObject = (
  initialRoute: string | undefined,
-  routeName: string,
-  params: Record<string, any> | undefined,
+  route: ParsedRoute,
  isEmpty: boolean
 ): InitialState => {
  if (isEmpty) {
    if (initialRoute) {
      return {
        index: 1,
-        routes: [{ name: initialRoute }, { name: routeName as string, params }],
+        routes: [{ name: initialRoute }, route],
      };
    } else {
      return {
-        routes: [{ name: routeName as string, params }],
+        routes: [route],
      };
    }
  } else {
    if (initialRoute) {
      return {
        index: 1,
-        routes: [
-          { name: initialRoute },
-          { name: routeName as string, params, state: { routes: [] } },
-        ],
+        routes: [{ name: initialRoute }, { ...route, state: { routes: [] } }],
      };
    } else {
      return {
-        routes: [{ name: routeName as string, params, state: { routes: [] } }],
+        routes: [{ ...route, state: { routes: [] } }],
      };
    }
  }
 };

 const createNestedStateObject = (
-  routes: { name: string; params?: object }[],
+  routes: ParsedRoute[],
  initialRoutes: InitialRouteConfig[]
 ) => {
  let state: InitialState;
-  let route = routes.shift() as { name: string; params?: object };
+  let route = routes.shift() as ParsedRoute;
  let initialRoute = findInitialRoute(route.name, initialRoutes);

-  state = createStateObject(
-    initialRoute,
-    route.name,
-    route.params,
-    routes.length === 0
-  );
+  state = createStateObject(initialRoute, route, routes.length === 0);

  if (routes.length > 0) {
    let nestedState = state;

-    while ((route = routes.shift() as { name: string; params?: object })) {
+    while ((route = routes.shift() as ParsedRoute)) {
      initialRoute = findInitialRoute(route.name, initialRoutes);

      const nestedStateIndex =
@@ -531,8 +571,7 @@ const createNestedStateObject = (

      nestedState.routes[nestedStateIndex].state = createStateObject(
        initialRoute,
-        route.name,
-        route.params,
+        route,
        routes.length === 0
      );

@@ -546,46 +585,6 @@ const createNestedStateObject = (
  return state;
 };

-const createRouteObjects = (
-  configs: RouteConfig[],
-  routeNames: string[],
-  allParams?: Record<string, any>
-) =>
-  routeNames.map((name) => {
-    const config = configs.find((c) => c.screen === name);
-
-    let params: object | undefined;
-
-    if (allParams && config?.path) {
-      const pattern = config.path;
-
-      if (pattern) {
-        const paramPatterns = pattern
-          .split('/')
-          .filter((p) => p.startsWith(':'));
-
-        if (paramPatterns.length) {
-          params = paramPatterns.reduce<Record<string, any>>((acc, p) => {
-            const key = p.replace(/^:/, '').replace(/\?$/, '');
-            const value = allParams![p];
-
-            if (value) {
-              acc[key] = config.parse?.[key] ? config.parse[key](value) : value;
-            }
-
-            return acc;
-          }, {});
-        }
-      }
-    }
-
-    if (params && Object.keys(params).length) {
-      return { name, params };
-    }
-
-    return { name };
-  });
-
 const findFocusedRoute = (state: InitialState) => {
  let current: InitialState | undefined = state;

--- a/packages/core/src/useNavigationBuilder.tsx
+++ b/packages/core/src/useNavigationBuilder.tsx
@@ -90,10 +90,17 @@ const getRouteConfigsFromChildren = <
    }

    throw new Error(
-      `A navigator can only contain 'Screen' components as its direct children (found '${
-        // @ts-expect-error: child can be any type and we're accessing it safely, but TS doesn't understand it
-        child.type?.name ? child.type.name : String(child)
-      }')`
+      `A navigator can only contain 'Screen' components as its direct children (found ${
+        React.isValidElement(child)
+          ? `'${
+              typeof child.type === 'string' ? child.type : child.type?.name
+            }'${
+              child.props?.name ? ` for the screen '${child.props.name}'` : ''
+            }`
+          : typeof child === 'object'
+          ? JSON.stringify(child)
+          : `'${String(child)}'`
+      }). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.`
    );
  }, []);

--- a/packages/core/src/useOnAction.tsx
+++ b/packages/core/src/useOnAction.tsx
@@ -90,18 +90,11 @@ export default function useOnAction({
          onDispatchAction(action, state === result);

          if (state !== result) {
-            const nextRouteKeys = (result.routes as any[]).map(
-              (route: { key?: string }) => route.key
-            );
-
-            const removedRoutes = state.routes.filter(
-              (route) => !nextRouteKeys.includes(route.key)
-            );
-
            const isPrevented = shouldPreventRemove(
              emitter,
              beforeRemoveListeners,
-              removedRoutes,
+              state.routes,
+              result.routes,
              action
            );

--- a/packages/core/src/useOnPreventRemove.tsx
+++ b/packages/core/src/useOnPreventRemove.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type {
  NavigationState,
-  Route,
  NavigationAction,
 } from '@react-navigation/routers';
 import NavigationBuilderContext, {
@@ -22,11 +21,16 @@ const VISITED_ROUTE_KEYS = Symbol('VISITED_ROUTE_KEYS');
 export const shouldPreventRemove = (
  emitter: NavigationEventEmitter<EventMapCore<any>>,
  beforeRemoveListeners: Record<string, ChildBeforeRemoveListener | undefined>,
-  routes: Route<string>[],
+  currentRoutes: { key: string }[],
+  nextRoutes: { key?: string | undefined }[],
  action: NavigationAction
 ) => {
+  const nextRouteKeys = nextRoutes.map((route) => route.key);
+
  // Call these in reverse order so last screens handle the event first
-  const reversedRoutes = [...routes].reverse();
+  const removedRoutes = currentRoutes
+    .filter((route) => !nextRouteKeys.includes(route.key))
+    .reverse();

  const visitedRouteKeys: Set<string> =
    // @ts-expect-error: add this property to mark that we've already emitted this action
@@ -37,7 +41,7 @@ export const shouldPreventRemove = (
    [VISITED_ROUTE_KEYS]: visitedRouteKeys,
  };

-  for (const route of reversedRoutes) {
+  for (const route of removedRoutes) {
    if (visitedRouteKeys.has(route.key)) {
      // Skip if we've already emitted this action for this screen
      continue;
@@ -85,6 +89,7 @@ export default function useOnPreventRemove({
          emitter,
          beforeRemoveListeners,
          state.routes,
+          [],
          action
        );
      });
--- a/packages/devtools/CHANGELOG.md
+++ b/packages/devtools/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.1.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.16...@react-navigation/devtools@5.1.17) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.16](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.15...@react-navigation/devtools@5.1.16) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.14...@react-navigation/devtools@5.1.15) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
 ## [5.1.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.13...@react-navigation/devtools@5.1.14) (2020-11-04)

 **Note:** Version bump only for package @react-navigation/devtools
--- a/packages/devtools/package.json
+++ b/packages/devtools/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/devtools",
  "description": "Developer tools for React Navigation",
-  "version": "5.1.14",
+  "version": "5.1.17",
  "keywords": [
    "react",
    "react-native",
@@ -36,7 +36,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/core": "^5.14.0",
+    "@react-navigation/core": "^5.14.3",
    "deep-equal": "^2.0.4"
  },
  "devDependencies": {
--- a/packages/drawer/CHANGELOG.md
+++ b/packages/drawer/CHANGELOG.md
@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [5.11.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.11.1...@react-navigation/drawer@5.11.2) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.11.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.11.0...@react-navigation/drawer@5.11.1) (2020-11-09)
+
+
+### Bug Fixes
+
+* provide correct context to drawe header ([18bbd17](https://github.com/react-navigation/react-navigation/commit/18bbd177d91ccc4308516208a8b9f1a34ca5cc41))
+
+
+
+
+
+# [5.11.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.7...@react-navigation/drawer@5.11.0) (2020-11-09)
+
+
+### Bug Fixes
+
+* try fixing drawer blink on Android ([5217245](https://github.com/react-navigation/react-navigation/commit/52172453dfb71822c2fb0f5947d00bac4a840d07))
+
+
+### Features
+
+* add a getIsDrawerOpenFromState utility to drawer ([5bd682f](https://github.com/react-navigation/react-navigation/commit/5bd682f0bf6b28a95fb3e7fc9e1974057a877cb0))
+* add option to show a header in drawer navigator screens ([dbe961b](https://github.com/react-navigation/react-navigation/commit/dbe961ba5bb243e8da4d889c3c7dd6ed1de287c4))
+
+
+
+
+
+## [5.10.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.6...@react-navigation/drawer@5.10.7) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
 ## [5.10.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.5...@react-navigation/drawer@5.10.6) (2020-11-04)

 **Note:** Version bump only for package @react-navigation/drawer
--- a/packages/drawer/package.json
+++ b/packages/drawer/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/drawer",
  "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "5.10.6",
+  "version": "5.11.2",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -46,7 +46,7 @@
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.8.6",
+    "@react-navigation/native": "^5.8.9",
    "@testing-library/react-native": "^7.1.0",
    "@types/react": "^16.9.53",
    "@types/react-native": "^0.63.30",
--- a/packages/drawer/src/index.tsx
+++ b/packages/drawer/src/index.tsx
@@ -17,6 +17,7 @@ export { default as DrawerContentScrollView } from './views/DrawerContentScrollV
 */
 export { default as DrawerGestureContext } from './utils/DrawerGestureContext';

+export { default as getIsDrawerOpenFromState } from './utils/getIsDrawerOpenFromState';
 export { default as useIsDrawerOpen } from './utils/useIsDrawerOpen';

 /**
--- a/packages/drawer/src/types.tsx
+++ b/packages/drawer/src/types.tsx
@@ -18,6 +18,8 @@ export type Scene = {
  color?: string;
 };

+export type Layout = { width: number; height: number };
+
 export type DrawerNavigationConfig<T = DrawerContentOptions> = {
  /**
   * Position of the drawer on the screen. Defaults to `left`.
@@ -94,12 +96,95 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
  detachInactiveScreens?: boolean;
 };

-export type DrawerNavigationOptions = {
+export type DrawerHeaderOptions = {
+  /**
+   * String or a function that returns a React Element to be used by the header.
+   * Defaults to scene `title`.
+   * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
+   * The title string is passed in `children`.
+   */
+  headerTitle?:
+    | string
+    | ((props: {
+        /**
+         * Whether title font should scale to respect Text Size accessibility settings.
+         */
+        allowFontScaling?: boolean;
+        /**
+         * Tint color for the header.
+         */
+        tintColor?: string;
+        /**
+         * Content of the title element. Usually the title string.
+         */
+        children?: string;
+        /**
+         * Style object for the title element.
+         */
+        style?: StyleProp<TextStyle>;
+      }) => React.ReactNode);
+  /**
+   * How to align the the header title.
+   * Defaults to `center` on iOS and `left` on Android.
+   */
+  headerTitleAlign?: 'left' | 'center';
+  /**
+   * Style object for the title component.
+   */
+  headerTitleStyle?: StyleProp<TextStyle>;
+  /**
+   * Whether header title font should scale to respect Text Size accessibility settings. Defaults to `false`.
+   */
+  headerTitleAllowFontScaling?: boolean;
+  /**
+   * Function which returns a React Element to display on the left side of the header.
+   */
+  headerLeft?: (props: { tintColor?: string }) => React.ReactNode;
+  /**
+   * Accessibility label for the header left button.
+   */
+  headerLeftAccessibilityLabel?: string;
+  /**
+   * Function which returns a React Element to display on the right side of the header.
+   */
+  headerRight?: (props: { tintColor?: string }) => React.ReactNode;
+  /**
+   * Color for material ripple (Android >= 5.0 only).
+   */
+  headerPressColorAndroid?: string;
+  /**
+   * Tint color for the header.
+   */
+  headerTintColor?: string;
+  /**
+   * Style object for the header. You can specify a custom background color here, for example.
+   */
+  headerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Extra padding to add at the top of header to account for translucent status bar.
+   * By default, it uses the top value from the safe area insets of the device.
+   * Pass 0 or a custom value to disable the default behaviour, and customize the height.
+   */
+  headerStatusBarHeight?: number;
+};
+
+export type DrawerNavigationOptions = DrawerHeaderOptions & {
  /**
   * Title text for the screen.
   */
  title?: string;

+  /**
+   * Function that given `HeaderProps` returns a React Element to display as a header.
+   */
+  header?: (props: DrawerHeaderProps) => React.ReactNode;
+
+  /**
+   * Whether to show the header. The header is not shown by default.
+   * Setting this to `true` shows the header.
+   */
+  headerShown?: boolean;
+
  /**
   * Title string of a screen displayed in the drawer
   * or a function that given { focused: boolean, color: string } returns a React.Node
@@ -187,6 +272,20 @@ export type DrawerContentOptions = {
  style?: StyleProp<ViewStyle>;
 };

+export type DrawerHeaderProps = {
+  /**
+   * Layout of the screen.
+   */
+  layout: Layout;
+  /**
+   * Object representing the current scene, such as the route object and descriptor.
+   */
+  scene: {
+    route: Route<string>;
+    descriptor: DrawerDescriptor;
+  };
+};
+
 export type DrawerNavigationEventMap = {
  /**
   * Event which fires when the drawer opens.
--- a/packages/drawer/src/utils/getIsDrawerOpenFromState.tsx
+++ b/packages/drawer/src/utils/getIsDrawerOpenFromState.tsx
@@ -0,0 +1,16 @@
+import type {
+  DrawerNavigationState,
+  ParamListBase,
+} from '@react-navigation/native';
+
+export default function getIsDrawerOpenFromState(
+  state: DrawerNavigationState<ParamListBase>
+): boolean {
+  if (state.history == null) {
+    throw new Error(
+      "Couldn't find the drawer status in the state object. Is it a valid state object of drawer navigator?"
+    );
+  }
+
+  return state.history.some((it) => it.type === 'drawer');
+}
--- a/packages/drawer/src/views/Drawer.tsx
+++ b/packages/drawer/src/views/Drawer.tsx
@@ -57,9 +57,10 @@ const DIRECTION_LEFT = 1;
 const DIRECTION_RIGHT = -1;

 const SWIPE_DISTANCE_THRESHOLD_DEFAULT = 60;
-
 const SWIPE_DISTANCE_MINIMUM = 5;

+const DEFAULT_DRAWER_WIDTH = '80%';
+
 const SPRING_CONFIG = {
  stiffness: 1000,
  damping: 500,
@@ -202,7 +203,8 @@ export default class DrawerView extends React.Component<Props> {

  private getDrawerWidth = (): number => {
    const { drawerStyle, dimensions } = this.props;
-    const { width } = StyleSheet.flatten(drawerStyle);
+    const { width = DEFAULT_DRAWER_WIDTH } =
+      StyleSheet.flatten(drawerStyle) || {};

    if (typeof width === 'string' && width.endsWith('%')) {
      // Try to calculate width if a percentage is given
@@ -246,7 +248,7 @@ export default class DrawerView extends React.Component<Props> {
  private containerWidth = new Value<number>(this.props.dimensions.width);
  private drawerWidth = new Value<number>(this.initialDrawerWidth);
  private drawerOpacity = new Value<number>(
-    this.initialDrawerWidth || this.props.drawerType === 'permanent' ? 1 : 0
+    this.props.drawerType === 'permanent' ? 1 : 0
  );
  private drawerPosition = new Value<number>(
    this.props.drawerPosition === 'right' ? DIRECTION_RIGHT : DIRECTION_LEFT
@@ -730,7 +732,7 @@ const styles = StyleSheet.create({
    position: 'absolute',
    top: 0,
    bottom: 0,
-    width: '80%',
+    width: DEFAULT_DRAWER_WIDTH,
  },
  content: {
    flex: 1,
--- a/packages/drawer/src/views/DrawerView.tsx
+++ b/packages/drawer/src/views/DrawerView.tsx
@@ -10,6 +10,8 @@ import {
 import { ScreenContainer } from 'react-native-screens';
 import {
  NavigationHelpersContext,
+  NavigationContext,
+  NavigationRouteContext,
  DrawerNavigationState,
  DrawerActions,
  useTheme,
@@ -19,16 +21,19 @@ import {
 import { GestureHandlerRootView } from './GestureHandler';
 import SafeAreaProviderCompat from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
+import Header from './Header';
 import DrawerContent from './DrawerContent';
 import Drawer from './Drawer';
 import DrawerOpenContext from '../utils/DrawerOpenContext';
 import DrawerPositionContext from '../utils/DrawerPositionContext';
 import useWindowDimensions from '../utils/useWindowDimensions';
+import getIsDrawerOpenFromState from '../utils/getIsDrawerOpenFromState';
 import type {
  DrawerDescriptorMap,
  DrawerNavigationConfig,
  DrawerNavigationHelpers,
  DrawerContentComponentProps,
+  DrawerHeaderProps,
 } from '../types';

 type Props = DrawerNavigationConfig & {
@@ -90,7 +95,7 @@ export default function DrawerView({

  const { colors } = useTheme();

-  const isDrawerOpen = state.history.some((it) => it.type === 'drawer');
+  const isDrawerOpen = getIsDrawerOpenFromState(state);

  const handleDrawerOpen = React.useCallback(() => {
    navigation.dispatch({
@@ -169,6 +174,11 @@ export default function DrawerView({
            return null;
          }

+          const {
+            header = (props: DrawerHeaderProps) => <Header {...props} />,
+            headerShown = true,
+          } = descriptor.options;
+
          return (
            <ResourceSavingScene
              key={route.key}
@@ -176,6 +186,16 @@ export default function DrawerView({
              isVisible={isFocused}
              enabled={detachInactiveScreens}
            >
+              {headerShown ? (
+                <NavigationContext.Provider value={descriptor.navigation}>
+                  <NavigationRouteContext.Provider value={route}>
+                    {header({
+                      layout: dimensions,
+                      scene: { route, descriptor },
+                    })}
+                  </NavigationRouteContext.Provider>
+                </NavigationContext.Provider>
+              ) : null}
              {descriptor.render()}
            </ResourceSavingScene>
          );
--- a/packages/drawer/src/views/Header.tsx
+++ b/packages/drawer/src/views/Header.tsx
@@ -0,0 +1,240 @@
+import * as React from 'react';
+import { Text, View, Image, StyleSheet, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { DrawerActions, useTheme } from '@react-navigation/native';
+import TouchableItem from './TouchableItem';
+import type { Layout, DrawerHeaderProps } from '../types';
+
+export const getDefaultHeaderHeight = (
+  layout: Layout,
+  statusBarHeight: number
+): number => {
+  const isLandscape = layout.width > layout.height;
+
+  let headerHeight;
+
+  if (Platform.OS === 'ios') {
+    if (isLandscape && !Platform.isPad) {
+      headerHeight = 32;
+    } else {
+      headerHeight = 44;
+    }
+  } else if (Platform.OS === 'android') {
+    headerHeight = 56;
+  } else {
+    headerHeight = 64;
+  }
+
+  return headerHeight + statusBarHeight;
+};
+
+export default function HeaderSegment({ scene, layout }: DrawerHeaderProps) {
+  const insets = useSafeAreaInsets();
+  const { colors } = useTheme();
+
+  const {
+    title,
+    headerTitle,
+    headerTitleAlign = Platform.select({
+      ios: 'center',
+      default: 'left',
+    }),
+    headerLeft,
+    headerLeftAccessibilityLabel,
+    headerRight,
+    headerTitleAllowFontScaling,
+    headerTitleStyle,
+    headerTintColor,
+    headerPressColorAndroid,
+    headerStyle,
+    headerStatusBarHeight = insets.top,
+  } = scene.descriptor.options;
+
+  const currentTitle =
+    typeof headerTitle !== 'function' && headerTitle !== undefined
+      ? headerTitle
+      : title !== undefined
+      ? title
+      : scene.route.name;
+
+  const defaultHeight = getDefaultHeaderHeight(layout, headerStatusBarHeight);
+
+  const leftButton = headerLeft ? (
+    headerLeft({ tintColor: headerTintColor })
+  ) : (
+    <TouchableItem
+      accessible
+      accessibilityRole="button"
+      accessibilityComponentType="button"
+      accessibilityLabel={headerLeftAccessibilityLabel}
+      accessibilityTraits="button"
+      delayPressIn={0}
+      onPress={() =>
+        scene.descriptor.navigation.dispatch(DrawerActions.toggleDrawer())
+      }
+      style={styles.touchable}
+      pressColor={headerPressColorAndroid}
+      hitSlop={Platform.select({
+        ios: undefined,
+        default: { top: 16, right: 16, bottom: 16, left: 16 },
+      })}
+      borderless
+    >
+      <Image
+        style={[
+          styles.icon,
+          headerTintColor ? { tintColor: headerTintColor } : null,
+        ]}
+        source={require('./assets/toggle-drawer-icon.png')}
+        fadeDuration={0}
+      />
+    </TouchableItem>
+  );
+  const rightButton = headerRight
+    ? headerRight({ tintColor: headerTintColor })
+    : null;
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[
+        {
+          height: defaultHeight,
+          backgroundColor: colors.card,
+          borderBottomColor: colors.border,
+          shadowColor: colors.border,
+        },
+        styles.container,
+        headerStyle,
+      ]}
+    >
+      <View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
+      <View pointerEvents="box-none" style={styles.content}>
+        {leftButton ? (
+          <View
+            pointerEvents="box-none"
+            style={[styles.left, { left: insets.left }]}
+          >
+            {leftButton}
+          </View>
+        ) : null}
+        <View
+          pointerEvents="box-none"
+          style={[
+            headerTitleAlign === 'left'
+              ? {
+                  position: 'absolute',
+                  left: (leftButton ? 72 : 16) + insets.left,
+                  right: (rightButton ? 72 : 16) + insets.right,
+                }
+              : {
+                  marginHorizontal:
+                    (leftButton ? 32 : 16) +
+                    Math.max(insets.left, insets.right),
+                },
+          ]}
+        >
+          {typeof headerTitle === 'function' ? (
+            headerTitle({
+              children: currentTitle,
+              allowFontScaling: headerTitleAllowFontScaling,
+              tintColor: headerTintColor,
+              style: headerTitleStyle,
+            })
+          ) : (
+            <Text
+              accessibilityRole="header"
+              aria-level="1"
+              numberOfLines={1}
+              allowFontScaling={headerTitleAllowFontScaling}
+              style={[
+                styles.title,
+                { color: headerTintColor ?? colors.text },
+                styles.title,
+                headerTitleStyle,
+              ]}
+            >
+              {currentTitle}
+            </Text>
+          )}
+        </View>
+        {rightButton ? (
+          <View
+            pointerEvents="box-none"
+            style={[styles.right, { right: insets.right }]}
+          >
+            {rightButton}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Platform.select({
+      android: {
+        elevation: 4,
+      },
+      ios: {
+        shadowOpacity: 0.85,
+        shadowRadius: 0,
+        shadowOffset: {
+          width: 0,
+          height: StyleSheet.hairlineWidth,
+        },
+      },
+      default: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+      },
+    }),
+    zIndex: 1,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: Platform.select({
+    ios: {
+      fontSize: 17,
+      fontWeight: '600',
+    },
+    android: {
+      fontSize: 20,
+      fontFamily: 'sans-serif-medium',
+      fontWeight: 'normal',
+    },
+    default: {
+      fontSize: 18,
+      fontWeight: '500',
+    },
+  }),
+  icon: {
+    height: 24,
+    width: 24,
+    margin: 3,
+    resizeMode: 'contain',
+  },
+  touchable: {
+    marginHorizontal: 11,
+  },
+  left: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  right: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+});
--- a/packages/drawer/src/views/assets/toggle-drawer-icon.png
+++ b/packages/drawer/src/views/assets/toggle-drawer-icon.png
--- a/packages/drawer/src/views/assets/toggle-drawer-icon@1.5x.android.png
+++ b/packages/drawer/src/views/assets/toggle-drawer-icon@1.5x.android.png
--- a/packages/drawer/src/views/assets/toggle-drawer-icon@1.5x.ios.png
+++ b/packages/drawer/src/views/assets/toggle-drawer-icon@1.5x.ios.png
--- a/packages/drawer/src/views/assets/toggle-drawer-icon@1x.android.png
+++ b/packages/drawer/src/views/assets/toggle-drawer-icon@1x.android.png
--- a/packages/drawer/src/views/assets/toggle-drawer-icon@1x.ios.png
+++ b/packages/drawer/src/views/assets/toggle-drawer-icon@1x.ios.png
--- a/packages/drawer/src/views/assets/toggle-drawer-icon@2x.android.png
+++ b/packages/drawer/src/views/assets/toggle-drawer-icon@2x.android.png
--- a/packages/drawer/src/views/assets/toggle-drawer-icon@2x.ios.png
+++ b/packages/drawer/src/views/assets/toggle-drawer-icon@2x.ios.png
--- a/packages/drawer/src/views/assets/toggle-drawer-icon@3x.android.png
+++ b/packages/drawer/src/views/assets/toggle-drawer-icon@3x.android.png
--- a/packages/drawer/src/views/assets/toggle-drawer-icon@3x.ios.png
+++ b/packages/drawer/src/views/assets/toggle-drawer-icon@3x.ios.png
--- a/packages/drawer/src/views/assets/toggle-drawer-icon@4x.android.png
+++ b/packages/drawer/src/views/assets/toggle-drawer-icon@4x.android.png
--- a/packages/drawer/src/views/assets/toggle-drawer-icon@4x.ios.png
+++ b/packages/drawer/src/views/assets/toggle-drawer-icon@4x.ios.png
--- a/packages/material-bottom-tabs/CHANGELOG.md
+++ b/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.3.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.8...@react-navigation/material-bottom-tabs@5.3.9) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.7...@react-navigation/material-bottom-tabs@5.3.8) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.6...@react-navigation/material-bottom-tabs@5.3.7) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 ## [5.3.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.5...@react-navigation/material-bottom-tabs@5.3.6) (2020-11-04)

 **Note:** Version bump only for package @react-navigation/material-bottom-tabs
--- a/packages/material-bottom-tabs/package.json
+++ b/packages/material-bottom-tabs/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/material-bottom-tabs",
  "description": "Integration for bottom navigation component from react-native-paper",
-  "version": "5.3.6",
+  "version": "5.3.9",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -42,7 +42,7 @@
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.8.6",
+    "@react-navigation/native": "^5.8.9",
    "@testing-library/react-native": "^7.1.0",
    "@types/react": "^16.9.53",
    "@types/react-native": "^0.63.30",
--- a/packages/material-top-tabs/CHANGELOG.md
+++ b/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.3.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.8...@react-navigation/material-top-tabs@5.3.9) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.7...@react-navigation/material-top-tabs@5.3.8) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.6...@react-navigation/material-top-tabs@5.3.7) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 ## [5.3.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.5...@react-navigation/material-top-tabs@5.3.6) (2020-11-04)

 **Note:** Version bump only for package @react-navigation/material-top-tabs
--- a/packages/material-top-tabs/package.json
+++ b/packages/material-top-tabs/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/material-top-tabs",
  "description": "Integration for the animated tab view component from react-native-tab-view",
-  "version": "5.3.6",
+  "version": "5.3.9",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -45,7 +45,7 @@
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.8.6",
+    "@react-navigation/native": "^5.8.9",
    "@testing-library/react-native": "^7.1.0",
    "@types/react": "^16.9.53",
    "@types/react-native": "^0.63.30",
--- a/packages/native/CHANGELOG.md
+++ b/packages/native/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.8.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.8...@react-navigation/native@5.8.9) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.8.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.7...@react-navigation/native@5.8.8) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.8.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.6...@react-navigation/native@5.8.7) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 ## [5.8.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.5...@react-navigation/native@5.8.6) (2020-11-04)


--- a/packages/native/package.json
+++ b/packages/native/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/native",
  "description": "React Native integration for React Navigation",
-  "version": "5.8.6",
+  "version": "5.8.9",
  "keywords": [
    "react-native",
    "react-navigation",
@@ -37,7 +37,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/core": "^5.14.0",
+    "@react-navigation/core": "^5.14.3",
    "escape-string-regexp": "^4.0.0",
    "nanoid": "^3.1.15"
  },
--- a/packages/routers/CHANGELOG.md
+++ b/packages/routers/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [5.6.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.6.1...@react-navigation/routers@5.6.2) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/routers
+
+
+
+
+
+## [5.6.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.6.0...@react-navigation/routers@5.6.1) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/routers
+
+
+
+
+
 # [5.6.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.5.1...@react-navigation/routers@5.6.0) (2020-11-04)


--- a/packages/routers/package.json
+++ b/packages/routers/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/routers",
  "description": "Routers to help build custom navigators",
-  "version": "5.6.0",
+  "version": "5.6.2",
  "keywords": [
    "react",
    "react-native",
--- a/packages/routers/src/CommonActions.tsx
+++ b/packages/routers/src/CommonActions.tsx
@@ -23,7 +23,7 @@ export type Action =
    }
  | {
      type: 'RESET';
-      payload: ResetState;
+      payload: ResetState | undefined;
      source?: string;
      target?: string;
    }
@@ -62,7 +62,7 @@ export function navigate(...args: any): Action {
  }
 }

-export function reset(state: ResetState): Action {
+export function reset(state: ResetState | undefined): Action {
  return { type: 'RESET', payload: state };
 }

--- a/packages/routers/src/DrawerRouter.tsx
+++ b/packages/routers/src/DrawerRouter.tsx
@@ -75,7 +75,7 @@ const isDrawerOpen = (
  state:
    | DrawerNavigationState<ParamListBase>
    | PartialState<DrawerNavigationState<ParamListBase>>
-) => Boolean(state.history?.find((it) => it.type === 'drawer'));
+) => Boolean(state.history?.some((it) => it.type === 'drawer'));

 const openDrawer = (
  state: DrawerNavigationState<ParamListBase>
--- a/packages/routers/src/types.tsx
+++ b/packages/routers/src/types.tsx
@@ -56,12 +56,11 @@ export type PartialRoute<R extends Route<string>> = Omit<R, 'key'> & {
 };

 export type PartialState<State extends NavigationState> = Partial<
-  Omit<State, 'stale' | 'type' | 'key' | 'routes' | 'routeNames'>
+  Omit<State, 'stale' | 'routes'>
 > &
  Readonly<{
    stale?: true;
-    type?: string;
-    routes: PartialRoute<Route<string>>[];
+    routes: PartialRoute<Route<State['routeNames'][number]>>[];
  }>;

 export type Route<
--- a/packages/stack/CHANGELOG.md
+++ b/packages/stack/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.12.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.5...@react-navigation/stack@5.12.6) (2020-11-10)
+
+
+### Bug Fixes
+
+* make sure inactive screen don't increase scroll area on web ([da35085](https://github.com/react-navigation/react-navigation/commit/da35085f1e3440f26eea800c892c88aec64d072f))
+
+
+
+
+
+## [5.12.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.4...@react-navigation/stack@5.12.5) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+## [5.12.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.3...@react-navigation/stack@5.12.4) (2020-11-08)
+
+
+### Bug Fixes
+
+* don't hide child header automatically in stack ([8f0efc8](https://github.com/react-navigation/react-navigation/commit/8f0efc8db534297a95ea8a2bcb6d2e387c1fea53))
+
+
+
+
+
 ## [5.12.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.2...@react-navigation/stack@5.12.3) (2020-11-04)


--- a/packages/stack/package.json
+++ b/packages/stack/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/stack",
  "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "5.12.3",
+  "version": "5.12.6",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -46,7 +46,7 @@
  "devDependencies": {
    "@react-native-community/bob": "^0.16.2",
    "@react-native-community/masked-view": "^0.1.10",
-    "@react-navigation/native": "^5.8.6",
+    "@react-navigation/native": "^5.8.9",
    "@testing-library/react-native": "^7.1.0",
    "@types/color": "^3.0.1",
    "@types/react": "^16.9.53",
--- a/packages/stack/src/views/Header/HeaderContainer.tsx
+++ b/packages/stack/src/views/Header/HeaderContainer.tsx
@@ -15,7 +15,6 @@ import {
  forNoAnimation,
  forSlideRight,
 } from '../../TransitionConfigs/HeaderStyleInterpolators';
-import HeaderShownContext from '../../utils/HeaderShownContext';
 import PreviousSceneContext from '../../utils/PreviousSceneContext';
 import type {
  Layout,
@@ -56,7 +55,6 @@ export default function HeaderContainer({
  style,
 }: Props) {
  const focusedRoute = getFocusedRoute();
-  const isParentHeaderShown = React.useContext(HeaderShownContext);
  const parentPreviousScene = React.useContext(PreviousSceneContext);

  return (
@@ -66,11 +64,8 @@ export default function HeaderContainer({
          return null;
        }

-        const {
-          header,
-          headerShown = isParentHeaderShown === false,
-          headerTransparent,
-        } = scene.descriptor.options || {};
+        const { header, headerShown = true, headerTransparent } =
+          scene.descriptor.options || {};

        if (!headerShown) {
          return null;
@@ -85,11 +80,10 @@ export default function HeaderContainer({
        const previousScene = self[i - 1];
        const nextScene = self[i + 1];

-        const {
-          headerShown: previousHeaderShown = isParentHeaderShown === false,
-        } = previousScene?.descriptor.options || {};
+        const { headerShown: previousHeaderShown = true } =
+          previousScene?.descriptor.options || {};

-        const { headerShown: nextHeaderShown = isParentHeaderShown === false } =
+        const { headerShown: nextHeaderShown = true } =
          nextScene?.descriptor.options || {};

        const isHeaderStatic =
--- a/packages/stack/src/views/Stack/CardContainer.tsx
+++ b/packages/stack/src/views/Stack/CardContainer.tsx
@@ -216,7 +216,14 @@ function CardContainer({
      pageOverflowEnabled={headerMode === 'screen' && mode === 'card'}
      containerStyle={hasAbsoluteHeader ? { marginTop: headerHeight } : null}
      contentStyle={[{ backgroundColor: colors.background }, cardStyle]}
-      style={StyleSheet.absoluteFill}
+      style={[
+        {
+          // This is necessary to avoid unfocused larger pages increasing scroll area
+          // The issue can be seen on the web when a smaller screen is pushed over a larger one
+          overflow: active ? undefined : 'hidden',
+        },
+        StyleSheet.absoluteFill,
+      ]}
    >
      <View style={styles.container}>
        <View style={styles.scene}>
--- a/packages/stack/src/views/Stack/CardStack.tsx
+++ b/packages/stack/src/views/Stack/CardStack.tsx
@@ -447,10 +447,7 @@ export default class CardStack extends React.Component<Props, State> {
        ? this.state.scenes.slice(-2).some((scene) => {
            const { descriptor } = scene;
            const options = descriptor ? descriptor.options : {};
-            const {
-              headerTransparent,
-              headerShown = isParentHeaderShown === false,
-            } = options;
+            const { headerTransparent, headerShown = true } = options;

            if (headerTransparent || headerShown === false) {
              return true;
@@ -542,7 +539,7 @@ export default class CardStack extends React.Component<Props, State> {

            const {
              safeAreaInsets,
-              headerShown = isParentHeaderShown === false,
+              headerShown = true,
              headerTransparent,
              cardShadowEnabled,
              cardOverlayEnabled,
Author	SHA1	Message	Date
Satyajit Sahoo	a2337648bf	chore: publish - @react-navigation/bottom-tabs@5.11.1 - @react-navigation/compat@5.3.9 - @react-navigation/core@5.14.3 - @react-navigation/devtools@5.1.17 - @react-navigation/drawer@5.11.2 - @react-navigation/material-bottom-tabs@5.3.9 - @react-navigation/material-top-tabs@5.3.9 - @react-navigation/native@5.8.9 - @react-navigation/stack@5.12.6	2020-11-10 20:41:26 +01:00
Satyajit Sahoo	8f764d8b08	fix: improve the error message for incorrect screen configuration	2020-11-10 20:29:59 +01:00
Satyajit Sahoo	f8e998b10c	refactor: simplify getStateFromPath	2020-11-10 19:44:00 +01:00
Satyajit Sahoo	da35085f1e	fix: make sure inactive screen don't increase scroll area on web	2020-11-10 18:21:36 +01:00
Satyajit Sahoo	1f5fb5481a	chore: publish - @react-navigation/drawer@5.11.1	2020-11-09 20:40:11 +01:00
Satyajit Sahoo	18bbd177d9	fix: provide correct context to drawe header	2020-11-09 20:37:26 +01:00
Satyajit Sahoo	151055cf5a	chore: publish - @react-navigation/bottom-tabs@5.11.0 - @react-navigation/compat@5.3.8 - @react-navigation/core@5.14.2 - @react-navigation/devtools@5.1.16 - @react-navigation/drawer@5.11.0 - @react-navigation/material-bottom-tabs@5.3.8 - @react-navigation/material-top-tabs@5.3.8 - @react-navigation/native@5.8.8 - @react-navigation/routers@5.6.2 - @react-navigation/stack@5.12.5	2020-11-09 20:17:39 +01:00
Satyajit Sahoo	52172453df	fix: try fixing drawer blink on Android	2020-11-09 20:05:27 +01:00
Satyajit Sahoo	7bc385e4f3	chore: show header in drawer by default	2020-11-09 19:36:36 +01:00
Satyajit Sahoo	6ac4d40140	feat: add a tabBarBadgeStyle option to customize the badge	2020-11-09 19:28:49 +01:00
Satyajit Sahoo	dbe961ba5b	feat: add option to show a header in drawer navigator screens This commit adds new `header` and `headerShown` options in drawer navigator to be able to show a header, along with a bunch of header related options similar to stack navigator. Historically, we have suggested to nest a stack navigator inside drawer navigator to render a header. While it works, it's not efficient to nest an entire navigator just for a header, considering it adds a lot of additional overhead from the code to handle animations, gestures etc. which won't ever be run in this case. It also increases the view hierarchy which has negative impacts on performance on Android, and could cause content not to render on older iOS devices. Another issue with the approach is that since drawer navigator is at the root in this setup, it's possible to open drawer from every screen in the stack navigator, which usually isn't the expected behaviour. It's necessary to write additional code to disable the gesture to open drawer in all screens but first. In addition, users also need to add a custom drawer icon to the header manually to be able to toggle the drawer If drawer navigator could render its own header we'd avoid all these shortcomings as well as make the code simpler. For now, I have implemented a new `Header` component in drawer since it's way simpler than stack navigator header. Though we may consider creating a shared UI package and add such components there which all our navigators could use. The `Header` includes a button to toggle the drawer by default, and supports customization options such as showing custom left/right/title components. For this commit, I have kept `headerShown` to `false` by default coz I wasn't sure if it'd be a breaking change to start showing headers in drawers. Probably we can toggle it to `true` by default in next major.	2020-11-09 18:52:24 +01:00
Satyajit Sahoo	05d4e4d3be	refactor: minor tweak	2020-11-09 02:02:43 +01:00
Satyajit Sahoo	48b2e77730	fix: throw if the same pattern resolves to multiple screens	2020-11-09 01:56:30 +01:00
Satyajit Sahoo	e08c91ff0a	feat: add a hook to get bottom tab bar height Usage: ```js import { useBottomTabBarHeight } from '@react-navigation/stack'; // ... const headerHeight = useBottomTabBarHeight(); ``` closes #8037, closes #8536	2020-11-08 20:08:50 +01:00
Satyajit Sahoo	5bd682f0bf	feat: add a getIsDrawerOpenFromState utility to drawer	2020-11-08 17:51:13 +01:00
Satyajit Sahoo	50a161dc3d	chore: publish - @react-navigation/bottom-tabs@5.10.7 - @react-navigation/compat@5.3.7 - @react-navigation/core@5.14.1 - @react-navigation/devtools@5.1.15 - @react-navigation/drawer@5.10.7 - @react-navigation/material-bottom-tabs@5.3.7 - @react-navigation/material-top-tabs@5.3.7 - @react-navigation/native@5.8.7 - @react-navigation/routers@5.6.1 - @react-navigation/stack@5.12.4	2020-11-08 09:06:37 +01:00
Satyajit Sahoo	360b0e9958	fix: tweak error message when navigator has non-screen children	2020-11-07 16:43:45 +01:00
Satyajit Sahoo	e50c8aa942	refactor: use a regular action for 'resetRoot' Previously, 'resetRoot' directly performed a 'setState' on the container instead of dispatching an action. This meant that hooks such as listener for 'preventRemove' won't be notified by it. This commit changes it to dispatch a regular 'RESET' action which will behave the same as other actions.	2020-11-07 15:55:48 +01:00
Satyajit Sahoo	8f0efc8db5	fix: don't hide child header automatically in stack	2020-11-07 14:39:23 +01:00
Satyajit Sahoo	7de6677e72	chore: fix statusbar height in modal example	2020-11-07 00:34:25 +01:00