react-native-screen-transitions 2.0.2 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-screen-transitions",
-	"version": "2.0.2",
+	"version": "2.0.3",
 	"description": "Easy screen transitions for React Native and Expo",
 	"author": "Ed",
 	"license": "MIT",
@@ -12,6 +12,7 @@
 	"main": "lib/commonjs/index.js",
 	"module": "lib/module/index.js",
 	"types": "lib/typescript/index.d.ts",
+	"react-native": "src/index",
 	"scripts": {
 		"build": "bob build",
 		"lint": "biome check ./src",
@@ -27,6 +28,7 @@
 	],
 	"files": [
 		"lib",
+		"src",
 		"README.md",
 		"LICENSE"
 	],
@@ -48,7 +50,7 @@
 		"@types/react": "~19.0.10",
 		"react-native-builder-bob": "0.39.0",
 		"tsup": "^8.5.0",
-		"typescript": "~5.8.3"
+		"typescript": ""
 	},
 	"react-native-builder-bob": {
 		"source": "src",
@@ -64,5 +66,5 @@
 			]
 		]
 	},
-	"gitHead": "3f7cb6a77b24a99123fd4cb1277f152aa365e792"
+	"gitHead": "abdad91d29dffbb246dc478311659548c18979b1"
 }

package/src/__tests__ /geometry.test.ts

@@ -0,0 +1,127 @@
+import { describe, expect, it } from "bun:test";
+import {
+	computeContentTransformGeometry,
+	computeRelativeGeometry,
+} from "../utils/bounds/geometry";
+
+describe("computeRelativeGeometry", () => {
+	it("calculates correct relative geometry when entering", () => {
+		const start = {
+			x: 10,
+			y: 20,
+			pageX: 10,
+			pageY: 20,
+			width: 100,
+			height: 200,
+		};
+		const end = {
+			x: 50,
+			y: 100,
+			pageX: 50,
+			pageY: 100,
+			width: 200,
+			height: 400,
+		};
+
+		const result = computeRelativeGeometry({ start, end, entering: true });
+
+		expect(result.dx).toBe(-90); // center diff X
+		expect(result.dy).toBe(-180); // center diff Y
+		expect(result.scaleX).toBe(0.5); // width ratio
+		expect(result.scaleY).toBe(0.5); // height ratio
+		expect(result.ranges).toEqual([0, 1]);
+		expect(result.entering).toBe(true);
+	});
+
+	it("calculates correct relative geometry when exiting", () => {
+		const start = { x: 0, y: 0, pageX: 10, pageY: 20, width: 100, height: 200 };
+		const end = { x: 0, y: 0, pageX: 50, pageY: 100, width: 200, height: 400 };
+
+		const result = computeRelativeGeometry({ start, end, entering: false });
+
+		expect(result.ranges).toEqual([1, 2]);
+		expect(result.entering).toBe(false);
+	});
+});
+
+describe("computeContentTransformGeometry", () => {
+	const dimensions = { width: 375, height: 812, scale: 1, fontScale: 1 };
+
+	it("calculates transform with aspectFit mode", () => {
+		const start = {
+			x: 0,
+			y: 0,
+			pageX: 50,
+			pageY: 100,
+			width: 100,
+			height: 100,
+		};
+		const end = { x: 0, y: 0, pageX: 100, pageY: 200, width: 200, height: 50 };
+
+		const result = computeContentTransformGeometry({
+			start,
+			end,
+			entering: true,
+			dimensions,
+			contentScaleMode: "aspectFit",
+		});
+
+		expect(result.s).toBe(0.5);
+		expect(result.entering).toBe(true);
+		expect(result.ranges).toEqual([0, 1]);
+	});
+
+	it("calculates transform with aspectFill mode", () => {
+		const start = {
+			x: 0,
+			y: 0,
+			pageX: 50,
+			pageY: 100,
+			width: 100,
+			height: 100,
+		};
+		const end = { x: 0, y: 0, pageX: 100, pageY: 200, width: 200, height: 50 };
+
+		const result = computeContentTransformGeometry({
+			start,
+			end,
+			entering: true,
+			dimensions,
+			contentScaleMode: "aspectFill",
+		});
+
+		expect(result.s).toBe(2);
+	});
+
+	it("handles auto mode based on aspect ratio difference", () => {
+		const start = { x: 0, y: 0, pageX: 0, pageY: 0, width: 100, height: 100 };
+		const end = { x: 0, y: 0, pageX: 0, pageY: 0, width: 200, height: 195 };
+
+		const result = computeContentTransformGeometry({
+			start,
+			end,
+			entering: true,
+			dimensions,
+			contentScaleMode: "auto",
+		});
+
+		expect(result.s).toBeCloseTo(0.512, 2);
+	});
+
+	it("handles zero dimensions safely", () => {
+		const start = { x: 0, y: 0, pageX: 0, pageY: 0, width: 0, height: 100 };
+		const end = { x: 0, y: 0, pageX: 0, pageY: 0, width: 200, height: 200 };
+
+		// Should not throw and use safe fallback
+		const result = computeContentTransformGeometry({
+			start,
+			end,
+			entering: true,
+			dimensions,
+			contentScaleMode: "aspectFit",
+		});
+
+		expect(result.s).toBeDefined();
+		expect(Number.isFinite(result.s)).toBe(true);
+	});
+});

