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

package/src/components/root-transition-aware.tsx

@@ -5,40 +5,40 @@ import { NO_STYLES } from "../constants";
 import { useTransitionStyles } from "../providers/transition-styles";
 
 type Props = {
-	children: React.ReactNode;
+  children: React.ReactNode;
 };
 
 export const RootTransitionAware = memo(({ children }: Props) => {
-	const { stylesMap } = useTransitionStyles();
+  const { stylesMap } = useTransitionStyles();
 
-	const animatedContentStyle = useAnimatedStyle(() => {
-		"worklet";
-		return stylesMap.value.contentStyle || NO_STYLES;
-	});
+  const animatedContentStyle = useAnimatedStyle(() => {
+    "worklet";
+    return stylesMap.value.contentStyle || NO_STYLES;
+  });
 
-	const animatedOverlayStyle = useAnimatedStyle(() => {
-		"worklet";
-		return stylesMap.value.overlayStyle || NO_STYLES;
-	});
+  const animatedOverlayStyle = useAnimatedStyle(() => {
+    "worklet";
+    return stylesMap.value.overlayStyle || NO_STYLES;
+  });
 
-	return (
-		<View style={styles.container}>
-			<Animated.View
-				style={[StyleSheet.absoluteFillObject, animatedOverlayStyle]}
-				pointerEvents="none"
-			/>
-			<Animated.View style={[styles.content, animatedContentStyle]}>
-				{children}
-			</Animated.View>
-		</View>
-	);
+  return (
+    <View style={styles.container}>
+      <Animated.View
+        style={[StyleSheet.absoluteFillObject, animatedOverlayStyle]}
+        pointerEvents="none"
+      />
+      <Animated.View style={[styles.content, animatedContentStyle]}>
+        {children}
+      </Animated.View>
+    </View>
+  );
 });
 
 const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-	},
-	content: {
-		flex: 1,
-	},
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+  },
 });

package/src/constants.ts

@@ -1,9 +1,9 @@
 import type { ParamListBase, RouteProp } from "@react-navigation/native";
-import type { ScaledSize } from "react-native";
 import type { MeasuredDimensions } from "react-native-reanimated";
 import type { ScreenTransitionState } from "./types/animation";
 import type { BoundEntry } from "./types/bounds";
 import type { ActivationArea } from "./types/gesture";
+import type { Layout } from "./types/native-stack.navigator";
 import type { Complete } from "./types/utils";
 import type { BoundsBuilderOptions } from "./utils/bounds/_types/builder";
 
@@ -22,22 +22,22 @@ export const NO_STYLES = Object.freeze({});
  * Default screen transition state
  */
 export const DEFAULT_SCREEN_TRANSITION_STATE: ScreenTransitionState =
