chore: merge current main

example/ios/Podfile.lock

@@ -370,8 +370,9 @@ PODS:
     - React-RCTVibration
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.0.0):
+  - RNScreens (3.3.0):
     - React-Core
+    - React-RCTImage
   - RNVectorIcons (8.1.0):
     - React-Core
   - UMAppLoader (2.1.0)
@@ -680,7 +681,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: fc29d354a40316a990e8fb46391f08aea829c3aa
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNReanimated: 70f662b5232dd5d19ccff581e919a54ea73df51c
-  RNScreens: e8e8dd0588b5da0ab57dcca76ab9b2d8987757e0
+  RNScreens: bf59f17fbf001f1025243eeed5f19419d3c11ef2
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   UMAppLoader: fe2708bb0ac5cd70052bc207d06aa3b7e72b9e97
   UMBarCodeScannerInterface: 79f92bea5f7af39b381a4c82298105ceb537408a

example/ios/ReactNavigation/Info.plist

@@ -51,7 +51,7 @@
       <string>UIInterfaceOrientationLandscapeRight</string>
     </array>
     <key>UIViewControllerBasedStatusBarAppearance</key>
-    <false/>
+    <true/>
     <key>CFBundleURLTypes</key>
     <array>
       <dict>

example/package.json

@@ -35,7 +35,7 @@
     "react-native-paper": "^4.9.1",
     "react-native-reanimated": "~2.1.0",
     "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.0.0",
+    "react-native-screens": "^3.0.0",
     "react-native-tab-view": "^3.0.1",
     "react-native-unimodules": "~0.13.1",
     "react-native-vector-icons": "^8.1.0",

example/src/index.tsx

