react-native-screen-transitions 4.0.0-alpha.0 → 4.0.0-alpha.10

package/src/components/boundary/portal/utils/shallow-equal.ts

@@ -1,25 +0,0 @@
-/**
- * Shallow equality for the flat signal objects produced by the portal
- * `useAnimatedReaction` blocks. Both sides always carry the same fixed key set,
- * so iterating one side's keys is sufficient. A `null`/`undefined` operand
- * (the first reaction run) is treated as not-equal so the reaction proceeds.
- */
-export const shallowEqual = (
-	a: Record<string, unknown> | null | undefined,
-	b: Record<string, unknown> | null | undefined,
-) => {
-	"worklet";
-	if (!a || !b) {
-		return false;
-	}
-
-	const keys = Object.keys(a);
-	for (let index = 0; index < keys.length; index++) {
-		const key = keys[index];
-		if (a[key] !== b[key]) {
-			return false;
-		}
-	}
-
-	return true;
-};

package/src/components/boundary/portal/utils/visible-host.ts

@@ -1,24 +0,0 @@
-export const resolveNextVisiblePortalHostName = ({
-	canSwitchImmediately,
-	isInterpolatorReady,
-	requestedName,
-	shouldTeleport,
-	visibleName,
-}: {
-	canSwitchImmediately?: boolean;
-	isInterpolatorReady: boolean;
-	requestedName: string | null;
-	shouldTeleport: boolean;
-	visibleName: string | null;
-}) => {
-	"worklet";
-	if (!shouldTeleport) {
-		return null;
-	}
-
-	if (requestedName && (canSwitchImmediately || isInterpolatorReady)) {
-		return requestedName;
-	}
-
-	return visibleName;
-};

package/src/components/masked-view.tsx

@@ -1,58 +0,0 @@
-import { type StyleProp, StyleSheet, View, type ViewStyle } from "react-native";
-import { CONTAINER_STYLE_ID, MASK_STYLE_ID } from "../constants";
-import { createTransitionAwareComponent } from "./create-transition-aware-component";
-
-const TransitionView = createTransitionAwareComponent(View);
-
-let LazyMaskedView = View;
-
-try {
-	LazyMaskedView = require("@react-native-masked-view/masked-view").default;
-} catch (_) {
-	// noop
-}
-
-/**
- * @deprecated Use `navigationMaskEnabled` with the navigation mask style IDs
- * instead.
- */
-export default function MaskedView({
-	children,
-	style: userStyles = {},
-}: {
-	children: React.ReactNode;
-	style?: StyleProp<ViewStyle>;
-}) {
-	if (LazyMaskedView === View) {
-		return children;
-	}
-
-	return (
-		<LazyMaskedView
-			style={styles.root}
-			// @ts-expect-error
-			maskElement={
-				<TransitionView styleId={MASK_STYLE_ID} style={styles.rootMask} />
-			}
-		>
-			<TransitionView
-				styleId={CONTAINER_STYLE_ID}
-				style={[styles.rootContainer, userStyles]}
-			>
-				{children}
-			</TransitionView>
-		</LazyMaskedView>
-	);
-}
-
-const styles = StyleSheet.create({
-	root: {
-		flex: 1,
-	},
-	rootMask: {
-		backgroundColor: "white",
-	},
-	rootContainer: {
-		flex: 1,
-	},
-});

package/src/components/scene-view.tsx

@@ -1,29 +0,0 @@
-import {
-	NavigationContext,
-	NavigationRouteContext,
-} from "@react-navigation/native";
-import * as React from "react";
-import type { BaseStackDescriptor } from "../types/stack.types";
-
-type SceneViewProps = {
-	descriptor: BaseStackDescriptor;
-};
-
-/**
- * Shared scene view for JS-rendered stacks (blank-stack, component-stack).
- * Wraps screen render output with navigation context providers
- * and optional screen overlay.
- */
-export const SceneView = React.memo(function SceneView({
-	descriptor,
-}: SceneViewProps) {
-	const { route, navigation, render } = descriptor;
-
-	return (
-		<NavigationContext.Provider value={navigation as any}>
-			<NavigationRouteContext.Provider value={route}>
-				{render?.()}
-			</NavigationRouteContext.Provider>
-		</NavigationContext.Provider>
-	);
-});