-	Object.freeze({
-		progress: 0,
-		closing: 0,
-		animating: 0,
-		gesture: {
-			x: 0,
-			y: 0,
-			normalizedX: 0,
-			normalizedY: 0,
-			isDismissing: 0,
-			isDragging: 0,
-			direction: null,
-		},
-		bounds: {} as Record<string, BoundEntry>,
-		route: {} as RouteProp<ParamListBase>,
-	});
+  Object.freeze({
+    progress: 0,
+    closing: 0,
+    animating: 0,
+    gesture: {
+      x: 0,
+      y: 0,
+      normalizedX: 0,
+      normalizedY: 0,
+      isDismissing: 0,
+      isDragging: 0,
+      direction: null,
+    },
+    bounds: {} as Record<string, BoundEntry>,
+    route: {} as RouteProp<ParamListBase>,
+  });
 
 /**
  * Bounds API Defaults
@@ -45,46 +45,46 @@ export const DEFAULT_SCREEN_TRANSITION_STATE: ScreenTransitionState =
 export const NO_BOUNDS_MAP: Record<string, BoundEntry> = Object.freeze({});
 export const EMPTY_BOUND_HELPER_RESULT = Object.freeze({});
 export const EMPTY_BOUND_HELPER_RESULT_RAW = Object.freeze({
-	scaleX: 1,
-	scaleY: 1,
-	scale: 1,
-	translateX: 0,
-	translateY: 0,
-	width: 0,
-	height: 0,
+  scaleX: 1,
+  scaleY: 1,
+  scale: 1,
+  translateX: 0,
+  translateY: 0,
+  width: 0,
+  height: 0,
 });
 export const ENTER_RANGE = [0, 1] as const;
 export const EXIT_RANGE = [1, 2] as const;
 
 export const FULLSCREEN_DIMENSIONS = (
-	dimensions: ScaledSize,
+  dimensions: Layout
 ): MeasuredDimensions => {
-	"worklet";
-	return {
-		x: 0,
-		y: 0,
-		pageX: 0,
-		pageY: 0,
-		width: dimensions.width,
-		height: dimensions.height,
-	};
+  "worklet";
+  return {
+    x: 0,
+    y: 0,
+    pageX: 0,
+    pageY: 0,
+    width: dimensions.width,
+    height: dimensions.height,
+  };
 };
 
 export const DEFAULT_BUILDER_OPTIONS: Complete<
-	Omit<BoundsBuilderOptions, "id">
+  Omit<BoundsBuilderOptions, "id">
 > = Object.freeze({
-	gestures: { x: 0, y: 0 },
-	toFullscreen: false,
-	absolute: false,
-	relative: true,
-	method: "transform",
-	contentScaleMode: "auto",
-	//
-	space: "relative",
-	target: "bound",
-	scaleMode: "match",
-	anchor: "center",
-	raw: false,
+  gestures: { x: 0, y: 0 },
+  toFullscreen: false,
+  absolute: false,
+  relative: true,
+  method: "transform",
+  contentScaleMode: "auto",
+  //
+  space: "relative",
+  target: "bound",
+  scaleMode: "match",
+  anchor: "center",
+  raw: false,
 } as const);
 
 /**

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

@@ -16,8 +16,9 @@ import type {
 	ScreenTransitionState,
 } from "../../types/animation";
 
-import type { NativeStackDescriptor } from "../../types/navigator";
+import type { NativeStackDescriptor } from "../../types/native-stack.navigator";
 import { derivations } from "../../utils/animation/derivations";
+import { createBounds } from "../../utils/bounds";
 
 type BuiltState = {
 	progress: SharedValue<number>;
@@ -84,51 +85,49 @@ export function _useScreenAnimation() {
 	const nextAnimation = useBuildScreenTransitionState(nextDescriptor);
 	const prevAnimation = useBuildScreenTransitionState(previousDescriptor);
 
-	const screenInterpolatorProps = useDerivedValue<ScreenInterpolationProps>(
-		(): ScreenInterpolationProps => {
-			"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,
-				bounds,
-				active,
-				isActiveTransitioning,
-				isDismissing,
-			} = derivations({
-				current,
-				next,
-				previous,
-				dimensions,
-			});
-
-			return {
-				layouts: { screen: dimensions },
-				insets,
-				previous,
-				current,
-				next,
-				focused,
-				activeBoundId,
-				progress,
-				bounds,
-				active,
-				isActiveTransitioning,
-				isDismissing,
-			};
-		},
-	);
+	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 =
@@ -142,5 +141,11 @@ export function _useScreenAnimation() {
 export function useScreenAnimation() {
 	const { screenInterpolatorProps } = _useScreenAnimation();
 
-	return useDerivedValue(() => screenInterpolatorProps.value);
+	return useDerivedValue<ScreenInterpolationProps>(() => {
+		const props = screenInterpolatorProps.value;
+		return {
+			...props,
+			bounds: createBounds(props),
+		};
+	});
 }

package/src/index.ts

@@ -4,31 +4,42 @@ import { createTransitionAwareComponent } from "./components/create-transition-a
 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,
+  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/navigator";
+  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

@@ -0,0 +1,143 @@
+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 {
+  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 (
+    //@ts-expect-error
+    <KeysProvider current={current} previous={previous} next={next}>
+      <HeaderHost scene={scene} focusedIndex={focusedIndex} isFloating />
+    </KeysProvider>
+  );
+};
+
+const ScreenHeader = () => {
+  const { focusedIndex } = useStackNavigationContext();
+  const { current } = useKeys();
+
+  const options = current.options;
+
+  // @ts-expect-error
+  if (!options.headerShown || options.headerMode !== "screen") {
+    return null;
+  }
+
+  const scene: BlankStackScene = {
+    //@ts-expect-error
+    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,
+  },
+});

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

@@ -0,0 +1,96 @@
+import type { NavigationRoute, ParamListBase } from "@react-navigation/native";
+import type * as React from "react";
+import { StyleSheet } from "react-native";
+import Animated, {
+	interpolate,
+	useAnimatedProps,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
+import { Screen as RNSScreen } from "react-native-screens";
+import { Animations } from "../../../stores/animations";
+
+interface ScreenProps {
+	routeKey: string;
+	index: number;
+	routes: NavigationRoute<ParamListBase, string>[];
+	isPreloaded: boolean;
+	children: React.ReactNode;
+	freezeOnBlur?: boolean;
+	shouldFreeze?: boolean;
+	activeScreensLimit: number;
+}
+
+const EPSILON = 1e-5;
+
+const STATE_INACTIVE = 0;
+const STATE_TRANSITIONING_OR_BELOW_TOP = 1;
+const STATE_ON_TOP = 2;
+
+const AnimatedScreen = Animated.createAnimatedComponent(RNSScreen);
+
+export const Screen = ({
+	routeKey,
+	index,
+	routes,
+	isPreloaded,
+	activeScreensLimit,
+	children,
+	freezeOnBlur,
+	shouldFreeze,
+}: ScreenProps) => {
+	const sceneProgress = Animations.getAnimation(routeKey, "progress");
+	const screenActivity = useSharedValue<0 | 1 | 2>(1);
+
+	useDerivedValue(() => {
+		if (!sceneProgress) {
+			screenActivity.value = STATE_TRANSITIONING_OR_BELOW_TOP;
+			return;
+		}
+
+		if (index < routes.length - activeScreensLimit - 1 || isPreloaded) {
+			screenActivity.value = STATE_INACTIVE;
+		} else {
+			const outputValue =
+				index === routes.length - 1
+					? STATE_ON_TOP
+					: index >= routes.length - activeScreensLimit
+						? STATE_TRANSITIONING_OR_BELOW_TOP
+						: STATE_INACTIVE;
+
+			const v = interpolate(
+				sceneProgress.value,
+				[0, 1 - EPSILON, 1],
+				[1, 1, outputValue],
+				"clamp",
+			);
+
+			const next =
+				(Math.trunc(v) as 0 | 1 | 2) ?? STATE_TRANSITIONING_OR_BELOW_TOP;
+
+			// avoid spamming JS thread
+			if (next !== screenActivity.value) {
+				screenActivity.value = next;
+			}
+		}
+	});
+
+	const animatedProps = useAnimatedProps(() => {
+		return {
+			activityState: screenActivity.value,
+			shouldFreeze: screenActivity.value === STATE_INACTIVE && shouldFreeze,
+		};
+	});
+
+	return (
+		<AnimatedScreen
+			enabled
+			style={StyleSheet.absoluteFill}
+			pointerEvents="box-none"
+			freezeOnBlur={freezeOnBlur}
+			animatedProps={animatedProps}
+		>
+			{children}
+		</AnimatedScreen>
+	);
+};