@react-navigation/native-stack 7.0.0-rc.27 → 7.0.0-rc.28

package/src/views/NativeStackView.tsx

@@ -9,6 +9,7 @@ import {
 } from '@react-navigation/elements';
 import {
   type ParamListBase,
+  type RouteProp,
   type StackNavigationState,
   useLinkBuilder,
   useTheme,
@@ -17,6 +18,7 @@ import * as React from 'react';
 import { Animated, Image, StyleSheet, View } from 'react-native';
 
 import type {
+  NativeStackDescriptor,
   NativeStackDescriptorMap,
   NativeStackNavigationHelpers,
 } from '../types';
@@ -27,6 +29,10 @@ type Props = {
   // This is used for the native implementation of the stack.
   navigation: NativeStackNavigationHelpers;
   descriptors: NativeStackDescriptorMap;
+  describe: (
+    route: RouteProp<ParamListBase>,
+    placeholder: boolean
+  ) => NativeStackDescriptor;
 };
 
 const TRANSPARENT_PRESENTATIONS = [
@@ -34,20 +40,20 @@ const TRANSPARENT_PRESENTATIONS = [
   'containedTransparentModal',
 ];
 
-export function NativeStackView({ state, descriptors }: Props) {
+export function NativeStackView({ state, descriptors, describe }: Props) {
   const parentHeaderBack = React.useContext(HeaderBackContext);
   const { buildHref } = useLinkBuilder();
   const { colors } = useTheme();
 
-  if (state.preloadedRoutes.length !== 0) {
-    throw new Error(
-      'Preloading routes is not supported in the NativeStackNavigator navigator.'
-    );
-  }
+  const preloadedDescriptors =
+    state.preloadedRoutes.reduce<NativeStackDescriptorMap>((acc, route) => {
+      acc[route.key] = acc[route.key] || describe(route, true);
+      return acc;
+    }, {});
 
   return (
     <SafeAreaProviderCompat style={{ backgroundColor: colors.background }}>
-      {state.routes.map((route, i) => {
+      {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;
@@ -55,7 +61,8 @@ export function NativeStackView({ state, descriptors }: Props) {
           ? descriptors[previousKey]
           : undefined;
         const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
-        const { options, navigation, render } = descriptors[route.key];
+        const { options, navigation, render } =
+          descriptors[route.key] ?? preloadedDescriptors[route.key];
 
         const headerBack = previousDescriptor
           ? {
@@ -86,6 +93,10 @@ export function NativeStackView({ state, descriptors }: Props) {
 
         const nextPresentation = nextDescriptor?.options.presentation;
 
+        const isPreloaded =
+          preloadedDescriptors[route.key] !== undefined &&
+          descriptors[route.key] === undefined;
+
         return (
           <Screen
             key={route.key}
@@ -146,9 +157,10 @@ export function NativeStackView({ state, descriptors }: Props) {
               StyleSheet.absoluteFill,
               {
                 display:
-                  isFocused ||
-                  (nextPresentation != null &&
-                    TRANSPARENT_PRESENTATIONS.includes(nextPresentation))
+                  (isFocused ||
+                    (nextPresentation != null &&
+                      TRANSPARENT_PRESENTATIONS.includes(nextPresentation))) &&
+                  !isPreloaded
                     ? 'flex'
                     : 'none',
               },