@react-navigation/native-stack 7.0.0-rc.27 → 7.0.0-rc.29

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native-stack",
   "description": "Native stack navigator using react-native-screens",
-  "version": "7.0.0-rc.27",
+  "version": "7.0.0-rc.29",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -52,27 +52,27 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^2.0.0-rc.24",
+    "@react-navigation/elements": "^2.0.0-rc.26",
     "warn-once": "^0.1.1"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@react-navigation/native": "^7.0.0-rc.19",
+    "@react-navigation/native": "^7.0.0-rc.21",
     "@testing-library/react-native": "^12.4.3",
     "@types/react": "~18.2.79",
     "del-cli": "^5.1.0",
     "react": "18.2.0",
-    "react-native": "0.74.2",
+    "react-native": "0.74.5",
     "react-native-builder-bob": "^0.29.0",
-    "react-native-screens": "3.32.0",
+    "react-native-screens": "4.0.0-beta.9",
     "typescript": "^5.5.2"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^7.0.0-rc.19",
+    "@react-navigation/native": "^7.0.0-rc.21",
     "react": ">= 18.2.0",
-    "react-native": ">= 0.72.0",
+    "react-native": "*",
     "react-native-safe-area-context": ">= 4.0.0",
-    "react-native-screens": ">= 3.21.0"
+    "react-native-screens": ">= 4.0.0"
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -99,5 +99,5 @@
       ]
     ]
   },
-  "gitHead": "cfebf105844ac1674eee28ec1ff4ccd30e7895ee"
+  "gitHead": "458dac172e46ee9dd6c6e27ae23417d0d371e0d6"
 }

package/src/index.tsx

