react-native-screen-transitions 2.4.2 → 3.0.0-beta.0

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

@@ -0,0 +1,150 @@
+import type { ParamListBase, RouteProp } from "@react-navigation/native";
+import { useMemo } from "react";
+import { useWindowDimensions } from "react-native";
+import { type SharedValue, useDerivedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import {
+	DEFAULT_SCREEN_TRANSITION_STATE,
+	NO_BOUNDS_MAP,
+} from "../../constants";
+import { type TransitionDescriptor, useKeys } from "../../providers/keys";
+import { AnimationStore } from "../../stores/animation-store";
+import { BoundStore } from "../../stores/bound-store";
+import { GestureStore, type GestureStoreMap } from "../../stores/gesture-store";
+import type {
+	ScreenInterpolationProps,
+	ScreenTransitionState,
+} from "../../types/animation";
+import { derivations } from "../../utils/animation/derivations";
+import { createBounds } from "../../utils/bounds";
+
+type BuiltState = {
+	progress: SharedValue<number>;
+	closing: SharedValue<number>;
+	animating: SharedValue<number>;
+	gesture: GestureStoreMap;
+	route: RouteProp<ParamListBase>;
+};
+
+const unwrap = (
+	s: BuiltState | undefined,
+	key: string | undefined,
+): ScreenTransitionState | undefined => {
+	"worklet";
+	if (!s || !key) return undefined;
+
+	return {
+		progress: s.progress.value,
+		closing: s.closing.value,
+		animating: s.animating.value,
+		gesture: {
+			x: s.gesture.x.value,
+			y: s.gesture.y.value,
+			normalizedX: s.gesture.normalizedX.value,
+			normalizedY: s.gesture.normalizedY.value,
+			isDismissing: s.gesture.isDismissing.value,
+			isDragging: s.gesture.isDragging.value,
+			direction: s.gesture.direction.value,
+		},
+		bounds: BoundStore.getBounds(key) || NO_BOUNDS_MAP,
+		route: s.route,
+	};
+};
+
+const useBuildScreenTransitionState = (
+	descriptor: TransitionDescriptor | undefined,
+): BuiltState | undefined => {
+	const key = descriptor?.route.key;
+
+	return useMemo(() => {
+		if (!key) return undefined;
+
+		return {
+			progress: AnimationStore.getAnimation(key, "progress"),
+			closing: AnimationStore.getAnimation(key, "closing"),
+			animating: AnimationStore.getAnimation(key, "animating"),
+			gesture: GestureStore.getRouteGestures(key),
+			route: descriptor.route,
+		};
+	}, [key, descriptor?.route]);
+};
+
+export function _useScreenAnimation() {
+	const dimensions = useWindowDimensions();
+	const insets = useSafeAreaInsets();
+
+	const {
+		current: currentDescriptor,
+		next: nextDescriptor,
+		previous: previousDescriptor,
+	} = useKeys();
+
+	const currentAnimation = useBuildScreenTransitionState(currentDescriptor);
+	const nextAnimation = useBuildScreenTransitionState(nextDescriptor);
+	const prevAnimation = useBuildScreenTransitionState(previousDescriptor);
+
+	const screenInterpolatorProps = useDerivedValue<
+		Omit<ScreenInterpolationProps, "bounds">
+	>(() => {
+		"worklet";
+
+		const previous = unwrap(prevAnimation, previousDescriptor?.route.key);
+
+		const next = nextDescriptor?.options?.enableTransitions
+			? unwrap(nextAnimation, nextDescriptor?.route.key)
+			: undefined;
+
+		const current =
+			unwrap(currentAnimation, currentDescriptor?.route.key) ??
+			DEFAULT_SCREEN_TRANSITION_STATE;
+
+		const {
+			progress,
+			focused,
+			activeBoundId,
+			active,
+			isActiveTransitioning,
+			isDismissing,
+		} = derivations({
+			current,
+			next,
+			previous,
+		});
+
+		return {
+			layouts: { screen: dimensions },
+			insets,
+			previous,
+			current,
+			next,
+			focused,
+			activeBoundId,
+			progress,
+
+			active,
+			isActiveTransitioning,
+			isDismissing,
+		};
+	});
+
+	const nextInterpolator = nextDescriptor?.options.screenStyleInterpolator;
+	const currentInterpolator =
+		currentDescriptor?.options.screenStyleInterpolator;
+
+	const screenStyleInterpolator = nextInterpolator ?? currentInterpolator;
+
+	return { screenInterpolatorProps, screenStyleInterpolator };
+}
+
+export function useScreenAnimation() {
+	const { screenInterpolatorProps } = _useScreenAnimation();
+
+	return useDerivedValue<ScreenInterpolationProps>(() => {
+		const props = screenInterpolatorProps.value;
+		return {
+			...props,
+			bounds: createBounds(props),
+		};
+	});
+}

package/src/shared/hooks/bounds/use-bound-registry.tsx

@@ -0,0 +1,153 @@
+import { createContext, Fragment, useContext, useMemo } from "react";
+import type { View } from "react-native";
+import {
+	type AnimatedRef,
+	measure,
+	runOnJS,
+	runOnUI,
+	type StyleProps,
+	useAnimatedReaction,
+	useSharedValue,
+} from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated/lib/typescript/commonTypes";
+import { useKeys } from "../../providers/keys";
+import { BoundStore } from "../../stores/bound-store";
+import { isBoundsEqual } from "../../utils/bounds/_utils/is-bounds-equal";
+import { prepareStyleForBounds } from "../../utils/bounds/_utils/styles";
+import useStableCallback from "../use-stable-callback";
+import useStableCallbackValue from "../use-stable-callback-value";
+
+interface BoundMeasurerHookProps {
+	sharedBoundTag?: string;
+	animatedRef: AnimatedRef<View>;
+	style: StyleProps;
+	onPress?: ((...args: unknown[]) => void) | undefined;
+}
+
+interface MaybeMeasureAndStoreParams {
+	onPress?: ((...args: unknown[]) => void) | undefined;
+	skipMarkingActive?: boolean;
+}
+
+interface MeasurementUpdateContextType {
+	updateSignal: SharedValue<number>;
+}
+
+const MeasurementUpdateContext =
+	createContext<MeasurementUpdateContextType | null>(null);
+
+export const useBoundsRegistry = ({
+	sharedBoundTag,
+	animatedRef,
+	style,
+	onPress,
+}: BoundMeasurerHookProps) => {
+	const { previous, current, next } = useKeys();
+	const preparedStyles = useMemo(() => prepareStyleForBounds(style), [style]);
+
+	const ROOT_MEASUREMENT_SIGNAL = useContext(MeasurementUpdateContext);
+	const ROOT_SIGNAL = useSharedValue(0);
+	const IS_ROOT = !ROOT_MEASUREMENT_SIGNAL;
+
+	const emitUpdate = useStableCallbackValue(() => {
+		"worklet";
+		if (IS_ROOT) ROOT_SIGNAL.value = ROOT_SIGNAL.value + 1;
+	});
+
+	const maybeMeasureAndStore = useStableCallbackValue(
+		({ onPress, skipMarkingActive }: MaybeMeasureAndStoreParams) => {
+			"worklet";
+			// Currently, there's no necessity to measure when the current route is blurred ( could potentially change in the future )
+			if (!sharedBoundTag || next) return;
+
+			const measured = measure(animatedRef);
+
+			if (!measured) {
+				console.warn(
+					`[react-native-screen-transitions] measure() returned null for sharedBoundTag="${sharedBoundTag}"`,
+				);
+				return;
+			}
+
+			const key = current.route.key;
+
+			if (isBoundsEqual({ measured, key, sharedBoundTag })) {
+				emitUpdate();
+				if (!skipMarkingActive) {
+					BoundStore.setRouteActive(key, sharedBoundTag);
+				}
+				if (onPress) runOnJS(onPress)();
+				return;
+			}
+
+			emitUpdate();
+
+			BoundStore.setBounds(key, sharedBoundTag, measured, preparedStyles);
+			if (!skipMarkingActive) {
+				BoundStore.setRouteActive(key, sharedBoundTag);
+			}
+
+			if (onPress) runOnJS(onPress)();
+		},
+	);
+
+	const hasMeasuredOnLayout = useSharedValue(false);
+	const handleInitialLayout = useStableCallbackValue(() => {
+		"worklet";
+
+		const prevKey = previous?.route.key;
+		if (!sharedBoundTag || hasMeasuredOnLayout.value || !prevKey) {
+			return;
+		}
+
+		const prevBounds = BoundStore.getBounds(prevKey)?.[sharedBoundTag];
+
+		if (prevBounds) {
+			// Should skip mark active if we are in a transition
+			maybeMeasureAndStore({ skipMarkingActive: true });
+			// Should not measure again while in transition
+			hasMeasuredOnLayout.value = true;
+		}
+	});
+
+	const captureActiveOnPress = useStableCallback(() => {
+		if (!sharedBoundTag) {
+			if (onPress) onPress();
+			return;
+		}
+
+		// In this case, we DO want to mark active
+		runOnUI(maybeMeasureAndStore)({ onPress });
+	});
+
+	const MeasurementSyncProvider = useMemo(() => {
+		if (!IS_ROOT || !sharedBoundTag) {
+			return Fragment;
+		}
+
+		return ({ children }: { children: React.ReactNode }) => (
+			<MeasurementUpdateContext.Provider value={{ updateSignal: ROOT_SIGNAL }}>
+				{children}
+			</MeasurementUpdateContext.Provider>
+		);
+	}, [IS_ROOT, sharedBoundTag, ROOT_SIGNAL]);
+
+	useAnimatedReaction(
+		() => ROOT_MEASUREMENT_SIGNAL?.updateSignal.value,
+		(current) => {
+			"worklet";
+
+			// We don't want to run on the initial amount)
+			if (current === 0 || current === undefined) return;
+
+			// Children should not have the ability to mark active
+			maybeMeasureAndStore({ skipMarkingActive: true });
+		},
+	);
+
+	return {
+		handleInitialLayout,
+		captureActiveOnPress,
+		MeasurementSyncProvider,
+	};
+};

package/src/shared/hooks/gestures/use-build-gestures.tsx

@@ -0,0 +1,324 @@
+import { useMemo } from "react";
+import { useWindowDimensions } from "react-native";
+import {
+	Gesture,
+	type GestureStateChangeEvent,
+	type GestureTouchEvent,
+	type GestureType,
+	type GestureUpdateEvent,
+	type PanGestureHandlerEventPayload,
+} from "react-native-gesture-handler";
+import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
+import {
+	runOnJS,
+	type SharedValue,
+	useSharedValue,
+} from "react-native-reanimated";
+import {
+	DEFAULT_GESTURE_ACTIVATION_AREA,
+	DEFAULT_GESTURE_DIRECTION,
+	DEFAULT_GESTURE_DRIVES_PROGRESS,
+	DEFAULT_GESTURE_ENABLED,
+	GESTURE_VELOCITY_IMPACT,
+} from "../../constants";
+import type { ScrollConfig } from "../../providers/gestures";
+import { useKeys } from "../../providers/keys";
+import { AnimationStore } from "../../stores/animation-store";
+import { GestureStore } from "../../stores/gesture-store";
+import { NavigatorDismissState } from "../../stores/navigator-dismiss-state";
+import { type GestureDirection, GestureOffsetState } from "../../types/gesture";
+import { startScreenTransition } from "../../utils/animation/start-screen-transition";
+import { applyOffsetRules } from "../../utils/gesture/check-gesture-activation";
+import { determineDismissal } from "../../utils/gesture/determine-dismissal";
+import { mapGestureToProgress } from "../../utils/gesture/map-gesture-to-progress";
+import { resetGestureValues } from "../../utils/gesture/reset-gesture-values";
+import { velocity } from "../../utils/gesture/velocity";
+import useStableCallback from "../use-stable-callback";
+import useStableCallbackValue from "../use-stable-callback-value";
+
+interface BuildGesturesHookProps {
+	scrollConfig: SharedValue<ScrollConfig | null>;
+}
+
+export const useBuildGestures = ({
+	scrollConfig,
+}: BuildGesturesHookProps): {
+	panGesture: GestureType;
+	nativeGesture: GestureType;
+} => {
+	const dimensions = useWindowDimensions();
+	const { current } = useKeys();
+
+	const initialTouch = useSharedValue({
+		x: 0,
+		y: 0,
+	});
+
+	const gestureOffsetState = useSharedValue<GestureOffsetState>(
+		GestureOffsetState.PENDING,
+	);
+
+	const gestures = GestureStore.getRouteGestures(current.route.key);
+	const animations = AnimationStore.getAll(current.route.key);
+
+	const {
+		gestureDirection = DEFAULT_GESTURE_DIRECTION,
+		gestureEnabled = DEFAULT_GESTURE_ENABLED,
+		gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
+		gestureDrivesProgress = DEFAULT_GESTURE_DRIVES_PROGRESS,
+		gestureActivationArea = DEFAULT_GESTURE_ACTIVATION_AREA,
+		gestureResponseDistance,
+		transitionSpec,
+	} = current.options;
+
+	const directions = useMemo(() => {
+		const directionsArray = Array.isArray(gestureDirection)
+			? gestureDirection
+			: [gestureDirection];
+		const isBidirectional = directionsArray.includes("bidirectional");
+
+		return {
+			vertical: directionsArray.includes("vertical") || isBidirectional,
+			verticalInverted:
+				directionsArray.includes("vertical-inverted") || isBidirectional,
+			horizontal: directionsArray.includes("horizontal") || isBidirectional,
+			horizontalInverted:
+				directionsArray.includes("horizontal-inverted") || isBidirectional,
+		};
+	}, [gestureDirection]);
+
+	const setNavigatorDismissal = useStableCallback(() => {
+		const key = current.navigation.getState().key;
+
+		NavigatorDismissState.set(key, true);
+	});
+
+	const handleDismiss = useStableCallback(() => {
+		const key = current.navigation.getState().key;
+		current.navigation.goBack();
+		NavigatorDismissState.remove(key);
+	});
+
+	const onTouchesDown = useStableCallbackValue((e: GestureTouchEvent) => {
+		"worklet";
+		const firstTouch = e.changedTouches[0];
+		initialTouch.value = { x: firstTouch.x, y: firstTouch.y };
+		gestureOffsetState.value = GestureOffsetState.PENDING;
+	});
+
+	const onTouchesMove = useStableCallbackValue(
+		(e: GestureTouchEvent, manager: GestureStateManagerType) => {
+			"worklet";
+
+			const touch = e.changedTouches[0];
+
+			const { isSwipingDown, isSwipingUp, isSwipingRight, isSwipingLeft } =
+				applyOffsetRules({
+					touch,
+					directions,
+					manager,
+					dimensions,
+					gestureOffsetState,
+					initialTouch: initialTouch.value,
+					activationArea: gestureActivationArea,
+					responseDistance: gestureResponseDistance,
+				});
+
+			if (gestureOffsetState.value === GestureOffsetState.FAILED) {
+				manager.fail();
+				return;
+			}
+
+			// Keep pending until thresholds are met; no eager activation.
+			if (gestures.isDragging?.value) {
+				manager.activate();
+				return;
+			}
+
+			const maxScrollY = scrollConfig.value?.contentHeight
+				? scrollConfig.value.contentHeight - scrollConfig.value.layoutHeight
+				: 0;
+
+			const maxScrollX = scrollConfig.value?.contentWidth
+				? scrollConfig.value.contentWidth - scrollConfig.value.layoutWidth
+				: 0;
+
+			const recognizedDirection =
+				isSwipingDown || isSwipingUp || isSwipingRight || isSwipingLeft;
+
+			const scrollCfg = scrollConfig.value;
+
+			let shouldActivate = false;
+			let activatedDirection: GestureDirection | null = null;
+
+			if (recognizedDirection) {
+				if (directions.vertical && isSwipingDown) {
+					shouldActivate = scrollCfg ? scrollCfg.y <= 0 : true;
+					if (shouldActivate) activatedDirection = "vertical";
+				}
+				if (directions.horizontal && isSwipingRight) {
+					shouldActivate = scrollCfg ? scrollCfg.x <= 0 : true;
+					if (shouldActivate) activatedDirection = "horizontal";
+				}
+				if (directions.verticalInverted && isSwipingUp) {
+					shouldActivate = scrollCfg ? scrollCfg.y >= maxScrollY : true;
+					if (shouldActivate) activatedDirection = "vertical-inverted";
+				}
+				if (directions.horizontalInverted && isSwipingLeft) {
+					shouldActivate = scrollCfg ? scrollCfg.x >= maxScrollX : true;
+					if (shouldActivate) activatedDirection = "horizontal-inverted";
+				}
+			}
+
+			if (recognizedDirection && !shouldActivate) {
+				manager.fail();
+				return;
+			}
+
+			if (
+				shouldActivate &&
+				gestureOffsetState.value === GestureOffsetState.PASSED &&
+				!gestures.isDismissing?.value
+			) {
+				gestures.direction.value = activatedDirection;
+				manager.activate();
+				return;
+			}
+		},
+	);
+
+	const onStart = useStableCallbackValue(() => {
+		"worklet";
+		gestures.isDragging.value = 1;
+		gestures.isDismissing.value = 0;
+	});
+
+	const onUpdate = useStableCallbackValue(
+		(event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
+			"worklet";
+
+			let gestureProgress = 0;
+
+			const { translationX, translationY } = event;
+			const { width, height } = dimensions;
+
+			gestures.x.value = translationX;
+			gestures.y.value = translationY;
+			gestures.normalizedX.value = Math.max(
+				-1,
+				Math.min(1, translationX / width),
+			);
+			gestures.normalizedY.value = Math.max(
+				-1,
+				Math.min(1, translationY / height),
+			);
+
+			let maxProgress = 0;
+
+			const allowedDown = directions.vertical;
+			const allowedUp = directions.verticalInverted;
+			const allowedRight = directions.horizontal;
+			const allowedLeft = directions.horizontalInverted;
+
+			if (allowedRight && event.translationX > 0) {
+				const currentProgress = mapGestureToProgress(
+					translationX,
+					dimensions.width,
+				);
+				maxProgress = Math.max(maxProgress, currentProgress);
+			}
+
+			if (allowedLeft && event.translationX < 0) {
+				const currentProgress = mapGestureToProgress(
+					-translationX,
+					dimensions.width,
+				);
+				maxProgress = Math.max(maxProgress, currentProgress);
+			}
+
+			if (allowedDown && event.translationY > 0) {
+				const currentProgress = mapGestureToProgress(
+					translationY,
+					dimensions.height,
+				);
+				maxProgress = Math.max(maxProgress, currentProgress);
+			}
+
+			if (allowedUp && event.translationY < 0) {
+				const currentProgress = mapGestureToProgress(
+					-translationY,
+					dimensions.height,
+				);
+				maxProgress = Math.max(maxProgress, currentProgress);
+			}
+
+			gestureProgress = maxProgress;
+
+			if (gestureDrivesProgress) {
+				animations.progress.value = 1 - gestureProgress;
+			}
+		},
+	);
+
+	const onEnd = useStableCallbackValue(
+		(event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+			"worklet";
+
+			const { shouldDismiss } = determineDismissal({
+				event,
+				directions,
+				dimensions,
+				gestureVelocityImpact,
+			});
+
+			const spec = shouldDismiss ? transitionSpec?.close : transitionSpec?.open;
+
+			resetGestureValues({
+				spec,
+				gestures,
+				shouldDismiss,
+				event,
+				dimensions,
+			});
+
+			if (shouldDismiss) {
+				runOnJS(setNavigatorDismissal)();
+			}
+
+			const initialVelocity = velocity.calculateProgressVelocity({
+				animations,
+				shouldDismiss,
+				event,
+				dimensions,
+				directions,
+			});
+
+			startScreenTransition({
+				target: shouldDismiss ? "close" : "open",
+				onAnimationFinish: shouldDismiss ? handleDismiss : undefined,
+				spec: transitionSpec,
+				animations,
+				initialVelocity,
+			});
+		},
+	);
+
+	return useMemo(() => {
+		const nativeGesture = Gesture.Native();
+
+		const panGesture = Gesture.Pan()
+			.enabled(gestureEnabled)
+			.manualActivation(true)
+			.onTouchesDown(onTouchesDown)
+			.onTouchesMove(onTouchesMove)
+			.onStart(onStart)
+			.onUpdate(onUpdate)
+			.onEnd(onEnd)
+			.blocksExternalGesture(nativeGesture);
+
+		return {
+			panGesture,
+			nativeGesture,
+		};
+	}, [gestureEnabled, onTouchesDown, onTouchesMove, onStart, onUpdate, onEnd]);
+};

package/src/shared/hooks/use-shared-value-state.ts

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import {
+	executeOnUIRuntimeSync,
+	runOnJS,
+	type SharedValue,
+	useAnimatedReaction,
+} from "react-native-reanimated";
+
+/**
+ * Derives React state from a Reanimated SharedValue.
+ * Updates the state whenever the shared value changes.
+ */
+export function useSharedValueState<T>(sharedValue: SharedValue<T>): T {
+	const [state, setState] = useState<T>(() => {
+		const readOnUI = executeOnUIRuntimeSync((sv: SharedValue<T>) => {
+			"worklet";
+			return sv.value;
+		});
+		return readOnUI(sharedValue);
+	});
+
+	useAnimatedReaction(
+		() => sharedValue.value,
+		(value) => runOnJS(setState)(value),
+	);
+
+	return state;
+}

package/src/shared/index.ts

@@ -0,0 +1,21 @@
+import { FlatList, Pressable, ScrollView, View } from "react-native";
+import { createTransitionAwareComponent } from "./components/create-transition-aware-component";
+import MaskedView from "./components/integrations/masked-view";
+import { Presets, Specs } from "./configs";
+
+export default {
+	createTransitionAwareComponent,
+	View: createTransitionAwareComponent(View),
+	Pressable: createTransitionAwareComponent(Pressable),
+	ScrollView: createTransitionAwareComponent(ScrollView, {
+		isScrollable: true,
+	}),
+	FlatList: createTransitionAwareComponent(FlatList, {
+		isScrollable: true,
+	}),
+	MaskedView: MaskedView,
+	Presets,
+	Specs,
+};
+
+export { useScreenAnimation } from "./hooks/animation/use-screen-animation";