@react-navigation/native-stack 8.0.0-alpha.12 → 8.0.0-alpha.14

package/src/views/NativeStackView.native.tsx

@@ -6,7 +6,10 @@ import {
   HeaderShownContext,
   useFrameSize,
 } from '@react-navigation/elements';
-import { SafeAreaProviderCompat } from '@react-navigation/elements/internal';
+import {
+  ActivityView,
+  SafeAreaProviderCompat,
+} from '@react-navigation/elements/internal';
 import {
   NavigationProvider,
   type ParamListBase,
@@ -44,19 +47,15 @@ import { useHeaderConfigProps } from './useHeaderConfigProps';
 
 const ANDROID_DEFAULT_HEADER_HEIGHT = 56;
 
-function isFabric() {
-  return 'nativeFabricUIManager' in global;
-}
-
 type SceneViewProps = {
   index: number;
   focused: boolean;
-  shouldFreeze: boolean;
   descriptor: NativeStackDescriptor;
-  previousDescriptor?: NativeStackDescriptor;
-  nextDescriptor?: NativeStackDescriptor;
-  isPresentationModal?: boolean;
-  isPreloaded?: boolean;
+  previousDescriptor?: NativeStackDescriptor | undefined;
+  nextDescriptor?: NativeStackDescriptor | undefined;
+  isPresentationModal?: boolean | undefined;
+  isNextScreenTransparent?: boolean | undefined;
+  isPreloaded?: boolean | undefined;
   onWillDisappear: () => void;
   onWillAppear: () => void;
   onAppear: () => void;
@@ -70,13 +69,18 @@ type SceneViewProps = {
 
 const useNativeDriver = Platform.OS !== 'web';
 
+const TRANSPARENT_PRESENTATIONS = [
+  'transparentModal',
+  'containedTransparentModal',
+];
+
 const SceneView = ({
   index,
   focused,
-  shouldFreeze,
   descriptor,
   previousDescriptor,
   isPresentationModal,
+  isNextScreenTransparent,
   isPreloaded,
   onWillDisappear,
   onWillAppear,
@@ -91,6 +95,7 @@ const SceneView = ({
   const { route, navigation, options, render } = descriptor;
 
   const {
+    inactiveBehavior = 'pause',
     animation,
     animationDuration,
     animationMatchesGesture,
@@ -123,7 +128,6 @@ const SceneView = ({
     statusBarStyle,
     unstable_sheetFooter,
     scrollEdgeEffects,
-    freezeOnBlur,
     contentStyle,
   } = options;
 
@@ -285,6 +289,55 @@ const SceneView = ({
         }
       );
 
+  const content = (
+    <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;
+
+              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>
+  );
+
   return (
     <NavigationProvider navigation={navigation} route={route}>
       <ScreenStackItem
@@ -296,7 +349,6 @@ const SceneView = ({
         customAnimationOnSwipe={animationMatchesGesture}
         fullScreenSwipeEnabled={fullScreenGestureEnabled}
         fullScreenSwipeShadowEnabled={fullScreenGestureShadowEnabled}
-        freezeOnBlur={freezeOnBlur}
         gestureEnabled={
           Platform.OS === 'android'
             ? // This prop enables handling of system back gestures on Android
@@ -353,62 +405,30 @@ const SceneView = ({
         ]}
         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;
-
-                  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>
+        <ActivityView
+          mode={
+            // Render focused screens normally
+            // Unpause preloaded screens so updates are visible
+            // This lets effects on preloaded screens run
+            // We don't need to handle inert as it'll be handled natively
+            inactiveBehavior === 'none' ||
+            focused ||
+            isPreloaded ||
+            isNextScreenTransparent
+              ? 'normal'
+              : 'paused'
+          }
+          visible={
+            // We don't need to hide the content since it's handled natively
+            // Hiding may also cause flash due to lag after native tab switch
+            // So we leave it always visible
+            true
+          }
+          style={StyleSheet.absoluteFill}
+        >
+          {content}
+        </ActivityView>
       </ScreenStackItem>
     </NavigationProvider>
   );
@@ -433,7 +453,6 @@ export function NativeStackView({ state, navigation, descriptors }: Props) {
         {state.routes.concat(state.preloadedRoutes).map((route, index) => {
           const descriptor = descriptors[route.key];
           const isFocused = state.index === index;
-          const isBelowFocused = state.index - 1 === index;
           const previousKey = state.routes[index - 1]?.key;
           const nextKey = state.routes[index + 1]?.key;
           const previousDescriptor = previousKey
@@ -441,29 +460,28 @@ export function NativeStackView({ state, navigation, descriptors }: Props) {
             : undefined;
           const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
 
+          const nextPresentation = nextDescriptor?.options.presentation;
+
+          const isNextScreenTransparent =
+            nextPresentation != null &&
+            TRANSPARENT_PRESENTATIONS.includes(nextPresentation);
+
           const isModal = modalRouteKeys.includes(route.key);
-          const isModalOnIos = isModal && Platform.OS === 'ios';
 
           const isPreloaded = state.preloadedRoutes.some(
             (r) => r.key === route.key
           );
 
-          // On Fabric, when screen is frozen, animated and reanimated values are not updated
-          // due to component being unmounted. To avoid this, we don't freeze the previous screen there
-          const shouldFreeze = isFabric()
-            ? !isPreloaded && !isFocused && !isBelowFocused && !isModalOnIos
-            : !isPreloaded && !isFocused && !isModalOnIos;
-
           return (
             <SceneView
               key={route.key}
               index={index}
               focused={isFocused}
-              shouldFreeze={shouldFreeze}
               descriptor={descriptor}
               previousDescriptor={previousDescriptor}
               nextDescriptor={nextDescriptor}
               isPresentationModal={isModal}
+              isNextScreenTransparent={isNextScreenTransparent}
               isPreloaded={isPreloaded}
               onWillDisappear={() => {
                 navigation.emit({

package/src/views/NativeStackView.tsx

@@ -6,6 +6,7 @@ import {
   useHeaderHeight,
 } from '@react-navigation/elements';
 import {
+  ActivityView,
   SafeAreaProviderCompat,
   Screen,
 } from '@react-navigation/elements/internal';
@@ -66,6 +67,7 @@ export function NativeStackView({ state, descriptors }: Props) {
         const canGoBack = headerBack != null;
 
         const {
+          inactiveBehavior = 'pause',
           header,
           headerShown,
           headerBackIcon,
@@ -79,11 +81,15 @@ export function NativeStackView({ state, descriptors }: Props) {
 
         const nextPresentation = nextDescriptor?.options.presentation;
 
+        const isNextScreenTransparent =
+          nextPresentation != null &&
+          TRANSPARENT_PRESENTATIONS.includes(nextPresentation);
+
         const isPreloaded = state.preloadedRoutes.some(
           (r) => r.key === route.key
         );
 
-        return (
+        const content = (
           <Screen
             key={route.key}
             focused={isFocused}
@@ -128,14 +134,7 @@ export function NativeStackView({ state, descriptors }: Props) {
               )
             }
             style={{
-              ...StyleSheet.absoluteFillObject,
-              display:
-                (isFocused ||
-                  (nextPresentation != null &&
-                    TRANSPARENT_PRESENTATIONS.includes(nextPresentation))) &&
-                !isPreloaded
-                  ? 'flex'
-                  : 'none',
+              ...StyleSheet.absoluteFill,
               ...(presentation != null &&
               TRANSPARENT_PRESENTATIONS.includes(presentation)
                 ? { backgroundColor: 'transparent' }
@@ -151,6 +150,28 @@ export function NativeStackView({ state, descriptors }: Props) {
             </HeaderBackContext.Provider>
           </Screen>
         );
+
+        return (
+          <ActivityView
+            key={route.key}
+            mode={
+              // Render focused screens normally
+              isFocused
+                ? 'normal'
+                : // Unpause preloaded screens so updates are visible
+                  // This lets effects on preloaded screens run
+                  inactiveBehavior === 'none' ||
+                    isPreloaded ||
+                    isNextScreenTransparent
+                  ? 'inert'
+                  : 'paused'
+            }
+            visible={isFocused || isPreloaded || isNextScreenTransparent}
+            style={StyleSheet.absoluteFill}
+          >
+            {content}
+          </ActivityView>
+        );
       })}
     </SafeAreaProviderCompat>
   );

package/src/views/useHeaderConfigProps.tsx

@@ -10,9 +10,10 @@ import {
 import { useMemo } from 'react';
 import { Platform, StyleSheet, type TextStyle, View } from 'react-native';
 import {
-  type HeaderBarButtonItem,
   type HeaderBarButtonItemMenuAction,
   type HeaderBarButtonItemSubmenu,
+  type HeaderBarButtonItemWithAction,
+  type HeaderBarButtonItemWithMenu,
   isSearchBarAvailableForCurrentPlatform,
   ScreenStackHeaderBackButtonImage,
   ScreenStackHeaderCenterView,
@@ -25,6 +26,7 @@ import {
 
 import type {
   NativeStackHeaderItem,
+  NativeStackHeaderItemButton,
   NativeStackHeaderItemMenuAction,
   NativeStackHeaderItemMenuSubmenu,
   NativeStackNavigationOptions,
@@ -74,7 +76,7 @@ const processBarButtonItems = (
 
         const { badge, label, labelStyle, icon, ...rest } = item;
 
-        let processedItem: HeaderBarButtonItem = {
+        const processedItemCommon = {
           ...rest,
           index,
           title: label,
@@ -82,32 +84,34 @@ const processBarButtonItems = (
             ...fonts.regular,
             ...labelStyle,
           },
-          icon:
-            icon?.type === 'image'
-              ? icon.tinted === false
-                ? {
-                    type: 'imageSource',
-                    imageSource: icon.source,
-                  }
-                : {
-                    type: 'templateSource',
-                    templateSource: icon.source,
-                  }
-              : icon,
+          icon: transformIcon(icon),
         };
 
-        if (processedItem.type === 'menu' && item.type === 'menu') {
+        let processedItem:
+          | HeaderBarButtonItemWithAction
+          | HeaderBarButtonItemWithMenu;
+
+        if (processedItemCommon.type === 'menu' && item.type === 'menu') {
           const { multiselectable, layout } = item.menu;
 
           processedItem = {
-            ...processedItem,
+            ...processedItemCommon,
             menu: {
-              ...processedItem.menu,
+              ...processedItemCommon.menu,
               singleSelection: !multiselectable,
               displayAsPalette: layout === 'palette',
               items: item.menu.items.map(getMenuItem),
             },
           };
+        } else if (
+          processedItemCommon.type === 'button' &&
+          item.type === 'button'
+        ) {
+          processedItem = processedItemCommon;
+        } else {
+          throw new Error(
+            `Invalid item type: ${JSON.stringify(item)}. Valid types are 'button' and 'menu'.`
+          );
         }
 
         if (badge) {
@@ -140,14 +144,30 @@ const processBarButtonItems = (
     .filter((item) => item != null);
 };
 
+const transformIcon = (
+  icon: NativeStackHeaderItemButton['icon']
+):
+  | HeaderBarButtonItemWithAction['icon']
+  | HeaderBarButtonItemWithMenu['icon'] => {
+  if (icon?.type === 'image') {
+    return icon.tinted === false
+      ? { type: 'imageSource', imageSource: icon.source }
+      : { type: 'templateSource', templateSource: icon.source };
+  }
+
+  return icon;
+};
+
 const getMenuItem = (
   item: NativeStackHeaderItemMenuAction | NativeStackHeaderItemMenuSubmenu
 ): HeaderBarButtonItemMenuAction | HeaderBarButtonItemSubmenu => {
   if (item.type === 'submenu') {
-    const { label, inline, layout, items, multiselectable, ...rest } = item;
+    const { label, icon, inline, layout, items, multiselectable, ...rest } =
+      item;
 
     return {
       ...rest,
+      icon: transformIcon(icon),
       title: label,
       displayAsPalette: layout === 'palette',
       displayInline: inline,
@@ -156,10 +176,11 @@ const getMenuItem = (
     };
   }
 
-  const { label, description, ...rest } = item;
+  const { label, icon, description, ...rest } = item;
 
   return {
     ...rest,
+    icon: transformIcon(icon),
     title: label,
     subtitle: description,
   };