react-native-screen-transitions 2.0.2 → 2.0.4

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 };
+};

package/src/hooks/animation/use-screen-animation.tsx

@@ -0,0 +1,142 @@
+import type { ParamListBase, RouteProp } from "@react-navigation/native";
+import { useWindowDimensions } from "react-native";
+import { type SharedValue, useDerivedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useKeys } from "../../providers/keys";
+import { Animations } from "../../stores/animations";
+import { Bounds } from "../../stores/bounds";
+import { type GestureMap, Gestures } from "../../stores/gestures";
+import type {
+	ScreenInterpolationProps,
+	ScreenTransitionState,
+} from "../../types/animation";
+import type { BoundEntry } from "../../types/bounds";
+import type { NativeStackDescriptor } from "../../types/navigator";
+import { buildBoundsAccessor } from "../../utils/bounds";
+
+type BuiltState = {
+	progress: SharedValue<number>;
+	closing: SharedValue<number>;
+	animating: SharedValue<number>;
+	gesture: GestureMap;
+	route: RouteProp<ParamListBase>;
+};
+
+const FALLBACK = Object.freeze({
+	progress: 0,
+	closing: 0,
+	animating: 0,
+	gesture: {
+		x: 0,
+		y: 0,
+		normalizedX: 0,
+		normalizedY: 0,
+		isDismissing: 0,
+		isDragging: 0,
+	},
+	bounds: {} as Record<string, BoundEntry>,
+	route: {} as RouteProp<ParamListBase>,
+});
+
+const useBuildScreenTransitionState = (
+	descriptor: NativeStackDescriptor | undefined,
+): BuiltState | undefined => {
+	const key = descriptor?.route.key;
+	if (!key) return undefined;
+	const progress = Animations.getAnimation(key, "progress");
+	const closing = Animations.getAnimation(key, "closing");
+	const animating = Animations.getAnimation(key, "animating");
+	const gesture = Gestures.getRouteGestures(key);
+	const route = descriptor?.route;
+
+	return { progress, closing, animating, gesture, route };
+};
+
+const unwrap = (
+	s: BuiltState | undefined,
+	key: string | undefined,
+): ScreenTransitionState | undefined => {
+	"worklet";
+	return s && key
+		? {
+				progress: s.progress.value ?? 0,
+				closing: s.closing.value ?? 0,
+				animating: s.animating.value ?? 0,
+				gesture: {
+					x: s.gesture.x.value ?? 0,
+					y: s.gesture.y.value ?? 0,
+					normalizedX: s.gesture.normalizedX.value ?? 0,
+					normalizedY: s.gesture.normalizedY.value ?? 0,
+					isDismissing: s.gesture.isDismissing.value ?? 0,
+					isDragging: s.gesture.isDragging.value ?? 0,
+				},
+				bounds: Bounds.getBounds(key) ?? {},
+				route: s.route,
+			}
+		: undefined;
+};
+
+export function _useScreenAnimation() {
+	const {
+		current: currentDescriptor,
+		next: nextDescriptor,
+		previous: previousDescriptor,
+	} = useKeys();
+
+	const dimensions = useWindowDimensions();
+
+	const currentAnimation = useBuildScreenTransitionState(currentDescriptor);
+
+	const nextAnimation = useBuildScreenTransitionState(nextDescriptor);
+	const prevAnimation = useBuildScreenTransitionState(previousDescriptor);
+
+	const insets = useSafeAreaInsets();
+
+	const screenInterpolatorProps = useDerivedValue<ScreenInterpolationProps>(
+		() => {
+			"worklet";
+
+			const previous = unwrap(prevAnimation, previousDescriptor?.route.key);
+			const next = unwrap(nextAnimation, nextDescriptor?.route.key);
+			const current =
+				unwrap(currentAnimation, currentDescriptor?.route.key) ?? FALLBACK;
+
+			const progress = current.progress + (next?.progress ?? 0);
+
+			const focused = !next;
+			const activeBoundId = Bounds.getActiveBoundId() || "";
+
+			const bounds = buildBoundsAccessor({
+				activeBoundId,
+				current,
+				previous,
+				next,
+				progress,
+				dimensions,
+			});
+
+			return {
+				layouts: { screen: dimensions },
+				insets,
+				previous,
+				current,
+				next,
+				focused,
+				activeBoundId,
+				progress,
+				bounds,
+			} satisfies ScreenInterpolationProps;
+		},
+	);
+
+	const screenStyleInterpolator =
+		nextDescriptor?.options.screenStyleInterpolator ||
+		currentDescriptor?.options.screenStyleInterpolator;
+
+	return { screenInterpolatorProps, screenStyleInterpolator };
+}
+export function useScreenAnimation() {
+	const { screenInterpolatorProps } = _useScreenAnimation();
+
+	return useDerivedValue(() => screenInterpolatorProps.value);
+}

package/src/hooks/bounds/use-bound-measurer.tsx

@@ -0,0 +1,71 @@
+import { useCallback } from "react";
+import type { View } from "react-native";
+import {
+	type AnimatedRef,
+	measure,
+	type StyleProps,
+	useSharedValue,
+} from "react-native-reanimated";
+import { useKeys } from "../../providers/keys";
+import { Bounds } from "../../stores/bounds";
+import { flattenStyle } from "../../utils/bounds/flatten-styles";
+import { useScreenAnimation } from "../animation/use-screen-animation";
+
+interface BoundMeasurerHookProps {
+	sharedBoundTag: string;
+	animatedRef: AnimatedRef<View>;
+	current: { route: { key: string } };
+	style: StyleProps;
+}
+
+export const useBoundMeasurer = ({
+	sharedBoundTag,
+	animatedRef,
+	current,
+	style,
+}: BoundMeasurerHookProps) => {
+	const { previous } = useKeys();
+	const interpolatorProps = useScreenAnimation();
+	const hasAlreadyMeasured = useSharedValue(false);
+
+	const measureAndSet = useCallback(() => {
+		"worklet";
+		if (!sharedBoundTag) return;
+		const measured = measure(animatedRef);
+		if (measured) {
+			Bounds.setBounds(
+				current.route.key,
+				sharedBoundTag,
+				measured,
+				flattenStyle(style),
+			);
+		}
+	}, [sharedBoundTag, animatedRef, current.route.key, style]);
+
+	const measureOnLayout = useCallback(() => {
+		"worklet";
+		if (!sharedBoundTag || hasAlreadyMeasured.value) return;
+
+		const previousRouteKey = previous?.route.key;
+		if (!previousRouteKey) return;
+
+		const previousBounds = Bounds.getBounds(previousRouteKey);
+		const hasPreviousBoundForTag = previousBounds[sharedBoundTag];
+
+		if (interpolatorProps.value.current.animating && hasPreviousBoundForTag) {
+			measureAndSet();
+			hasAlreadyMeasured.value = true;
+		}
+	}, [
+		measureAndSet,
+		interpolatorProps,
+		sharedBoundTag,
+		previous?.route.key,
+		hasAlreadyMeasured,
+	]);
+
+	return {
+		measureAndSet,
+		measureOnLayout,
+	};
+};