package/src/components/screen-container/layers/surface-container.tsx

@@ -1,63 +0,0 @@
-import { type ComponentType, memo, useMemo } from "react";
-import { StyleSheet, type ViewProps } from "react-native";
-import Animated from "react-native-reanimated";
-import { useDescriptors } from "../../../providers/screen/descriptors";
-import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
-
-type Props = {
-	children: React.ReactNode;
-	pointerEvents: ViewProps["pointerEvents"];
-};
-
-export const SurfaceContainer = memo(({ children, pointerEvents }: Props) => {
-	const { current } = useDescriptors();
-
-	/** @deprecated Use `contentComponent` instead. */
-	const DeprecatedSurfaceComponent = current.options.surfaceComponent;
-
-	const AnimatedSurfaceComponent = useMemo<ComponentType<any> | null>(() => {
-		return DeprecatedSurfaceComponent
-			? Animated.createAnimatedComponent(DeprecatedSurfaceComponent)
-			: null;
-	}, [DeprecatedSurfaceComponent]);
-
-	if (!AnimatedSurfaceComponent) return children;
-
-	return (
-		<AnimatedSurface
-			SurfaceComponent={AnimatedSurfaceComponent}
-			pointerEvents={pointerEvents}
-		>
-			{children}
-		</AnimatedSurface>
-	);
-});
-
-type AnimatedSurfaceProps = {
-	children: React.ReactNode;
-	pointerEvents: ViewProps["pointerEvents"];
-	SurfaceComponent: ComponentType<any>;
-};
-
-const AnimatedSurface = memo(
-	({ children, pointerEvents, SurfaceComponent }: AnimatedSurfaceProps) => {
-		const animatedSurfaceStyle = useSlotStyles("surface");
-		const animatedSurfaceProps = useSlotProps("surface");
-
-		return (
-			<SurfaceComponent
-				style={[styles.surface, animatedSurfaceStyle]}
-				animatedProps={animatedSurfaceProps}
-				pointerEvents={pointerEvents}
-			>
-				{children}
-			</SurfaceComponent>
-		);
-	},
-);
-
-const styles = StyleSheet.create({
-	surface: {
-		flex: 1,
-	},
-});

package/src/hooks/navigation/use-previous.ts

@@ -1,11 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export const usePrevious = <T>(value: T): T | null => {
-	const ref = useRef<T>(null);
-
-	useEffect(() => {
-		ref.current = value;
-	});
-
-	return ref.current;
-};

package/src/hooks/navigation/use-stack.tsx

