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

@@ -32,10 +32,10 @@
     "react-native-appearance": "~0.3.3",
     "react-native-gesture-handler": "~1.10.2",
     "react-native-pager-view": "~5.0.12",
-    "react-native-paper": "^4.9.0",
+    "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/server/babel.config.js

@@ -7,14 +7,9 @@ const alias = Object.fromEntries(
   fs
     .readdirSync(packages)
     .filter((name) => !name.startsWith('.'))
-    .map((name) => [
+    .map((name) => [name, require(`../../packages/${name}/package.json`)])
-      `@react-navigation/${name}`,
+    .filter(([, pak]) => pak.source != null)
-      path.resolve(
+    .map(([name, pak]) => [pak.name, path.resolve(packages, name, pak.source)])
-        packages,
-        name,
-        require(`../../packages/${name}/package.json`).source
-      ),
-    ])
 );
 
 module.exports = {

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

example/webpack.config.js

@@ -8,8 +8,6 @@ const packages = path.resolve(__dirname, '..', 'packages');
 module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
 
-  config.context = path.resolve(__dirname, '..');
-
   config.module.rules.push({
     test: /\.(js|ts|tsx)$/,
     include: /(packages|example)\/.+/,
@@ -19,19 +17,25 @@ module.exports = async function (env, argv) {
 
   Object.assign(config.resolve.alias, {
     'react': path.resolve(node_modules, 'react'),
-    'react-native': path.resolve(node_modules, 'react-native-web'),
+    'react-native': path.resolve(__dirname, 'node_modules', 'react-native-web'),
-    'react-native-web': path.resolve(node_modules, 'react-native-web'),
+    'react-native-web': path.resolve(
+      __dirname,
+      'node_modules',
+      'react-native-web'
+    ),
     '@expo/vector-icons': path.resolve(node_modules, '@expo/vector-icons'),
   });
 
   fs.readdirSync(packages)
     .filter((name) => !name.startsWith('.'))
     .forEach((name) => {
-      config.resolve.alias[`@react-navigation/${name}`] = path.resolve(
+      const pak = require(`../packages/${name}/package.json`);
-        packages,
+
-        name,
+      if (pak.source == null) {
-        require(`../packages/${name}/package.json`).source
+        return;
-      );
+      }
+
+      config.resolve.alias[pak.name] = path.resolve(packages, name, pak.source);
     });
 
   return config;

packages/bottom-tabs/package.json

@@ -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/package.json

@@ -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/src/PlatformPressable.tsx

@@ -53,7 +53,7 @@ export default function PlatformPressable({
   };
 
   const handlePressIn = (e: GestureResponderEvent) => {
-    animateTo(pressOpacity, 150);
+    animateTo(pressOpacity, 0);
     onPressIn?.(e);
   };
 

packages/material-bottom-tabs/package.json

@@ -53,7 +53,7 @@
     "react": "~16.13.1",
     "react-native": "~0.63.4",
     "react-native-builder-bob": "^0.18.1",
-    "react-native-paper": "^4.9.0",
+    "react-native-paper": "^4.9.1",
     "react-native-safe-area-context": "~3.2.0",
     "react-native-vector-icons": "^8.1.0",
     "typescript": "^4.2.3"

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/DebugContainer.native.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Platform, View, ViewProps } from 'react-native';
+// @ts-ignore Getting private component
+import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
+import type { StackPresentationTypes } from 'react-native-screens';
+
+type ContainerProps = ViewProps & {
+  stackPresentation: StackPresentationTypes;
+  children: React.ReactNode;
+};
+
+let Container = (View as unknown) as React.ComponentType<ContainerProps>;
+
+if (process.env.NODE_ENV !== 'production') {
+  const DebugContainer = (props: ContainerProps) => {
+    const { stackPresentation, ...rest } = props;
+
+    if (Platform.OS === 'ios' && stackPresentation !== 'push') {
+      // This is necessary for LogBox
+      return (
+        <AppContainer>
+          <View {...rest} />
+        </AppContainer>
+      );
+    }
+
+    return <View {...rest} />;
+  };
+
+  Container = DebugContainer;
+}
+
+export default Container;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { View, ViewProps } from 'react-native';
+import type { StackPresentationTypes } from 'react-native-screens';
+
+type ContainerProps = ViewProps & {
+  stackPresentation: StackPresentationTypes;
+  children: React.ReactNode;
+};
+
+export default function Container(props: ContainerProps) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { stackPresentation: _, ...rest } = props;
+  return <View {...rest} />;
+}

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

@@ -0,0 +1,13 @@
+// @ts-ignore: No declaration available
+import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
+
+export function processFonts(
+  fontFamilies: (string | undefined)[]
+): (string | undefined)[] {
+  // @ts-ignore: React Native types are incorrect here and don't consider fontFamily a style value
+  const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
+  if (typeof fontFamilyProcessor === 'function') {
+    return fontFamilies.map(fontFamilyProcessor);
+  }
+  return fontFamilies;
+}

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

@@ -1,13 +1,5 @@
-// @ts-ignore: No declaration available
-import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
-
 export function processFonts(
-  fontFamilies: (string | undefined)[]
+  _: (string | undefined)[]
 ): (string | undefined)[] {
-  // @ts-ignore: React Native types are incorrect here and don't consider fontFamily a style value
+  throw new Error('Not supported on Web');
-  const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
-  if (typeof fontFamilyProcessor === 'function') {
-    return fontFamilies.map(fontFamilyProcessor);
-  }
-  return fontFamilies;
 }

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/native-stack/src/views/NativeStackView.tsx

@@ -7,9 +7,7 @@ import {
   useTheme,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { Platform, StyleSheet, View, ViewProps } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
-// @ts-ignore Getting private component
-import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
 import {
   Screen,
   ScreenStack,
@@ -22,33 +20,11 @@ import type {
   NativeStackNavigationHelpers,
   NativeStackNavigationOptions,
 } from '../types';
+import DebugContainer from './DebugContainer';
 import HeaderConfig from './HeaderConfig';
 
 const isAndroid = Platform.OS === 'android';
 
-type ContainerProps = ViewProps & { stackPresentation: StackPresentationTypes };
-
-let Container = (View as unknown) as React.ComponentType<ContainerProps>;
-
-if (process.env.NODE_ENV !== 'production') {
-  const DebugContainer = (props: ContainerProps) => {
-    const { stackPresentation, ...rest } = props;
-
-    if (Platform.OS === 'ios' && stackPresentation !== 'push') {
-      // This is necessary for LogBox
-      return (
-        <AppContainer>
-          <View {...rest} />
-        </AppContainer>
-      );
-    }
-
-    return <View {...rest} />;
-  };
-
-  Container = DebugContainer;
-}
-
 const MaybeNestedStack = ({
   options,
   route,
@@ -81,7 +57,7 @@ const MaybeNestedStack = ({
   }, [headerShown, presentation, route.name]);
 
   const content = (
-    <Container
+    <DebugContainer
       style={[
         styles.container,
         presentation !== 'transparentModal' &&
@@ -93,7 +69,7 @@ const MaybeNestedStack = ({
       stackPresentation={presentation === 'card' ? 'push' : presentation}
     >
       {children}
-    </Container>
+    </DebugContainer>
   );
 
   if (isHeaderInModal) {

packages/stack/package.json

@@ -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/TransitionConfigs/CardStyleInterpolators.tsx

@@ -302,12 +302,12 @@ export function forScaleFromCenterAndroid({
     closing,
     current.progress.interpolate({
       inputRange: [0, 1],
-      outputRange: [0.9, 1],
+      outputRange: [0.925, 1],
       extrapolate: 'clamp',
     }),
     progress.interpolate({
       inputRange: [0, 1, 2],
-      outputRange: [0.85, 1, 1.1],
+      outputRange: [0.85, 1, 1.075],
     })
   );
 

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

@@ -18365,10 +18365,10 @@ react-native-pager-view@~5.0.12:
   resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-5.0.12.tgz#5106735d944e7f876b006377ab6a18859bf7730c"
   integrity sha512-QmHUnQeP2qcxDofEOnKRmoUue0RaT55lhNJDfcQ1/SNuxif4Q2UyvDfqeItm1+toaE5tVnXqoreZh82FqUqnvw==
 
-react-native-paper@^4.9.0:
+react-native-paper@^4.9.1:
-  version "4.9.0"
+  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.9.0.tgz#af67ae6fd92c13d8cf5e37700ad2b37aac85b2ed"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.9.1.tgz#9b2aadcb1bd48ff6825641df60821e20e0cc8276"
-  integrity sha512-1+7V5wJgNcEdTE+sckGF+ABImLQbWdYFGTEqkVsqdsd1mKxRSVeHJXqeQAZwiFJAZJiHzxL403rKPNdi8ZpGng==
+  integrity sha512-vGgNvQE/GlNSjwJw+1LW0yoULTh7enxln16bYfOoI9Xiz1NOKxhfyQN0/LlZn7JFhRdbXW+3+6yMBJ50Emt+ng==
   dependencies:
     "@callstack/react-theme-provider" "^3.0.6"
     color "^3.1.2"
@@ -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"