react-native-screen-transitions 3.0.0-rc.2 → 3.0.0-rc.4

package/src/native-stack/views/NativeStackView.native.tsx

@@ -33,7 +33,8 @@ import {
 	ScreenStack,
 	ScreenStackItem,
 } from "react-native-screens";
-import { NativeStackScreenLifecycleController } from "../../shared/components/controllers/screen-lifecycle";
+import { NativeStackScreenLifecycleController } from "../../shared/components/controllers/native-stack-lifecycle";
+import { RoutesProvider } from "../../shared/providers/routes.provider";
 import { ScreenTransitionProvider } from "../../shared/providers/screen-transition.provider";
 import type {
 	NativeStackDescriptor,
@@ -515,118 +516,126 @@ export function NativeStackView({
 
 	const routes = state.routes.concat(state.preloadedRoutes);
 
+	// Memoize route keys array for RoutesProvider
+	const routeKeys = React.useMemo(
+		() => routes.map((route) => route.key),
+		[routes],
+	);
+
 	return (
-		<GestureHandlerRootView>
-			<SafeAreaProviderCompat>
-				<ScreenStack style={styles.container}>
-					{routes.map((route, index) => {
-						const descriptor =
-							descriptors[route.key] ?? preloadedDescriptors[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
-							? descriptors[previousKey]
-							: undefined;
-						const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
-
-						const isModal = modalRouteKeys.includes(route.key);
-
-						const isPreloaded =
-							preloadedDescriptors[route.key] !== undefined &&
-							descriptors[route.key] === undefined;
-
-						// 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
-							: !isPreloaded && !isFocused;
-
-						return (
-							<SceneView
-								key={route.key}
-								index={index}
-								focused={isFocused}
-								shouldFreeze={shouldFreeze}
-								descriptor={descriptor}
-								previousDescriptor={previousDescriptor}
-								nextDescriptor={nextDescriptor}
-								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) => {
-									navigation.dispatch({
-										...StackActions.pop(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.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,
-										},
-									});
-								}}
-							/>
-						);
-					})}
-				</ScreenStack>
-			</SafeAreaProviderCompat>
-		</GestureHandlerRootView>
+		<RoutesProvider routeKeys={routeKeys}>
+			<GestureHandlerRootView>
+				<SafeAreaProviderCompat>
+					<ScreenStack style={styles.container}>
+						{routes.map((route, index) => {
+							const descriptor =
+								descriptors[route.key] ?? preloadedDescriptors[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
+								? descriptors[previousKey]
+								: undefined;
+							const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
+
+							const isModal = modalRouteKeys.includes(route.key);
+
+							const isPreloaded =
+								preloadedDescriptors[route.key] !== undefined &&
+								descriptors[route.key] === undefined;
+
+							// 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
+								: !isPreloaded && !isFocused;
+
+							return (
+								<SceneView
+									key={route.key}
+									index={index}
+									focused={isFocused}
+									shouldFreeze={shouldFreeze}
+									descriptor={descriptor}
+									previousDescriptor={previousDescriptor}
+									nextDescriptor={nextDescriptor}
+									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) => {
+										navigation.dispatch({
+											...StackActions.pop(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.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,
+											},
+										});
+									}}
+								/>
+							);
+						})}
+					</ScreenStack>
+				</SafeAreaProviderCompat>
+			</GestureHandlerRootView>
+		</RoutesProvider>
 	);
 }