package/src/components/bounds-activator.tsx

@@ -0,0 +1,29 @@
+import { useMemo } from "react";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { Bounds } from "../stores/bounds";
+
+interface BoundActivatorProps {
+	sharedBoundTag?: string;
+	children: React.ReactNode;
+	measure: () => void;
+}
+
+export const BoundActivator = ({
+	sharedBoundTag,
+	children,
+	measure,
+}: BoundActivatorProps) => {
+	const tapGesture = useMemo(() => {
+		return Gesture.Tap().onStart(() => {
+			"worklet";
+			if (sharedBoundTag) {
+				Bounds.setActiveBoundId(sharedBoundTag);
+				measure();
+			}
+		});
+	}, [sharedBoundTag, measure]);
+
+	if (!sharedBoundTag) return children;
+
+	return <GestureDetector gesture={tapGesture}>{children}</GestureDetector>;
+};

package/src/components/controllers/screen-lifecycle.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useLayoutEffect } from "react";
+import useStableCallback from "../../hooks/use-stable-callback";
+import { useKeys } from "../../providers/keys";
+import { Animations } from "../../stores/animations";
+import { NavigatorDismissState } from "../../stores/navigator-dismiss-state";
+import { resetStoresForScreen } from "../../stores/utils/reset-stores-for-screen";
+import { runTransition } from "../../utils/animation/run-transition";
+
+interface ScreenLifecycleProps {
+	children: React.ReactNode;
+}
+
+export const ScreenLifecycleController = ({
+	children,
+}: ScreenLifecycleProps) => {
+	const { current } = useKeys();
+
+	const animations = Animations.getAll(current.route.key);
+
+	const handleBeforeRemove = useStableCallback((e: any) => {
+		const key = current.navigation.getParent()?.getState().key;
+		const requestedDismissOnNavigator = NavigatorDismissState.get(key);
+
+		// Don't run e.preventDefault when the dismissal was on the local root
+		if (requestedDismissOnNavigator) {
+			resetStoresForScreen(current);
+			return;
+		}
+
+		// Don't run e.preventDefault when this is the first screen of the stack
+		if (current.navigation.getState().index === 0) {
+			resetStoresForScreen(current);
+			return;
+		}
+
+		e.preventDefault();
+		const onFinish = (finished: boolean) => {
+			if (finished) {
+				resetStoresForScreen(current);
+				current.navigation.dispatch(e.data.action);
+			}
+		};
+
+		runTransition({
+			target: "close",
+			spec: current.options.transitionSpec,
+			onFinish,
+			animations,
+		});
+	});
+
+	const handleInitialize = useStableCallback(() => {
+		runTransition({
+			target: "open",
+			spec: current.options.transitionSpec,
+			animations,
+		});
+	});
+
+	useLayoutEffect(handleInitialize, []);
+
+	useEffect(() => {
+		const unsubscribe = current.navigation.addListener(
+			"beforeRemove",
+			handleBeforeRemove,
+		);
+
+		return unsubscribe;
+	}, [current.navigation, handleBeforeRemove]);
+
+	return children;
+};

package/src/components/create-transition-aware-component.tsx

