@react-navigation/native-stack 8.0.0-alpha.4 → 8.0.0-alpha.41

package/src/utils/useAnimatedHeaderHeight.tsx

@@ -6,7 +6,7 @@ export const AnimatedHeaderHeightContext = React.createContext<
 >(undefined);
 
 export function useAnimatedHeaderHeight() {
-  const animatedValue = React.useContext(AnimatedHeaderHeightContext);
+  const animatedValue = React.use(AnimatedHeaderHeightContext);
 
   if (animatedValue === undefined) {
     throw new Error(

package/src/utils/useInvalidPreventRemoveError.tsx

@@ -8,7 +8,8 @@ export function useInvalidPreventRemoveError(
 ) {
   const { preventedRoutes } = usePreventRemoveContext();
   const preventedRouteKey = Object.keys(preventedRoutes)[0];
-  const preventedDescriptor = descriptors[preventedRouteKey];
+  const preventedDescriptor =
+    preventedRouteKey == null ? undefined : descriptors[preventedRouteKey];
   const isHeaderBackButtonMenuEnabledOnPreventedScreen =
     preventedDescriptor?.options?.headerBackButtonMenuEnabled;
   const preventedRouteName = preventedDescriptor?.route?.name;

package/src/views/FooterComponent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ScreenFooter } from 'react-native-screens';
 
 type FooterProps = {

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,18 @@ 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;
+  isNextScreenTransparent: boolean;
+  isNextScreenSheet: boolean;
+  isNextScreenModal: boolean;
+  isInactive: boolean;
+  isBeforeLast: boolean;
   onWillDisappear: () => void;
   onWillAppear: () => void;
   onAppear: () => void;
@@ -70,14 +72,24 @@ type SceneViewProps = {
 
 const useNativeDriver = Platform.OS !== 'web';
 
+const TRANSPARENT_PRESENTATIONS = [
+  'transparentModal',
+  'containedTransparentModal',
+];
+
+const SHEET_PRESENTATIONS = ['formSheet', 'pageSheet'];
+
 const SceneView = ({
   index,
   focused,
-  shouldFreeze,
   descriptor,
   previousDescriptor,
   isPresentationModal,
-  isPreloaded,
+  isNextScreenTransparent,
+  isNextScreenSheet,
+  isNextScreenModal,
+  isInactive,
+  isBeforeLast,
   onWillDisappear,
   onWillAppear,
   onAppear,
@@ -91,6 +103,7 @@ const SceneView = ({
   const { route, navigation, options, render } = descriptor;
 
   const {
+    inactiveBehavior = 'pause',
     animation,
     animationDuration,
     animationMatchesGesture,
@@ -123,7 +136,6 @@ const SceneView = ({
     statusBarStyle,
     unstable_sheetFooter,
     scrollEdgeEffects,
-    freezeOnBlur,
     contentStyle,
   } = options;
 
@@ -147,9 +159,9 @@ const SceneView = ({
   // Modals are fullscreen in landscape only on iPhone
   const isIPhone = Platform.OS === 'ios' && !(Platform.isPad || Platform.isTV);
 
-  const isParentHeaderShown = React.useContext(HeaderShownContext);
-  const parentHeaderHeight = React.useContext(HeaderHeightContext);
-  const parentHeaderBack = React.useContext(HeaderBackContext);
+  const isParentHeaderShown = React.use(HeaderShownContext);
+  const parentHeaderHeight = React.use(HeaderHeightContext);
+  const parentHeaderBack = React.use(HeaderBackContext);
 
   const isLandscape = useFrameSize((frame) => frame.width > frame.height);
 
@@ -226,6 +238,15 @@ const SceneView = ({
     headerBack,
   });
 
+  const headerContainerRef = React.useRef<View>(null);
+
+  React.useLayoutEffect(() => {
+    headerContainerRef.current?.measure((_x, _y, _width, height) => {
+      animatedHeaderHeight.setValue(height);
+      setHeaderHeight(height);
+    });
+  }, [animatedHeaderHeight]);
+
   const onHeaderHeightChange = hasCustomHeader
     ? // If we have a custom header, don't use native header height
       undefined
@@ -265,7 +286,8 @@ const SceneView = ({
                 if (
                   Platform.OS === 'android' &&
                   headerHeight !== 0 &&
-                  headerHeight <= ANDROID_DEFAULT_HEADER_HEIGHT
+                  // On some devices, height maybe slightly off (e.g. 56.17 instead of 56)
+                  Math.round(headerHeight) <= ANDROID_DEFAULT_HEADER_HEIGHT
                 ) {
                   // FIXME: On Android, events may get delivered out-of-order
                   // https://github.com/facebook/react-native/issues/54636
@@ -285,18 +307,102 @@ const SceneView = ({
         }
       );
 
+  const activityMode =
+    // Render focused screens normally
+    // Unpause preloaded and retained screens so updates are visible
+    // Unpause previous screen so update isn't delayed for swipe back
+    // This lets effects on those screens run
+    // We don't need to handle inert as it'll be handled natively
+    inactiveBehavior === 'none' ||
+    focused ||
+    isInactive ||
+    isNextScreenTransparent ||
+    // Unpause the screen behind a sheet so it stays up to date
+    // Sheets don't cover the whole screen, so the screen behind is visible
+    isNextScreenSheet ||
+    // On iPadOS, the base screen is visible while modal is in a smaller area
+    // So also keep the screens unpaused
+    (isNextScreenModal && !isModal) ||
+    isBeforeLast
+      ? 'normal'
+      : inactiveBehavior === 'unmount' && !('state' in route && route.state)
+        ? 'unmounted'
+        : 'paused';
+
+  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
+            style={[
+              styles.header,
+              headerTransparent
+                ? [
+                    styles.absolute,
+                    // Specify an explicit min height for Android screen readers
+                    { minHeight: headerHeight },
+                  ]
+                : null,
+            ]}
+          >
+            <View
+              ref={headerContainerRef}
+              onLayout={(e) => {
+                const headerHeight = e.nativeEvent.layout.height;
+
+                animatedHeaderHeight.setValue(headerHeight);
+                setHeaderHeight(headerHeight);
+              }}
+              style={{ pointerEvents: 'box-none' }}
+            >
+              {header({
+                back: headerBack,
+                options,
+                route,
+                navigation,
+              })}
+            </View>
+          </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
         key={route.key}
         screenId={route.key}
-        activityState={isPreloaded ? 0 : 2}
+        activityState={isInactive ? 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
@@ -353,62 +459,21 @@ 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)
+        {activityMode === 'unmounted' ? null : (
+          <ActivityView
+            mode={activityMode}
+            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={styles.content}
           >
-            {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>
+            {content}
+          </ActivityView>
+        )}
       </ScreenStackItem>
     </NavigationProvider>
   );
@@ -425,46 +490,57 @@ export function NativeStackView({ state, navigation, descriptors }: Props) {
 
   useInvalidPreventRemoveError(descriptors);
 
-  const modalRouteKeys = getModalRouteKeys(state.routes, descriptors);
+  const activeRoutes = state.routes.slice(0, state.index + 1);
+  const modalRouteKeys = getModalRouteKeys(activeRoutes, descriptors);
 
   return (
     <SafeAreaProviderCompat>
       <ScreenStack style={styles.container}>
-        {state.routes.concat(state.preloadedRoutes).map((route, index) => {
+        {state.routes.map((route, index) => {
           const descriptor = descriptors[route.key];
+
+          if (descriptor == null) {
+            throw new Error(
+              `Couldn't find a descriptor for route '${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 previousKey = activeRoutes[index - 1]?.key;
+          const nextKey = activeRoutes[index + 1]?.key;
           const previousDescriptor = previousKey
             ? descriptors[previousKey]
             : undefined;
           const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
 
-          const isModal = modalRouteKeys.includes(route.key);
-          const isModalOnIos = isModal && Platform.OS === 'ios';
+          const nextPresentation = nextDescriptor?.options.presentation;
 
-          const isPreloaded = state.preloadedRoutes.some(
-            (r) => r.key === route.key
-          );
+          const isNextScreenTransparent =
+            nextPresentation != null &&
+            TRANSPARENT_PRESENTATIONS.includes(nextPresentation);
+          const isNextScreenSheet =
+            nextPresentation != null &&
+            SHEET_PRESENTATIONS.includes(nextPresentation);
+          const isNextScreenModal = nextKey
+            ? modalRouteKeys.includes(nextKey)
+            : false;
 
-          // 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;
+          const isModal = modalRouteKeys.includes(route.key);
 
           return (
             <SceneView
               key={route.key}
               index={index}
               focused={isFocused}
-              shouldFreeze={shouldFreeze}
               descriptor={descriptor}
               previousDescriptor={previousDescriptor}
               nextDescriptor={nextDescriptor}
               isPresentationModal={isModal}
-              isPreloaded={isPreloaded}
+              isNextScreenTransparent={isNextScreenTransparent}
+              isNextScreenSheet={isNextScreenSheet}
+              isNextScreenModal={isNextScreenModal}
+              isInactive={index > state.index}
+              isBeforeLast={index === activeRoutes.length - 2}
               onWillDisappear={() => {
                 navigation.emit({
                   type: 'transitionStart',
@@ -544,6 +620,9 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  content: {
+    flex: 1,
+  },
   header: {
     zIndex: 1,
   },

package/src/views/NativeStackView.tsx

@@ -6,6 +6,7 @@ import {
   useHeaderHeight,
 } from '@react-navigation/elements';
 import {
+  ActivityView,
   SafeAreaProviderCompat,
   Screen,
 } from '@react-navigation/elements/internal';
@@ -15,12 +16,13 @@ import {
   useLinkBuilder,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { Animated, Image, StyleSheet, View } from 'react-native';
+import { Animated, StyleSheet, View } from 'react-native';
 
 import type {
   NativeStackDescriptorMap,
   NativeStackNavigationHelpers,
 } from '../types';
+import { getModalRouteKeys } from '../utils/getModalRoutesKeys';
 import { AnimatedHeaderHeightContext } from '../utils/useAnimatedHeaderHeight';
 
 type Props = {
@@ -35,20 +37,31 @@ const TRANSPARENT_PRESENTATIONS = [
 ];
 
 export function NativeStackView({ state, descriptors }: Props) {
-  const parentHeaderBack = React.useContext(HeaderBackContext);
+  const parentHeaderBack = React.use(HeaderBackContext);
   const { buildHref } = useLinkBuilder();
 
+  const activeRoutes = state.routes.slice(0, state.index + 1);
+  const modalRouteKeys = getModalRouteKeys(activeRoutes, descriptors);
+
   return (
     <SafeAreaProviderCompat>
-      {state.routes.concat(state.preloadedRoutes).map((route, i) => {
+      {state.routes.map((route, i) => {
         const isFocused = state.index === i;
-        const previousKey = state.routes[i - 1]?.key;
-        const nextKey = state.routes[i + 1]?.key;
+        const previousKey = activeRoutes[i - 1]?.key;
+        const nextKey = activeRoutes[i + 1]?.key;
         const previousDescriptor = previousKey
           ? descriptors[previousKey]
           : undefined;
         const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
-        const { options, navigation, render } = descriptors[route.key];
+        const descriptor = descriptors[route.key];
+
+        if (descriptor == null) {
+          throw new Error(
+            `Couldn't find a descriptor for route '${route.key}'.`
+          );
+        }
+
+        const { options, navigation, render } = descriptor;
 
         const headerBack = previousDescriptor
           ? {
@@ -66,6 +79,7 @@ export function NativeStackView({ state, descriptors }: Props) {
         const canGoBack = headerBack != null;
 
         const {
+          inactiveBehavior = 'pause',
           header,
           headerShown,
           headerBackIcon,
@@ -79,11 +93,40 @@ export function NativeStackView({ state, descriptors }: Props) {
 
         const nextPresentation = nextDescriptor?.options.presentation;
 
-        const isPreloaded = state.preloadedRoutes.some(
-          (r) => r.key === route.key
-        );
+        const isNextScreenTransparent =
+          nextPresentation != null &&
+          TRANSPARENT_PRESENTATIONS.includes(nextPresentation);
 
-        return (
+        const isInactive = i > state.index;
+
+        const isBeforeLast = i === activeRoutes.length - 2;
+
+        const isNextScreenModal = nextKey
+          ? modalRouteKeys.includes(nextKey)
+          : false;
+
+        const activityMode =
+          // Render focused screens normally
+          isFocused
+            ? 'normal'
+            : // Unpause preloaded and retained screens so updates are visible
+              // This lets effects on those screens run
+              inactiveBehavior === 'none' ||
+                isInactive ||
+                isNextScreenTransparent
+              ? 'inert'
+              : inactiveBehavior === 'unmount' &&
+                  !isNextScreenModal &&
+                  !isBeforeLast &&
+                  !route.state
+                ? 'unmounted'
+                : 'paused';
+
+        if (activityMode === 'unmounted') {
+          return null;
+        }
+
+        const content = (
           <Screen
             key={route.key}
             focused={isFocused}
@@ -117,18 +160,7 @@ export function NativeStackView({ state, descriptors }: Props) {
                               {...rest}
                               label={headerBackTitle ?? label}
                               tintColor={tintColor}
-                              backImage={
-                                headerBackIcon !== undefined
-                                  ? () => (
-                                      <Image
-                                        source={headerBackIcon.source}
-                                        resizeMode="contain"
-                                        tintColor={tintColor}
-                                        style={styles.backImage}
-                                      />
-                                    )
-                                  : undefined
-                              }
+                              icon={headerBackIcon}
                               onPress={navigation.goBack}
                             />
                           )
@@ -138,22 +170,13 @@ export function NativeStackView({ state, descriptors }: Props) {
                 />
               )
             }
-            style={[
-              StyleSheet.absoluteFill,
-              {
-                display:
-                  (isFocused ||
-                    (nextPresentation != null &&
-                      TRANSPARENT_PRESENTATIONS.includes(nextPresentation))) &&
-                  !isPreloaded
-                    ? 'flex'
-                    : 'none',
-              },
-              presentation != null &&
+            style={{
+              ...StyleSheet.absoluteFill,
+              ...(presentation != null &&
               TRANSPARENT_PRESENTATIONS.includes(presentation)
                 ? { backgroundColor: 'transparent' }
-                : null,
-            ]}
+                : null),
+            }}
           >
             <HeaderBackContext.Provider value={headerBack}>
               <AnimatedHeaderHeightProvider>
@@ -164,6 +187,17 @@ export function NativeStackView({ state, descriptors }: Props) {
             </HeaderBackContext.Provider>
           </Screen>
         );
+
+        return (
+          <ActivityView
+            key={route.key}
+            mode={activityMode}
+            visible={isFocused || isNextScreenTransparent}
+            style={StyleSheet.absoluteFill}
+          >
+            {content}
+          </ActivityView>
+        );
       })}
     </SafeAreaProviderCompat>
   );
@@ -194,9 +228,4 @@ const styles = StyleSheet.create({
   contentContainer: {
     flex: 1,
   },
-  backImage: {
-    height: 24,
-    width: 24,
-    margin: 3,
-  },
 });