@react-navigation/native-stack 8.0.0-alpha.57 → 8.0.0-alpha.59

package/src/views/NativeStackView.native.tsx

@@ -52,22 +52,17 @@ type SceneViewProps = {
   focused: boolean;
   descriptor: NativeStackDescriptor;
   previousDescriptor?: NativeStackDescriptor | undefined;
-  nextDescriptor?: NativeStackDescriptor | undefined;
   isPresentationModal: boolean;
   isNextScreenTransparent: boolean;
   isNextScreenSheet: boolean;
   isNextScreenModal: boolean;
   isInactive: boolean;
   isBeforeLast: boolean;
-  onWillDisappear: () => void;
-  onWillAppear: () => void;
-  onAppear: () => void;
-  onDisappear: () => void;
-  onDismissed: ScreenProps['onDismissed'];
-  onHeaderBackButtonClicked: ScreenProps['onHeaderBackButtonClicked'];
-  onNativeDismissCancelled: ScreenProps['onDismissed'];
-  onGestureCancel: ScreenProps['onGestureCancel'];
-  onSheetDetentChanged: ScreenProps['onSheetDetentChanged'];
+  hasNestedState: boolean;
+  stateKey: string;
+  emit: NativeStackNavigationHelpers['emit'];
+  dispatch: NativeStackNavigationHelpers['dispatch'];
+  setNextDismissedKey: (key: string) => void;
 };
 
 const useNativeDriver = Platform.OS !== 'web';