@@ -32,7 +32,6 @@ import {
   Platform,
   ScaledSize,
   ScrollView,
-  StatusBar,
 } from 'react-native';
 import {
   DarkTheme as PaperDarkTheme,
@@ -230,11 +229,6 @@ export default function App() {
 
   return (
     <PaperProvider theme={paperTheme}>
-      <StatusBar
-        translucent
-        barStyle={theme.dark ? 'light-content' : 'dark-content'}
-        backgroundColor="rgba(0, 0, 0, 0.24)"
-      />
       <NavigationContainer
         ref={navigationRef}
         initialState={initialState}
@@ -312,6 +306,9 @@ export default function App() {
         <Stack.Navigator
           screenOptions={{
             headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+            statusBarStyle: theme.dark ? 'light' : 'dark',
+            statusBarTranslucent: true,
+            statusBarColor: 'rgba(0, 0, 0, 0.24)',
           }}
         >
           <Stack.Screen

packages/bottom-tabs/CHANGELOG.md

@@ -3,14 +3,6 @@
 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.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.17...@react-navigation/bottom-tabs@6.0.0-next.18) (2021-06-01)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
 # [6.0.0-next.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.16...@react-navigation/bottom-tabs@6.0.0-next.17) (2021-05-29)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs

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.18",
+  "version": "6.0.0-next.17",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,7 +36,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.17",
+    "@react-navigation/elements": "^1.0.0-next.16",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
@@ -51,7 +51,7 @@
     "react-native": "~0.63.4",
     "react-native-builder-bob": "^0.18.1",
     "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.0.0",
+    "react-native-screens": "^3.0.0",
     "typescript": "^4.2.3"
   },
   "peerDependencies": {

packages/bottom-tabs/src/types.tsx

@@ -80,171 +80,228 @@ export type TabBarVisibilityAnimationConfig =
   | TimingKeyboardAnimationConfig
   | SpringKeyboardAnimationConfig;
 
-export type BottomTabNavigationOptions = HeaderOptions & {
+export type NativeScreenTraitsProps = {
   /**
-   * Title text for the screen.
+   * In which orientation should the screen appear. It requires having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
+   * The following values are currently supported:
+   * - "default" - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation.
+   * - "all" – all orientations are permitted
+   * - "portrait" – portrait orientations are permitted
+   * - "portrait_up" – right-side portrait orientation is permitted
+   * - "portrait_down" – upside-down portrait orientation is permitted
+   * - "landscape" – landscape orientations are permitted
+   * - "landscape_left" – landscape-left orientation is permitted
+   * - "landscape_right" – landscape-right orientation is permitted
    */
-  title?: string;
+  orientation?:
-
+    | 'default'
+    | 'all'
+    | 'portrait'
+    | 'portrait_up'
+    | 'portrait_down'
+    | 'landscape'
+    | 'landscape_left'
+    | 'landscape_right';
   /**
-   * Whether this screens should render the first time it's accessed. Defaults to `true`.
+   * Sets the status bar animation (similar to the `StatusBar` component). Requires enabling (or deleting)
-   * Set it to `false` if you want to render the screen on initial render.
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  lazy?: boolean;
+  statusBarAnimation?: 'none' | 'fade' | 'slide';
-
   /**
-   * Function that given returns a React Element to display as a header.
+   * Sets the status bar color (similar to the `StatusBar` component).
-   */
+   * Requires enabled `react-native-screens` version >=3.3.0.
-  header?: (props: BottomTabHeaderProps) => React.ReactNode;
-
-  /**
-   * Whether to show the header. Setting this to `false` hides the header.
-   * Defaults to `true`.
-   */
-  headerShown?: boolean;
-
-  /**
-   * Title string of a tab displayed in the tab bar
-   * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
    *
-   * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.
+   * @platform android
    */
-  tabBarLabel?:
+  statusBarColor?: string;
-    | string
-    | ((props: {
-        focused: boolean;
-        color: string;
-        position: LabelPosition;
-      }) => React.ReactNode);
-
   /**
-   * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
+   * Whether the status bar should be hidden on this screen. Requires enabling (or deleting)
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  tabBarIcon?: (props: {
+  statusBarHidden?: boolean;
-    focused: boolean;
-    color: string;
-    size: number;
-  }) => React.ReactNode;
-
   /**
-   * Text to show in a badge on the tab icon.
+   * Sets the status bar color (similar to the `StatusBar` component). Requires enabling (or deleting)
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  tabBarBadge?: number | string;
+  statusBarStyle?: 'inverted' | 'auto' | 'light' | 'dark';
-
   /**
-   * Custom style for the tab bar badge.
+   * Sets the translucency of the status bar. Defaults to true. Requires enabled `react-native-screens` version >=3.3.0.
-   * 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.
-   */
-  tabBarAccessibilityLabel?: string;
-
-  /**
-   * ID to locate this tab button in tests.
-   */
-  tabBarTestID?: string;
-
-  /**
-   * Animation config for showing and hiding the tab bar.
-   */
-  tabBarVisibilityAnimationConfig?: {
-    show?: TabBarVisibilityAnimationConfig;
-    hide?: TabBarVisibilityAnimationConfig;
-  };
-
-  /**
-   * Function which returns a React element to render as the tab bar button.
-   * Renders `TouchableWithoutFeedback` by default.
-   */
-  tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
-
-  /**
-   * Color for the icon and label in the active tab.
-   */
-  tabBarActiveTintColor?: string;
-
-  /**
-   * Color for the icon and label in the inactive tabs.
-   */
-  tabBarInactiveTintColor?: string;
-
-  /**
-   * Background color for the active tab.
-   */
-  tabBarActiveBackgroundColor?: string;
-
-  /**
-   * background color for the inactive tabs.
-   */
-  tabBarInactiveBackgroundColor?: string;
-
-  /**
-   * Whether label font should scale to respect Text Size accessibility settings.
-   */
-  tabBarAllowFontScaling?: boolean;
-
-  /**
-   * Whether the tab label should be visible. Defaults to `true`.
-   */
-  tabBarShowLabel?: boolean;
-
-  /**
-   * Style object for the tab label.
-   */
-  tabBarLabelStyle?: StyleProp<TextStyle>;
-
-  /**
-   * Style object for the tab icon.
-   */
-  tabBarIconStyle?: StyleProp<TextStyle>;
-
-  /**
-   * Style object for the tab item container.
-   */
-  tabBarItemStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Whether the label is rendered below the icon or beside the icon.
-   * By default, the position is chosen automatically based on device width.
-   * In `below-icon` orientation (typical for iPhones), the label is rendered below and in `beside-icon` orientation, it's rendered beside (typical for iPad).
-   */
-  tabBarLabelPosition?: LabelPosition;
-
-  /**
-   * Whether the label position should adapt to the orientation.
-   */
-  tabBarAdaptive?: boolean;
-
-  /**
-   * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
-   */
-  tabBarHideOnKeyboard?: boolean;
-
-  /**
-   * Style object for the tab bar container.
-   */
-  tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-
-  /**
-   * Component to use as background for the tab bar.
-   * You could render an image, a gradient, blur view etc.
    *
-   * When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
+   * @platform android
-   * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
    */
-  tabBarBackground?: () => React.ReactNode;
+  statusBarTranslucent?: boolean;
-
-  /**
-   * Whether this screen should be unmounted when navigating away from it.
-   * Defaults to `false`.
-   */
-  unmountOnBlur?: boolean;
 };
 
+export type BottomTabNavigationOptions = HeaderOptions &
+  NativeScreenTraitsProps & {
+    /**
+     * Title text for the screen.
+     */
+    title?: string;
+
+    /**
+     * Whether this screens should render the first time it's accessed. Defaults to `true`.
+     * Set it to `false` if you want to render the screen on initial render.
+     */
+    lazy?: boolean;
+
+    /**
+     * Function that given returns a React Element to display as a header.
+     */
+    header?: (props: BottomTabHeaderProps) => React.ReactNode;
+
+    /**
+     * Whether to show the header. Setting this to `false` hides the header.
+     * Defaults to `true`.
+     */
+    headerShown?: boolean;
+
+    /**
+     * Title string of a tab displayed in the tab bar
+     * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
+     *
+     * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.
+     */
+    tabBarLabel?:
+      | string
+      | ((props: {
+          focused: boolean;
+          color: string;
+          position: LabelPosition;
+        }) => React.ReactNode);
+
+    /**
+     * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
+     */
+    tabBarIcon?: (props: {
+      focused: boolean;
+      color: string;
+      size: number;
+    }) => React.ReactNode;
+
+    /**
+     * Text to show in a badge on the tab icon.
+     */
+    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.
+     */
+    tabBarAccessibilityLabel?: string;
+
+    /**
+     * ID to locate this tab button in tests.
+     */
+    tabBarTestID?: string;
+
+    /**
+     * Animation config for showing and hiding the tab bar.
+     */
+    tabBarVisibilityAnimationConfig?: {
+      show?: TabBarVisibilityAnimationConfig;
+      hide?: TabBarVisibilityAnimationConfig;
+    };
+
+    /**
+     * Function which returns a React element to render as the tab bar button.
+     * Renders `TouchableWithoutFeedback` by default.
+     */
+    tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
+
+    /**
+     * Color for the icon and label in the active tab.
+     */
+    tabBarActiveTintColor?: string;
+
+    /**
+     * Color for the icon and label in the inactive tabs.
+     */
+    tabBarInactiveTintColor?: string;
+
+    /**
+     * Background color for the active tab.
+     */
+    tabBarActiveBackgroundColor?: string;
+
+    /**
+     * background color for the inactive tabs.
+     */
+    tabBarInactiveBackgroundColor?: string;
+
+    /**
+     * Whether label font should scale to respect Text Size accessibility settings.
+     */
+    tabBarAllowFontScaling?: boolean;
+
+    /**
+     * Whether the tab label should be visible. Defaults to `true`.
+     */
+    tabBarShowLabel?: boolean;
+
+    /**
+     * Style object for the tab label.
+     */
+    tabBarLabelStyle?: StyleProp<TextStyle>;
+
+    /**
+     * Style object for the tab icon.
+     */
+    tabBarIconStyle?: StyleProp<TextStyle>;
+
+    /**
+     * Style object for the tab item container.
+     */
+    tabBarItemStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Whether the label is rendered below the icon or beside the icon.
+     * By default, the position is chosen automatically based on device width.
+     * In `below-icon` orientation (typical for iPhones), the label is rendered below and in `beside-icon` orientation, it's rendered beside (typical for iPad).
+     */
+    tabBarLabelPosition?: LabelPosition;
+
+    /**
+     * Whether the label position should adapt to the orientation.
+     */
+    tabBarAdaptive?: boolean;
+
+    /**
+     * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
+     */
+    tabBarHideOnKeyboard?: boolean;
+
+    /**
+     * Style object for the tab bar container.
+     */
+    tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+
+    /**
+     * Component to use as background for the tab bar.
+     * You could render an image, a gradient, blur view etc.
+     *
+     * When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
+     * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
+     */
+    tabBarBackground?: () => React.ReactNode;
+
+    /**
+     * Whether this screen should be unmounted when navigating away from it.
+     * Defaults to `false`.
+     */
+    unmountOnBlur?: boolean;
+  };
+
 export type BottomTabDescriptor = Descriptor<
   BottomTabNavigationOptions,
   BottomTabNavigationProp<ParamListBase>,

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

@@ -96,7 +96,16 @@ export default function BottomTabView(props: Props) {
       >
         {routes.map((route, index) => {
           const descriptor = descriptors[route.key];
-          const { lazy = true, unmountOnBlur } = descriptor.options;
+          const {
+            lazy = true,
+            unmountOnBlur,
+            orientation,
+            statusBarAnimation,
+            statusBarColor,
+            statusBarHidden,
+            statusBarStyle,
+            statusBarTranslucent,
+          } = descriptor.options;
           const isFocused = state.index === index;
 
           if (unmountOnBlur && !isFocused) {
@@ -124,6 +133,12 @@ export default function BottomTabView(props: Props) {
               style={StyleSheet.absoluteFill}
               visible={isFocused}
               enabled={detachInactiveScreens}
+              orientation={orientation}
+              statusBarAnimation={statusBarAnimation}
+              statusBarColor={statusBarColor}
+              statusBarHidden={statusBarHidden}
+              statusBarStyle={statusBarStyle}
+              statusBarTranslucent={statusBarTranslucent}
             >
               <BottomTabBarHeightContext.Provider value={tabBarHeight}>
                 <Screen

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

@@ -2,7 +2,9 @@ import { ResourceSavingView } from '@react-navigation/elements';
 import * as React from 'react';
 import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
 
-type Props = {
+import type { NativeScreenTraitsProps } from '../types';
+
+type Props = NativeScreenTraitsProps & {
   visible: boolean;
   children: React.ReactNode;
   enabled: boolean;

packages/drawer/CHANGELOG.md

@@ -3,14 +3,6 @@
 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.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.16...@react-navigation/drawer@6.0.0-next.17) (2021-06-01)
-
-**Note:** Version bump only for package @react-navigation/drawer
-
-
-
-
-
 # [6.0.0-next.16](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.15...@react-navigation/drawer@6.0.0-next.16) (2021-05-29)
 
 **Note:** Version bump only for package @react-navigation/drawer

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.17",
+  "version": "6.0.0-next.16",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,7 +41,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.17",
+    "@react-navigation/elements": "^1.0.0-next.16",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
@@ -57,7 +57,7 @@
     "react-native-gesture-handler": "~1.10.2",
     "react-native-reanimated": "~2.1.0",
     "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.0.0",
+    "react-native-screens": "^3.0.0",
     "typescript": "^4.2.3"
   },
   "peerDependencies": {

packages/drawer/src/types.tsx

@@ -49,174 +49,231 @@ export type DrawerNavigationConfig = {
   useLegacyImplementation?: boolean;
 };
 
-export type DrawerNavigationOptions = HeaderOptions & {
+export type NativeScreenTraitsProps = {
   /**
-   * Title text for the screen.
+   * In which orientation should the screen appear. It requires having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
+   * The following values are currently supported:
+   * - "default" - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation.
+   * - "all" – all orientations are permitted
+   * - "portrait" – portrait orientations are permitted
+   * - "portrait_up" – right-side portrait orientation is permitted
+   * - "portrait_down" – upside-down portrait orientation is permitted
+   * - "landscape" – landscape orientations are permitted
+   * - "landscape_left" – landscape-left orientation is permitted
+   * - "landscape_right" – landscape-right orientation is permitted
    */
-  title?: string;
+  orientation?:
-
+    | 'default'
+    | 'all'
+    | 'portrait'
+    | 'portrait_up'
+    | 'portrait_down'
+    | 'landscape'
+    | 'landscape_left'
+    | 'landscape_right';
   /**
-   * Whether this screens should render the first time it's accessed. Defaults to `true`.
+   * Sets the status bar animation (similar to the `StatusBar` component). Requires enabling (or deleting)
-   * Set it to `false` if you want to render the screen on initial render.
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  lazy?: boolean;
+  statusBarAnimation?: 'none' | 'fade' | 'slide';
-
   /**
-   * Function that returns a React Element to display as a header.
+   * Sets the status bar color (similar to the `StatusBar` component).
+   * Requires enabled `react-native-screens` version >=3.3.0.
+   *
+   * @platform android
    */
-  header?: (props: DrawerHeaderProps) => React.ReactNode;
+  statusBarColor?: string;
-
   /**
-   * Whether to show the header. Setting this to `false` hides the header.
+   * Whether the status bar should be hidden on this screen. Requires enabling (or deleting)
-   * Defaults to `true`.
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  headerShown?: boolean;
+  statusBarHidden?: boolean;
-
   /**
-   * Title string of a screen displayed in the drawer
+   * Sets the status bar color (similar to the `StatusBar` component). Requires enabling (or deleting)
-   * or a function that given { focused: boolean, color: string } returns a React.Node
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
-   * When undefined, scene title is used.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  drawerLabel?:
+  statusBarStyle?: 'inverted' | 'auto' | 'light' | 'dark';
-    | string
-    | ((props: { color: string; focused: boolean }) => React.ReactNode);
-
   /**
-   * A function that given { focused: boolean, color: string } returns a React.Node to display an icon the drawer.
+   * Sets the translucency of the status bar. Defaults to true. Requires enabled `react-native-screens` version >=3.3.0.
+   *
+   * @platform android
    */
-  drawerIcon?: (props: {
+  statusBarTranslucent?: boolean;
-    color: string;
-    size: number;
-    focused: boolean;
-  }) => React.ReactNode;
-
-  /**
-   * Color for the icon and label in the active item in the drawer.
-   */
-  drawerActiveTintColor?: string;
-
-  /**
-   * Background color for the active item in the drawer.
-   */
-  drawerActiveBackgroundColor?: string;
-
-  /**
-   * Color for the icon and label in the inactive items in the drawer.
-   */
-  drawerInactiveTintColor?: string;
-
-  /**
-   * Background color for the inactive items in the drawer.
-   */
-  drawerInactiveBackgroundColor?: string;
-
-  /**
-   * Style object for the single item, which can contain an icon and/or a label.
-   */
-  drawerItemStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Style object to apply to the `Text` inside content section which renders a label.
-   */
-  drawerLabelStyle?: StyleProp<TextStyle>;
-
-  /**
-   * Style object for the content section.
-   */
-  drawerContentContainerStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Style object for the wrapper view.
-   */
-  drawerContentStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Style object for the drawer component.
-   * You can pass a custom background color for a drawer or a custom width here.
-   */
-  drawerStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Position of the drawer on the screen. Defaults to `left`.
-   */
-  drawerPosition?: 'left' | 'right';
-
-  /**
-   * Type of the drawer. It determines how the drawer looks and animates.
-   * - `front`: Traditional drawer which covers the screen with a overlay behind it.
-   * - `back`: The drawer is revealed behind the screen on swipe.
-   * - `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
-   * - `permanent`: A permanent drawer is shown as a sidebar.
-   */
-  drawerType?: 'front' | 'back' | 'slide' | 'permanent';
-
-  /**
-   * Whether the statusbar should be hidden when the drawer is pulled or opens,
-   */
-  drawerHideStatusBarOnOpen?: boolean;
-
-  /**
-   * Animation of the statusbar when hiding it. use in combination with `drawerHideStatusBarOnOpen`.
-   */
-  drawerStatusBarAnimation?: 'slide' | 'none' | 'fade';
-
-  /**
-   * Color of the overlay to be displayed on top of the content view when drawer gets open.
-   * The opacity is animated from `0` to `1` when the drawer opens.
-   */
-  overlayColor?: string;
-
-  /**
-   * Style object for the component wrapping the screen content.
-   */
-  sceneContainerStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Whether you can use gestures to open or close the drawer.
-   * Setting this to `false` disables swipe gestures as well as tap on overlay to close.
-   * See `swipeEnabled` to disable only the swipe gesture.
-   * Defaults to `true`.
-   * Not supported on Web.
-   */
-  gestureEnabled?: boolean;
-
-  /**
-   * Props to pass to the underlying pan gesture handler.
-   * Not supported on Web.
-   */
-  gestureHandlerProps?: PanGestureHandlerProperties;
-
-  /**
-   * Whether you can use swipe gestures to open or close the drawer.
-   * Defaults to `true`.
-   * Not supported on Web.
-   */
-  swipeEnabled?: boolean;
-
-  /**
-   * How far from the edge of the screen the swipe gesture should activate.
-   * Not supported on Web.
-   */
-  swipeEdgeWidth?: number;
-
-  /**
-   * Minimum swipe distance threshold that should activate opening the drawer.
-   */
-  swipeMinDistance?: number;
-
-  /**
-   * Whether the keyboard should be dismissed when the swipe gesture begins.
-   * Defaults to `'on-drag'`. Set to `'none'` to disable keyboard handling.
-   */
-  keyboardDismissMode?: 'on-drag' | 'none';
-
-  /**
-   * Whether this screen should be unmounted when navigating away from it.
-   * Defaults to `false`.
-   */
-  unmountOnBlur?: boolean;
 };
 
+export type DrawerNavigationOptions = HeaderOptions &
+  NativeScreenTraitsProps & {
+    /**
+     * Title text for the screen.
+     */
+    title?: string;
+
+    /**
+     * Whether this screens should render the first time it's accessed. Defaults to `true`.
+     * Set it to `false` if you want to render the screen on initial render.
+     */
+    lazy?: boolean;
+
+    /**
+     * Function that returns a React Element to display as a header.
+     */
+    header?: (props: DrawerHeaderProps) => React.ReactNode;
+
+    /**
+     * Whether to show the header. Setting this to `false` hides the header.
+     * Defaults to `true`.
+     */
+    headerShown?: boolean;
+
+    /**
+     * Title string of a screen displayed in the drawer
+     * or a function that given { focused: boolean, color: string } returns a React.Node
+     * When undefined, scene title is used.
+     */
+    drawerLabel?:
+      | string
+      | ((props: { color: string; focused: boolean }) => React.ReactNode);
+
+    /**
+     * A function that given { focused: boolean, color: string } returns a React.Node to display an icon the drawer.
+     */
+    drawerIcon?: (props: {
+      color: string;
+      size: number;
+      focused: boolean;
+    }) => React.ReactNode;
+
+    /**
+     * Color for the icon and label in the active item in the drawer.
+     */
+    drawerActiveTintColor?: string;
+
+    /**
+     * Background color for the active item in the drawer.
+     */
+    drawerActiveBackgroundColor?: string;
+
+    /**
+     * Color for the icon and label in the inactive items in the drawer.
+     */
+    drawerInactiveTintColor?: string;
+
+    /**
+     * Background color for the inactive items in the drawer.
+     */
+    drawerInactiveBackgroundColor?: string;
+
+    /**
+     * Style object for the single item, which can contain an icon and/or a label.
+     */
+    drawerItemStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Style object to apply to the `Text` inside content section which renders a label.
+     */
+    drawerLabelStyle?: StyleProp<TextStyle>;
+
+    /**
+     * Style object for the content section.
+     */
+    drawerContentContainerStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Style object for the wrapper view.
+     */
+    drawerContentStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Style object for the drawer component.
+     * You can pass a custom background color for a drawer or a custom width here.
+     */
+    drawerStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Position of the drawer on the screen. Defaults to `left`.
+     */
+    drawerPosition?: 'left' | 'right';
+
+    /**
+     * Type of the drawer. It determines how the drawer looks and animates.
+     * - `front`: Traditional drawer which covers the screen with a overlay behind it.
+     * - `back`: The drawer is revealed behind the screen on swipe.
+     * - `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
+     * - `permanent`: A permanent drawer is shown as a sidebar.
+     */
+    drawerType?: 'front' | 'back' | 'slide' | 'permanent';
+
+    /**
+     * Whether the statusbar should be hidden when the drawer is pulled or opens,
+     */
+    drawerHideStatusBarOnOpen?: boolean;
+
+    /**
+     * Animation of the statusbar when hiding it. use in combination with `drawerHideStatusBarOnOpen`.
+     */
+    drawerStatusBarAnimation?: 'slide' | 'none' | 'fade';
+
+    /**
+     * Color of the overlay to be displayed on top of the content view when drawer gets open.
+     * The opacity is animated from `0` to `1` when the drawer opens.
+     */
+    overlayColor?: string;
+
+    /**
+     * Style object for the component wrapping the screen content.
+     */
+    sceneContainerStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Whether you can use gestures to open or close the drawer.
+     * Setting this to `false` disables swipe gestures as well as tap on overlay to close.
+     * See `swipeEnabled` to disable only the swipe gesture.
+     * Defaults to `true`.
+     * Not supported on Web.
+     */
+    gestureEnabled?: boolean;
+
+    /**
+     * Props to pass to the underlying pan gesture handler.
+     * Not supported on Web.
+     */
+    gestureHandlerProps?: PanGestureHandlerProperties;
+
+    /**
+     * Whether you can use swipe gestures to open or close the drawer.
+     * Defaults to `true`.
+     * Not supported on Web.
+     */
+    swipeEnabled?: boolean;
+
+    /**
+     * How far from the edge of the screen the swipe gesture should activate.
+     * Not supported on Web.
+     */
+    swipeEdgeWidth?: number;
+
+    /**
+     * Minimum swipe distance threshold that should activate opening the drawer.
+     */
+    swipeMinDistance?: number;
+
+    /**
+     * Whether the keyboard should be dismissed when the swipe gesture begins.
+     * Defaults to `'on-drag'`. Set to `'none'` to disable keyboard handling.
+     */
+    keyboardDismissMode?: 'on-drag' | 'none';
+
+    /**
+     * Whether this screen should be unmounted when navigating away from it.
+     * Defaults to `false`.
+     */
+    unmountOnBlur?: boolean;
+  };
+
 export type DrawerContentComponentProps = {
   state: DrawerNavigationState<ParamListBase>;
   navigation: DrawerNavigationHelpers;

packages/drawer/src/views/DrawerView.tsx

@@ -195,7 +195,16 @@ function DrawerViewBase({
       >
         {state.routes.map((route, index) => {
           const descriptor = descriptors[route.key];
-          const { lazy = true, unmountOnBlur } = descriptor.options;
+          const {
+            lazy = true,
+            unmountOnBlur,
+            orientation,
+            statusBarAnimation,
+            statusBarColor,
+            statusBarHidden,
+            statusBarStyle,
+            statusBarTranslucent,
+          } = descriptor.options;
           const isFocused = state.index === index;
 
           if (unmountOnBlur && !isFocused) {
@@ -228,6 +237,12 @@ function DrawerViewBase({
               style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
               visible={isFocused}
               enabled={detachInactiveScreens}
+              orientation={orientation}
+              statusBarAnimation={statusBarAnimation}
+              statusBarColor={statusBarColor}
+              statusBarHidden={statusBarHidden}
+              statusBarStyle={statusBarStyle}
+              statusBarTranslucent={statusBarTranslucent}
             >
               <Screen
                 focused={isFocused}

packages/drawer/src/views/ScreenFallback.tsx

@@ -2,7 +2,9 @@ import { ResourceSavingView } from '@react-navigation/elements';
 import * as React from 'react';
 import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
 
-type Props = {
+import type { NativeScreenTraitsProps } from '../types';
+
+type Props = NativeScreenTraitsProps & {
   visible: boolean;
   children: React.ReactNode;
   enabled: boolean;

packages/elements/CHANGELOG.md

@@ -3,17 +3,6 @@
 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.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.16...@react-navigation/elements@1.0.0-next.17) (2021-06-01)
-
-
-### Bug Fixes
-
-* tweak opacity animation for PlatformPressable ([b46c433](https://github.com/react-navigation/react-navigation/commit/b46c433f1e012fc3215ec32ac787c7c018963505))
-
-
-
-
-
 # [1.0.0-next.16](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.15...@react-navigation/elements@1.0.0-next.16) (2021-05-29)
 
 **Note:** Version bump only for package @react-navigation/elements

packages/elements/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "1.0.0-next.17",
+  "version": "1.0.0-next.16",
   "keywords": [
     "react-native",
     "react-navigation",

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,14 +3,6 @@
 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.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.13...@react-navigation/material-bottom-tabs@6.0.0-next.14) (2021-06-01)
-
-**Note:** Version bump only for package @react-navigation/material-bottom-tabs
-
-
-
-
-
 # [6.0.0-next.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.12...@react-navigation/material-bottom-tabs@6.0.0-next.13) (2021-05-29)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

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": "6.0.0-next.14",
+  "version": "6.0.0-next.13",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,7 +41,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.17"
+    "@react-navigation/elements": "^1.0.0-next.16"
   },
   "devDependencies": {
     "@react-navigation/native": "^6.0.0-next.13",

packages/native-stack/CHANGELOG.md

@@ -3,14 +3,6 @@
 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.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.6...@react-navigation/native-stack@6.0.0-next.7) (2021-06-01)
-
-**Note:** Version bump only for package @react-navigation/native-stack
-
-
-
-
-
 # [6.0.0-next.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.5...@react-navigation/native-stack@6.0.0-next.6) (2021-05-29)
 
 **Note:** Version bump only for package @react-navigation/native-stack

packages/native-stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native-stack",
   "description": "Native stack navigator using react-native-screens",
-  "version": "6.0.0-next.7",
+  "version": "6.0.0-next.6",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,7 +41,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.17",
+    "@react-navigation/elements": "^1.0.0-next.16",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {

packages/native-stack/src/types.tsx

@@ -9,12 +9,119 @@ import type {
   StackNavigationState,
   StackRouterOptions,
 } from '@react-navigation/native';
-import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
 import type {
-  ScreenProps,
+  ImageSourcePropType,
-  ScreenStackHeaderConfigProps,
+  NativeSyntheticEvent,
-  SearchBarProps,
+  StyleProp,
-} from 'react-native-screens';
+  TargetedEvent,
+  TextInputFocusEventData,
+  ViewStyle,
+} from 'react-native';
+
+export type PresentationTypes =
+  | 'card'
+  | 'modal'
+  | 'transparentModal'
+  | 'containedModal'
+  | 'containedTransparentModal'
+  | 'fullScreenModal'
+  | 'formSheet';
+export type AnimationTypes =
+  | 'default'
+  | 'fade'
+  | 'flip'
+  | 'none'
+  | 'simple_push'
+  | 'slide_from_bottom'
+  | 'slide_from_right'
+  | 'slide_from_left';
+export type BlurEffectTypes =
+  | 'extraLight'
+  | 'light'
+  | 'dark'
+  | 'regular'
+  | 'prominent'
+  | 'systemUltraThinMaterial'
+  | 'systemThinMaterial'
+  | 'systemMaterial'
+  | 'systemThickMaterial'
+  | 'systemChromeMaterial'
+  | 'systemUltraThinMaterialLight'
+  | 'systemThinMaterialLight'
+  | 'systemMaterialLight'
+  | 'systemThickMaterialLight'
+  | 'systemChromeMaterialLight'
+  | 'systemUltraThinMaterialDark'
+  | 'systemThinMaterialDark'
+  | 'systemMaterialDark'
+  | 'systemThickMaterialDark'
+  | 'systemChromeMaterialDark';
+export type ReplaceTypes = 'push' | 'pop';
+export type OrientationTypes =
+  | 'default'
+  | 'all'
+  | 'portrait'
+  | 'portrait_up'
+  | 'portrait_down'
+  | 'landscape'
+  | 'landscape_left'
+  | 'landscape_right';
+export type HeaderSubviewTypes =
+  | 'back'
+  | 'right'
+  | 'left'
+  | 'center'
+  | 'searchBar';
+export type StatusBarAnimationTypes = 'none' | 'fade' | 'slide';
+export type StatusBarStyleTypes = 'inverted' | 'auto' | 'light' | 'dark';
+export interface SearchBarProps {
+  /**
+   * Indicates whether to to obscure the underlying content
+   */
+  obscureBackground?: boolean;
+  /**
+   * Indicates whether to hide the navigation bar
+   */
+  hideNavigationBar?: boolean;
+  /**
+   * Indicates whether to hide the search bar when scrolling
+   */
+  hideWhenScrolling?: boolean;
+  /**
+   * The auto-capitalization behavior
+   */
+  autoCapitalize?: 'none' | 'words' | 'sentences' | 'characters';
+  /**
+   * Text displayed when search field is empty
+   */
+  placeholder?: string;
+  /**
+   * The search field background color
+   */
+  barTintColor?: string;
+  /**
+   * A callback that gets called when the text changes. It receives the current text value of the search bar.
+   */
+  onChangeText?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+  /**
+   * A callback that gets called when the cancel button is pressed
+   */
+  onCancelButtonPress?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+  /**
+   * A callback that gets called when the search button is pressed. It receives the current text value of the search bar.
+   */
+  onSearchButtonPress?: (
+    e: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => void;
+  /**
+   * A callback that gets called when search bar has received focus
+   */
+  onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+  /**
+   * A callback that gets called when search bar has lost focus
+   */
+  onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+}
 
 export type NativeStackNavigationEventMap = {
   /**
@@ -181,7 +288,7 @@ export type NativeStackNavigationOptions = {
    *
    * @platform ios
    */
-  headerBlurEffect?: ScreenStackHeaderConfigProps['blurEffect'];
+  headerBlurEffect?: BlurEffectTypes;
   /**
    * Tint color for the header. Changes the color of back button and title.
    */
@@ -238,30 +345,35 @@ export type NativeStackNavigationOptions = {
   /**
    * Sets the status bar animation (similar to the `StatusBar` component).
    * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
-   *
+   * On Android, requires `react-native-screens` version >=3.3.0.
-   * Only supported on iOS.
-   *
-   * @platform ios
    */
-  statusBarAnimation?: ScreenStackHeaderConfigProps['statusBarAnimation'];
+  statusBarAnimation?: StatusBarAnimationTypes;
+  /**
+   * Sets the status bar color (similar to the `StatusBar` component). Defaults to initial status bar color.
+   * Requires `react-native-screens` version >=3.3.0.
+   *
+   * @platform android
+   */
+  statusBarColor?: string;
   /**
    * Whether the status bar should be hidden on this screen.
    * Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
-   *
+   * On Android, requires `react-native-screens` version >=3.3.0.
-   * Only supported on iOS.
-   *
-   * @platform ios
    */
   statusBarHidden?: boolean;
   /**
    * Sets the status bar color (similar to the `StatusBar` component).
    * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
-   *
+   * On Android, requires `react-native-screens` version >=3.3.0.
-   * Only supported on iOS.
-   *
-   * @platform ios
    */
-  statusBarStyle?: ScreenStackHeaderConfigProps['statusBarStyle'];
+  statusBarStyle?: StatusBarStyleTypes;
+  /**
+   * Sets the translucency of the status bar. Defaults to `false`.
+   * Requires `react-native-screens` version >=3.3.0.
+   *
+   * @platform android
+   */
+  statusBarTranslucent?: boolean;
   /**
    * Style object for the scene content.
    */
@@ -280,7 +392,7 @@ export type NativeStackNavigationOptions = {
    * - "push": the new screen will perform push animation.
    * - "pop": the new screen will perform pop animation.
    */
-  animationTypeForReplace?: ScreenProps['replaceAnimation'];
+  animationTypeForReplace?: ReplaceTypes;
   /**
    * How the screen should animate when pushed or popped.
    *
@@ -292,7 +404,7 @@ export type NativeStackNavigationOptions = {
    * - "slide_from_left": slide in the new screen from left (Android only, uses default animation on iOS)
    * - "none": don't animate the screen
    */
-  animation?: ScreenProps['stackAnimation'];
+  animation?: AnimationTypes;
   /**
    * How should the screen be presented.
    *
@@ -305,7 +417,7 @@ export type NativeStackNavigationOptions = {
    * - "fullScreenModal": will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android.
    * - "formSheet": will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.
    */
-  presentation?: Exclude<ScreenProps['stackPresentation'], 'push'> | 'card';
+  presentation?: PresentationTypes;
   /**
    * The display orientation to use for the screen.
    *
@@ -319,7 +431,7 @@ export type NativeStackNavigationOptions = {
    * - "landscape_left": landscape-left orientation is permitted.
    * - "landscape_right": landscape-right orientation is permitted.
    */
-  orientation?: ScreenStackHeaderConfigProps['screenOrientation'];
+  orientation?: OrientationTypes;
 };
 
 export type NativeStackNavigatorProps = DefaultNavigatorOptions<

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

@@ -126,6 +126,7 @@ export default function HeaderConfig({
       largeTitleFontSize={headerLargeTitleStyleFlattened.fontSize}
       largeTitleFontWeight={headerLargeTitleStyleFlattened.fontWeight}
       largeTitleHideShadow={headerLargeTitleShadowVisible === false}
+      // @ts-ignore Renamed from screenOrientation to orientation
       screenOrientation={orientation}
       statusBarAnimation={statusBarAnimation}
       statusBarHidden={statusBarHidden}

packages/stack/CHANGELOG.md

@@ -3,17 +3,6 @@
 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.25](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.24...@react-navigation/stack@6.0.0-next.25) (2021-06-01)
-
-
-### Bug Fixes
-
-* tweak android q animation ([7d74bd7](https://github.com/react-navigation/react-navigation/commit/7d74bd73a7333f0b1373a05c9f06e981556feed2))
-
-
-
-
-
 # [6.0.0-next.24](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.23...@react-navigation/stack@6.0.0-next.24) (2021-05-29)
 
 

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.25",
+  "version": "6.0.0-next.24",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,7 +40,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.17",
+    "@react-navigation/elements": "^1.0.0-next.16",
     "color": "^3.1.3",
     "react-native-iphone-x-helper": "^1.3.0",
     "warn-once": "^0.1.0"
@@ -57,7 +57,7 @@
     "react-native-builder-bob": "^0.18.1",
     "react-native-gesture-handler": "~1.10.2",
     "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.0.0",
+    "react-native-screens": "^3.0.0",
     "typescript": "^4.2.3"
   },
   "peerDependencies": {

packages/stack/src/types.tsx

@@ -199,7 +199,64 @@ export type StackDescriptor = Descriptor<
 
 export type StackDescriptorMap = Record<string, StackDescriptor>;
 
+export type NativeScreenTraitsProps = {
+  /**
+   * In which orientation should the screen appear. It requires having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
+   * The following values are currently supported:
+   * - "default" - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation.
+   * - "all" – all orientations are permitted
+   * - "portrait" – portrait orientations are permitted
+   * - "portrait_up" – right-side portrait orientation is permitted
+   * - "portrait_down" – upside-down portrait orientation is permitted
+   * - "landscape" – landscape orientations are permitted
+   * - "landscape_left" – landscape-left orientation is permitted
+   * - "landscape_right" – landscape-right orientation is permitted
+   */
+  orientation?:
+    | 'default'
+    | 'all'
+    | 'portrait'
+    | 'portrait_up'
+    | 'portrait_down'
+    | 'landscape'
+    | 'landscape_left'
+    | 'landscape_right';
+  /**
+   * Sets the status bar animation (similar to the `StatusBar` component). Requires enabling (or deleting)
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
+   */
+  statusBarAnimation?: 'none' | 'fade' | 'slide';
+  /**
+   * Sets the status bar color (similar to the `StatusBar` component).
+   * Requires enabled `react-native-screens` version >=3.3.0.
+   *
+   * @platform android
+   */
+  statusBarColor?: string;
+  /**
+   * Whether the status bar should be hidden on this screen. Requires enabling (or deleting)
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
+   */
+  statusBarHidden?: boolean;
+  /**
+   * Sets the status bar color (similar to the `StatusBar` component). Requires enabling (or deleting)
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
+   */
+  statusBarStyle?: 'inverted' | 'auto' | 'light' | 'dark';
+  /**
+   * Sets the translucency of the status bar. Defaults to true. Requires enabled `react-native-screens` version >=3.3.0.
+   *
+   * @platform android
+   */
+  statusBarTranslucent?: boolean;
+};
+
 export type StackNavigationOptions = StackHeaderOptions &
+  NativeScreenTraitsProps &
   Partial<TransitionPreset> & {
     /**
      * String that can be displayed in the header as a fallback for `headerTitle`.

packages/stack/src/views/Screens.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Animated, View, ViewProps } from 'react-native';
 
+import type { NativeScreenTraitsProps } from '../types';
+
 let Screens: typeof import('react-native-screens') | undefined;
 
 try {
@@ -27,11 +29,12 @@ export const MaybeScreen = ({
   enabled,
   active,
   ...rest
-}: ViewProps & {
+}: ViewProps &
-  enabled: boolean;
+  NativeScreenTraitsProps & {
-  active: 0 | 1 | Animated.AnimatedInterpolation;
+    enabled: boolean;
-  children: React.ReactNode;
+    active: 0 | 1 | Animated.AnimatedInterpolation;
-}) => {
+    children: React.ReactNode;
+  }) => {
   if (Screens != null) {
     return (
       <Screens.Screen enabled={enabled} activityState={active} {...rest} />

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

@@ -555,6 +555,12 @@ export default class CardStack extends React.Component<Props, State> {
               headerTransparent,
               headerStyle,
               headerTintColor,
+              orientation,
+              statusBarAnimation,
+              statusBarColor,
+              statusBarHidden,
+              statusBarStyle,
+              statusBarTranslucent,
             } = scene.descriptor.options;
 
             const safeAreaInsetTop = insets.top;
@@ -607,6 +613,12 @@ export default class CardStack extends React.Component<Props, State> {
                 enabled={detachInactiveScreens}
                 active={isScreenActive}
                 pointerEvents="box-none"
+                orientation={orientation}
+                statusBarAnimation={statusBarAnimation}
+                statusBarColor={statusBarColor}
+                statusBarHidden={statusBarHidden}
+                statusBarStyle={statusBarStyle}
+                statusBarTranslucent={statusBarTranslucent}
               >
                 <CardContainer
                   index={index}

yarn.lock

@@ -18390,14 +18390,9 @@ react-native-safe-area-context@3.2.0, react-native-safe-area-context@~3.2.0:
   integrity sha512-k2Nty4PwSnrg9HwrYeeE+EYqViYJoOFwEy9LxL5RIRfoqxAq/uQXNGwpUg2/u4gnKpBbEPa9eRh15KKMe/VHkA==
 
 react-native-screens@^3.0.0:
-  version "3.2.0"
+  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.2.0.tgz#e2c8a4879c72f49af5b49e8859c84978a95d112b"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.3.0.tgz#d4464a96620b85d09e46bd6865b5f48456c244f0"
-  integrity sha512-pV4a32neQA69xhVsL9k1J/rM/SiP5zgGHjJsnNVEcuhBu+dlsutT2YFszQN4MgpP2dhHHu1O7DyRSHti+wh7Wg==
+  integrity sha512-ni11jC6I9cFVXdLIDwkgafDHw/STXUNzkR5Fx3w8Wikdzi8gfTEan2kiOm7aS42d2F/LXddZ6i74Z2em0L6LPQ==
-
-react-native-screens@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.0.0.tgz#ee4c2d69abf7411603868b57214feec5e8f637fa"
-  integrity sha512-35II5oxTaVp3OP8y0eLPOPpQkxG4fRKQ+dL1YSE1we5kCZFOU0l/Rn0T79HbyUu1LPwUZr6lZupPs0ULnRyMuQ==
 
 react-native-tab-view@^3.0.1:
   version "3.0.1"