@@ -17,7 +17,9 @@ export { useAnimatedHeaderHeight } from './utils/useAnimatedHeaderHeight';
  * Types
  */
 export type {
+  NativeStackHeaderLeftProps,
   NativeStackHeaderProps,
+  NativeStackHeaderRightProps,
   NativeStackNavigationEventMap,
   NativeStackNavigationOptions,
   NativeStackNavigationProp,

package/src/navigators/createNativeStackNavigator.tsx

@@ -33,7 +33,7 @@ function NativeStackNavigator({
   UNSTABLE_getStateForRouteNamesChange,
   ...rest
 }: NativeStackNavigatorProps) {
-  const { state, descriptors, navigation, NavigationContent } =
+  const { state, describe, descriptors, navigation, NavigationContent } =
     useNavigationBuilder<
       StackNavigationState<ParamListBase>,
       StackRouterOptions,
@@ -84,6 +84,7 @@ function NativeStackNavigator({
         state={state}
         navigation={navigation}
         descriptors={descriptors}
+        describe={describe}
       />
     </NavigationContent>
   );

package/src/types.tsx

@@ -21,7 +21,6 @@ import type {
   ScreenProps,
   ScreenStackHeaderConfigProps,
   SearchBarProps,
-  SheetDetentTypes,
 } from 'react-native-screens';
 
 export type NativeStackNavigationEventMap = {
@@ -37,6 +36,15 @@ export type NativeStackNavigationEventMap = {
    * Event which fires when a swipe back is canceled on iOS.
    */
   gestureCancel: { data: undefined };
+  /**
+   * Event which fires when screen is in sheet presentation & it's detent changes.
+   *
+   * In payload it caries two fields:
+   *
+   * * `index` - current detent index in the `sheetAllowedDetents` array,
+   * * `stable` - on Android `false` value means that the user is dragging the sheet or it is settling; on iOS it is always `true`.
+   */
+  sheetDetentChange: { data: { index: number; stable: boolean } };
 };
 
 export type NativeStackNavigationProp<
@@ -439,6 +447,13 @@ export type NativeStackNavigationOptions = {
    * Style object for the scene content.
    */
   contentStyle?: StyleProp<ViewStyle>;
+  /**
+   * Style object for the screen native component. This might help to workaround
+   * some issues when using `formSheet` presentation.
+   *
+   * Only `backgroundColor` is accepted.
+   */
+  unstable_screenStyle?: ScreenProps['unstable_screenStyle'];
   /**
    * Whether the gesture to dismiss should use animation provided to `animation` prop. Defaults to `false`.
    *
@@ -497,11 +512,14 @@ export type NativeStackNavigationOptions = {
    * Supported values:
    * - "default": use the platform default animation
    * - "fade": fade screen in or out
+   * - "fade_from_bottom" – performs a fade from bottom animation
    * - "flip": flip the screen, requires presentation: "modal" (iOS only)
    * - "simple_push": use the platform default animation, but without shadow and native header transition (iOS only)
    * - "slide_from_bottom": slide in the new screen from bottom
    * - "slide_from_right": slide in the new screen from right (Android only, uses default animation on iOS)
    * - "slide_from_left": slide in the new screen from left (Android only, uses default animation on iOS)
+   * - "ios_from_right" - iOS like slide in animation. pushes in the new screen from right to left (Android only, resolves to default transition on iOS)
+   * - "ios_from_left" - iOS like slide in animation. pushes in the new screen from left to right (Android only, resolves to default transition on iOS)
    * - "none": don't animate the screen
    *
    * Only supported on iOS and Android.
@@ -532,17 +550,32 @@ export type NativeStackNavigationOptions = {
   /**
    * Describes heights where a sheet can rest.
    * Works only when `presentation` is set to `formSheet`.
-   * Defaults to `large`.
    *
-   * Available values:
+   * Heights should be described as fraction (a number from `[0, 1]` interval) of screen height / maximum detent height.
+   * You can pass an array of ascending values each defining allowed sheet detent. iOS accepts any number of detents,
+   * while **Android is limited to three**.
    *
-   * - `large` - only large detent level will be allowed
-   * - `medium` - only medium detent level will be allowed
-   * - `all` - all detent levels will be allowed
+   * There is also possibility to specify `fitToContents` literal, which intents to set the sheet height
+   * to the height of its contents.
    *
-   * @platform ios
+   * Please note that the array **must** be sorted in ascending order. This invariant is verified only in developement mode,
+   * where violation results in error.
+   *
+   * **Android is limited to up 3 values in the array** -- any surplus values, beside first three are ignored.
+   *
+   * Defaults to `[1.0]`.
+   */
+  sheetAllowedDetents?: number[] | 'fitToContents';
+  /**
+   * Integer value describing elevation of the sheet, impacting shadow on the top edge of the sheet.
+   *
+   * Not dynamic - changing it after the component is rendered won't have an effect.
+   *
+   * Defaults to `24`.
+   *
+   * @platform Android
    */
-  sheetAllowedDetents?: SheetDetentTypes;
+  sheetElevation?: number;
   /**
    * Whether the sheet should expand to larger detent when scrolling.
    * Works only when `presentation` is set to `formSheet`.
@@ -558,10 +591,20 @@ export type NativeStackNavigationOptions = {
    * If set to non-negative value it will try to render sheet with provided radius, else it will apply system default.
    *
    * If left unset system default is used.
-   *
-   * @platform ios
    */
   sheetCornerRadius?: number;
+  /**
+   * Index of the detent the sheet should expand to after being opened.
+   * Works only when `stackPresentation` is set to `formSheet`.
+   *
+   * If the specified index is out of bounds of `sheetAllowedDetents` array, in dev environment more error will be thrown,
+   * in production the value will be reset to default value.
+   *
+   * Additionaly there is `last` value available, when set the sheet will expand initially to last (largest) detent.
+   *
+   * Defaults to `0` - which represents first detent in the detents array.
+   */
+  sheetInitialDetentIndex?: number | 'last';
   /**
    * Boolean indicating whether the sheet shows a grabber at the top.
    * Works only when `presentation` is set to `formSheet`.
@@ -572,19 +615,19 @@ export type NativeStackNavigationOptions = {
   sheetGrabberVisible?: boolean;
   /**
    * The largest sheet detent for which a view underneath won't be dimmed.
-   * Works only when `presentation` is se tto `formSheet`.
+   * Works only when `presentation` is set to `formSheet`.
    *
-   * If this prop is set to:
+   * This prop can be set to an number, which indicates index of detent in `sheetAllowedDetents` array for which
+   * there won't be a dimming view beneath the sheet.
    *
-   * - `large` - the view underneath won't be dimmed at any detent level
-   * - `medium` - the view underneath will be dimmed only when detent level is `large`
-   * - `all` - the view underneath will be dimmed for any detent level
+   * Additionaly there are following options available:
    *
-   * Defaults to `all`.
+   * * `none` - there will be dimming view for all detents levels,
+   * * `last` - there won't be a dimming view for any detent level.
    *
-   * @platform ios
+   * Defaults to `none`, indicating that the dimming view should be always present.
    */
-  sheetLargestUndimmedDetent?: SheetDetentTypes;
+  sheetLargestUndimmedDetentIndex?: number | 'none' | 'last';
   /**
    * The display orientation to use for the screen.
    *
@@ -609,6 +652,19 @@ export type NativeStackNavigationOptions = {
    * Only supported on iOS and Android.
    */
   freezeOnBlur?: boolean;
+  /**
+   * Footer component that can be used alongside formSheet stack presentation style.
+   *
+   * This option is provided, because due to implementation details it might be problematic
+   * to implement such layout with JS-only code.
+   *
+   * Please note that this prop is marked as unstable and might be subject of breaking changes,
+   * including removal, in particular when we find solution that will make implementing it with JS
+   * straightforward.
+   *
+   * @platform android
+   */
+  unstable_sheetFooter?: () => React.ReactNode;
 };
 
 export type NativeStackNavigatorProps = DefaultNavigatorOptions<

package/src/views/DebugContainer.native.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
-import { Platform, View, type ViewProps } from 'react-native';
+import { Platform, type ViewProps } from 'react-native';
 // @ts-expect-error Getting private component
 import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
-import type { StackPresentationTypes } from 'react-native-screens';
+import {
+  ScreenContentWrapper,
+  type StackPresentationTypes,
+} from 'react-native-screens';
 
 type ContainerProps = ViewProps & {
   stackPresentation: StackPresentationTypes;
@@ -15,22 +18,26 @@ type ContainerProps = ViewProps & {
  * for detailed explanation.
  */
 export let DebugContainer = (props: ContainerProps) => {
-  return <View {...props} collapsable={false} />;
+  return <ScreenContentWrapper {...props} />;
 };
 
 if (process.env.NODE_ENV !== 'production') {
   DebugContainer = (props: ContainerProps) => {
     const { stackPresentation, ...rest } = props;
 
-    if (Platform.OS === 'ios' && stackPresentation !== 'push') {
+    if (
+      Platform.OS === 'ios' &&
+      stackPresentation !== 'push' &&
+      stackPresentation !== 'formSheet'
+    ) {
       // This is necessary for LogBox
       return (
         <AppContainer>
-          <View {...rest} collapsable={false} />
+          <ScreenContentWrapper {...rest} />
         </AppContainer>
       );
     }
 
-    return <View {...rest} collapsable={false} />;
+    return <ScreenContentWrapper {...rest} />;
   };
 }

package/src/views/DebugContainer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, type ViewProps } from 'react-native';
-import type { StackPresentationTypes } from 'react-native-screens';
+import { type StackPresentationTypes } from 'react-native-screens';
 
 type ContainerProps = ViewProps & {
   stackPresentation: StackPresentationTypes;

package/src/views/FooterComponent.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ScreenFooter } from 'react-native-screens';
+
+type FooterProps = {
+  children?: React.ReactNode;
+};
+
+export function FooterComponent({ children }: FooterProps) {
+  return <ScreenFooter collapsable={false}>{children}</ScreenFooter>;
+}