@@ -79,7 +74,7 @@ const TRANSPARENT_PRESENTATIONS = [
 
 const SHEET_PRESENTATIONS = ['formSheet', 'pageSheet'];
 
-const SceneView = ({
+const SceneView = React.memo(function SceneView({
   index,
   focused,
   descriptor,
@@ -90,18 +85,94 @@ const SceneView = ({
   isNextScreenModal,
   isInactive,
   isBeforeLast,
-  onWillDisappear,
-  onWillAppear,
-  onAppear,
-  onDisappear,
-  onDismissed,
-  onHeaderBackButtonClicked,
-  onNativeDismissCancelled,
-  onGestureCancel,
-  onSheetDetentChanged,
-}: SceneViewProps) => {
+  hasNestedState,
+  stateKey,
+  emit,
+  dispatch,
+  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) => {
+    if (isInactive) {
+      return;
+    }
+
+    dispatch({
+      ...StackActions.dismiss(event.nativeEvent.dismissCount),
+      source: route.key,
+      target: stateKey,
+    });
+
+    setNextDismissedKey(route.key);
+  };
+
+  const onHeaderBackButtonClicked = () => {
+    dispatch({
+      ...StackActions.pop(),
+      source: route.key,
+      target: stateKey,
+    });
+  };
+
+  const onNativeDismissCancelled: ScreenProps['onDismissed'] = (event) => {
+    dispatch({
+      ...StackActions.dismiss(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,
+      },
+    });
+  };
+
   const {
     inactiveBehavior = 'pause',
     animation,
@@ -307,6 +378,14 @@ const SceneView = ({
         }
       );
 
+  // Nested navigators clean up `route.state` when the screen is paused with `Activity`
+  // So we remember if the route had state until the screen is removed
+  const [hadNestedState, setHadNestedState] = React.useState(hasNestedState);
+
+  if (hasNestedState && !hadNestedState) {
+    setHadNestedState(true);
+  }
+
   const activityMode =
     // Render focused screens normally
     // Unpause preloaded and retained screens so updates are visible
@@ -325,7 +404,7 @@ const SceneView = ({
     (isNextScreenModal && !isModal) ||
     isBeforeLast
       ? 'normal'
-      : inactiveBehavior === 'unmount' && !('state' in route && route.state)
+      : inactiveBehavior === 'unmount' && !hadNestedState
         ? 'unmounted'
         : 'paused';
 
@@ -477,7 +556,7 @@ const SceneView = ({
       </ScreenStackItem>
     </NavigationProvider>
   );
-};
+});
 
 type Props = {
   state: StackNavigationState<ParamListBase>;
@@ -534,86 +613,17 @@ export function NativeStackView({ state, navigation, descriptors }: Props) {
               focused={isFocused}
               descriptor={descriptor}
               previousDescriptor={previousDescriptor}
-              nextDescriptor={nextDescriptor}
               isPresentationModal={isModal}
               isNextScreenTransparent={isNextScreenTransparent}
               isNextScreenSheet={isNextScreenSheet}
               isNextScreenModal={isNextScreenModal}
               isInactive={index > state.index}
               isBeforeLast={index === activeRoutes.length - 2}
-              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) => {
-                navigation.dispatch({
-                  ...StackActions.remove(
-                    route.name,
-                    event.nativeEvent.dismissCount
-                  ),
-                  source: route.key,
-                  target: state.key,
-                });
-
-                setNextDismissedKey(route.key);
-              }}
-              onHeaderBackButtonClicked={() => {
-                navigation.dispatch({
-                  ...StackActions.pop(),
-                  source: route.key,
-                  target: state.key,
-                });
-              }}
-              onNativeDismissCancelled={(event) => {
-                navigation.dispatch({
-                  ...StackActions.remove(
-                    route.name,
-                    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,
-                  },
-                });
-              }}
+              hasNestedState={route.state != null}
+              stateKey={state.key}
+              emit={navigation.emit}
+              dispatch={navigation.dispatch}
+              setNextDismissedKey={setNextDismissedKey}
             />
           );
         })}

package/src/views/NativeStackView.tsx

@@ -11,6 +11,7 @@ import {
   Screen,
 } from '@react-navigation/elements/internal';
 import {
+  type NavigationRoute,
   type ParamListBase,
   type StackNavigationState,
   useLinkBuilder,
@@ -19,6 +20,7 @@ import * as React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 
 import type {
+  NativeStackDescriptor,
   NativeStackDescriptorMap,
   NativeStackNavigationHelpers,
 } from '../types';
@@ -43,6 +45,24 @@ export function NativeStackView({ state, descriptors }: Props) {
   const activeRoutes = state.routes.slice(0, state.index + 1);
   const modalRouteKeys = getModalRouteKeys(activeRoutes, descriptors);
 
+  const [savedNestedStateRouteKeys, setSavedNestedStateRouteKeys] =
+    React.useState<string[]>([]);
+
+  // Nested navigators clean up `route.state` when the screen is paused with `Activity`
+  // So we remember routes which had state until they are removed
+  const nestedStateRouteKeys = state.routes
+    .filter(
+      (route) =>
+        route.state != null || savedNestedStateRouteKeys.includes(route.key)
+    )
+    .map((route) => route.key);
+
+  if (
+    nestedStateRouteKeys.some((key) => !savedNestedStateRouteKeys.includes(key))
+  ) {
+    setSavedNestedStateRouteKeys(nestedStateRouteKeys);
+  }
+
   return (
     <SafeAreaProviderCompat>
       {state.routes.map((route, i) => {
@@ -61,35 +81,7 @@ export function NativeStackView({ state, descriptors }: Props) {
           );
         }
 
-        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 {
-          inactiveBehavior = 'pause',
-          header,
-          headerShown,
-          headerBackIcon,
-          headerLeft,
-          headerTransparent,
-          headerBackTitle,
-          presentation,
-          contentStyle,
-          ...rest
-        } = options;
+        const { inactiveBehavior = 'pause' } = descriptor.options;
 
         const nextPresentation = nextDescriptor?.options.presentation;
 
@@ -118,7 +110,7 @@ export function NativeStackView({ state, descriptors }: Props) {
               : inactiveBehavior === 'unmount' &&
                   !isNextScreenModal &&
                   !isBeforeLast &&
-                  !route.state
+                  !nestedStateRouteKeys.includes(route.key)
                 ? 'unmounted'
                 : 'paused';
 
@@ -126,84 +118,144 @@ export function NativeStackView({ state, descriptors }: Props) {
           return null;
         }
 
-        const content = (
-          <Screen
-            key={route.key}
-            focused={isFocused}
-            route={route}
-            navigation={navigation}
-            headerShown={headerShown}
-            headerTransparent={headerTransparent}
-            pageOverflowEnabled={
-              presentation == null || presentation === 'card'
-            }
-            contentStyle={contentStyle}
-            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}
-                              icon={headerBackIcon}
-                              onPress={navigation.goBack}
-                            />
-                          )
-                        : headerLeft
-                  }
-                  headerTransparent={headerTransparent}
-                />
-              )
-            }
-            style={{
-              ...(presentation != null &&
-              TRANSPARENT_PRESENTATIONS.includes(presentation)
-                ? { backgroundColor: 'transparent' }
-                : null),
-            }}
-          >
-            <HeaderBackContext.Provider value={headerBack}>
-              <AnimatedHeaderHeightProvider>
-                {render()}
-              </AnimatedHeaderHeightProvider>
-            </HeaderBackContext.Provider>
-          </Screen>
-        );
-
         return (
-          <ActivityView
+          <SceneView
             key={route.key}
-            mode={activityMode}
+            route={route}
+            descriptor={descriptor}
+            previousDescriptor={previousDescriptor}
+            parentHeaderBack={parentHeaderBack}
+            buildHref={buildHref}
+            focused={isFocused}
+            activityMode={activityMode}
             visible={isFocused || isNextScreenTransparent}
-            style={StyleSheet.absoluteFill}
-          >
-            {content}
-          </ActivityView>
+          />
         );
       })}
     </SafeAreaProviderCompat>
   );
 }
 
