@react-navigation/native-stack 7.20.0 → 7.21.1

package/src/views/NativeStackView.native.tsx

@@ -37,6 +37,7 @@ import type {
   NativeStackDescriptor,
   NativeStackDescriptorMap,
   NativeStackNavigationHelpers,
+  NativeStackNavigationOptions,
 } from '../types';
 import { debounce } from '../utils/debounce';
 import { getModalRouteKeys } from '../utils/getModalRoutesKeys';
@@ -57,43 +58,119 @@ type SceneViewProps = {
   shouldFreeze: boolean;
   descriptor: NativeStackDescriptor;
   previousDescriptor?: NativeStackDescriptor;
-  nextDescriptor?: NativeStackDescriptor;
+  nextGestureDirection?: NativeStackNavigationOptions['gestureDirection'];
   isPresentationModal?: boolean;
   isPreloaded?: boolean;
-  onWillDisappear: () => void;
-  onWillAppear: () => void;
-  onAppear: () => void;
-  onDisappear: () => void;
-  onDismissed: ScreenProps['onDismissed'];
-  onHeaderBackButtonClicked: ScreenProps['onHeaderBackButtonClicked'];
-  onNativeDismissCancelled: ScreenProps['onDismissed'];
-  onGestureCancel: ScreenProps['onGestureCancel'];
-  onSheetDetentChanged: ScreenProps['onSheetDetentChanged'];
+  stateKey: string;
+  emit: NativeStackNavigationHelpers['emit'];
+  dispatch: NativeStackNavigationHelpers['dispatch'];
+  getState: NativeStackNavigationHelpers['getState'];
+  setNextDismissedKey: (key: string) => void;
 };
 
 const useNativeDriver = Platform.OS !== 'web';
 
