@react-navigation/native-stack 7.19.2 → 7.21.0

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;
 
@@ -497,7 +573,7 @@ const SceneView = ({
       </ScreenStackItem>
     </NavigationProvider>
   );
-};
+});
 
 type Props = {
   state: StackNavigationState<ParamListBase>;
@@ -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,
@@ -59,37 +60,9 @@ export function NativeStackView({ state, descriptors, describe }: Props) {
           ? 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 isPreloaded =
@@ -97,95 +70,156 @@ export function NativeStackView({ state, descriptors, describe }: Props) {
           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}
-                />
-              )
+            descriptor={descriptor}
+            previousDescriptor={previousDescriptor}
+            parentHeaderBack={parentHeaderBack}
+            buildHref={buildHref}
+            focused={isFocused}
+            visible={
+              (isFocused ||
+                (nextPresentation != null &&
+                  TRANSPARENT_PRESENTATIONS.includes(nextPresentation))) &&
+              !isPreloaded
             }
-            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>
+          />
         );
       })}
     </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,
 }: {

package/src/views/useHeaderConfigProps.tsx

@@ -10,6 +10,7 @@ import { Platform, StyleSheet, type TextStyle, View } from 'react-native';
 import {
   type HeaderBarButtonItemMenuAction,
   type HeaderBarButtonItemSubmenu,
+  type HeaderBarButtonItemVisibilityPriority,
   type HeaderBarButtonItemWithAction,
   type HeaderBarButtonItemWithMenu,
   isSearchBarAvailableForCurrentPlatform,
@@ -29,7 +30,6 @@ import type {
   NativeStackHeaderItemMenuSubmenu,
   NativeStackNavigationOptions,
 } from '../types';
-import { processFonts } from './FontProcessor';
 
 type Props = NativeStackNavigationOptions & {
   headerTopInsetEnabled: boolean;
@@ -71,7 +71,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,
@@ -82,6 +88,7 @@ const processBarButtonItems = (
             ...labelStyle,
           },
           icon: transformIcon(icon),
+          visibilityPriority: processedVisibilityPriority,
         };
 
         let processedItem:
@@ -164,13 +171,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:
@@ -205,7 +221,9 @@ export function useHeaderConfigProps({
   headerLargeTitleStyle,
   headerBackground,
   headerLeft,
+  headerLeftBackgroundVisible,
   headerRight,
+  headerRightBackgroundVisible,
   headerShown,
   headerStyle,
   headerBlurEffect,
@@ -253,17 +271,11 @@ export function useHeaderConfigProps({
       ? 'transparent'
       : colors.card);
 
-  const [backTitleFontFamily, largeTitleFontFamily, titleFontFamily] =
-    processFonts([
-      headerBackTitleStyleFlattened.fontFamily,
-      headerLargeTitleStyleFlattened.fontFamily,
-      headerTitleStyleFlattened.fontFamily,
-    ]);
-
   const backTitleFontSize =
     'fontSize' in headerBackTitleStyleFlattened
       ? headerBackTitleStyleFlattened.fontSize
       : undefined;
+  const backTitleFontFamily = headerBackTitleStyleFlattened.fontFamily;
 
   const titleText = getHeaderTitle({ title, headerTitle }, route.name);
   const titleColor =
@@ -281,6 +293,7 @@ export function useHeaderConfigProps({
       ? headerTitleStyleFlattened.fontSize
       : undefined;
   const titleFontWeight = headerTitleStyleFlattened.fontWeight;
+  const titleFontFamily = headerTitleStyleFlattened.fontFamily;
 
   const largeTitleBackgroundColor = headerLargeStyleFlattened.backgroundColor;
   const largeTitleColor =
@@ -292,6 +305,7 @@ export function useHeaderConfigProps({
       ? headerLargeTitleStyleFlattened.fontSize
       : undefined;
   const largeTitleFontWeight = headerLargeTitleStyleFlattened.fontWeight;
+  const largeTitleFontFamily = headerLargeTitleStyleFlattened.fontFamily;
 
   const headerTitleStyleSupported: TextStyle = { color: titleColor };
 
@@ -407,7 +421,9 @@ export function useHeaderConfigProps({
               return null;
             })
           ) : headerLeftElement != null ? (
-            <ScreenStackHeaderLeftView>
+            <ScreenStackHeaderLeftView
+              hidesSharedBackground={headerLeftBackgroundVisible === false}
+            >
               {headerLeftElement}
             </ScreenStackHeaderLeftView>
           ) : null}
@@ -481,7 +497,9 @@ export function useHeaderConfigProps({
           return null;
         })
       ) : headerRightElement != null ? (
-        <ScreenStackHeaderRightView>
+        <ScreenStackHeaderRightView
+          hidesSharedBackground={headerRightBackgroundVisible === false}
+        >
           {headerRightElement}
         </ScreenStackHeaderRightView>
       ) : null}

package/lib/module/views/FontProcessor.js

@@ -1,6 +0,0 @@
-"use strict";
-
-export function processFonts(_) {
-  throw new Error('Not supported on Web');
-}
-//# sourceMappingURL=FontProcessor.js.map

package/lib/module/views/FontProcessor.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["processFonts","_","Error"],"sourceRoot":"../../../src","sources":["views/FontProcessor.tsx"],"mappings":";;AAAA,OAAO,SAASA,YAAYA,CAC1BC,CAAyB,EACD;EACxB,MAAM,IAAIC,KAAK,CAAC,sBAAsB,CAAC;AACzC","ignoreList":[]}

package/lib/module/views/FontProcessor.native.js

@@ -1,12 +0,0 @@
-"use strict";
-
-// @ts-expect-error importing private module
-import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
-export function processFonts(fontFamilies) {
-  const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
-  if (typeof fontFamilyProcessor === 'function') {
-    return fontFamilies.map(fontFamilyProcessor);
-  }
-  return fontFamilies;
-}
-//# sourceMappingURL=FontProcessor.native.js.map

package/lib/module/views/FontProcessor.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ReactNativeStyleAttributes","processFonts","fontFamilies","fontFamilyProcessor","fontFamily","process","map"],"sourceRoot":"../../../src","sources":["views/FontProcessor.native.tsx"],"mappings":";;AAAA;AACA,OAAOA,0BAA0B,MAAM,mEAAmE;AAE1G,OAAO,SAASC,YAAYA,CAC1BC,YAAoC,EACZ;EACxB,MAAMC,mBAAmB,GAAGH,0BAA0B,CAACI,UAAU,EAAEC,OAAO;EAC1E,IAAI,OAAOF,mBAAmB,KAAK,UAAU,EAAE;IAC7C,OAAOD,YAAY,CAACI,GAAG,CAACH,mBAAmB,CAAC;EAC9C;EACA,OAAOD,YAAY;AACrB","ignoreList":[]}

package/lib/typescript/src/views/FontProcessor.d.ts

@@ -1,2 +0,0 @@
-export declare function processFonts(_: (string | undefined)[]): (string | undefined)[];
-//# sourceMappingURL=FontProcessor.d.ts.map