@@ -0,0 +1,99 @@
+import type React from "react";
+import { type ComponentType, forwardRef, memo } from "react";
+import type { View } from "react-native";
+import { GestureDetector } from "react-native-gesture-handler";
+import Animated, { runOnUI, useAnimatedRef } from "react-native-reanimated";
+import { useAssociatedStyles } from "../hooks/animation/use-associated-style";
+import { useBoundMeasurer } from "../hooks/bounds/use-bound-measurer";
+import { useScrollProgress } from "../hooks/gestures/use-scroll-progress";
+import { useGestureContext } from "../providers/gestures";
+import { useKeys } from "../providers/keys";
+import type { TransitionAwareProps } from "../types/core";
+import type { Any } from "../types/utils";
+import { BoundActivator } from "./bounds-activator";
+
+interface CreateTransitionAwareComponentOptions {
+	isScrollable?: boolean;
+}
+
+export function createTransitionAwareComponent<P extends object>(
+	Wrapped: ComponentType<P>,
+	options: CreateTransitionAwareComponentOptions = {},
+) {
+	const { isScrollable = false } = options;
+
+	const AnimatedComponent = Animated.createAnimatedComponent(Wrapped);
+
+	const ScrollableInner = forwardRef<
+		React.ComponentRef<typeof Wrapped>,
+		TransitionAwareProps<P>
+	>((props: Any, ref) => {
+		const { nativeGesture } = useGestureContext();
+
+		const { scrollHandler, onContentSizeChange, onLayout } = useScrollProgress({
+			onScroll: props.onScroll,
+			onContentSizeChange: props.onContentSizeChange,
+			onLayout: props.onLayout, // Add this line to pass through onLayout
+		});
+
+		return (
+			<GestureDetector gesture={nativeGesture}>
+				<AnimatedComponent
+					{...(props as Any)}
+					ref={ref}
+					onScroll={scrollHandler}
+					onContentSizeChange={onContentSizeChange}
+					onLayout={onLayout}
+					scrollEventThrottle={props.scrollEventThrottle || 16}
+				/>
+			</GestureDetector>
+		);
+	});
+
+	const Inner = forwardRef<
+		React.ComponentRef<typeof AnimatedComponent>,
+		TransitionAwareProps<P>
+	>((props, ref) => {
+		const { children, style, sharedBoundTag, styleId, onPress, ...rest } =
+			props as Any;
+
+		const animatedRef = useAnimatedRef<View>();
+		const { current } = useKeys();
+
+		const { associatedStyles } = useAssociatedStyles({
+			id: sharedBoundTag || styleId,
+		});
+
+		const { measureAndSet, measureOnLayout } = useBoundMeasurer({
+			sharedBoundTag,
+			animatedRef,
+			current,
+			style,
+		});
+
+		if (isScrollable) {
+			return <ScrollableInner {...(props as Any)} ref={ref} />;
+		}
+
+		return (
+			<BoundActivator sharedBoundTag={sharedBoundTag} measure={measureAndSet}>
+				<AnimatedComponent
+					{...(rest as Any)}
+					ref={animatedRef}
+					style={[style, associatedStyles]}
+					onPress={onPress}
+					onLayout={runOnUI(measureOnLayout)}
+				>
+					{children}
+				</AnimatedComponent>
+			</BoundActivator>
+		);
+	});
+
+	return memo(Inner) as React.MemoExoticComponent<
+		React.ForwardRefExoticComponent<
+			TransitionAwareProps<P> &
+				React.RefAttributes<React.ComponentRef<typeof Wrapped>>
+		>
+	>;
+}

package/src/components/root-transition-aware.tsx