@@ -1,185 +0,0 @@
-import type { Route } from "@react-navigation/native";
-import {
-	createContext,
-	type ReactNode,
-	useCallback,
-	useContext,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-	useSyncExternalStore,
-} from "react";
-import { useDerivedValue } from "react-native-reanimated";
-import { syncStackProgressValues } from "../../providers/screen/animation/helpers/stack-progress";
-import type { StackCoreContextValue } from "../../providers/stack/core.provider";
-import { AnimationStore } from "../../stores/animation.store";
-import type { OverlayProps } from "../../types/overlay.types";
-import type {
-	BaseStackDescriptor,
-	BaseStackNavigation,
-	BaseStackRoute,
-	BaseStackScene,
-} from "../../types/stack.types";
-
-export interface StackDescriptor<
-	TRoute extends BaseStackRoute = Route<string>,
-	TNavigation extends BaseStackNavigation = BaseStackNavigation,
-> extends BaseStackDescriptor<TRoute, TNavigation> {
-	options: BaseStackDescriptor["options"] & {
-		overlay?: (props: OverlayProps) => React.ReactNode;
-		overlayShown?: boolean;
-		meta?: Record<string, unknown>;
-		enableTransitions?: boolean;
-	};
-}
-
-export type StackScene<TDescriptor extends StackDescriptor = StackDescriptor> =
-	BaseStackScene<TDescriptor>;
-
-type StackDismissRequest = (payload: { route: BaseStackRoute }) => boolean;
-type StackSelector<T> = (stack: StackContextValue) => T;
-
-export interface StackContextValue extends StackCoreContextValue {
-	navigatorKey: string;
-	routeKeys: string[];
-	routes: Route<string>[];
-	scenes: StackScene[];
-	focusedIndex: number;
-	requestDismiss?: StackDismissRequest;
-}
-
-interface StackStoreApi {
-	getSnapshot: () => StackContextValue;
-	subscribe: (listener: () => void) => () => void;
-}
-
-interface MutableStackStoreApi extends StackStoreApi {
-	notify: () => void;
-	setSnapshot: (snapshot: StackContextValue) => boolean;
-}
-
-const createStackStore = (
-	initialSnapshot: StackContextValue,
-): MutableStackStoreApi => {
-	let snapshot = initialSnapshot;
-	const listeners = new Set<() => void>();
-
-	return {
-		getSnapshot: () => snapshot,
-		notify: () => {
-			for (const listener of listeners) {
-				listener();
-			}
-		},
-		setSnapshot: (nextSnapshot) => {
-			if (Object.is(snapshot, nextSnapshot)) {
-				return false;
-			}
-
-			snapshot = nextSnapshot;
-			return true;
-		},
-		subscribe: (listener) => {
-			listeners.add(listener);
-			return () => {
-				listeners.delete(listener);
-			};
-		},
-	};
-};
-
-const StackContext = createContext<StackStoreApi | null>(null);
-StackContext.displayName = "Stack";
-
-function StackProgressOwner({ routeKeys }: { routeKeys: string[] }) {
-	const visualProgressValues = useMemo(
-		() =>
-			routeKeys.map((routeKey) =>
-				AnimationStore.getValue(routeKey, "visualProgress"),
-			),
-		[routeKeys],
-	);
-
-	const stackProgressValues = useMemo(
-		() =>
-			routeKeys.map((routeKey) =>
-				AnimationStore.getValue(routeKey, "stackProgress"),
-			),
-		[routeKeys],
-	);
-
-	useDerivedValue(() => {
-		syncStackProgressValues(visualProgressValues, stackProgressValues);
-	});
-
-	return null;
-}
-
-export function StackProvider({
-	children,
-	value,
-}: {
-	children: ReactNode;
-	value: StackContextValue;
-}) {
-	const storeRef = useRef<MutableStackStoreApi | null>(null);
-	const pendingNotifyRef = useRef(false);
-
-	let store = storeRef.current;
-	if (!store) {
-		store = createStackStore(value);
-		storeRef.current = store;
-	}
-
-	pendingNotifyRef.current =
-		store.setSnapshot(value) || pendingNotifyRef.current;
-
-	useLayoutEffect(() => {
-		if (!pendingNotifyRef.current) {
-			return;
-		}
-
-		pendingNotifyRef.current = false;
-		store.notify();
-	});
-
-	return (
-		<StackContext.Provider value={store}>
-			<StackProgressOwner routeKeys={value.routeKeys} />
-			{children}
-		</StackContext.Provider>
-	);
-}
-
-function useStackStore(): StackStoreApi {
-	const store = useContext(StackContext);
-
-	if (store === null) {
-		throw new Error("useStack must be used within a Stack provider");
-	}
-
-	return store;
-}
-
-export function useStack<T extends StackContextValue = StackContextValue>(): T;
-export function useStack<T>(selector: StackSelector<T>): T;
-export function useStack<T>(
-	selector?: StackSelector<T>,
-): StackContextValue | T {
-	const store = useStackStore();
-	const selectorRef = useRef<StackSelector<StackContextValue | T>>(
-		selector ?? ((stack) => stack),
-	);
-	selectorRef.current = selector ?? ((stack) => stack);
-
-	const getSelectedSnapshot = useCallback(
-		() => selectorRef.current(store.getSnapshot()),
-		[store],
-	);
-
-	return useSyncExternalStore(
-		store.subscribe,
-		getSelectedSnapshot,
-		getSelectedSnapshot,
-	);
-}

