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

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.28",
   "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.25",
     "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.20",
     "@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-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.20",
     "react": ">= 18.2.0",
     "react-native": ">= 0.72.0",
     "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": "1ad42666923bd76dd9e7dd731ba39cc31dd27317"
 }

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>;
+}

package/src/views/HeaderConfig.tsx

@@ -164,9 +164,11 @@ export function HeaderConfig({
    * - Back button should stay visible when `headerLeft` is specified
    * - If `headerTitle` for Android is specified, so we only need to remove the title and keep the back button
    */
-  const backButtonInCustomView = headerBackVisible
-    ? headerLeftElement != null
-    : Platform.OS === 'android' && headerTitleElement != null;
+  const backButtonInCustomView =
+    headerBackVisible ||
+    (Platform.OS === 'android' &&
+      headerTitleElement != null &&
+      headerLeftElement == null);
 
   const translucent =
     headerBackground != null ||
@@ -188,6 +190,8 @@ export function HeaderConfig({
     // Back button menu is not disabled
     headerBackButtonMenuEnabled !== false;
 
+  const isCenterViewRenderedAndroid = headerTitleAlign === 'center';
+
   return (
     <ScreenStackHeaderConfig
       backButtonInCustomView={backButtonInCustomView}
@@ -250,25 +254,30 @@ export function HeaderConfig({
       ) : (
         <>
           {headerLeftElement != null || typeof headerTitle === 'function' ? (
-            <ScreenStackHeaderLeftView>
-              <View style={styles.row}>
-                {headerLeftElement}
-                {headerTitleAlign !== 'center' ? (
-                  typeof headerTitle === 'function' ? (
-                    headerTitleElement
-                  ) : (
+            // The style passed to header left, together with title element being wrapped
+            // in flex view is reqruied for proper header layout, in particular,
+            // for the text truncation to work.
+            <ScreenStackHeaderLeftView
+              style={!isCenterViewRenderedAndroid ? { flex: 1 } : null}
+            >
+              {headerLeftElement}
+              {headerTitleAlign !== 'center' ? (
+                typeof headerTitle === 'function' ? (
+                  <View style={{ flex: 1 }}>{headerTitleElement}</View>
+                ) : (
+                  <View style={{ flex: 1 }}>
                     <HeaderTitle
                       tintColor={tintColor}
                       style={headerTitleStyleSupported}
                     >
                       {titleText}
                     </HeaderTitle>
-                  )
-                ) : null}
-              </View>
+                  </View>
+                )
+              ) : null}
             </ScreenStackHeaderLeftView>
           ) : null}
-          {headerTitleAlign === 'center' ? (
+          {isCenterViewRenderedAndroid ? (
             <ScreenStackHeaderCenterView>
               {typeof headerTitle === 'function' ? (
                 headerTitleElement
@@ -300,10 +309,3 @@ export function HeaderConfig({
     </ScreenStackHeaderConfig>
   );
 }
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-});

package/src/views/NativeStackView.native.tsx

@@ -11,6 +11,7 @@ import {
   NavigationRouteContext,
   type ParamListBase,
   type Route,
+  type RouteProp,
   StackActions,
   type StackNavigationState,
   usePreventRemoveContext,
@@ -49,6 +50,7 @@ import { AnimatedHeaderHeightContext } from '../utils/useAnimatedHeaderHeight';
 import { useDismissedRouteError } from '../utils/useDismissedRouteError';
 import { useInvalidPreventRemoveError } from '../utils/useInvalidPreventRemoveError';
 import { DebugContainer } from './DebugContainer';
+import { FooterComponent } from './FooterComponent';
 import { HeaderConfig } from './HeaderConfig';
 
 const ANDROID_DEFAULT_HEADER_HEIGHT = 56;
@@ -60,6 +62,7 @@ const MaybeNestedStack = ({
   headerHeight,
   headerTopInsetEnabled,
   children,
+  isPreloaded,
 }: {
   options: NativeStackNavigationOptions;
   route: Route<string>;
@@ -67,9 +70,15 @@ const MaybeNestedStack = ({
   headerHeight: number;
   headerTopInsetEnabled: boolean;
   children: React.ReactNode;
+  isPreloaded?: boolean;
 }) => {
   const { colors } = useTheme();
-  const { header, headerShown = true, contentStyle } = options;
+  const {
+    header,
+    headerShown = true,
+    contentStyle,
+    unstable_screenStyle = null,
+  } = options;
 
   const isHeaderInModal =
     Platform.OS === 'android'
@@ -92,7 +101,11 @@ const MaybeNestedStack = ({
   const content = (
     <DebugContainer
       style={[
-        styles.container,
+        presentation === 'formSheet'
+          ? Platform.OS === 'ios'
+            ? styles.absolute
+            : null
+          : styles.container,
         presentation !== 'transparentModal' &&
           presentation !== 'containedTransparentModal' && {
             backgroundColor: colors.background,
@@ -112,7 +125,8 @@ const MaybeNestedStack = ({
           enabled
           isNativeStack
           hasLargeHeader={options.headerLargeTitle ?? false}
-          style={StyleSheet.absoluteFill}
+          style={[StyleSheet.absoluteFill, unstable_screenStyle]}
+          activityState={isPreloaded ? 0 : 2}
         >
           {content}
           <HeaderConfig
@@ -137,6 +151,7 @@ type SceneViewProps = {
   previousDescriptor?: NativeStackDescriptor;
   nextDescriptor?: NativeStackDescriptor;
   isPresentationModal?: boolean;
+  isPreloaded?: boolean;
   onWillDisappear: () => void;
   onWillAppear: () => void;
   onAppear: () => void;
@@ -145,6 +160,7 @@ type SceneViewProps = {
   onHeaderBackButtonClicked: ScreenProps['onHeaderBackButtonClicked'];
   onNativeDismissCancelled: ScreenProps['onDismissed'];
   onGestureCancel: ScreenProps['onGestureCancel'];
+  onSheetDetentChanged: ScreenProps['onSheetDetentChanged'];
 };
 
 const SceneView = ({
@@ -154,6 +170,7 @@ const SceneView = ({
   previousDescriptor,
   nextDescriptor,
   isPresentationModal,
+  isPreloaded,
   onWillDisappear,
   onWillAppear,
   onAppear,
@@ -162,6 +179,7 @@ const SceneView = ({
   onHeaderBackButtonClicked,
   onNativeDismissCancelled,
   onGestureCancel,
+  onSheetDetentChanged,
 }: SceneViewProps) => {
   const { route, navigation, options, render } = descriptor;
 
@@ -170,6 +188,7 @@ const SceneView = ({
     animationMatchesGesture,
     presentation = isPresentationModal ? 'modal' : 'card',
     fullScreenGestureEnabled,
+    unstable_screenStyle = null,
   } = options;
 
   const {
@@ -190,19 +209,30 @@ const SceneView = ({
     navigationBarTranslucent,
     navigationBarHidden,
     orientation,
-    sheetAllowedDetents = 'large',
-    sheetLargestUndimmedDetent = 'all',
+    sheetAllowedDetents = [1.0],
+    sheetLargestUndimmedDetentIndex = -1,
     sheetGrabberVisible = false,
     sheetCornerRadius = -1.0,
+    sheetElevation = 24,
     sheetExpandsWhenScrolledToEdge = true,
+    sheetInitialDetentIndex = 0,
     statusBarAnimation,
     statusBarHidden,
     statusBarStyle,
     statusBarTranslucent,
     statusBarBackgroundColor,
+    unstable_sheetFooter = null,
     freezeOnBlur,
   } = options;
 
+  // We want to allow only backgroundColor setting for now.
+  // This allows to workaround one issue with truncated
+  // content with formSheet presentation.
+  unstable_screenStyle =
+    unstable_screenStyle && presentation === 'formSheet'
+      ? { backgroundColor: unstable_screenStyle.backgroundColor }
+      : null;
+
   if (gestureDirection === 'vertical' && Platform.OS === 'ios') {
     // for `vertical` direction to work, we need to set `fullScreenGestureEnabled` to `true`
     // so the screen can be dismissed from any point on screen.
@@ -329,12 +359,15 @@ const SceneView = ({
       key={route.key}
       enabled
       isNativeStack
+      activityState={isPreloaded ? 0 : 2}
+      style={[StyleSheet.absoluteFill, unstable_screenStyle]}
       accessibilityElementsHidden={!focused}
       importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
-      style={StyleSheet.absoluteFill}
       hasLargeHeader={options.headerLargeTitle ?? false}
       customAnimationOnSwipe={animationMatchesGesture}
       fullScreenSwipeEnabled={fullScreenGestureEnabled}
+      fullScreenSwipeShadowEnabled={fullScreenGestureShadowEnabled}
+      freezeOnBlur={freezeOnBlur}
       gestureEnabled={
         Platform.OS === 'android'
           ? // This prop enables handling of system back gestures on Android
@@ -352,9 +385,11 @@ const SceneView = ({
       stackAnimation={animation}
       screenOrientation={orientation}
       sheetAllowedDetents={sheetAllowedDetents}
-      sheetLargestUndimmedDetent={sheetLargestUndimmedDetent}
+      sheetLargestUndimmedDetentIndex={sheetLargestUndimmedDetentIndex}
       sheetGrabberVisible={sheetGrabberVisible}
+      sheetInitialDetentIndex={sheetInitialDetentIndex}
       sheetCornerRadius={sheetCornerRadius}
+      sheetElevation={sheetElevation}
       sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
       statusBarAnimation={statusBarAnimation}
       statusBarHidden={statusBarHidden}
@@ -369,6 +404,7 @@ const SceneView = ({
       onDisappear={onDisappear}
       onDismissed={onDismissed}
       onGestureCancel={onGestureCancel}
+      onSheetDetentChanged={onSheetDetentChanged}
       gestureResponseDistance={gestureResponseDistance}
       nativeBackButtonDismissalEnabled={false} // on Android
       onHeaderBackButtonClicked={onHeaderBackButtonClicked}
@@ -423,12 +459,9 @@ const SceneView = ({
           },
         }
       )}
-      freezeOnBlur={freezeOnBlur}
       // When ts-expect-error is added, it affects all the props below it
       // So we keep any props that need it at the end
       // Otherwise invalid props may not be caught by TypeScript
-      // @ts-expect-error Props available in newer versions of `react-native-screens`
-      fullScreenSwipeShadowEnabled={fullScreenGestureShadowEnabled} // 3.33.0 onwards
     >
       <NavigationContext.Provider value={navigation}>
         <NavigationRouteContext.Provider value={route}>
@@ -498,7 +531,7 @@ const SceneView = ({
                *
                * HeaderConfig must not be first child of a Screen.
                * See https://github.com/software-mansion/react-native-screens/pull/1825
-               * for detailed explanation
+               * for detailed explanation.
                */}
               <HeaderConfig
                 {...options}
@@ -518,6 +551,9 @@ const SceneView = ({
                 headerTopInsetEnabled={headerTopInsetEnabled}
                 canGoBack={headerBack !== undefined}
               />
+              {presentation === 'formSheet' && unstable_sheetFooter && (
+                <FooterComponent>{unstable_sheetFooter()}</FooterComponent>
+              )}
             </HeaderHeightContext.Provider>
           </AnimatedHeaderHeightContext.Provider>
         </NavigationRouteContext.Provider>
@@ -530,9 +566,18 @@ type Props = {
   state: StackNavigationState<ParamListBase>;
   navigation: NativeStackNavigationHelpers;
   descriptors: NativeStackDescriptorMap;
+  describe: (
+    route: RouteProp<ParamListBase>,
+    placeholder: boolean
+  ) => NativeStackDescriptor;
 };
 
-export function NativeStackView({ state, navigation, descriptors }: Props) {
+export function NativeStackView({
+  state,
+  navigation,
+  descriptors,
+  describe,
+}: Props) {
   const { setNextDismissedKey } = useDismissedRouteError(state);
 
   const { colors } = useTheme();
@@ -541,11 +586,18 @@ export function NativeStackView({ state, navigation, descriptors }: Props) {
 
   const modalRouteKeys = getModalRouteKeys(state.routes, descriptors);
 
+  const preloadedDescriptors =
+    state.preloadedRoutes.reduce<NativeStackDescriptorMap>((acc, route) => {
+      acc[route.key] = acc[route.key] || describe(route, true);
+      return acc;
+    }, {});
+
   return (
     <SafeAreaProviderCompat style={{ backgroundColor: colors.background }}>
       <ScreenStack style={styles.container}>
-        {state.routes.map((route, index) => {
-          const descriptor = descriptors[route.key];
+        {state.routes.concat(state.preloadedRoutes).map((route, index) => {
+          const descriptor =
+            descriptors[route.key] ?? preloadedDescriptors[route.key];
           const isFocused = state.index === index;
           const previousKey = state.routes[index - 1]?.key;
           const nextKey = state.routes[index + 1]?.key;
@@ -556,6 +608,10 @@ export function NativeStackView({ state, navigation, descriptors }: Props) {
 
           const isModal = modalRouteKeys.includes(route.key);
 
+          const isPreloaded =
+            preloadedDescriptors[route.key] !== undefined &&
+            descriptors[route.key] === undefined;
+
           return (
             <SceneView
               key={route.key}
@@ -565,6 +621,7 @@ export function NativeStackView({ state, navigation, descriptors }: Props) {
               previousDescriptor={previousDescriptor}
               nextDescriptor={nextDescriptor}
               isPresentationModal={isModal}
+              isPreloaded={isPreloaded}
               onWillDisappear={() => {
                 navigation.emit({
                   type: 'transitionStart',
@@ -622,6 +679,16 @@ export function NativeStackView({ state, navigation, descriptors }: Props) {
                   target: route.key,
                 });
               }}
+              onSheetDetentChanged={(event) => {
+                navigation.emit({
+                  type: 'sheetDetentChange',
+                  target: route.key,
+                  data: {
+                    index: event.nativeEvent.index,
+                    stable: event.nativeEvent.isStable,
+                  },
+                });
+              }}
             />
           );
         })}