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

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

@@ -1,159 +0,0 @@
-import {
-	createContext,
-	Fragment,
-	useCallback,
-	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 { Bounds } from "../../stores/bounds";
-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) {
-					Bounds.setRouteActive(key, sharedBoundTag);
-				}
-				if (onPress) runOnJS(onPress)();
-				return;
-			}
-
-			emitUpdate();
-
-			Bounds.setBounds(key, sharedBoundTag, measured, preparedStyles);
-			if (!skipMarkingActive) {
-				Bounds.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 = Bounds.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/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,45 +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 { createBlankStackNavigator } from "./integrations/blank-stack/navigators/createBlankStackNavigator";
-
-export type {
-  NativeStackHeaderLeftProps,
-  NativeStackHeaderProps,
-  NativeStackHeaderRightProps,
-  NativeStackNavigationEventMap,
-  NativeStackNavigationOptions,
-  NativeStackNavigationProp,
-  NativeStackNavigatorProps,
-  NativeStackOptionsArgs,
-  NativeStackScreenProps,
-} from "./types/native-stack.navigator";
-
-export type {
-  BlankStackHeaderProps,
-  BlankStackNavigationEventMap,
-  BlankStackNavigationOptions,
-  BlankStackNavigationProp,
-  BlankStackNavigatorProps,
-  BlankStackOptionsArgs,
-  BlankStackScreenProps,
-} from "./types/blank-stack.navigator";

package/src/integrations/blank-stack/components/Header.tsx

@@ -1,141 +0,0 @@
-import {
-  NavigationContext,
-  NavigationRouteContext,
-} from "@react-navigation/native";
-import { useMemo } from "react";
-import { Animated, StyleSheet, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useScreenAnimation } from "../../../hooks/animation/use-screen-animation";
-import { KeysProvider, useKeys } from "../../../providers/keys";
-import type {
-  BlankStackDescriptor,
-  BlankStackHeaderProps,
-  BlankStackScene,
-} from "../../../types/blank-stack.navigator";
-import { useStackNavigationContext } from "../utils/with-stack-navigation";
-
-type HeaderHostProps = {
-  scene: BlankStackScene;
-  focusedIndex: number;
-  isFloating?: boolean;
-};
-
-const getActiveFloatHeader = (scenes: BlankStackScene[], index: number) => {
-  for (let i = index; i >= 0; i--) {
-    const scene = scenes[i];
-    const options = scene?.descriptor?.options;
-
-    if (options?.headerMode === "float" && options?.headerShown) {
-      return { scene, headerIndex: i };
-    }
-  }
-
-  return null;
-};
-
-const HeaderHost = ({ scene, focusedIndex, isFloating }: HeaderHostProps) => {
-  const insets = useSafeAreaInsets();
-  const animation = useScreenAnimation();
-
-  const HeaderComponent = scene.descriptor.options.header;
-
-  if (!HeaderComponent) {
-    return null;
-  }
-
-  const headerProps: BlankStackHeaderProps = {
-    route: scene.route,
-    navigation: scene.descriptor.navigation,
-    animation,
-    insets,
-    focusedIndex,
-  };
-
-  return (
-    <Animated.View
-      pointerEvents="box-none"
-      style={[
-        styles.container,
-        isFloating ? styles.floating : null,
-        styles.absolute,
-      ]}
-    >
-      <NavigationContext.Provider value={scene.descriptor.navigation}>
-        <NavigationRouteContext.Provider value={scene.route}>
-          <View pointerEvents="auto" style={styles.header}>
-            <HeaderComponent {...headerProps} />
-          </View>
-        </NavigationRouteContext.Provider>
-      </NavigationContext.Provider>
-    </Animated.View>
-  );
-};
-
-const FloatHeader = () => {
-  const { scenes, focusedIndex } = useStackNavigationContext();
-
-  const activeHeader = useMemo(
-    () => getActiveFloatHeader(scenes, focusedIndex),
-    [scenes, focusedIndex]
-  );
-
-  if (!activeHeader) {
-    return null;
-  }
-
-  const { scene, headerIndex } = activeHeader;
-
-  const previous = scenes[headerIndex - 1]?.descriptor;
-  const current = scene.descriptor;
-  const next = scenes[headerIndex + 1]?.descriptor;
-
-  return (
-    <KeysProvider current={current} previous={previous} next={next}>
-      <HeaderHost scene={scene} focusedIndex={focusedIndex} isFloating />
-    </KeysProvider>
-  );
-};
-
-const ScreenHeader = () => {
-  const { focusedIndex } = useStackNavigationContext();
-  const { current } = useKeys<BlankStackDescriptor>();
-
-  const options = current.options;
-
-  if (!options.headerShown || options.headerMode !== "screen") {
-    return null;
-  }
-
-  const scene: BlankStackScene = {
-    descriptor: current,
-    route: current.route,
-  };
-
-  return <HeaderHost scene={scene} focusedIndex={focusedIndex} />;
-};
-
-export const Header = {
-  Float: FloatHeader,
-  Screen: ScreenHeader,
-};
-
-const styles = StyleSheet.create({
-  header: {
-    position: "absolute",
-    top: 0,
-    start: 0,
-    end: 0,
-  },
-  container: {
-    flex: 1,
-  },
-  absolute: {
-    position: "absolute",
-    top: 0,
-    start: 0,
-    end: 0,
-  },
-  floating: {
-    zIndex: 1000,
-  },
-});