package/src/hooks/navigation/use-tab-press-reset.ts

@@ -1,36 +0,0 @@
-import * as React from "react";
-
-/**
- * When inside a tab navigator, resets the stack to the first screen
- * when the already-focused tab is pressed again. Replicates native behaviour.
- */
-export function useTabPressReset(
-	navigation: {
-		isFocused: () => boolean;
-		addListener?: (event: string, callback: (e: any) => void) => () => void;
-		dispatch: (action: any) => void;
-	},
-	stateIndex: number,
-	stateKey: string,
-) {
-	React.useEffect(
-		() =>
-			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 (stateIndex > 0 && isFocused && !e.defaultPrevented) {
-						// When user taps on already focused tab and we're inside the tab,
-						// reset the stack to replicate native behaviour
-						navigation.dispatch({
-							type: "POP_TO_TOP",
-							target: stateKey,
-						});
-					}
-				});
-			}),
-		[navigation, stateIndex, stateKey],
-	);
-}

package/src/hooks/use-stable-callback-value.ts

@@ -1,72 +0,0 @@
-/**
- * Credit:
- * https://github.com/MatiPl01/react-native-sortables/blob/main/packages/react-native-sortables/src/integrations/reanimated/hooks/useStableCallbackValue.ts
- */
-import { useCallback, useEffect, useState } from "react";
-import { cancelAnimation, makeMutable } from "react-native-reanimated";
-import { isWorkletFunction, scheduleOnRN } from "react-native-worklets";
-
-type AnyFunction = (...args: Array<any>) => any;
-
-function useMutableValue<T>(initialValue: T) {
-	const [mutable] = useState(() => makeMutable(initialValue));
-
-	useEffect(() => {
-		return () => {
-			cancelAnimation(mutable);
-		};
-	}, [mutable]);
-
-	return mutable;
-}
-
-// We cannot store a function as a SharedValue because reanimated will treat
-// it as an animation and will try to execute the animation when assigned
-// to the SharedValue. Since we want the function to be treated as a value,
-// we wrap it in an object and store the object in the SharedValue.
-type WrappedCallback<C extends AnyFunction> = {
-	call: C;
-};
-
-const wrap = <C extends AnyFunction>(callback: C): WrappedCallback<C> => {
-	if (isWorkletFunction(callback)) {
-		return { call: callback };
-	}
-	return {
-		call: ((...args: Parameters<C>) => {
-			"worklet";
-			scheduleOnRN(callback, ...args);
-		}) as C,
-	};
-};
-
-/** Creates a stable worklet callback that can be called from the UI runtime
- * @param callback The JavaScript or worklet function to be called
- * @returns A worklet function that can be safely called from the UI thread
- * @default Behavior:
- * - If passed a regular JS function, schedules it on the JS thread
- * - If passed a worklet function, calls it directly on the UI thread
- * @important The returned function maintains a stable reference and properly handles
- * thread execution based on the input callback type
- */
-export default function useStableCallbackValue<C extends AnyFunction>(
-	callback?: C,
-) {
-	const stableCallback = useMutableValue<null | WrappedCallback<C>>(null);
-
-	useEffect(() => {
-		if (callback) {
-			stableCallback.set(wrap(callback));
-		} else {
-			stableCallback.set(null);
-		}
-	}, [callback, stableCallback]);
-
-	return useCallback(
-		(...args: Parameters<C>) => {
-			"worklet";
-			stableCallback.get()?.call(...args);
-		},
-		[stableCallback],
-	);
-}