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

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

@@ -1,324 +0,0 @@
-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 { Animations } from "../../stores/animations";
-import { Gestures } from "../../stores/gestures";
-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 = Gestures.getRouteGestures(current.route.key);
-	const animations = Animations.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/index.ts

@@ -1,34 +0,0 @@
-import { FlatList, Pressable, ScrollView, View } from "react-native";
-import { presets, specs } from "./__configs__";
-import { createTransitionAwareComponent } from "./components/create-transition-aware-component";
-import MaskedView from "./components/integrations/masked-view";
-
-export default {
-	View: createTransitionAwareComponent(View),
-	Pressable: createTransitionAwareComponent(Pressable),
-	ScrollView: createTransitionAwareComponent(ScrollView, {
-		isScrollable: true,
-	}),
-	FlatList: createTransitionAwareComponent(FlatList, {
-		isScrollable: true,
-	}),
-	MaskedView: MaskedView,
-	presets,
-	specs,
-	createTransitionAwareComponent,
-};
-
-export { useScreenAnimation } from "./hooks/animation/use-screen-animation";
-export { createNativeStackNavigator } from "./integrations/native-stack/navigators/createNativeStackNavigator";
-
-export type {
-	NativeStackHeaderLeftProps,
-	NativeStackHeaderProps,
-	NativeStackHeaderRightProps,
-	NativeStackNavigationEventMap,
-	NativeStackNavigationOptions,
-	NativeStackNavigationProp,
-	NativeStackNavigatorProps,
-	NativeStackOptionsArgs,
-	NativeStackScreenProps,
-} from "./types/navigator";

package/src/integrations/native-stack/navigators/createNativeStackNavigator.tsx

@@ -1,112 +0,0 @@
-import {
-	createNavigatorFactory,
-	type EventArg,
-	type NavigatorTypeBagBase,
-	type ParamListBase,
-	type StackActionHelpers,
-	StackActions,
-	type StackNavigationState,
-	StackRouter,
-	type StackRouterOptions,
-	type StaticConfig,
-	type TypedNavigator,
-	useNavigationBuilder,
-} from "@react-navigation/native";
-import * as React from "react";
-
-import type {
-	NativeStackNavigationEventMap,
-	NativeStackNavigationOptions,
-	NativeStackNavigationProp,
-	NativeStackNavigatorProps,
-} from "../../../types/navigator";
-import { NativeStackView } from "../views/NativeStackView";
-
-function NativeStackNavigator({
-	id,
-	initialRouteName,
-	children,
-	layout,
-	screenListeners,
-	screenOptions,
-	screenLayout,
-	...rest
-}: NativeStackNavigatorProps) {
-	const { state, describe, descriptors, navigation, NavigationContent } =
-		useNavigationBuilder<
-			StackNavigationState<ParamListBase>,
-			StackRouterOptions,
-			StackActionHelpers<ParamListBase>,
-			NativeStackNavigationOptions,
-			NativeStackNavigationEventMap
-		>(StackRouter, {
-			id,
-			initialRouteName,
-			children,
-			layout,
-			screenListeners,
-			screenOptions,
-			screenLayout,
-		});
-
-	React.useEffect(
-		() =>
-			// @ts-expect-error: there may not be a tab navigator in parent
-			navigation?.addListener?.("tabPress", (e: any) => {
-				const isFocused = navigation.isFocused();
-
-				// Run the operation in the next frame so we're sure all listeners have been run
-				// This is necessary to know if preventDefault() has been called
-				requestAnimationFrame(() => {
-					if (
-						state.index > 0 &&
-						isFocused &&
-						!(e as EventArg<"tabPress", true>).defaultPrevented
-					) {
-						// When user taps on already focused tab and we're inside the tab,
-						// reset the stack to replicate native behaviour
-						navigation.dispatch({
-							...StackActions.popToTop(),
-							target: state.key,
-						});
-					}
-				});
-			}),
-		[navigation, state.index, state.key],
-	);
-
-	return (
-		<NavigationContent>
-			<NativeStackView
-				{...rest}
-				state={state}
-				navigation={navigation}
-				descriptors={descriptors}
-				describe={describe}
-			/>
-		</NavigationContent>
-	);
-}
-
-export function createNativeStackNavigator<
-	const ParamList extends ParamListBase,
-	const NavigatorID extends string | undefined = undefined,
-	const TypeBag extends NavigatorTypeBagBase = {
-		ParamList: ParamList;
-		NavigatorID: NavigatorID;
-		State: StackNavigationState<ParamList>;
-		ScreenOptions: NativeStackNavigationOptions;
-		EventMap: NativeStackNavigationEventMap;
-		NavigationList: {
-			[RouteName in keyof ParamList]: NativeStackNavigationProp<
-				ParamList,
-				RouteName,
-				NavigatorID
-			>;
-		};
-		Navigator: typeof NativeStackNavigator;
-	},
-	const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
->(config?: Config): TypedNavigator<TypeBag, Config> {
-	return createNavigatorFactory(NativeStackNavigator)(config);
-}

package/src/integrations/native-stack/utils/getModalRoutesKeys.ts

@@ -1,21 +0,0 @@
-import type { Route } from "@react-navigation/native";
-
-import type { NativeStackDescriptorMap } from "../../../types/navigator";
-
-export const getModalRouteKeys = (
-	routes: Route<string>[],
-	descriptors: NativeStackDescriptorMap,
-) =>
-	routes.reduce<string[]>((acc, route) => {
-		const { presentation } = descriptors[route.key]?.options ?? {};
-
-		if (
-			(acc.length && !presentation) ||
-			presentation === "modal" ||
-			presentation === "transparentModal"
-		) {
-			acc.push(route.key);
-		}
-
-		return acc;
-	}, []);

package/src/integrations/native-stack/utils/useInvalidPreventRemoveError.tsx

@@ -1,31 +0,0 @@
-import { usePreventRemoveContext } from "@react-navigation/native";
-import * as React from "react";
-
-import type { NativeStackDescriptorMap } from "../../../types/navigator";
-
-export function useInvalidPreventRemoveError(
-	descriptors: NativeStackDescriptorMap,
-) {
-	const { preventedRoutes } = usePreventRemoveContext();
-	const preventedRouteKey = Object.keys(preventedRoutes)[0];
-	const preventedDescriptor = descriptors[preventedRouteKey];
-	const isHeaderBackButtonMenuEnabledOnPreventedScreen =
-		preventedDescriptor?.options?.headerBackButtonMenuEnabled;
-	const preventedRouteName = preventedDescriptor?.route?.name;
-
-	React.useEffect(() => {
-		if (
-			preventedRouteKey != null &&
-			isHeaderBackButtonMenuEnabledOnPreventedScreen
-		) {
-			const message =
-				`The screen ${preventedRouteName} uses 'usePreventRemove' hook alongside 'headerBackButtonMenuEnabled: true', which is not supported. \n\n` +
-				`Consider removing 'headerBackButtonMenuEnabled: true' from ${preventedRouteName} screen to get rid of this error.`;
-			console.error(message);
-		}
-	}, [
-		preventedRouteKey,
-		isHeaderBackButtonMenuEnabledOnPreventedScreen,
-		preventedRouteName,
-	]);
-}