@@ -0,0 +1,56 @@
+import { memo } from "react";
+import { StyleSheet } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { _useScreenAnimation } from "../hooks/animation/use-screen-animation";
+
+interface RootTransitionAwareProps {
+	children: React.ReactNode;
+}
+
+export const RootTransitionAware = memo(
+	({ children }: RootTransitionAwareProps) => {
+		const { screenInterpolatorProps, screenStyleInterpolator } =
+			_useScreenAnimation();
+
+		const animatedContentStyle = useAnimatedStyle(() => {
+			"worklet";
+			if (!screenStyleInterpolator) {
+				return {};
+			}
+			const props = screenInterpolatorProps.value;
+			return screenStyleInterpolator(props).contentStyle || {};
+		});
+
+		const animatedOverlayStyle = useAnimatedStyle(() => {
+			"worklet";
+			if (!screenStyleInterpolator) {
+				return {};
+			}
+			return (
+				screenStyleInterpolator(screenInterpolatorProps.value).overlayStyle ||
+				{}
+			);
+		});
+
+		return (
+			<Animated.View style={styles.container}>
+				<Animated.View
+					style={[StyleSheet.absoluteFillObject, animatedOverlayStyle]}
+					pointerEvents="none"
+				/>
+				<Animated.View style={[styles.content, animatedContentStyle]}>
+					{children}
+				</Animated.View>
+			</Animated.View>
+		);
+	},
+);
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+	content: {
+		flex: 1,
+	},
+});

package/src/configs/index.ts

@@ -0,0 +1,2 @@
+export * as presets from "./presets";
+export * as specs from "./specs";

package/src/configs/presets.ts

@@ -0,0 +1,227 @@
+import {
+	Extrapolation,
+	interpolate,
+	interpolateColor,
+} from "react-native-reanimated";
+import type { ScreenTransitionConfig } from "../types/navigator";
+import { DefaultSpec } from "./specs";
+
+export const SlideFromTop = (
+	config: Partial<ScreenTransitionConfig> = {},
+): ScreenTransitionConfig => {
+	return {
+		enableTransitions: true,
+		gestureEnabled: true,
+		gestureDirection: "vertical-inverted",
+		screenStyleInterpolator: ({
+			current,
+			next,
+			layouts: {
+				screen: { height },
+			},
+		}) => {
+			"worklet";
+
+			const progress = current.progress + (next?.progress ?? 0);
+
+			const y = interpolate(progress, [0, 1, 2], [-height, 0, height]);
+
+			return {
+				contentStyle: {
+					transform: [{ translateY: y }],
+				},
+			};
+		},
+		transitionSpec: {
+			open: DefaultSpec,
+			close: DefaultSpec,
+		},
+
+		...config,
+	};
+};
+
+export const ZoomIn = (
+	config: Partial<ScreenTransitionConfig> = {},
+): ScreenTransitionConfig => {
+	return {
+		enableTransitions: true,
+		gestureEnabled: false,
+		screenStyleInterpolator: ({ current, next }) => {
+			"worklet";
+
+			const progress = current.progress + (next?.progress ?? 0);
+
+			const scale = interpolate(
+				progress,
+				[0, 1, 2],
+				[0.5, 1, 0.5],
+				Extrapolation.CLAMP,
+			);
+
+			const opacity = interpolate(
+				progress,
+				[0, 1, 2],
+				[0, 1, 0],
+				Extrapolation.CLAMP,
+			);
+
+			return {
+				contentStyle: {
+					transform: [{ scale }],
+					opacity,
+				},
+			};
+		},
+		transitionSpec: {
+			open: DefaultSpec,
+			close: DefaultSpec,
+		},
+		...config,
+	};
+};
+
+export const SlideFromBottom = (
+	config: Partial<ScreenTransitionConfig> = {},
+): ScreenTransitionConfig => {
+	return {
+		enableTransitions: true,
+		gestureEnabled: true,
+		gestureDirection: "vertical",
+		screenStyleInterpolator: ({
+			current,
+			next,
+			layouts: {
+				screen: { height },
+			},
+		}) => {
+			"worklet";
+
+			const progress = current.progress + (next?.progress ?? 0);
+
+			const y = interpolate(progress, [0, 1, 2], [height, 0, -height]);
+
+			return {
+				contentStyle: {
+					transform: [{ translateY: y }],
+				},
+			};
+		},
+		transitionSpec: {
+			open: DefaultSpec,
+			close: DefaultSpec,
+		},
+		...config,
+	};
+};
+
+export const DraggableCard = (
+	config: Partial<ScreenTransitionConfig> = {},
+): ScreenTransitionConfig => {
+	return {
+		enableTransitions: true,
+		gestureEnabled: true,
+		gestureDirection: ["horizontal", "vertical"],
+		screenStyleInterpolator: ({ current, progress, layouts: { screen } }) => {
+			"worklet";
+
+			/** Combined */
+			const scale = interpolate(progress, [0, 1, 2], [0, 1, 0.75]);
+
+			/** Vertical */
+			const translateY = interpolate(
+				current.gesture.normalizedY,
+				[-1, 1],
+				[-screen.height * 0.5, screen.height * 0.5],
+				"clamp",
+			);
+
+			/** Horizontal */
+			const translateX = interpolate(
+				current.gesture.normalizedX,
+				[-1, 1],
+				[-screen.width * 0.5, screen.width * 0.5],
+				"clamp",
+			);
+
+			return {
+				contentStyle: {
+					transform: [{ scale }, { translateY: translateY }, { translateX }],
+				},
+			};
+		},
+		transitionSpec: {
+			open: DefaultSpec,
+			close: DefaultSpec,
+		},
+		...config,
+	};
+};
+
+export const ElasticCard = (
+	config: Partial<ScreenTransitionConfig> & {
+		elasticFactor?: number;
+	} = { elasticFactor: 0.5 },
+): ScreenTransitionConfig => {
+	return {
+		enableTransitions: true,
+		gestureEnabled: true,
+		gestureDirection: "bidirectional",
+		screenStyleInterpolator: ({
+			current,
+			next,
+			layouts: { screen },
+			progress,
+		}) => {
+			"worklet";
+
+			/**
+			 * Applies to both screens ( previous and incoming)
+			 */
+
+			const scale = interpolate(progress, [0, 1, 2], [0, 1, 0.8]);
+
+			/**
+			 * Applies to current screen
+			 */
+			const maxElasticityX = screen.width * (config.elasticFactor ?? 0.5);
+			const maxElasticityY = screen.height * (config.elasticFactor ?? 0.5);
+			const translateX = interpolate(
+				current.gesture.normalizedX,
+				[-1, 0, 1],
+				[-maxElasticityX, 0, maxElasticityX],
+				"clamp",
+			);
+
+			const translateY = interpolate(
+				current.gesture.normalizedY,
+				[-1, 0, 1],
+				[-maxElasticityY, 0, maxElasticityY],
+				"clamp",
+			);
+
+			/**
+			 * Applies to unfocused screen ( previous screen )
+			 */
+			const overlayColor = interpolateColor(
+				progress,
+				[0, 1],
+				["rgba(0,0,0,0)", "rgba(0,0,0,0.5)"],
+			);
+
+			return {
+				contentStyle: {
+					transform: [{ scale }, { translateX }, { translateY }],
+				},
+				overlayStyle: {
+					backgroundColor: !next ? overlayColor : "rgba(0,0,0,0)",
+				},
+			};
+		},
+		transitionSpec: {
+			open: DefaultSpec,
+			close: DefaultSpec,
+		},
+		...config,
+	};
+};

