chore: publish

- @react-navigation/bottom-tabs@6.0.0-next.3 - @react-navigation/drawer@6.0.0-next.3 - @react-navigation/elements@1.0.0-next.3 - @react-navigation/stack@6.0.0-next.8
fix: use tab role on Android for accessibility
2026-01-14 09:32:32 +08:00 · 2021-03-22 19:29:22 +01:00 · 2021-03-22 19:21:47 +01:00 · 2021-03-22 19:03:09 +01:00 · 2021-03-22 02:16:16 +01:00 · 2021-03-22 02:15:28 +01:00
31 changed files with 681 additions and 216 deletions
--- a/example/ios/ReactNavigation.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
+++ b/example/ios/ReactNavigation.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>
--- a/example/package.json
+++ b/example/package.json
@@ -50,7 +50,7 @@
    "babel-plugin-module-resolver": "^4.0.0",
    "babel-preset-expo": "8.3.0",
    "cheerio": "^1.0.0-rc.3",
-    "expo-cli": "^4.2.1",
+    "expo-cli": "^4.3.0",
    "jest": "^26.6.3",
    "jest-dev-server": "^4.4.0",
    "mock-require-assets": "^0.0.1",
--- a/example/src/Screens/MixedHeaderMode.tsx
+++ b/example/src/Screens/MixedHeaderMode.tsx
@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { View, Platform, StyleSheet, ScrollView } from 'react-native';
+import { Button } from 'react-native-paper';
+import type { ParamListBase } from '@react-navigation/native';
+import {
+  createStackNavigator,
+  StackScreenProps,
+  TransitionPresets,
+  HeaderStyleInterpolators,
+} from '@react-navigation/stack';
+import Article from '../Shared/Article';
+import Albums from '../Shared/Albums';
+import NewsFeed from '../Shared/NewsFeed';
+
+export type SimpleStackParams = {
+  Article: { author: string } | undefined;
+  NewsFeed: { date: number };
+  Albums: undefined;
+};
+
+const scrollEnabled = Platform.select({ web: true, default: false });
+
+const ArticleScreen = ({
+  navigation,
+  route,
+}: StackScreenProps<SimpleStackParams, 'Article'>) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('NewsFeed', { date: Date.now() })}
+          style={styles.button}
+        >
+          Push feed
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.pop()}
+          style={styles.button}
+        >
+          Pop screen
+        </Button>
+      </View>
+      <Article
+        author={{ name: route.params?.author ?? 'Unknown' }}
+        scrollEnabled={scrollEnabled}
+      />
+    </ScrollView>
+  );
+};
+
+const NewsFeedScreen = ({
+  route,
+  navigation,
+}: StackScreenProps<SimpleStackParams, 'NewsFeed'>) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Albums')}
+          style={styles.button}
+        >
+          Navigate to album
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.pop()}
+          style={styles.button}
+        >
+          Pop screen
+        </Button>
+      </View>
+      <NewsFeed scrollEnabled={scrollEnabled} date={route.params.date} />
+    </ScrollView>
+  );
+};
+
+const AlbumsScreen = ({
+  navigation,
+}: StackScreenProps<SimpleStackParams, 'Albums'>) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Article', { author: 'Babel fish' })}
+          style={styles.button}
+        >
+          Push article
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.pop()}
+          style={styles.button}
+        >
+          Pop screen
+        </Button>
+      </View>
+      <Albums scrollEnabled={scrollEnabled} />
+    </ScrollView>
+  );
+};
+
+const SimpleStack = createStackNavigator<SimpleStackParams>();
+
+export default function SimpleStackScreen({
+  navigation,
+}: StackScreenProps<ParamListBase>) {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
+
+  return (
+    <SimpleStack.Navigator
+      screenOptions={{
+        ...TransitionPresets.SlideFromRightIOS,
+        headerMode: 'float',
+        headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+      }}
+    >
+      <SimpleStack.Screen
+        name="Article"
+        component={ArticleScreen}
+        options={({ route }) => ({
+          title: `Article by ${route.params?.author ?? 'Unknown'}`,
+        })}
+        initialParams={{ author: 'Gandalf' }}
+      />
+      <SimpleStack.Screen
+        name="NewsFeed"
+        component={NewsFeedScreen}
+        options={{ title: 'Feed' }}
+      />
+      <SimpleStack.Screen
+        name="Albums"
+        component={AlbumsScreen}
+        options={{
+          ...TransitionPresets.ModalSlideFromBottomIOS,
+          headerMode: 'screen',
+          title: 'Albums',
+        }}
+      />
+    </SimpleStack.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+});
--- a/example/src/Screens/StackHeaderCustomization.tsx
+++ b/example/src/Screens/StackHeaderCustomization.tsx
@@ -86,8 +86,7 @@ const AlbumsScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {

 const SimpleStack = createStackNavigator<SimpleStackParams>();

-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> &
-  StackScreenProps<ParamListBase>;
+type Props = StackScreenProps<ParamListBase>;

 function CustomHeader(props: StackHeaderProps) {
  const { current, next } = props.progress;
@@ -108,7 +107,7 @@ function CustomHeader(props: StackHeaderProps) {
  );
 }

-export default function SimpleStackScreen({ navigation, ...rest }: Props) {
+export default function HeaderCustomizationScreen({ navigation }: Props) {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false,
@@ -119,13 +118,13 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
  const [headerTitleCentered, setHeaderTitleCentered] = React.useState(true);

  return (
-    <SimpleStack.Navigator {...rest}>
+    <SimpleStack.Navigator screenOptions={{ headerMode: 'float' }}>
      <SimpleStack.Screen
        name="Article"
        component={ArticleScreen}
        options={({ route }) => ({
          title: `Article by ${route.params?.author}`,
-          header: CustomHeader,
+          header: (props) => <CustomHeader {...props} />,
          headerTintColor: '#fff',
          headerStyle: { backgroundColor: '#ff005d' },
          headerBackTitleVisible: false,
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -42,6 +42,7 @@ import LinkingPrefixes from './LinkingPrefixes';
 import SettingsItem from './Shared/SettingsItem';
 import SimpleStack from './Screens/SimpleStack';
 import ModalStack from './Screens/ModalStack';
+import MixedHeaderMode from './Screens/MixedHeaderMode';
 import StackTransparent from './Screens/StackTransparent';
 import StackHeaderCustomization from './Screens/StackHeaderCustomization';
 import BottomTabs from './Screens/BottomTabs';
@@ -70,6 +71,10 @@ const SCREENS = {
    title: 'Modal Stack',
    component: ModalStack,
  },
+  MixedHeaderMode: {
+    title: 'Float + Screen Header Stack',
+    component: MixedHeaderMode,
+  },
  StackTransparent: {
    title: 'Transparent Stack',
    component: StackTransparent,
--- a/packages/bottom-tabs/CHANGELOG.md
+++ b/packages/bottom-tabs/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.

+# [6.0.0-next.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.2...@react-navigation/bottom-tabs@6.0.0-next.3) (2021-03-22)
+
+
+### Bug Fixes
+
+* use tab role on Android for accessibility ([de805a3](https://github.com/react-navigation/react-navigation/commit/de805a3ebf35db81cb7b7bcbf5cfd4a03e69c567))
+
+
+### Features
+
+* add a Background component ([cbaabc1](https://github.com/react-navigation/react-navigation/commit/cbaabc1288e780698e499a00b9ca06ab9746a0da))
+
+
+
+
+
 # [6.0.0-next.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.1...@react-navigation/bottom-tabs@6.0.0-next.2) (2021-03-12)

 **Note:** Version bump only for package @react-navigation/bottom-tabs
--- 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": "6.0.0-next.2",
+  "version": "6.0.0-next.3",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -37,7 +37,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.2",
+    "@react-navigation/elements": "^1.0.0-next.3",
    "color": "^3.1.3",
    "warn-once": "^0.0.1"
  },
--- a/packages/bottom-tabs/src/views/BottomTabBar.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -285,7 +285,11 @@ export default function BottomTabBar({
      ]}
      pointerEvents={isTabBarHidden ? 'none' : 'auto'}
    >
-      <View style={styles.content} onLayout={handleLayout}>
+      <View
+        accessibilityRole="tablist"
+        style={styles.content}
+        onLayout={handleLayout}
+      >
        {routes.map((route, index) => {
          const focused = index === state.index;
          const { options } = descriptors[route.key];
@@ -322,7 +326,7 @@ export default function BottomTabBar({
          const accessibilityLabel =
            options.tabBarAccessibilityLabel !== undefined
              ? options.tabBarAccessibilityLabel
-              : typeof label === 'string'
+              : typeof label === 'string' && Platform.OS === 'ios'
              ? `${label}, tab, ${index + 1} of ${routes.length}`
              : undefined;

--- a/packages/bottom-tabs/src/views/BottomTabItem.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabItem.tsx
@@ -263,7 +263,8 @@ export default function BottomTabBarItem({
    onLongPress,
    testID,
    accessibilityLabel,
-    accessibilityRole: 'button',
+    // FIXME: accessibilityRole: 'tab' doesn't seem to work as expected on iOS
+    accessibilityRole: Platform.select({ ios: 'button', default: 'tab' }),
    accessibilityState: { selected: focused },
    // @ts-expect-error: keep for compatibility with older React Native versions
    accessibilityStates: focused ? ['selected'] : [],
--- a/packages/bottom-tabs/src/views/BottomTabView.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabView.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { ScreenContainer } from 'react-native-screens';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 import {
  NavigationHelpersContext,
  ParamListBase,
  TabNavigationState,
-  useTheme,
 } from '@react-navigation/native';
 import {
  Header,
@@ -34,28 +33,6 @@ type Props = BottomTabNavigationConfig & {
  descriptors: BottomTabDescriptorMap;
 };

-function SceneContent({
-  isFocused,
-  children,
-  style,
-}: {
-  isFocused: boolean;
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-}) {
-  const { colors } = useTheme();
-
-  return (
-    <View
-      accessibilityElementsHidden={!isFocused}
-      importantForAccessibility={isFocused ? 'auto' : 'no-hide-descendants'}
-      style={[styles.content, { backgroundColor: colors.background }, style]}
-    >
-      {children}
-    </View>
-  );
-}
-
 export default function BottomTabView(props: Props) {
  const {
    tabBar = (props: BottomTabBarProps) => <BottomTabBar {...props} />,
@@ -150,26 +127,26 @@ export default function BottomTabView(props: Props) {
                visible={isFocused}
                enabled={detachInactiveScreens}
              >
-                <SceneContent isFocused={isFocused} style={sceneContainerStyle}>
-                  <BottomTabBarHeightContext.Provider value={tabBarHeight}>
-                    <Screen
-                      route={descriptor.route}
-                      navigation={descriptor.navigation}
-                      headerShown={descriptor.options.headerShown}
-                      headerStatusBarHeight={
-                        descriptor.options.headerStatusBarHeight
-                      }
-                      header={header({
-                        layout: dimensions,
-                        route: descriptor.route,
-                        navigation: descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
-                        options: descriptor.options,
-                      })}
-                    >
-                      {descriptor.render()}
-                    </Screen>
-                  </BottomTabBarHeightContext.Provider>
-                </SceneContent>
+                <BottomTabBarHeightContext.Provider value={tabBarHeight}>
+                  <Screen
+                    focused={isFocused}
+                    route={descriptor.route}
+                    navigation={descriptor.navigation}
+                    headerShown={descriptor.options.headerShown}
+                    headerStatusBarHeight={
+                      descriptor.options.headerStatusBarHeight
+                    }
+                    header={header({
+                      layout: dimensions,
+                      route: descriptor.route,
+                      navigation: descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
+                      options: descriptor.options,
+                    })}
+                    style={sceneContainerStyle}
+                  >
+                    {descriptor.render()}
+                  </Screen>
+                </BottomTabBarHeightContext.Provider>
              </ScreenFallback>
            );
          })}
@@ -187,7 +164,4 @@ const styles = StyleSheet.create({
    flex: 1,
    overflow: 'hidden',
  },
-  content: {
-    flex: 1,
-  },
 });
--- a/packages/drawer/CHANGELOG.md
+++ b/packages/drawer/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [6.0.0-next.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.2...@react-navigation/drawer@6.0.0-next.3) (2021-03-22)
+
+
+### Features
+
+* add a Background component ([cbaabc1](https://github.com/react-navigation/react-navigation/commit/cbaabc1288e780698e499a00b9ca06ab9746a0da))
+
+
+
+
+
 # [6.0.0-next.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.1...@react-navigation/drawer@6.0.0-next.2) (2021-03-12)


--- 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": "6.0.0-next.2",
+  "version": "6.0.0-next.3",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -42,7 +42,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.2",
+    "@react-navigation/elements": "^1.0.0-next.3",
    "color": "^3.1.3",
    "warn-once": "^0.0.1"
  },
--- a/packages/drawer/src/views/Drawer.tsx
+++ b/packages/drawer/src/views/Drawer.tsx
@@ -93,7 +93,6 @@ type Props = {
  statusBarAnimation: 'slide' | 'none' | 'fade';
  overlayStyle?: StyleProp<ViewStyle>;
  drawerStyle?: StyleProp<ViewStyle>;
-  sceneContainerStyle?: StyleProp<ViewStyle>;
  renderDrawerContent: Renderer;
  renderSceneContent: Renderer;
  gestureHandlerProps?: React.ComponentProps<typeof PanGestureHandler>;
@@ -573,7 +572,6 @@ export default class DrawerView extends React.Component<Props> {
      drawerPosition,
      drawerType,
      swipeEdgeWidth,
-      sceneContainerStyle,
      drawerStyle,
      overlayStyle,
      renderDrawerContent,
@@ -642,7 +640,6 @@ export default class DrawerView extends React.Component<Props> {
            style={[
              styles.content,
              { transform: [{ translateX: contentTranslateX }] },
-              sceneContainerStyle as any,
            ]}
          >
            <View
--- a/packages/drawer/src/views/DrawerView.tsx
+++ b/packages/drawer/src/views/DrawerView.tsx
@@ -89,7 +89,6 @@ function DrawerViewBase({
    gestureHandlerProps,
    keyboardDismissMode = 'on-drag',
    overlayColor = 'rgba(0, 0, 0, 0.5)',
-    sceneContainerStyle,
    swipeEdgeWidth,
    swipeEnabled,
    swipeMinDistance,
@@ -181,6 +180,7 @@ function DrawerViewBase({
                }
              />
            ),
+            sceneContainerStyle,
          } = descriptor.options;

          return (
@@ -191,6 +191,7 @@ function DrawerViewBase({
              enabled={detachInactiveScreens}
            >
              <Screen
+                focused={isFocused}
                route={descriptor.route}
                navigation={descriptor.navigation}
                headerShown={descriptor.options.headerShown}
@@ -201,6 +202,7 @@ function DrawerViewBase({
                  navigation: descriptor.navigation as DrawerNavigationProp<ParamListBase>,
                  options: descriptor.options,
                })}
+                style={sceneContainerStyle}
              >
                {descriptor.render()}
              </Screen>
@@ -222,10 +224,6 @@ function DrawerViewBase({
        gestureHandlerProps={gestureHandlerProps}
        drawerType={drawerType}
        drawerPosition={drawerPosition}
-        sceneContainerStyle={[
-          { backgroundColor: colors.background },
-          sceneContainerStyle,
-        ]}
        drawerStyle={[
          {
            width: getDefaultDrawerWidth(dimensions),
--- a/packages/elements/CHANGELOG.md
+++ b/packages/elements/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.0.0-next.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.2...@react-navigation/elements@1.0.0-next.3) (2021-03-22)
+
+
+### Features
+
+* add a Background component ([cbaabc1](https://github.com/react-navigation/react-navigation/commit/cbaabc1288e780698e499a00b9ca06ab9746a0da))
+
+
+
+
+
 # [1.0.0-next.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.1...@react-navigation/elements@1.0.0-next.2) (2021-03-12)


--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/elements",
  "description": "UI Components for React Navigation",
-  "version": "1.0.0-next.2",
+  "version": "1.0.0-next.3",
  "keywords": [
    "react-native",
    "react-navigation",
--- a/packages/elements/src/Background.tsx
+++ b/packages/elements/src/Background.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { View, ViewProps } from 'react-native';
+import { useTheme } from '@react-navigation/native';
+
+type Props = ViewProps & {
+  children: React.ReactNode;
+};
+
+export default function Background({ style, ...rest }: Props) {
+  const { colors } = useTheme();
+
+  return (
+    <View
+      {...rest}
+      style={[{ flex: 1, backgroundColor: colors.background }, style]}
+    />
+  );
+}
--- a/packages/elements/src/Screen.tsx
+++ b/packages/elements/src/Screen.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import {
  useSafeAreaFrame,
  useSafeAreaInsets,
@@ -12,16 +12,19 @@ import {
  ParamListBase,
 } from '@react-navigation/native';

+import Background from './Background';
 import HeaderShownContext from './Header/HeaderShownContext';
 import HeaderHeightContext from './Header/HeaderHeightContext';
 import getDefaultHeaderHeight from './Header/getDefaultHeaderHeight';

 type Props = {
+  focused: boolean;
  navigation: NavigationProp<ParamListBase>;
  route: RouteProp<ParamListBase, string>;
  header: React.ReactNode;
  headerShown?: boolean;
  headerStatusBarHeight?: number;
+  style?: StyleProp<ViewStyle>;
  children: React.ReactNode;
 };

@@ -33,12 +36,14 @@ export default function Screen(props: Props) {
  const parentHeaderHeight = React.useContext(HeaderHeightContext);

  const {
+    focused,
    header,
    headerShown = true,
    headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
-    children,
    navigation,
    route,
+    children,
+    style,
  } = props;

  const [headerHeight, setHeaderHeight] = React.useState(() =>
@@ -46,7 +51,11 @@ export default function Screen(props: Props) {
  );

  return (
-    <View style={styles.container}>
+    <Background
+      accessibilityElementsHidden={!focused}
+      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+      style={[styles.container, style]}
+    >
      <View style={styles.content}>
        <HeaderShownContext.Provider
          value={isParentHeaderShown || headerShown !== false}
@@ -73,7 +82,7 @@ export default function Screen(props: Props) {
          </NavigationRouteContext.Provider>
        </NavigationContext.Provider>
      ) : null}
-    </View>
+    </Background>
  );
 }

--- a/packages/elements/src/index.tsx
+++ b/packages/elements/src/index.tsx
@@ -14,6 +14,7 @@ export { default as PlatformPressable } from './PlatformPressable';
 export { default as ResourceSavingView } from './ResourceSavingView';
 export { default as SafeAreaProviderCompat } from './SafeAreaProviderCompat';
 export { default as Screen } from './Screen';
+export { default as Background } from './Background';

 export const Assets = [
  // eslint-disable-next-line import/no-commonjs
--- a/packages/stack/CHANGELOG.md
+++ b/packages/stack/CHANGELOG.md
@@ -3,6 +3,74 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [6.0.0-next.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.7...@react-navigation/stack@6.0.0-next.8) (2021-03-22)
+
+
+### Features
+
+* add a Background component ([cbaabc1](https://github.com/react-navigation/react-navigation/commit/cbaabc1288e780698e499a00b9ca06ab9746a0da))
+
+
+
+
+
+# [6.0.0-next.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.6...@react-navigation/stack@6.0.0-next.7) (2021-03-22)
+
+
+### Code Refactoring
+
+* make gestureResponseDistance a number ([48851c9](https://github.com/react-navigation/react-navigation/commit/48851c9ebdcf1b835bbcb673adeb88e56b989443))
+
+
+### BREAKING CHANGES
+
+* now we need to pass a number instead of an object
+
+
+
+
+
+# [6.0.0-next.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.5...@react-navigation/stack@6.0.0-next.6) (2021-03-14)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [6.0.0-next.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.4...@react-navigation/stack@6.0.0-next.5) (2021-03-14)
+
+
+### Bug Fixes
+
+* consider header colors when managing statusbar ([3ad2bcb](https://github.com/react-navigation/react-navigation/commit/3ad2bcbaf85996ce0d5e1e961081978a32448899))
+* consider header colors when managing statusbar ([faee245](https://github.com/react-navigation/react-navigation/commit/faee245d2ec8c59f9e9033d96ae21c5e60d95ba6))
+
+
+### Code Refactoring
+
+* move headerMode to options ([aacc1b5](https://github.com/react-navigation/react-navigation/commit/aacc1b525d86f0e0b1bad8016fd85e82024f16e9))
+
+
+### BREAKING CHANGES
+
+* headerMode is now moved to options instead of props
+
+
+
+
+
+# [6.0.0-next.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.3...@react-navigation/stack@6.0.0-next.4) (2021-03-12)
+
+
+### Bug Fixes
+
+* add special statusbar handling to modal presentation ([a204edd](https://github.com/react-navigation/react-navigation/commit/a204edd012060f0816eddee7a093183aa379d049))
+
+
+
+
+
 # [6.0.0-next.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.2...@react-navigation/stack@6.0.0-next.3) (2021-03-12)


--- 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": "6.0.0-next.3",
+  "version": "6.0.0-next.8",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -41,7 +41,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.2",
+    "@react-navigation/elements": "^1.0.0-next.3",
    "color": "^3.1.3",
    "react-native-iphone-x-helper": "^1.3.0",
    "warn-once": "^0.0.1"
--- a/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx
+++ b/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx
@@ -160,6 +160,10 @@ export function forModalPresentationIOS({
      overflow: 'hidden',
      borderTopLeftRadius: borderRadius,
      borderTopRightRadius: borderRadius,
+      // We don't need these for the animation
+      // But different border radius for corners improves animation perf
+      borderBottomLeftRadius: isIphoneX() ? borderRadius : 0,
+      borderBottomRightRadius: isIphoneX() ? borderRadius : 0,
      marginTop: index === 0 ? 0 : statusBarHeight,
      marginBottom: index === 0 ? 0 : topOffset,
      transform: [{ translateY }, { scale }],
--- a/packages/stack/src/navigators/createStackNavigator.tsx
+++ b/packages/stack/src/navigators/createStackNavigator.tsx
@@ -18,6 +18,7 @@ import type {
  StackNavigationConfig,
  StackNavigationOptions,
  StackNavigationEventMap,
+  StackHeaderMode,
 } from '../types';

 type Props = DefaultNavigatorOptions<StackNavigationOptions> &
@@ -31,13 +32,18 @@ function StackNavigator({
  ...rest
 }: Props) {
  // @ts-expect-error: headerMode='none' is deprecated
-  const isHeaderModeNone = rest.headerMode === 'none';
+  const headerMode = rest.headerMode as StackHeaderMode | 'none' | undefined;

  warnOnce(
-    isHeaderModeNone,
+    headerMode === 'none',
    `Stack Navigator: 'headerMode="none"' is deprecated. Use 'headerShown: false' in 'screenOptions' instead.`
  );

+  warnOnce(
+    headerMode && headerMode !== 'none',
+    `Stack Navigator: 'headerMode' is moved to 'options'. Moved it to 'screenOptions' to keep current behavior.`
+  );
+
  const { state, descriptors, navigation } = useNavigationBuilder<
    StackNavigationState<ParamListBase>,
    StackRouterOptions,
@@ -48,14 +54,22 @@ function StackNavigator({
    initialRouteName,
    children,
    screenOptions,
-    defaultScreenOptions: {
-      headerShown: !isHeaderModeNone,
+    defaultScreenOptions: ({ options }) => ({
+      headerShown: headerMode ? headerMode !== 'none' : true,
+      headerMode:
+        headerMode && headerMode !== 'none'
+          ? headerMode
+          : rest.mode !== 'modal' &&
+            Platform.OS === 'ios' &&
+            options.header === undefined
+          ? 'float'
+          : 'screen',
      gestureEnabled: Platform.OS === 'ios',
      animationEnabled:
        Platform.OS !== 'web' &&
        Platform.OS !== 'windows' &&
        Platform.OS !== 'macos',
-    },
+    }),
  });

  React.useEffect(
--- a/packages/stack/src/types.tsx
+++ b/packages/stack/src/types.tsx
@@ -198,7 +198,12 @@ export type StackNavigationOptions = StackHeaderOptions &
     */
    header?: (props: StackHeaderProps) => React.ReactNode;
    /**
-     * Whether to show the header. The header is shown by default unless `headerMode` was set to `none`.
+     * Whether the header floats above the screen or part of the screen.
+     * Defaults to `float` on iOS for non-modals, and `screen` for the rest.
+     */
+    headerMode?: StackHeaderMode;
+    /**
+     * Whether to show the header. The header is shown by default.
     * Setting this to `false` hides the header.
     */
    headerShown?: boolean;
@@ -244,19 +249,10 @@ export type StackNavigationOptions = StackHeaderOptions &
     */
    gestureEnabled?: boolean;
    /**
-     * Object to override the distance of touch start from the edge of the screen to recognize gestures.
+     * Distance of touch start from the edge of the screen to recognize gestures.
     * Not supported on Web.
     */
-    gestureResponseDistance?: {
-      /**
-       * Distance for vertical direction. Defaults to 135.
-       */
-      vertical?: number;
-      /**
-       * Distance for horizontal direction. Defaults to 25.
-       */
-      horizontal?: number;
-    };
+    gestureResponseDistance?: number;
    /**
     * Number which determines the relevance of velocity for the gesture. Defaults to 0.3.
     * Not supported on Web.
@@ -273,7 +269,6 @@ export type StackNavigationOptions = StackHeaderOptions &

 export type StackNavigationConfig = {
  mode?: StackCardMode;
-  headerMode?: StackHeaderMode;
  /**
   * If `false`, the keyboard will NOT automatically dismiss when navigating to a new screen.
   * Defaults to `true`.
--- a/packages/stack/src/views/Header/HeaderContainer.tsx
+++ b/packages/stack/src/views/Header/HeaderContainer.tsx
@@ -21,7 +21,6 @@ import type {
  StackHeaderStyleInterpolator,
  StackNavigationProp,
  StackHeaderProps,
-  GestureDirection,
 } from '../../types';

 export type Props = {
@@ -35,7 +34,6 @@ export type Props = {
    height: number;
  }) => void;
  styleInterpolator: StackHeaderStyleInterpolator;
-  gestureDirection: GestureDirection;
  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };

@@ -46,7 +44,6 @@ export default function HeaderContainer({
  getPreviousScene,
  getFocusedRoute,
  onContentHeightChange,
-  gestureDirection,
  styleInterpolator,
  style,
 }: Props) {
@@ -60,10 +57,10 @@ export default function HeaderContainer({
          return null;
        }

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

-        if (!headerShown) {
+        if (headerMode !== mode || !headerShown) {
          return null;
        }

@@ -87,18 +84,24 @@ export default function HeaderContainer({
        const previousDescriptor = self[i - 1]?.descriptor;
        const nextDescriptor = self[i + 1]?.descriptor;

-        const { headerShown: previousHeaderShown = true } =
-          previousDescriptor?.options || {};
+        const {
+          headerShown: previousHeaderShown = true,
+          headerMode: previousHeaderMode,
+        } = previousDescriptor?.options || {};

-        const { headerShown: nextHeaderShown = true } =
-          nextDescriptor?.options || {};
+        const {
+          headerShown: nextHeaderShown = true,
+          headerMode: nextHeaderMode,
+          gestureDirection: nextGestureDirection,
+        } = nextDescriptor?.options || {};

        const isHeaderStatic =
-          (previousHeaderShown === false &&
+          ((previousHeaderShown === false || previousHeaderMode === 'screen') &&
            // We still need to animate when coming back from next scene
            // A hacky way to check this is if the next scene exists
            !nextDescriptor) ||
-          nextHeaderShown === false;
+          nextHeaderShown === false ||
+          nextHeaderMode === 'screen';

        const props: StackHeaderProps = {
          layout,
@@ -111,10 +114,10 @@ export default function HeaderContainer({
          styleInterpolator:
            mode === 'float'
              ? isHeaderStatic
-                ? gestureDirection === 'vertical' ||
-                  gestureDirection === 'vertical-inverted'
+                ? nextGestureDirection === 'vertical' ||
+                  nextGestureDirection === 'vertical-inverted'
                  ? forSlideUp
-                  : gestureDirection === 'horizontal-inverted'
+                  : nextGestureDirection === 'horizontal-inverted'
                  ? forSlideRight
                  : forSlideLeft
                : styleInterpolator
--- a/packages/stack/src/views/ModalStatusBarManager.tsx
+++ b/packages/stack/src/views/ModalStatusBarManager.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { StatusBar, StyleSheet } from 'react-native';
+import { useTheme } from '@react-navigation/native';
+import type { EdgeInsets } from 'react-native-safe-area-context';
+import type { Layout } from '../types';
+
+type Props = {
+  dark: boolean | undefined;
+  layout: Layout;
+  insets: EdgeInsets;
+  style: any;
+};
+
+export default function ModalStatusBarManager({
+  dark,
+  layout,
+  insets,
+  style,
+}: Props) {
+  const { dark: darkTheme } = useTheme();
+  const [overlapping, setOverlapping] = React.useState(true);
+
+  const enabled = layout.width && layout.height > layout.width;
+  const scale = 1 - 20 / layout.width;
+  const offset = (insets.top - 34) * scale;
+
+  const flattenedStyle = StyleSheet.flatten(style);
+  const translateY = flattenedStyle?.transform?.find(
+    (s: any) => s.translateY !== undefined
+  )?.translateY;
+
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const listener = ({ value }: { value: number }) => {
+      setOverlapping(value < offset);
+    };
+
+    const sub = translateY?.addListener(listener);
+
+    return () => translateY?.removeListener(sub);
+  }, [enabled, offset, translateY]);
+
+  if (!enabled) {
+    return null;
+  }
+
+  const darkContent = dark ?? !darkTheme;
+
+  return (
+    <StatusBar
+      animated
+      barStyle={overlapping && darkContent ? 'dark-content' : 'light-content'}
+    />
+  );
+}
--- a/packages/stack/src/views/Stack/Card.tsx
+++ b/packages/stack/src/views/Stack/Card.tsx
@@ -18,6 +18,8 @@ import {
  GestureState,
  PanGestureHandlerGestureEvent,
 } from '../GestureHandler';
+import ModalStatusBarManager from '../ModalStatusBarManager';
+import { forModalPresentationIOS } from '../../TransitionConfigs/CardStyleInterpolators';
 import CardAnimationContext from '../../utils/CardAnimationContext';
 import getDistanceForDirection from '../../utils/getDistanceForDirection';
 import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
@@ -37,6 +39,7 @@ type Props = ViewProps & {
  gesture: Animated.Value;
  layout: Layout;
  insets: EdgeInsets;
+  headerDarkContent: boolean | undefined;
  pageOverflowEnabled: boolean;
  gestureDirection: GestureDirection;
  onOpen: () => void;
@@ -52,10 +55,7 @@ type Props = ViewProps & {
  overlayEnabled: boolean;
  shadowEnabled: boolean;
  gestureEnabled: boolean;
-  gestureResponseDistance?: {
-    vertical?: number;
-    horizontal?: number;
-  };
+  gestureResponseDistance?: number;
  gestureVelocityImpact: number;
  transitionSpec: {
    open: TransitionSpec;
@@ -406,13 +406,11 @@ export default class Card extends React.Component<Props> {
    const { layout, gestureDirection, gestureResponseDistance } = this.props;

    const distance =
-      gestureDirection === 'vertical' ||
-      gestureDirection === 'vertical-inverted'
-        ? gestureResponseDistance?.vertical !== undefined
-          ? gestureResponseDistance.vertical
-          : GESTURE_RESPONSE_DISTANCE_VERTICAL
-        : gestureResponseDistance?.horizontal !== undefined
-        ? gestureResponseDistance.horizontal
+      gestureResponseDistance !== undefined
+        ? gestureResponseDistance
+        : gestureDirection === 'vertical' ||
+          gestureDirection === 'vertical-inverted'
+        ? GESTURE_RESPONSE_DISTANCE_VERTICAL
        : GESTURE_RESPONSE_DISTANCE_HORIZONTAL;

    if (gestureDirection === 'vertical') {
@@ -464,6 +462,7 @@ export default class Card extends React.Component<Props> {
      gestureEnabled,
      gestureDirection,
      pageOverflowEnabled,
+      headerDarkContent,
      children,
      containerStyle: customContainerStyle,
      contentStyle,
@@ -523,6 +522,22 @@ export default class Card extends React.Component<Props> {

    return (
      <CardAnimationContext.Provider value={animationContext}>
+        {
+          // StatusBar messes with translucent status bar on Android
+          // So we should only enable it on iOS
+          Platform.OS === 'ios' &&
+          overlayEnabled &&
+          index === 0 &&
+          next &&
+          styleInterpolator === forModalPresentationIOS ? (
+            <ModalStatusBarManager
+              dark={headerDarkContent}
+              layout={layout}
+              insets={insets}
+              style={cardStyle}
+            />
+          ) : null
+        }
        <Animated.View
          style={{
            // This is a dummy style that doesn't actually change anything visually.
--- a/packages/stack/src/views/Stack/CardContainer.tsx
+++ b/packages/stack/src/views/Stack/CardContainer.tsx
@@ -27,6 +27,7 @@ type Props = TransitionPreset & {
  layout: Layout;
  gesture: Animated.Value;
  scene: Scene;
+  headerDarkContent: boolean | undefined;
  safeAreaInsetTop: number;
  safeAreaInsetRight: number;
  safeAreaInsetBottom: number;
@@ -55,15 +56,12 @@ type Props = TransitionPreset & {
  onGestureEnd?: (props: { route: Route<string> }) => void;
  onGestureCancel?: (props: { route: Route<string> }) => void;
  gestureEnabled?: boolean;
-  gestureResponseDistance?: {
-    vertical?: number;
-    horizontal?: number;
-  };
+  gestureResponseDistance?: number;
  gestureVelocityImpact?: number;
  mode: StackCardMode;
  headerMode: StackHeaderMode;
  headerShown: boolean;
-  hasAbsoluteHeader: boolean;
+  hasAbsoluteFloatHeader: boolean;
  headerHeight: number;
  onHeaderHeightChange: (props: {
    route: Route<string>;
@@ -91,10 +89,11 @@ function CardContainer({
  getPreviousScene,
  getFocusedRoute,
  mode,
+  headerDarkContent,
  headerMode,
  headerShown,
  headerStyleInterpolator,
-  hasAbsoluteHeader,
+  hasAbsoluteFloatHeader,
  headerHeight,
  onHeaderHeightChange,
  isParentHeaderShown,
@@ -248,7 +247,12 @@ function CardContainer({
      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
      pointerEvents={active ? 'box-none' : pointerEvents}
      pageOverflowEnabled={headerMode !== 'float' && mode === 'card'}
-      containerStyle={hasAbsoluteHeader ? { marginTop: headerHeight } : null}
+      headerDarkContent={headerDarkContent}
+      containerStyle={
+        hasAbsoluteFloatHeader && headerMode !== 'screen'
+          ? { marginTop: headerHeight }
+          : null
+      }
      contentStyle={[{ backgroundColor: colors.background }, cardStyle]}
      style={[
        {
@@ -281,7 +285,6 @@ function CardContainer({
              scenes: [previousScene, scene],
              getPreviousScene,
              getFocusedRoute,
-              gestureDirection,
              styleInterpolator: headerStyleInterpolator,
              onContentHeightChange: onHeaderHeightChange,
            })}
--- a/packages/stack/src/views/Stack/CardStack.tsx
+++ b/packages/stack/src/views/Stack/CardStack.tsx
@@ -6,6 +6,7 @@ import {
  Platform,
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
+import Color from 'color';
 import type {
  ParamListBase,
  Route,
@@ -14,6 +15,7 @@ import type {
 import {
  getDefaultHeaderHeight,
  SafeAreaProviderCompat,
+  Background,
 } from '@react-navigation/elements';

 import {
@@ -27,12 +29,10 @@ import {
  DefaultTransition,
  ModalTransition,
 } from '../../TransitionConfigs/TransitionPresets';
-import { forNoAnimation as forNoAnimationHeader } from '../../TransitionConfigs/HeaderStyleInterpolators';
 import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
 import getDistanceForDirection from '../../utils/getDistanceForDirection';
 import type {
  Layout,
-  StackHeaderMode,
  StackCardMode,
  StackDescriptorMap,
  StackNavigationOptions,
@@ -60,7 +60,6 @@ type Props = {
  getGesturesEnabled: (props: { route: Route<string> }) => boolean;
  renderHeader: (props: HeaderContainerProps) => React.ReactNode;
  renderScene: (props: { route: Route<string> }) => React.ReactNode;
-  headerMode: StackHeaderMode;
  isParentHeaderShown: boolean;
  onTransitionStart: (
    props: { route: Route<string> },
@@ -381,7 +380,6 @@ export default class CardStack extends React.Component<Props, State> {
      getGesturesEnabled,
      renderHeader,
      renderScene,
-      headerMode,
      isParentHeaderShown,
      onTransitionStart,
      onTransitionEnd,
@@ -408,13 +406,6 @@ export default class CardStack extends React.Component<Props, State> {
    let defaultTransitionPreset =
      mode === 'modal' ? ModalTransition : DefaultTransition;

-    if (headerMode !== 'float') {
-      defaultTransitionPreset = {
-        ...defaultTransitionPreset,
-        headerStyleInterpolator: forNoAnimationHeader,
-      };
-    }
-
    let activeScreensLimit = 1;

    for (let i = scenes.length - 1; i >= 0; i--) {
@@ -432,53 +423,52 @@ export default class CardStack extends React.Component<Props, State> {
      }
    }

-    const isFloatHeaderAbsolute =
-      headerMode === 'float'
-        ? this.state.scenes.slice(-2).some((scene) => {
-            const { descriptor } = scene;
-            const options = descriptor ? descriptor.options : {};
-            const { headerTransparent, headerShown = true } = options;
+    const isFloatHeaderAbsolute = this.state.scenes.slice(-2).some((scene) => {
+      const options = scene.descriptor.options ?? {};
+      const {
+        headerMode = 'screen',
+        headerTransparent,
+        headerShown = true,
+      } = options;

-            if (headerTransparent || headerShown === false) {
-              return true;
-            }
+      if (
+        headerTransparent ||
+        headerShown === false ||
+        headerMode === 'screen'
+      ) {
+        return true;
+      }

-            return false;
-          })
-        : false;
+      return false;
+    });

-    const floatingHeader =
-      headerMode === 'float' ? (
-        <React.Fragment key="header">
-          {renderHeader({
-            mode: 'float',
-            layout,
-            scenes,
-            getPreviousScene: this.getPreviousScene,
-            getFocusedRoute: this.getFocusedRoute,
-            onContentHeightChange: this.handleHeaderLayout,
-            gestureDirection:
-              focusedOptions.gestureDirection !== undefined
-                ? focusedOptions.gestureDirection
-                : defaultTransitionPreset.gestureDirection,
-            styleInterpolator:
-              focusedOptions.headerStyleInterpolator !== undefined
-                ? focusedOptions.headerStyleInterpolator
-                : defaultTransitionPreset.headerStyleInterpolator,
-            style: [
-              styles.floating,
-              isFloatHeaderAbsolute && [
-                // Without this, the header buttons won't be touchable on Android when headerTransparent: true
-                { height: focusedHeaderHeight },
-                styles.absolute,
-              ],
+    const floatingHeader = (
+      <React.Fragment key="header">
+        {renderHeader({
+          mode: 'float',
+          layout,
+          scenes,
+          getPreviousScene: this.getPreviousScene,
+          getFocusedRoute: this.getFocusedRoute,
+          onContentHeightChange: this.handleHeaderLayout,
+          styleInterpolator:
+            focusedOptions.headerStyleInterpolator !== undefined
+              ? focusedOptions.headerStyleInterpolator
+              : defaultTransitionPreset.headerStyleInterpolator,
+          style: [
+            styles.floating,
+            isFloatHeaderAbsolute && [
+              // Without this, the header buttons won't be touchable on Android when headerTransparent: true
+              { height: focusedHeaderHeight },
+              styles.absolute,
            ],
-          })}
-        </React.Fragment>
-      ) : null;
+          ],
+        })}
+      </React.Fragment>
+    );

    return (
-      <React.Fragment>
+      <Background>
        {isFloatHeaderAbsolute ? null : floatingHeader}
        <MaybeScreenContainer
          enabled={detachInactiveScreens}
@@ -528,7 +518,10 @@ export default class CardStack extends React.Component<Props, State> {

            const {
              headerShown = true,
+              headerMode = 'screen',
              headerTransparent,
+              headerStyle,
+              headerTintColor,
              cardShadowEnabled,
              cardOverlayEnabled = Platform.OS !== 'ios' || mode === 'modal',
              cardOverlay,
@@ -592,6 +585,19 @@ export default class CardStack extends React.Component<Props, State> {
            const headerHeight =
              headerShown !== false ? headerHeights[route.key] : 0;

+            const { backgroundColor: headerBackgroundColor } =
+              StyleSheet.flatten(headerStyle) || {};
+
+            let headerDarkContent: boolean | undefined;
+
+            if (headerShown) {
+              if (headerTintColor) {
+                headerDarkContent = Color(headerTintColor).isDark();
+              } else if (typeof headerBackgroundColor === 'string') {
+                headerDarkContent = !Color(headerBackgroundColor).isDark();
+              }
+            }
+
            return (
              <MaybeScreen
                key={route.key}
@@ -631,7 +637,8 @@ export default class CardStack extends React.Component<Props, State> {
                  mode={mode}
                  headerMode={headerMode}
                  headerShown={headerShown}
-                  hasAbsoluteHeader={
+                  headerDarkContent={headerDarkContent}
+                  hasAbsoluteFloatHeader={
                    isFloatHeaderAbsolute && !headerTransparent
                  }
                  renderHeader={renderHeader}
@@ -649,7 +656,7 @@ export default class CardStack extends React.Component<Props, State> {
          })}
        </MaybeScreenContainer>
        {isFloatHeaderAbsolute ? floatingHeader : null}
-      </React.Fragment>
+      </Background>
    );
  }
 }
--- a/packages/stack/src/views/Stack/StackView.tsx
+++ b/packages/stack/src/views/Stack/StackView.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Platform, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import {
  SafeAreaInsetsContext,
  EdgeInsets,
@@ -439,9 +439,6 @@ export default class StackView extends React.Component<Props, State> {
      navigation,
      keyboardHandlingEnabled,
      mode = 'card',
-      headerMode = mode === 'card' && Platform.OS === 'ios'
-        ? 'float'
-        : 'screen',
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      descriptors: _,
      ...rest
@@ -479,7 +476,6 @@ export default class StackView extends React.Component<Props, State> {
                          onTransitionEnd={this.handleTransitionEnd}
                          renderHeader={this.renderHeader}
                          renderScene={this.renderScene}
-                          headerMode={headerMode}
                          state={state}
                          descriptors={descriptors}
                          onGestureStart={this.handleGestureStart}
--- a/yarn.lock
+++ b/yarn.lock
@@ -2003,6 +2003,26 @@
    xcode "^2.1.0"
    xml2js "^0.4.23"

+"@expo/config-plugins@1.0.21":
+  version "1.0.21"
+  resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-1.0.21.tgz#5a6f5c818dd7bccc2f3e381cbf8b0657c38bb302"
+  integrity sha512-sMTF0/lx52ovJPz9iH5l0aKRpPFFtYoAQ+38AYhXI890Sswr1UU4Pq3IA5RMdvtOTkTzNREr21WvEHd7X8D1dA==
+  dependencies:
+    "@expo/config-types" "^40.0.0-beta.2"
+    "@expo/configure-splash-screen" "0.3.4"
+    "@expo/image-utils" "0.3.10"
+    "@expo/json-file" "8.2.28-alpha.0"
+    "@expo/plist" "0.0.11"
+    find-up "~5.0.0"
+    fs-extra "9.0.0"
+    getenv "0.7.0"
+    glob "7.1.6"
+    resolve-from "^5.0.0"
+    slash "^3.0.0"
+    slugify "^1.3.4"
+    xcode "^2.1.0"
+    xml2js "^0.4.23"
+
 "@expo/config-types@^40.0.0-beta.2":
  version "40.0.0-beta.2"
  resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-40.0.0-beta.2.tgz#4fea4ef5654d02218b02b0b3772529a9ce5b0471"
@@ -2046,6 +2066,26 @@
    semver "7.3.2"
    slugify "^1.3.4"

+"@expo/config@3.3.31":
+  version "3.3.31"
+  resolved "https://registry.yarnpkg.com/@expo/config/-/config-3.3.31.tgz#6651a06230589bb93f031529537fd2b2b36e566e"
+  integrity sha512-LRNWctdc9TI7C2BIrqShS97LT+Oe2TuazWh5uFdvxT1gMe7N4TslyLwaYHPiOgetukRtTAOP5+ekXXyc656VdA==
+  dependencies:
+    "@babel/core" "7.9.0"
+    "@babel/plugin-proposal-class-properties" "~7.12.13"
+    "@babel/preset-env" "~7.12.13"
+    "@babel/preset-typescript" "~7.12.13"
+    "@expo/config-plugins" "1.0.21"
+    "@expo/config-types" "^40.0.0-beta.2"
+    "@expo/json-file" "8.2.28-alpha.0"
+    fs-extra "9.0.0"
+    getenv "0.7.0"
+    glob "7.1.6"
+    require-from-string "^2.0.2"
+    resolve-from "^5.0.0"
+    semver "7.3.2"
+    slugify "^1.3.4"
+
 "@expo/configure-splash-screen@0.3.4":
  version "0.3.4"
  resolved "https://registry.yarnpkg.com/@expo/configure-splash-screen/-/configure-splash-screen-0.3.4.tgz#b91d8f08fd96272bd3d7aaa9b51d6189b932c7cc"
@@ -2062,24 +2102,24 @@
    xcode "^3.0.0"
    xml-js "^1.6.11"

-"@expo/dev-server@0.1.56":
-  version "0.1.56"
-  resolved "https://registry.yarnpkg.com/@expo/dev-server/-/dev-server-0.1.56.tgz#010fc8552f8d98d2b56137c000151d531d559b0a"
-  integrity sha512-BXKJW6KB7AckjJkDIM4mmuMhbiP9GQtmfsNoEsXg9Ci1NxJxu4vc/UdaL4tC+SLlDNpKgSIBvSNDY0AdPKUAeA==
+"@expo/dev-server@0.1.57":
+  version "0.1.57"
+  resolved "https://registry.yarnpkg.com/@expo/dev-server/-/dev-server-0.1.57.tgz#9c4af2efc591dd3093fbf14123c51c415e601cf3"
+  integrity sha512-0N5RArNt1qnkGbUqW2MWC4+FlxbyVuzn2e/QeICBq6mdSC+LT+J0jatbpSGD7Mk76tZtDGduHQBR0MA9Vdqgew==
  dependencies:
    "@expo/bunyan" "4.0.0"
-    "@expo/metro-config" "0.1.56"
+    "@expo/metro-config" "0.1.57"
    "@react-native-community/cli-server-api" "4.9.0"
    body-parser "1.19.0"
    resolve-from "^5.0.0"
    serialize-error "6.0.0"

-"@expo/dev-tools@0.13.84":
-  version "0.13.84"
-  resolved "https://registry.yarnpkg.com/@expo/dev-tools/-/dev-tools-0.13.84.tgz#f9fd737c228aca17d777f88dcc76e2ee1af08183"
-  integrity sha512-HmN5Gb+uSpLxIhHKjPgRSLZaAEJW8UmV6h2eQmVUrpc+VoT0M4roCHd50xJQv+OqLllgo9ZmmyWHnNckOd+RJA==
+"@expo/dev-tools@0.13.85":
+  version "0.13.85"
+  resolved "https://registry.yarnpkg.com/@expo/dev-tools/-/dev-tools-0.13.85.tgz#c5739202340ed75dfc892294d378923eb959dbb0"
+  integrity sha512-brTPqUyk+J+jYrwupCcTDEXXpmQ2cDVYd9tDvpKLZGj8VnuUj2u2miAeJc4rSiKE+N6YYeRwJRF7gghd2NBVkw==
  dependencies:
-    "@expo/config" "3.3.30"
+    "@expo/config" "3.3.31"
    base64url "3.0.1"
    express "4.16.4"
    freeport-async "2.0.0"
@@ -2146,12 +2186,12 @@
    json5 "^1.0.1"
    write-file-atomic "^2.3.0"

-"@expo/metro-config@0.1.56":
-  version "0.1.56"
-  resolved "https://registry.yarnpkg.com/@expo/metro-config/-/metro-config-0.1.56.tgz#b200397b765f002d2101079f2df1e41f45d41697"
-  integrity sha512-h7IBc8GWzqKhdv2OWqU9tU3i5ZMpoXU1gao+kZzvi02dEAV5GzKxvGPiZu9nsvXeeRlCIpzTHvzFPh5n5mtSnA==
+"@expo/metro-config@0.1.57":
+  version "0.1.57"
+  resolved "https://registry.yarnpkg.com/@expo/metro-config/-/metro-config-0.1.57.tgz#ac06d55fc0bc79e126278be25a3a50e81004a252"
+  integrity sha512-SyUDmjIpSy5DE0h32ckdVwB0XbB8jgbbW28MYILUASSLzfC3DmaOqdcNl18jIaewG5hw2eHc2gikd/0TwLN2Vw==
  dependencies:
-    "@expo/config" "3.3.30"
+    "@expo/config" "3.3.31"
    chalk "^4.1.0"
    getenv "^0.7.0"
    metro-react-native-babel-transformer "^0.59.0"
@@ -2248,7 +2288,47 @@
    lodash.pick "^4.4.0"
    lodash.template "^4.5.0"

-"@expo/webpack-config@0.12.60", "@expo/webpack-config@~0.12.60":
+"@expo/webpack-config@0.12.61":
+  version "0.12.61"
+  resolved "https://registry.yarnpkg.com/@expo/webpack-config/-/webpack-config-0.12.61.tgz#f378945b164a85b8c094fe21844499d0edaf2e1a"
+  integrity sha512-Ymx+DiBtBIo8+PoJ+dw1QEhgvGfJZvRUAIQ6JLxVPzApHMg6J0UUCrtWYByC8+Ax8QcrdSFjphoCGcFfL45/9w==
+  dependencies:
+    "@babel/core" "7.9.0"
+    "@babel/runtime" "7.9.0"
+    "@expo/config" "3.3.31"
+    "@pmmmwh/react-refresh-webpack-plugin" "^0.3.3"
+    babel-loader "8.1.0"
+    chalk "^4.0.0"
+    clean-webpack-plugin "^3.0.0"
+    copy-webpack-plugin "~6.0.3"
+    css-loader "~3.6.0"
+    expo-pwa "0.0.67"
+    file-loader "~6.0.0"
+    find-yarn-workspace-root "~2.0.0"
+    getenv "^0.7.0"
+    html-loader "~1.1.0"
+    html-webpack-plugin "~4.3.0"
+    is-wsl "^2.0.0"
+    mini-css-extract-plugin "^0.5.0"
+    node-html-parser "^1.2.12"
+    optimize-css-assets-webpack-plugin "^5.0.3"
+    pnp-webpack-plugin "^1.5.0"
+    postcss-safe-parser "^4.0.2"
+    progress "^2.0.3"
+    react-dev-utils "~11.0.1"
+    react-refresh "^0.8.2"
+    semver "~7.3.2"
+    style-loader "~1.2.1"
+    terser-webpack-plugin "^3.0.6"
+    url-loader "~4.1.0"
+    webpack "4.43.0"
+    webpack-deep-scope-plugin "1.6.0"
+    webpack-manifest-plugin "~2.2.0"
+    webpackbar "^4.0.0"
+    workbox-webpack-plugin "^3.6.3"
+    worker-loader "^2.0.0"
+
+"@expo/webpack-config@~0.12.60":
  version "0.12.60"
  resolved "https://registry.yarnpkg.com/@expo/webpack-config/-/webpack-config-0.12.60.tgz#382a12b6a256a6cd8528f9969672c5d308ca370e"
  integrity sha512-UieL5oLo4rm0jNx/Gzz6gs4fZ37THSdptvy4dQFsHGQrvZgxd1lCHEe4NNv56/Zs3H/FrX7vczpZ2fwS/LXvmQ==
@@ -2299,14 +2379,14 @@
    pouchdb-collections "^1.0.1"
    tiny-queue "^0.2.1"

-"@expo/xdl@59.0.24":
-  version "59.0.24"
-  resolved "https://registry.yarnpkg.com/@expo/xdl/-/xdl-59.0.24.tgz#b84d3c41ca223b3a5cf9a62dfc8e35e3bcdf0426"
-  integrity sha512-rl0lJ3z4v0VPu8Z37Vl2sTYSupAVjD6MxUHAJd+FRKgQMb7kyJUTpWvBAlbYCgMM+WH5XZZSvgWdwCTLocwPtw==
+"@expo/xdl@59.0.25":
+  version "59.0.25"
+  resolved "https://registry.yarnpkg.com/@expo/xdl/-/xdl-59.0.25.tgz#f6f5ddaf1292b5ae40e08cfeabb8d91e82c33b8e"
+  integrity sha512-can8RKDHBAq8NtGMbg25EmJ2RexJJhefTvvIQec4B6aWrydBYzRa2O//zFBP4VX56DyuwajPOk5gLejWEWeHNw==
  dependencies:
    "@expo/bunyan" "4.0.0"
-    "@expo/config" "3.3.30"
-    "@expo/dev-server" "0.1.56"
+    "@expo/config" "3.3.31"
+    "@expo/dev-server" "0.1.57"
    "@expo/devcert" "^1.0.0"
    "@expo/json-file" "8.2.28-alpha.0"
    "@expo/osascript" "2.0.24"
@@ -2314,7 +2394,7 @@
    "@expo/plist" "0.0.11"
    "@expo/schemer" "1.3.27-alpha.0"
    "@expo/spawn-async" "1.5.0"
-    "@expo/webpack-config" "0.12.60"
+    "@expo/webpack-config" "0.12.61"
    "@hapi/joi" "^17.1.1"
    "@types/text-table" "^0.2.1"
    analytics-node "3.5.0"
@@ -8874,16 +8954,16 @@ expo-blur@~9.0.0:
  resolved "https://registry.yarnpkg.com/expo-blur/-/expo-blur-9.0.0.tgz#6447a65dba3f14532406d9c5227622b3e7d1abf7"
  integrity sha512-zqZENclTYBtVAZOsnDROT5PQ9MbMxa5A36J+aU2NiV6MqLYlUh/b/FnR0JPAuY4F6jS6U7sYiAlStzIXpLd7XQ==

-expo-cli@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/expo-cli/-/expo-cli-4.2.1.tgz#6e17ef32e3485b19ab8f89c06b2a42b2fe0b5281"
-  integrity sha512-3qgir7nj1jD7L+ETEUBYQfwsd57GaOTLhJ+6rzwvRwSXdU04oM+nfiZHMyabgKHMzslyHpVnvOod9OjKVWTtuQ==
+expo-cli@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/expo-cli/-/expo-cli-4.3.0.tgz#d31106689ed1b95d7b8cd6e62578d121475da0ea"
+  integrity sha512-JZTWP7YajZD48VDAMqDmT7cLDqi+9blR/WzTXDlgiUgjYANYPAC8eMZxyuOnEvt0d9hSfEKuq1/mknUogXgjNA==
  dependencies:
    "@expo/apple-utils" "0.0.0-alpha.17"
    "@expo/bunyan" "4.0.0"
-    "@expo/config" "3.3.30"
-    "@expo/config-plugins" "1.0.20"
-    "@expo/dev-tools" "0.13.84"
+    "@expo/config" "3.3.31"
+    "@expo/config-plugins" "1.0.21"
+    "@expo/dev-tools" "0.13.85"
    "@expo/json-file" "8.2.28-alpha.0"
    "@expo/osascript" "2.0.24"
    "@expo/package-manager" "0.0.39-alpha.0"
@@ -8891,7 +8971,7 @@ expo-cli@^4.2.1:
    "@expo/results" "^1.0.0"
    "@expo/simple-spinner" "1.0.2"
    "@expo/spawn-async" "1.5.0"
-    "@expo/xdl" "59.0.24"
+    "@expo/xdl" "59.0.25"
    "@hapi/joi" "^17.1.1"
    babel-runtime "6.26.0"
    base32.js "0.1.0"
@@ -9027,6 +9107,17 @@ expo-pwa@0.0.66:
    commander "2.20.0"
    update-check "1.5.3"

+expo-pwa@0.0.67:
+  version "0.0.67"
+  resolved "https://registry.yarnpkg.com/expo-pwa/-/expo-pwa-0.0.67.tgz#035a3b05dcd78311a0841e6193daf034ca51cd7c"
+  integrity sha512-fyp624qENbSSDkW7So9Je5kDmCKf51leHqvO4Oqro2Yfv58XYJqv/j3MGMXd8rnraTJ0ktsfy0rSwA5/tqpmrQ==
+  dependencies:
+    "@expo/config" "3.3.31"
+    "@expo/image-utils" "0.3.10"
+    chalk "^4.0.0"
+    commander "2.20.0"
+    update-check "1.5.3"
+
 expo-secure-store@~9.3.0:
  version "9.3.0"
  resolved "https://registry.yarnpkg.com/expo-secure-store/-/expo-secure-store-9.3.0.tgz#b716d5d115cc50a34037d1afef84fe4b8ea0745c"
Author	SHA1	Message	Date
Satyajit Sahoo	5473982859	chore: publish - @react-navigation/bottom-tabs@6.0.0-next.3 - @react-navigation/drawer@6.0.0-next.3 - @react-navigation/elements@1.0.0-next.3 - @react-navigation/stack@6.0.0-next.8	2021-03-22 19:29:22 +01:00
Satyajit Sahoo	de805a3ebf	fix: use tab role on Android for accessibility	2021-03-22 19:21:47 +01:00
Satyajit Sahoo	cbaabc1288	feat: add a Background component	2021-03-22 19:03:09 +01:00
Satyajit Sahoo	dd48fe9b15	chore: publish - @react-navigation/stack@6.0.0-next.7	2021-03-22 02:16:16 +01:00
Satyajit Sahoo	48851c9ebd	refactor: make gestureResponseDistance a number BREAKING CHANGE: now we need to pass a number instead of an object	2021-03-22 02:15:28 +01:00
Satyajit Sahoo	197c916a23	chore: publish - @react-navigation/stack@6.0.0-next.6	2021-03-14 16:44:53 +01:00
Satyajit Sahoo	31caaf3071	refactor: set headerMode to screen by default when custom header is specified	2021-03-14 16:43:51 +01:00
Satyajit Sahoo	5bcce9926a	chore: publish - @react-navigation/stack@6.0.0-next.5	2021-03-14 16:28:11 +01:00
Satyajit Sahoo	aacc1b525d	refactor: move headerMode to options BREAKING CHANGE: headerMode is now moved to options instead of props	2021-03-14 16:27:53 +01:00
Satyajit Sahoo	3ad2bcbaf8	fix: consider header colors when managing statusbar	2021-03-13 17:38:46 +01:00
Satyajit Sahoo	faee245d2e	fix: consider header colors when managing statusbar	2021-03-13 17:37:43 +01:00
Satyajit Sahoo	e1ab06d3d7	chore: publish - @react-navigation/stack@6.0.0-next.4	2021-03-12 23:09:39 +01:00
Satyajit Sahoo	a204edd012	fix: add special statusbar handling to modal presentation	2021-03-12 23:08:13 +01:00
Satyajit Sahoo	78b00bd814	chore: update expo-cli	2021-03-12 03:30:37 +01:00