@react-navigation/native-stack 7.8.6 → 8.0.0-alpha.0

package/src/views/NativeStackView.native.tsx

@@ -4,12 +4,11 @@ import {
   HeaderBackContext,
   HeaderHeightContext,
   HeaderShownContext,
-  SafeAreaProviderCompat,
   useFrameSize,
 } from '@react-navigation/elements';
+import { SafeAreaProviderCompat } from '@react-navigation/elements/internal';
 import {
-  NavigationContext,
-  NavigationRouteContext,
+  NavigationProvider,
   type ParamListBase,
   type RouteProp,
   StackActions,
@@ -21,7 +20,6 @@ import * as React from 'react';
 import {
   Animated,
   Platform,
-  StatusBar,
   StyleSheet,
   useAnimatedValue,
   View,
@@ -79,7 +77,6 @@ const SceneView = ({
   shouldFreeze,
   descriptor,
   previousDescriptor,
-  nextDescriptor,
   isPresentationModal,
   isPreloaded,
   onWillDisappear,
@@ -94,19 +91,15 @@ const SceneView = ({
 }: SceneViewProps) => {
   const { route, navigation, options, render } = descriptor;
 
-  let {
-    animation,
-    animationMatchesGesture,
-    presentation = isPresentationModal ? 'modal' : 'card',
-    fullScreenGestureEnabled,
-  } = options;
-
   const {
+    animation,
     animationDuration,
+    animationMatchesGesture,
     animationTypeForReplace = 'push',
+    fullScreenGestureEnabled,
     fullScreenGestureShadowEnabled = true,
     gestureEnabled,
-    gestureDirection = presentation === 'card' ? 'horizontal' : 'vertical',
+    gestureDirection,
     gestureResponseDistance,
     header,
     headerBackButtonMenuEnabled,
@@ -115,8 +108,6 @@ const SceneView = ({
     headerTransparent,
     autoHideHomeIndicator,
     keyboardHandlingEnabled,
-    navigationBarColor,
-    navigationBarTranslucent,
     navigationBarHidden,
     orientation,
     sheetAllowedDetents = [1.0],
@@ -129,38 +120,13 @@ const SceneView = ({
     statusBarAnimation,
     statusBarHidden,
     statusBarStyle,
-    statusBarTranslucent,
-    statusBarBackgroundColor,
     unstable_sheetFooter,
     scrollEdgeEffects,
     freezeOnBlur,
     contentStyle,
   } = options;
 
-  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.
-    // `animationMatchesGesture` needs to be set to `true` so the `animation` set by user can be used,
-    // otherwise `simple_push` will be used.
-    // Also, the default animation for this direction seems to be `slide_from_bottom`.
-    if (fullScreenGestureEnabled === undefined) {
-      fullScreenGestureEnabled = true;
-    }
-
-    if (animationMatchesGesture === undefined) {
-      animationMatchesGesture = true;
-    }
-
-    if (animation === undefined) {
-      animation = 'slide_from_bottom';
-    }
-  }
-
-  // workaround for rn-screens where gestureDirection has to be set on both
-  // current and previous screen - software-mansion/react-native-screens/pull/1509
-  const nextGestureDirection = nextDescriptor?.options.gestureDirection;
-  const gestureDirectionOverride =
-    nextGestureDirection != null ? nextGestureDirection : gestureDirection;
+  let { presentation = isPresentationModal ? 'modal' : 'card' } = options;
 
   if (index === 0) {
     // first screen should always be treated as `card`, it resolves problems with no header animation
@@ -199,7 +165,11 @@ const SceneView = ({
       // So our `getDefaultHeaderHeight` doesn't return the correct value
       // So we hardcode the value here for now until screens is updated
       android: ANDROID_DEFAULT_HEADER_HEIGHT + topInset,
-      default: getDefaultHeaderHeight(frame, isModal, topInset),
+      default: getDefaultHeaderHeight({
+        landscape: frame.width > frame.height,
+        modalPresentation: isModal,
+        topInset,
+      }),
     })
   );
 
@@ -216,38 +186,7 @@ const SceneView = ({
 
   const hasCustomHeader = header != null;
 
-  let headerHeightCorrectionOffset = 0;
-
-  if (Platform.OS === 'android' && !hasCustomHeader) {
-    const statusBarHeight = StatusBar.currentHeight ?? 0;
-
-    // FIXME: On Android, the native header height is not correctly calculated
-    // It includes status bar height even if statusbar is not translucent
-    // And the statusbar value itself doesn't match the actual status bar height
-    // So we subtract the bogus status bar height and add the actual top inset
-    headerHeightCorrectionOffset = -statusBarHeight + topInset;
-  }
-
-  const rawAnimatedHeaderHeight = useAnimatedValue(defaultHeaderHeight);
-  const animatedHeaderHeight = React.useMemo(
-    () =>
-      Animated.add<number>(
-        rawAnimatedHeaderHeight,
-        headerHeightCorrectionOffset
-      ),
-    [headerHeightCorrectionOffset, rawAnimatedHeaderHeight]
-  );
-
-  // During the very first render topInset is > 0 when running
-  // in non edge-to-edge mode on Android, while on every consecutive render
-  // topInset === 0, causing header content to jump, as we add padding on the first frame,
-  // just to remove it in next one. To prevent this, when statusBarTranslucent is set,
-  // we apply additional padding in header only if its true.
-  // For more details see: https://github.com/react-navigation/react-navigation/pull/12014
-  const headerTopInsetEnabled =
-    typeof statusBarTranslucent === 'boolean'
-      ? statusBarTranslucent
-      : topInset !== 0;
+  const headerTopInsetEnabled = topInset !== 0;
 
   const canGoBack = previousDescriptor != null || parentHeaderBack != null;
   const backTitle = previousDescriptor
@@ -267,6 +206,8 @@ const SceneView = ({
 
   const isRemovePrevented = preventedRoutes[route.key]?.preventRemove;
 
+  const animatedHeaderHeight = useAnimatedValue(defaultHeaderHeight);
+
   const headerConfig = useHeaderConfigProps({
     ...options,
     route,
@@ -281,195 +222,192 @@ const SceneView = ({
     headerHeight,
     headerShown: header !== undefined ? false : headerShown,
     headerTopInsetEnabled,
-    headerTransparent,
     headerBack,
   });
 
-  return (
-    <NavigationContext.Provider value={navigation}>
-      <NavigationRouteContext.Provider value={route}>
-        <ScreenStackItem
-          key={route.key}
-          screenId={route.key}
-          activityState={isPreloaded ? 0 : 2}
-          style={StyleSheet.absoluteFill}
-          aria-hidden={!focused}
-          customAnimationOnSwipe={animationMatchesGesture}
-          fullScreenSwipeEnabled={fullScreenGestureEnabled}
-          fullScreenSwipeShadowEnabled={fullScreenGestureShadowEnabled}
-          freezeOnBlur={freezeOnBlur}
-          gestureEnabled={
-            Platform.OS === 'android'
-              ? // This prop enables handling of system back gestures on Android
-                // Since we handle them in JS side, we disable this
-                false
-              : gestureEnabled
-          }
-          homeIndicatorHidden={autoHideHomeIndicator}
-          hideKeyboardOnSwipe={keyboardHandlingEnabled}
-          navigationBarColor={navigationBarColor}
-          navigationBarTranslucent={navigationBarTranslucent}
-          navigationBarHidden={navigationBarHidden}
-          replaceAnimation={animationTypeForReplace}
-          stackPresentation={presentation === 'card' ? 'push' : presentation}
-          stackAnimation={animation}
-          screenOrientation={orientation}
-          sheetAllowedDetents={sheetAllowedDetents}
-          sheetLargestUndimmedDetentIndex={sheetLargestUndimmedDetentIndex}
-          sheetGrabberVisible={sheetGrabberVisible}
-          sheetInitialDetentIndex={sheetInitialDetentIndex}
-          sheetCornerRadius={sheetCornerRadius}
-          sheetElevation={sheetElevation}
-          sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
-          statusBarAnimation={statusBarAnimation}
-          statusBarHidden={statusBarHidden}
-          statusBarStyle={statusBarStyle}
-          statusBarColor={statusBarBackgroundColor}
-          statusBarTranslucent={statusBarTranslucent}
-          swipeDirection={gestureDirectionOverride}
-          transitionDuration={animationDuration}
-          onWillAppear={onWillAppear}
-          onWillDisappear={onWillDisappear}
-          onAppear={onAppear}
-          onDisappear={onDisappear}
-          onDismissed={onDismissed}
-          onGestureCancel={onGestureCancel}
-          onSheetDetentChanged={onSheetDetentChanged}
-          gestureResponseDistance={gestureResponseDistance}
-          nativeBackButtonDismissalEnabled={false} // on Android
-          onHeaderBackButtonClicked={onHeaderBackButtonClicked}
-          preventNativeDismiss={isRemovePrevented} // on iOS
-          scrollEdgeEffects={{
-            bottom: scrollEdgeEffects?.bottom ?? 'automatic',
-            top: scrollEdgeEffects?.top ?? 'automatic',
-            left: scrollEdgeEffects?.left ?? 'automatic',
-            right: scrollEdgeEffects?.right ?? 'automatic',
-          }}
-          onNativeDismissCancelled={onNativeDismissCancelled}
-          // Unfortunately, because of the bug that exists on Fabric, where native event drivers
-          // for Animated objects are being created after the first notifications about the header height
-          // from the native side, `onHeaderHeightChange` event does not notify
-          // `animatedHeaderHeight` about initial values on appearing screens at the moment.
-          onHeaderHeightChange={Animated.event(
-            [
-              {
-                nativeEvent: {
-                  headerHeight: rawAnimatedHeaderHeight,
-                },
-              },
-            ],
-            {
-              useNativeDriver,
-              listener: (e) => {
-                if (hasCustomHeader) {
-                  // If we have a custom header, don't use native header height
-                  return;
-                }
-
+  const onHeaderHeightChange = hasCustomHeader
+    ? // If we have a custom header, don't use native header height
+      undefined
+    : // On Fabric, there's a bug where native event drivers for Animated objects
+      // are created after the first notifications about the header height
+      // from the native side, `onHeaderHeightChange` event does not notify
+      // `animatedHeaderHeight` about initial values on appearing screens at the moment.
+      Animated.event(
+        [
+          {
+            nativeEvent: {
+              headerHeight: animatedHeaderHeight,
+            },
+          },
+        ],
+        {
+          useNativeDriver,
+          listener: (e) => {
+            if (
+              e.nativeEvent &&
+              typeof e.nativeEvent === 'object' &&
+              'headerHeight' in e.nativeEvent &&
+              typeof e.nativeEvent.headerHeight === 'number'
+            ) {
+              const headerHeight = e.nativeEvent.headerHeight;
+
+              // Only debounce if header has large title or search bar
+              // As it's the only case where the header height can change frequently
+              const doesHeaderAnimate =
+                Platform.OS === 'ios' &&
+                (options.headerLargeTitleEnabled ||
+                  options.headerSearchBarOptions);
+
+              if (doesHeaderAnimate) {
+                setHeaderHeightDebounced(headerHeight);
+              } else {
                 if (
                   Platform.OS === 'android' &&
-                  (headerBackground != null || headerTransparent)
+                  headerHeight !== 0 &&
+                  headerHeight <= ANDROID_DEFAULT_HEADER_HEIGHT
                 ) {
-                  // FIXME: On Android, we get 0 if the header is translucent
-                  // So we set a default height in that case
-                  setHeaderHeight(ANDROID_DEFAULT_HEADER_HEIGHT + topInset);
-                  return;
+                  // FIXME: On Android, events may get delivered out-of-order
+                  // https://github.com/facebook/react-native/issues/54636
+                  // We seem to get header height without status bar height first,
+                  // and then the correct height with status bar height included
+                  // But due to out-of-order delivery, we may get the correct height first
+                  // and then the one without status bar height
+                  // This is hack to include status bar height if it's not already included
+                  // It only works because header height doesn't change dynamically on Android
+                  setHeaderHeight(headerHeight + insets.top);
+                } else {
+                  setHeaderHeight(headerHeight);
                 }
+              }
+            }
+          },
+        }
+      );
 
-                if (
-                  e.nativeEvent &&
-                  typeof e.nativeEvent === 'object' &&
-                  'headerHeight' in e.nativeEvent &&
-                  typeof e.nativeEvent.headerHeight === 'number'
-                ) {
-                  const headerHeight =
-                    e.nativeEvent.headerHeight + headerHeightCorrectionOffset;
-
-                  // Only debounce if header has large title or search bar
-                  // As it's the only case where the header height can change frequently
-                  const doesHeaderAnimate =
-                    Platform.OS === 'ios' &&
-                    (options.headerLargeTitleEnabled ||
-                      options.headerLargeTitle ||
-                      options.headerSearchBarOptions);
-
-                  if (doesHeaderAnimate) {
-                    setHeaderHeightDebounced(headerHeight);
-                  } else {
-                    setHeaderHeight(headerHeight);
-                  }
-                }
-              },
+  return (
+    <NavigationProvider navigation={navigation} route={route}>
+      <ScreenStackItem
+        key={route.key}
+        screenId={route.key}
+        activityState={isPreloaded ? 0 : 2}
+        style={StyleSheet.absoluteFill}
+        aria-hidden={!focused}
+        customAnimationOnSwipe={animationMatchesGesture}
+        fullScreenSwipeEnabled={fullScreenGestureEnabled}
+        fullScreenSwipeShadowEnabled={fullScreenGestureShadowEnabled}
+        freezeOnBlur={freezeOnBlur}
+        gestureEnabled={
+          Platform.OS === 'android'
+            ? // This prop enables handling of system back gestures on Android
+              // Since we handle them in JS side, we disable this
+              false
+            : gestureEnabled
+        }
+        homeIndicatorHidden={autoHideHomeIndicator}
+        hideKeyboardOnSwipe={keyboardHandlingEnabled}
+        navigationBarHidden={navigationBarHidden}
+        replaceAnimation={animationTypeForReplace}
+        stackPresentation={presentation === 'card' ? 'push' : presentation}
+        stackAnimation={animation}
+        screenOrientation={orientation}
+        sheetAllowedDetents={sheetAllowedDetents}
+        sheetLargestUndimmedDetentIndex={sheetLargestUndimmedDetentIndex}
+        sheetGrabberVisible={sheetGrabberVisible}
+        sheetInitialDetentIndex={sheetInitialDetentIndex}
+        sheetCornerRadius={sheetCornerRadius}
+        sheetElevation={sheetElevation}
+        sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
+        statusBarAnimation={statusBarAnimation}
+        statusBarHidden={statusBarHidden}
+        statusBarStyle={statusBarStyle}
+        swipeDirection={gestureDirection}
+        transitionDuration={animationDuration}
+        onWillAppear={onWillAppear}
+        onWillDisappear={onWillDisappear}
+        onAppear={onAppear}
+        onDisappear={onDisappear}
+        onDismissed={onDismissed}
+        onGestureCancel={onGestureCancel}
+        onSheetDetentChanged={onSheetDetentChanged}
+        gestureResponseDistance={gestureResponseDistance}
+        nativeBackButtonDismissalEnabled={false} // on Android
+        onHeaderBackButtonClicked={onHeaderBackButtonClicked}
+        preventNativeDismiss={isRemovePrevented} // on iOS
+        scrollEdgeEffects={{
+          bottom: scrollEdgeEffects?.bottom ?? 'automatic',
+          top: scrollEdgeEffects?.top ?? 'automatic',
+          left: scrollEdgeEffects?.left ?? 'automatic',
+          right: scrollEdgeEffects?.right ?? 'automatic',
+        }}
+        onNativeDismissCancelled={onNativeDismissCancelled}
+        onHeaderHeightChange={onHeaderHeightChange}
+        contentStyle={[
+          presentation !== 'transparentModal' &&
+            presentation !== 'containedTransparentModal' && {
+              backgroundColor: colors.background,
+            },
+          contentStyle,
+        ]}
+        headerConfig={headerConfig}
+        unstable_sheetFooter={unstable_sheetFooter}
+        // 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
+        shouldFreeze={shouldFreeze}
+      >
+        <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
+          <HeaderHeightContext.Provider
+            value={
+              headerShown !== false ? headerHeight : (parentHeaderHeight ?? 0)
             }
-          )}
-          contentStyle={[
-            presentation !== 'transparentModal' &&
-              presentation !== 'containedTransparentModal' && {
-                backgroundColor: colors.background,
-              },
-            contentStyle,
-          ]}
-          headerConfig={headerConfig}
-          unstable_sheetFooter={unstable_sheetFooter}
-          // 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
-          shouldFreeze={shouldFreeze}
-        >
-          <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
-            <HeaderHeightContext.Provider
-              value={
-                headerShown !== false ? headerHeight : (parentHeaderHeight ?? 0)
-              }
-            >
-              {headerBackground != null ? (
-                /**
-                 * To show a custom header background, we render it at the top of the screen below the header
-                 * The header also needs to be positioned absolutely (with `translucent` style)
-                 */
-                <View
-                  style={[
-                    styles.background,
-                    headerTransparent ? styles.translucent : null,
-                    { height: headerHeight },
-                  ]}
-                >
-                  {headerBackground()}
-                </View>
-              ) : null}
-              {header != null && headerShown !== false ? (
-                <View
-                  onLayout={(e) => {
-                    const headerHeight = e.nativeEvent.layout.height;
-
-                    setHeaderHeight(headerHeight);
-                    rawAnimatedHeaderHeight.setValue(headerHeight);
-                  }}
-                  style={[
-                    styles.header,
-                    headerTransparent ? styles.absolute : null,
-                  ]}
-                >
-                  {header({
-                    back: headerBack,
-                    options,
-                    route,
-                    navigation,
-                  })}
-                </View>
-              ) : null}
-              <HeaderShownContext.Provider
-                value={isParentHeaderShown || headerShown !== false}
+          >
+            {headerBackground != null ? (
+              /**
+               * To show a custom header background, we render it at the top of the screen below the header
+               * The header also needs to be positioned absolutely (with `translucent` style)
+               */
+              <View
+                style={[
+                  styles.background,
+                  headerTransparent ? styles.translucent : null,
+                  { height: headerHeight },
+                ]}
               >
-                <HeaderBackContext.Provider value={headerBack}>
-                  {render()}
-                </HeaderBackContext.Provider>
-              </HeaderShownContext.Provider>
-            </HeaderHeightContext.Provider>
-          </AnimatedHeaderHeightContext.Provider>
-        </ScreenStackItem>
-      </NavigationRouteContext.Provider>
-    </NavigationContext.Provider>
+                {headerBackground()}
+              </View>
+            ) : null}
+            {header != null && headerShown !== false ? (
+              <View
+                onLayout={(e) => {
+                  const headerHeight = e.nativeEvent.layout.height;
+
+                  animatedHeaderHeight.setValue(headerHeight);
+                  setHeaderHeight(headerHeight);
+                }}
+                style={[
+                  styles.header,
+                  headerTransparent ? styles.absolute : null,
+                ]}
+              >
+                {header({
+                  back: headerBack,
+                  options,
+                  route,
+                  navigation,
+                })}
+              </View>
+            ) : null}
+            <HeaderShownContext.Provider
+              value={isParentHeaderShown || headerShown !== false}
+            >
+              <HeaderBackContext.Provider value={headerBack}>
+                {render()}
+              </HeaderBackContext.Provider>
+            </HeaderShownContext.Provider>
+          </HeaderHeightContext.Provider>
+        </AnimatedHeaderHeightContext.Provider>
+      </ScreenStackItem>
+    </NavigationProvider>
   );
 };
 

package/src/views/NativeStackView.tsx

@@ -3,10 +3,12 @@ import {
   Header,
   HeaderBackButton,
   HeaderBackContext,
-  SafeAreaProviderCompat,
-  Screen,
   useHeaderHeight,
 } from '@react-navigation/elements';
+import {
+  SafeAreaProviderCompat,
+  Screen,
+} from '@react-navigation/elements/internal';
 import {
   type ParamListBase,
   type RouteProp,
@@ -81,7 +83,6 @@ export function NativeStackView({ state, descriptors, describe }: Props) {
           header,
           headerShown,
           headerBackIcon,
-          headerBackImageSource,
           headerLeft,
           headerTransparent,
           headerBackTitle,
@@ -131,14 +132,10 @@ export function NativeStackView({ state, descriptors, describe }: Props) {
                               label={headerBackTitle ?? label}
                               tintColor={tintColor}
                               backImage={
-                                headerBackIcon !== undefined ||
-                                headerBackImageSource !== undefined
+                                headerBackIcon !== undefined
                                   ? () => (
                                       <Image
-                                        source={
-                                          headerBackIcon?.source ??
-                                          headerBackImageSource
-                                        }
+                                        source={headerBackIcon.source}
                                         resizeMode="contain"
                                         tintColor={tintColor}
                                         style={styles.backImage}