package/src/configs/specs.ts

@@ -0,0 +1,9 @@
+import type { WithSpringConfig } from "react-native-reanimated";
+
+export const DefaultSpec: WithSpringConfig = {
+	stiffness: 1000,
+	damping: 500,
+	mass: 3,
+	overshootClamping: true,
+	restSpeedThreshold: 0.01,
+};

package/src/hooks/animation/use-associated-style.tsx

@@ -0,0 +1,28 @@
+import { useAnimatedStyle } from "react-native-reanimated";
+import { _useScreenAnimation } from "./use-screen-animation";
+
+/**
+ * This hook is used to get the associated styles for a given styleId.
+ * It is used to get the associated styles for a given styleId.
+ * It is used to get the associated styles for a given styleId.
+ */
+export const useAssociatedStyles = ({ id }: { id?: string } = {}) => {
+	const { screenStyleInterpolator, screenInterpolatorProps } =
+		_useScreenAnimation();
+
+	const associatedStyles = useAnimatedStyle(() => {
+		"worklet";
+
+		if (!id || !screenStyleInterpolator) {
+			return {};
+		}
+
+		return (
+			screenStyleInterpolator(screenInterpolatorProps.value)[id] || {
+				opacity: 1, // <-- This fixes flickering?? We'll have to deep dive this?? wtf
+			}
+		);
+	});
+
+	return { associatedStyles };
+};