-const SceneView = ({
+const SceneView = React.memo(function SceneView({
   index,
   focused,
   shouldFreeze,
   descriptor,
   previousDescriptor,
-  nextDescriptor,
+  nextGestureDirection,
   isPresentationModal,
   isPreloaded,
-  onWillDisappear,
-  onWillAppear,
-  onAppear,
-  onDisappear,
-  onDismissed,
-  onHeaderBackButtonClicked,
-  onNativeDismissCancelled,
-  onGestureCancel,
-  onSheetDetentChanged,
-}: SceneViewProps) => {
+  stateKey,
+  emit,
+  dispatch,
+  getState,
+  setNextDismissedKey,
+}: SceneViewProps) {
   const { route, navigation, options, render } = descriptor;
 
+  const onWillDisappear = () => {
+    emit({
+      type: 'transitionStart',
+      data: { closing: true },
+      target: route.key,
+    });
+  };
+
+  const onWillAppear = () => {
+    emit({
+      type: 'transitionStart',
+      data: { closing: false },
+      target: route.key,
+    });
+  };
+
+  const onAppear = () => {
+    emit({
+      type: 'transitionEnd',
+      data: { closing: false },
+      target: route.key,
+    });
+  };
+
+  const onDisappear = () => {
+    emit({
+      type: 'transitionEnd',
+      data: { closing: true },
+      target: route.key,
+    });
+  };
+
+  const onDismissed: ScreenProps['onDismissed'] = (event) => {
+    const currentState = getState();
+    const currentActiveRoutes = currentState.routes.slice(
+      0,
+      currentState.index + 1
+    );
+
+    if (currentActiveRoutes.some((r) => r.key === route.key)) {
+      dispatch({
+        ...StackActions.pop(event.nativeEvent.dismissCount),
+        source: route.key,
+        target: currentState.key,
+      });
+    }
+
+    setNextDismissedKey(route.key);
+  };
+
+  const onHeaderBackButtonClicked = () => {
+    dispatch({
+      ...StackActions.pop(),
+      source: route.key,
+      target: stateKey,
+    });
+  };
+
+  const onNativeDismissCancelled: ScreenProps['onDismissed'] = (event) => {
+    dispatch({
+      ...StackActions.pop(event.nativeEvent.dismissCount),
+      source: route.key,
+      target: stateKey,
+    });
+  };
+
+  const onGestureCancel = () => {
+    emit({
+      type: 'gestureCancel',
+      target: route.key,
+    });
+  };
+
+  const onSheetDetentChanged: ScreenProps['onSheetDetentChanged'] = (event) => {
+    emit({
+      type: 'sheetDetentChange',
+      target: route.key,
+      data: {
+        index: event.nativeEvent.index,
+        stable: event.nativeEvent.isStable,
+      },
+    });
+  };
+
   let {
     animation,
     animationMatchesGesture,
@@ -161,7 +238,6 @@ const SceneView = ({
 
   // 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;
 
@@ -211,7 +287,7 @@ const SceneView = ({
 
   const [headerHeight, setHeaderHeight] = React.useState(defaultHeaderHeight);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  // eslint-disable-next-line @eslint-react/exhaustive-deps
   const setHeaderHeightDebounced = React.useCallback(
     // Debounce the header height updates to avoid excessive re-renders
     debounce(setHeaderHeight, 100),
@@ -242,11 +318,7 @@ const SceneView = ({
 
   const rawAnimatedHeaderHeight = useAnimatedValue(defaultHeaderHeight);
   const animatedHeaderHeight = React.useMemo(
-    () =>
-      Animated.add<number>(
-        rawAnimatedHeaderHeight,
-        headerHeightCorrectionOffset
-      ),
+    () => Animated.add(rawAnimatedHeaderHeight, headerHeightCorrectionOffset),
     [headerHeightCorrectionOffset, rawAnimatedHeaderHeight]
   );
 
@@ -439,7 +511,7 @@ const SceneView = ({
               headerShown !== false ? headerHeight : (parentHeaderHeight ?? 0)
             }
           >
-            {headerBackground != null ? (
+            {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)
@@ -497,7 +569,7 @@ const SceneView = ({
       </ScreenStackItem>
     </NavigationProvider>
   );
-};
+});
 
 type Props = {
   state: StackNavigationState<ParamListBase>;
@@ -515,6 +587,7 @@ export function NativeStackView({
   descriptors,
   describe,
 }: Props) {
+  const { colors } = useTheme();
   const { setNextDismissedKey } = useDismissedRouteError(state);
 
   useInvalidPreventRemoveError(descriptors);
@@ -529,7 +602,10 @@ export function NativeStackView({
 
   return (
     <SafeAreaProviderCompat>
-      <ScreenStack style={styles.container}>
+      <ScreenStack
+        style={styles.container}
+        nativeContainerStyle={{ backgroundColor: colors.background }}
+      >
         {state.routes.concat(state.preloadedRoutes).map((route, index) => {
           const descriptor =
             descriptors[route.key] ?? preloadedDescriptors[route.key];
@@ -563,84 +639,14 @@ export function NativeStackView({
               shouldFreeze={shouldFreeze}
               descriptor={descriptor}
               previousDescriptor={previousDescriptor}
-              nextDescriptor={nextDescriptor}
+              nextGestureDirection={nextDescriptor?.options.gestureDirection}
               isPresentationModal={isModal}
               isPreloaded={isPreloaded}
-              onWillDisappear={() => {
-                navigation.emit({
-                  type: 'transitionStart',
-                  data: { closing: true },
-                  target: route.key,
-                });
-              }}
-              onWillAppear={() => {
-                navigation.emit({
-                  type: 'transitionStart',
-                  data: { closing: false },
-                  target: route.key,
-                });
-              }}
-              onAppear={() => {
-                navigation.emit({
-                  type: 'transitionEnd',
-                  data: { closing: false },
-                  target: route.key,
-                });
-              }}
-              onDisappear={() => {
-                navigation.emit({
-                  type: 'transitionEnd',
-                  data: { closing: true },
-                  target: route.key,
-                });
-              }}
-              onDismissed={(event) => {
-                const currentState = navigation.getState();
-                const currentActiveRoutes = currentState.routes.slice(
-                  0,
-                  currentState.index + 1
-                );
-
-                if (currentActiveRoutes.some((r) => r.key === route.key)) {
-                  navigation.dispatch({
-                    ...StackActions.pop(event.nativeEvent.dismissCount),
-                    source: route.key,
-                    target: currentState.key,
-                  });
-                }
-
-                setNextDismissedKey(route.key);
-              }}
-              onHeaderBackButtonClicked={() => {
-                navigation.dispatch({
-                  ...StackActions.pop(),
-                  source: route.key,
-                  target: state.key,
-                });
-              }}
-              onNativeDismissCancelled={(event) => {
-                navigation.dispatch({
-                  ...StackActions.pop(event.nativeEvent.dismissCount),
-                  source: route.key,
-                  target: state.key,
-                });
-              }}
-              onGestureCancel={() => {
-                navigation.emit({
-                  type: 'gestureCancel',
-                  target: route.key,
-                });
-              }}
-              onSheetDetentChanged={(event) => {
-                navigation.emit({
-                  type: 'sheetDetentChange',
-                  target: route.key,
-                  data: {
-                    index: event.nativeEvent.index,
-                    stable: event.nativeEvent.isStable,
-                  },
-                });
-              }}
+              stateKey={state.key}
+              emit={navigation.emit}
+              dispatch={navigation.dispatch}
+              getState={navigation.getState}
+              setNextDismissedKey={setNextDismissedKey}
             />
           );
         })}

package/src/views/NativeStackView.tsx

@@ -8,6 +8,7 @@ import {
   useHeaderHeight,
 } from '@react-navigation/elements';
 import {
+  type NavigationRoute,
   type ParamListBase,
   type RouteProp,
   type StackNavigationState,
@@ -49,143 +50,178 @@ export function NativeStackView({ state, descriptors, describe }: Props) {
       return acc;
     }, {});
 
+  const activeRoutes = state.routes.slice(0, state.index + 1);
+  const lastOpaqueIndex = activeRoutes.findLastIndex((route) => {
+    const presentation = descriptors[route.key]?.options.presentation;
+
+    return (
+      presentation == null || !TRANSPARENT_PRESENTATIONS.includes(presentation)
+    );
+  });
+
   return (
     <SafeAreaProviderCompat>
       {state.routes.concat(state.preloadedRoutes).map((route, i) => {
         const isFocused = state.index === i;
         const previousKey = state.routes[i - 1]?.key;
-        const nextKey = state.routes[i + 1]?.key;
         const previousDescriptor = previousKey
           ? descriptors[previousKey]
           : undefined;
-        const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
-        const { options, navigation, render } =
+        const descriptor =
           descriptors[route.key] ?? preloadedDescriptors[route.key];
 
-        const headerBack = previousDescriptor
-          ? {
-              title: getHeaderTitle(
-                previousDescriptor.options,
-                previousDescriptor.route.name
-              ),
-              href: buildHref(
-                previousDescriptor.route.name,
-                previousDescriptor.route.params
-              ),
-            }
-          : parentHeaderBack;
-
-        const canGoBack = headerBack != null;
-
-        const {
-          header,
-          headerShown,
-          headerBackIcon,
-          headerBackImageSource,
-          headerLeft,
-          headerTransparent,
-          headerBackTitle,
-          presentation,
-          contentStyle,
-          ...rest
-        } = options;
-
-        const nextPresentation = nextDescriptor?.options.presentation;
+        const isVisible = i >= lastOpaqueIndex && i <= state.index;
 
         const isPreloaded =
           preloadedDescriptors[route.key] !== undefined &&
           descriptors[route.key] === undefined;
 
         return (
-          <Screen
+          <SceneView
             key={route.key}
-            focused={isFocused}
             route={route}
-            navigation={navigation}
-            headerShown={headerShown}
-            headerTransparent={headerTransparent}
-            header={
-              header !== undefined ? (
-                header({
-                  back: headerBack,
-                  options,
-                  route,
-                  navigation,
-                })
-              ) : (
-                <Header
-                  {...rest}
-                  back={headerBack}
-                  title={getHeaderTitle(options, route.name)}
-                  headerLeft={
-                    typeof headerLeft === 'function'
-                      ? ({ label, ...rest }) =>
-                          headerLeft({
-                            ...rest,
-                            label: headerBackTitle ?? label,
-                          })
-                      : headerLeft === undefined && canGoBack
-                        ? ({ tintColor, label, ...rest }) => (
-                            <HeaderBackButton
-                              {...rest}
-                              label={headerBackTitle ?? label}
-                              tintColor={tintColor}
-                              backImage={
-                                headerBackIcon !== undefined ||
-                                headerBackImageSource !== undefined
-                                  ? () => (
-                                      <Image
-                                        source={
-                                          headerBackIcon?.source ??
-                                          headerBackImageSource
-                                        }
-                                        resizeMode="contain"
-                                        tintColor={tintColor}
-                                        style={styles.backImage}
-                                      />
-                                    )
-                                  : undefined
-                              }
-                              onPress={navigation.goBack}
-                            />
-                          )
-                        : headerLeft
-                  }
-                  headerTransparent={headerTransparent}
-                />
-              )
-            }
-            style={[
-              StyleSheet.absoluteFill,
-              {
-                display:
-                  (isFocused ||
-                    (nextPresentation != null &&
-                      TRANSPARENT_PRESENTATIONS.includes(nextPresentation))) &&
-                  !isPreloaded
-                    ? 'flex'
-                    : 'none',
-              },
-              presentation != null &&
-              TRANSPARENT_PRESENTATIONS.includes(presentation)
-                ? { backgroundColor: 'transparent' }
-                : null,
-            ]}
-          >
-            <HeaderBackContext.Provider value={headerBack}>
-              <AnimatedHeaderHeightProvider>
-                <View style={[styles.contentContainer, contentStyle]}>
-                  {render()}
-                </View>
-              </AnimatedHeaderHeightProvider>
-            </HeaderBackContext.Provider>
-          </Screen>
+            descriptor={descriptor}
+            previousDescriptor={previousDescriptor}
+            parentHeaderBack={parentHeaderBack}
+            buildHref={buildHref}
+            focused={isFocused}
+            visible={isVisible && !isPreloaded}
+          />
         );
       })}
     </SafeAreaProviderCompat>
   );
 }
 
+type SceneViewProps = {
+  route: NavigationRoute<ParamListBase, string>;
+  descriptor: NativeStackDescriptor;
+  previousDescriptor: NativeStackDescriptor | undefined;
+  parentHeaderBack: React.ContextType<typeof HeaderBackContext>;
+  buildHref: ReturnType<typeof useLinkBuilder>['buildHref'];
+  focused: boolean;
+  visible: boolean;
+};
+
+const SceneView = React.memo(function SceneView({
+  route,
+  descriptor,
+  previousDescriptor,
+  parentHeaderBack,
+  buildHref,
+  focused,
+  visible,
+}: SceneViewProps) {
+  const { options, navigation, render } = descriptor;
+
+  const headerBack = previousDescriptor
+    ? {
+        title: getHeaderTitle(
+          previousDescriptor.options,
+          previousDescriptor.route.name
+        ),
+        href: buildHref(
+          previousDescriptor.route.name,
+          previousDescriptor.route.params
+        ),
+      }
+    : parentHeaderBack;
+
+  const canGoBack = headerBack != null;
+
+  const {
+    header,
+    headerShown,
+    headerBackIcon,
+    headerBackImageSource,
+    headerLeft,
+    headerTransparent,
+    headerBackTitle,
+    presentation,
+    contentStyle,
+    ...rest
+  } = options;
+
+  return (
+    <Screen
+      key={route.key}
+      focused={focused}
+      route={route}
+      navigation={navigation}
+      headerShown={headerShown}
+      headerTransparent={headerTransparent}
+      header={
+        header !== undefined ? (
+          header({
+            back: headerBack,
+            options,
+            route,
+            navigation,
+          })
+        ) : (
+          <Header
+            {...rest}
+            back={headerBack}
+            title={getHeaderTitle(options, route.name)}
+            headerLeft={
+              typeof headerLeft === 'function'
+                ? ({ label, ...rest }) =>
+                    headerLeft({
+                      ...rest,
+                      label: headerBackTitle ?? label,
+                    })
+                : headerLeft === undefined && canGoBack
+                  ? ({ tintColor, label, ...rest }) => (
+                      <HeaderBackButton
+                        {...rest}
+                        label={headerBackTitle ?? label}
+                        tintColor={tintColor}
+                        backImage={
+                          headerBackIcon !== undefined ||
+                          headerBackImageSource !== undefined
+                            ? () => (
+                                <Image
+                                  source={
+                                    headerBackIcon?.source ??
+                                    headerBackImageSource
+                                  }
+                                  resizeMode="contain"
+                                  tintColor={tintColor}
+                                  style={styles.backImage}
+                                />
+                              )
+                            : undefined
+                        }
+                        onPress={navigation.goBack}
+                      />
+                    )
+                  : headerLeft
+            }
+            headerTransparent={headerTransparent}
+          />
+        )
+      }
+      style={[
+        StyleSheet.absoluteFill,
+        {
+          display: visible ? 'flex' : 'none',
+        },
+        presentation != null && TRANSPARENT_PRESENTATIONS.includes(presentation)
+          ? { backgroundColor: 'transparent' }
+          : null,
+      ]}
+    >
+      <HeaderBackContext.Provider value={headerBack}>
+        <AnimatedHeaderHeightProvider>
+          <View style={[styles.contentContainer, contentStyle]}>
+            {render()}
+          </View>
+        </AnimatedHeaderHeightProvider>
+      </HeaderBackContext.Provider>
+    </Screen>
+  );
+});
+
 const AnimatedHeaderHeightProvider = ({
   children,
 }: {