+type SceneViewProps = {
+  route: NavigationRoute<ParamListBase, string>;
+  descriptor: NativeStackDescriptor;
+  previousDescriptor: NativeStackDescriptor | undefined;
+  parentHeaderBack: React.ContextType<typeof HeaderBackContext>;
+  buildHref: ReturnType<typeof useLinkBuilder>['buildHref'];
+  focused: boolean;
+  activityMode: 'normal' | 'inert' | 'paused';
+  visible: boolean;
+};
+
+const SceneView = React.memo(function SceneView({
+  route,
+  descriptor,
+  previousDescriptor,
+  parentHeaderBack,
+  buildHref,
+  focused,
+  activityMode,
+  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,
+    headerLeft,
+    headerTransparent,
+    headerBackTitle,
+    presentation,
+    contentStyle,
+    ...rest
+  } = options;
+
+  const content = (
+    <Screen
+      key={route.key}
+      focused={focused}
+      route={route}
+      navigation={navigation}
+      headerShown={headerShown}
+      headerTransparent={headerTransparent}
+      pageOverflowEnabled={presentation == null || presentation === 'card'}
+      contentStyle={contentStyle}
+      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}
+                        icon={headerBackIcon}
+                        onPress={navigation.goBack}
+                      />
+                    )
+                  : headerLeft
+            }
+            headerTransparent={headerTransparent}
+          />
+        )
+      }
+      style={{
+        ...(presentation != null &&
+        TRANSPARENT_PRESENTATIONS.includes(presentation)
+          ? { backgroundColor: 'transparent' }
+          : null),
+      }}
+    >
+      <HeaderBackContext.Provider value={headerBack}>
+        <AnimatedHeaderHeightProvider>{render()}</AnimatedHeaderHeightProvider>
+      </HeaderBackContext.Provider>
+    </Screen>
+  );
+
+  return (
+    <ActivityView
+      mode={activityMode}
+      visible={visible}
+      style={StyleSheet.absoluteFill}
+    >
+      {content}
+    </ActivityView>
+  );
+});
+
 const AnimatedHeaderHeightProvider = ({
   children,
 }: {

package/src/views/useHeaderConfigProps.tsx

@@ -12,6 +12,7 @@ import { Platform, StyleSheet, type TextStyle, View } from 'react-native';
 import {
   type HeaderBarButtonItemMenuAction,
   type HeaderBarButtonItemSubmenu,
+  type HeaderBarButtonItemVisibilityPriority,
   type HeaderBarButtonItemWithAction,
   type HeaderBarButtonItemWithMenu,
   isSearchBarAvailableForCurrentPlatform,
@@ -73,7 +74,13 @@ const processBarButtonItems = (
           );
         }
 
-        const { badge, label, labelStyle, icon, ...rest } = item;
+        const { badge, label, labelStyle, icon, visibilityPriority, ...rest } =
+          item;
+
+        const processedVisibilityPriority:
+          | HeaderBarButtonItemVisibilityPriority
+          | undefined =
+          visibilityPriority === 'default' ? 'standard' : visibilityPriority;
 
         const processedItemCommon = {
           ...rest,
@@ -84,6 +91,7 @@ const processBarButtonItems = (
             ...labelStyle,
           },
           icon: transformIcon(icon),
+          visibilityPriority: processedVisibilityPriority,
         };
 
         let processedItem:
@@ -164,13 +172,22 @@ const getMenuItem = (
   item: NativeStackHeaderItemMenuAction | NativeStackHeaderItemMenuSubmenu
 ): HeaderBarButtonItemMenuAction | HeaderBarButtonItemSubmenu => {
   if (item.type === 'submenu') {
-    const { label, icon, inline, layout, items, multiselectable, ...rest } =
-      item;
+    const {
+      label,
+      description,
+      icon,
+      inline,
+      layout,
+      items,
+      multiselectable,
+      ...rest
+    } = item;
 
     return {
       ...rest,
       icon: transformIcon(icon),
       title: label,
+      subtitle: description,
       displayAsPalette: layout === 'palette',
       displayInline: inline,
       singleSelection:
@@ -379,21 +396,20 @@ export function useHeaderConfigProps({
       return undefined;
     }
 
-    if (headerBackIcon == null && Platform.OS === 'android') {
-      try {
-        // Use Material Symbol as default back icon on Android
-        // So it's consistent with other material icons
-        // Based on the available variant and weight
-        return MaterialSymbol.getImageSource({
-          name: 'arrow_back',
-          color: tintColor,
-          size: ICON_SIZE,
-        });
-      } catch (e) {
-        // Fallback to default if symbol is not available
-        // This can happen if no font, or multiple fonts are available
-        // Or in tests where native module is not available
-      }
+    if (
+      headerBackIcon == null &&
+      Platform.OS === 'android' &&
+      MaterialSymbol.isAvailable()
+    ) {
+      // Use Material Symbol as default back icon on Android
+      // So it's consistent with other material icons
+      // Based on the available variant and weight
+      return MaterialSymbol.getImageSource({
+        name: 'arrow_back',
+        color: tintColor,
+        size: ICON_SIZE,
+        direction,
+      });
     } else if (headerBackIcon?.type === 'image') {
       return headerBackIcon.source;
     } else if (headerBackIcon?.type === 'materialSymbol') {
@@ -401,13 +417,15 @@ export function useHeaderConfigProps({
         name: headerBackIcon.name,
         variant: headerBackIcon.variant,
         weight: headerBackIcon.weight,
+        fill: headerBackIcon.fill,
         color: tintColor,
         size: ICON_SIZE,
+        direction,
       });
     }
 
     return undefined;
-  }, [headerBackIcon, headerBackVisible, headerShown, tintColor]);
+  }, [direction, headerBackIcon, headerBackVisible, headerShown, tintColor]);
 
   const children = (
     <>
@@ -446,7 +464,7 @@ export function useHeaderConfigProps({
         <>
           {headerLeftElement != null || typeof headerTitle === 'function' ? (
             // The style passed to header left, together with title element being wrapped
-            // in flex view is reqruied for proper header layout, in particular,
+            // in flex view is required for proper header layout, in particular,
             // for the text truncation to work.
             <ScreenStackHeaderLeftView
               style={!isCenterViewRenderedAndroid ? { flex: 1 } : null}