react-native-screen-transitions 2.0.6 → 2.2.0

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

@@ -1,50 +1,42 @@
 import { memo } from "react";
-import { StyleSheet } from "react-native";
-import Animated, { useAnimatedStyle } from "react-native-reanimated";
-import { _useScreenAnimation } from "../hooks/animation/use-screen-animation";
+import { StyleSheet, View } from "react-native";
+import Animated, {
+	type StyleProps,
+	useAnimatedStyle,
+} from "react-native-reanimated";
+import { useTransitionStyles } from "../providers/transition-styles";
 
-interface RootTransitionAwareProps {
+type Props = {
 	children: React.ReactNode;
-}
+};
 
-export const RootTransitionAware = memo(
-	({ children }: RootTransitionAwareProps) => {
-		const { screenInterpolatorProps, screenStyleInterpolator } =
-			_useScreenAnimation();
+const EMPTY_STYLE = Object.freeze({} as StyleProps);
 
-		const animatedContentStyle = useAnimatedStyle(() => {
-			"worklet";
-			if (!screenStyleInterpolator) {
-				return {};
-			}
-			const props = screenInterpolatorProps.value;
-			return screenStyleInterpolator(props).contentStyle || {};
-		});
+export const RootTransitionAware = memo(({ children }: Props) => {
+	const stylesMap = useTransitionStyles();
 
-		const animatedOverlayStyle = useAnimatedStyle(() => {
-			"worklet";
-			if (!screenStyleInterpolator) {
-				return {};
-			}
-			return (
-				screenStyleInterpolator(screenInterpolatorProps.value).overlayStyle ||
-				{}
-			);
-		});
+	const animatedContentStyle = useAnimatedStyle(() => {
+		"worklet";
+		return stylesMap.value.contentStyle || EMPTY_STYLE;
+	});
 
-		return (
-			<Animated.View style={styles.container}>
-				<Animated.View
-					style={[StyleSheet.absoluteFillObject, animatedOverlayStyle]}
-					pointerEvents="none"
-				/>
-				<Animated.View style={[styles.content, animatedContentStyle]}>
-					{children}
-				</Animated.View>
+	const animatedOverlayStyle = useAnimatedStyle(() => {
+		"worklet";
+		return stylesMap.value.overlayStyle || EMPTY_STYLE;
+	});
+
+	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: {

package/src/configs/index.ts

@@ -1,14 +1,26 @@
-import { DraggableCard, ElasticCard, SlideFromBottom, SlideFromTop, ZoomIn } from './presets';
-import { DefaultSpec } from './specs';
+import {
+	DraggableCard,
+	ElasticCard,
+	SharedAppleMusic,
+	SharedIGImage,
+	SharedXImage,
+	SlideFromBottom,
+	SlideFromTop,
+	ZoomIn,
+} from "./presets";
+import { DefaultSpec } from "./specs";
 
 export const specs = {
-  DefaultSpec,
+	DefaultSpec,
 };
 
 export const presets = {
-  SlideFromTop,
-  ZoomIn,
-  SlideFromBottom,
-  DraggableCard,
-  ElasticCard,
+	SlideFromTop,
+	ZoomIn,
+	SlideFromBottom,
+	DraggableCard,
+	ElasticCard,
+	SharedIGImage,
+	SharedAppleMusic,
+	SharedXImage,
 };

package/src/configs/presets.ts

@@ -1,3 +1,4 @@
+import { Platform } from "react-native";
 import {
 	Extrapolation,
 	interpolate,
@@ -6,6 +7,8 @@ import {
 import type { ScreenTransitionConfig } from "../types/navigator";
 import { DefaultSpec } from "./specs";
 
+const platform = Platform.OS;
+
 export const SlideFromTop = (
 	config: Partial<ScreenTransitionConfig> = {},
 ): ScreenTransitionConfig => {
@@ -181,9 +184,7 @@ export const ElasticCard = (
 
 			const scale = interpolate(progress, [0, 1, 2], [0, 1, 0.8]);
 
-			/**
-			 * Applies to current screen
-			 */
+			// applies to current screen
 			const maxElasticityX = screen.width * (config.elasticFactor ?? 0.5);
 			const maxElasticityY = screen.height * (config.elasticFactor ?? 0.5);
 			const translateX = interpolate(
@@ -200,9 +201,7 @@ export const ElasticCard = (
 				"clamp",
 			);
 
-			/**
-			 * Applies to unfocused screen ( previous screen )
-			 */
+			// applies to unfocused screen ( previous screen )
 			const overlayColor = interpolateColor(
 				progress,
 				[0, 1],
@@ -225,3 +224,399 @@ export const ElasticCard = (
 		...config,
 	};
 };
+
+export const SharedIGImage = (
+	config: Partial<ScreenTransitionConfig> = {},
+): ScreenTransitionConfig => {
+	return {
+		gestureEnabled: true,
+		gestureDirection: ["vertical", "horizontal"],
+		enableTransitions: true,
+		gestureDrivesProgress: false,
+		screenStyleInterpolator: ({
+			current,
+			layouts: {
+				screen: { height, width },
+			},
+			bounds,
+			progress,
+			focused,
+			activeBoundId,
+			next,
+		}) => {
+			"worklet";
+
+			const normX = focused
+				? current.gesture.normalizedX
+				: (next?.gesture.normalizedX ?? 0);
+			const normY = focused
+				? current.gesture.normalizedY
+				: (next?.gesture.normalizedY ?? 0);
+
+			// animations for both bounds
+			const dragX = interpolate(
+				normX,
+				[-1, 0, 1],
+				[-width * 0.7, 0, width * 0.7],
+			);
+			const dragY = interpolate(
+				normY,
+				[-1, 0, 1],
+				[-height * 0.4, 0, height * 0.4],
+			);
+			const dragXScale = interpolate(normX, [0, 1], [1, 0.8]);
+			const dragYScale = interpolate(normY, [0, 1], [1, 0.8]);
+
+			const boundValues = bounds({
+				method: focused ? "content" : "transform",
+				scaleMode: "uniform",
+				raw: true,
+			});
+
+			// focused specific animations
+			if (focused) {
+				const maskedValues = bounds({
+					space: "absolute",
+					target: "fullscreen",
+					method: "size",
+					raw: true,
+				});
+
+				return {
+					overlayStyle: {
+						backgroundColor: "black",
+						opacity: interpolate(progress, [0, 1], [0, 0.5]),
+					},
+					contentStyle: {
+						transform: [
+							{ translateX: dragX },
+							{ translateY: dragY },
+							{ scale: dragXScale },
+							{ scale: dragYScale },
+						],
+					},
+
+					_ROOT_CONTAINER: {
+						transform: [
+							{ translateX: boundValues.translateX || 0 },
+							{ translateY: boundValues.translateY || 0 },
+							//@ts-expect-error
+							{ scale: boundValues.scale || 1 },
+						],
+					},
+					_ROOT_MASKED: {
+						width: maskedValues.width,
+						height: maskedValues.height,
+						transform: [
+							{ translateX: maskedValues.translateX || 0 },
+							{ translateY: maskedValues.translateY || 0 },
+						],
+						borderRadius: interpolate(progress, [0, 1], [0, 24]),
+					},
+				};
+			}
+
+			return {
+				contentStyle: {
+					pointerEvents: current.gesture.isDismissing ? "none" : "auto",
+				},
+				[activeBoundId]: {
+					transform: [
+						{ translateX: dragX || 0 },
+						{ translateY: dragY || 0 },
+						{ translateX: boundValues.translateX || 0 },
+						{ translateY: boundValues.translateY || 0 },
+						{ scaleX: boundValues.scaleX || 1 },
+						{ scaleY: boundValues.scaleY || 1 },
+						{ scale: dragXScale },
+						{ scale: dragYScale },
+					],
+				},
+			};
+		},
+		transitionSpec: {
+			open: {
+				stiffness: 1500,
+				damping: 1000,
+				mass: 3,
+				overshootClamping: true,
+				restSpeedThreshold: 0.02,
+			},
+			close: {
+				stiffness: 1500,
+				damping: 1000,
+				mass: 3,
+				overshootClamping: true,
+				restSpeedThreshold: 0.02,
+			},
+		},
+		...config,
+	};
+};
+
+export const SharedAppleMusic = (
+	config: Partial<ScreenTransitionConfig> = {},
+): ScreenTransitionConfig => {
+	return {
+		enableTransitions: true,
+		gestureEnabled: true,
+		gestureDirection: ["vertical", "horizontal"],
+		gestureDrivesProgress: false,
+		screenStyleInterpolator: ({
+			bounds,
+			activeBoundId,
+			focused,
+			progress,
+			layouts: { screen },
+			current,
+			next,
+		}) => {
+			"worklet";
+
+			const normX = focused
+				? current.gesture.normalizedX
+				: (next?.gesture.normalizedX ?? 0);
+			const normY = focused
+				? current.gesture.normalizedY
+				: (next?.gesture.normalizedY ?? 0);
+
+			/**
+			 * ===============================
+			 * Animations for both bounds
+			 * ===============================
+			 */
+			const dragX = interpolate(normX, [0, 1], [0, screen.width * 0.8]);
+			const dragY = interpolate(normY, [0, 1], [0, screen.height * 0.8]);
+			const dragXScale = interpolate(normX, [0, 1], [1, 0.75]);
+			const dragYScale = interpolate(normY, [0, 1], [1, 0.75]);
+
+			const boundValues = bounds({
+				method: focused ? "content" : "transform",
+				anchor: "top",
+				scaleMode: "uniform",
+				raw: true,
+			});
+
+			const opacity = interpolate(
+				progress,
+				[0, 0.35, 1, 1.25, 2],
+				[0, 1, 1, 1, 0],
+				"clamp",
+			);
+
+			/**
+			 * ===============================
+			 * Focused specific animations
+			 * ===============================
+			 */
+			if (focused) {
+				const maskedValues = bounds({
+					space: "absolute",
+					method: "size",
+					target: "fullscreen",
+					raw: true,
+				});
+
+				// Apple Music style drop shadow that increases with drag magnitude
+				const dragMagnitude = Math.max(Math.abs(normX), Math.abs(normY));
+				const shadowOpacity = interpolate(
+					dragMagnitude,
+					[0, 1],
+					[0, 0.25],
+					"clamp",
+				);
+				const shadowRadius = interpolate(
+					dragMagnitude,
+					[0, 1],
+					[0, 24],
+					"clamp",
+				);
+				const shadowOffsetY = interpolate(
+					dragMagnitude,
+					[0, 1],
+					[0, 20],
+					"clamp",
+				);
+				const elevation = interpolate(dragMagnitude, [0, 1], [0, 24], "clamp");
+
+				const IOSShadowStyle = {
+					shadowColor: "#000",
+					shadowOpacity,
+					shadowRadius,
+					shadowOffset: { width: 0, height: shadowOffsetY },
+				};
+
+				const AndroidShadowStyle = {
+					elevation,
+					shadowColor: "#000",
+				};
+
+				return {
+					contentStyle: {
+						pointerEvents: current.animating ? "none" : "auto",
+						transform: [
+							{ translateX: dragX || 0 },
+							{ translateY: dragY || 0 },
+							{ scale: dragXScale },
+							{ scale: dragYScale },
+						],
+						opacity,
+						...(platform === "ios" ? IOSShadowStyle : AndroidShadowStyle),
+					},
+					_ROOT_CONTAINER: {
+						transform: [
+							{ translateX: boundValues.translateX || 0 },
+							{ translateY: boundValues.translateY || 0 },
+							//@ts-expect-error
+							{ scale: boundValues.scale || 1 },
+						],
+					},
+					_ROOT_MASKED: {
+						width: maskedValues.width,
+						height: maskedValues.height,
+						transform: [
+							{ translateX: maskedValues.translateX || 0 },
+							{ translateY: maskedValues.translateY || 0 },
+						],
+						borderRadius: interpolate(progress, [0, 1], [0, 24]),
+					},
+				};
+			}
+
+			/**
+			 * ===============================
+			 * Unfocused specific animations
+			 * ===============================
+			 */
+
+			const scaledBoundTranslateX = (boundValues.translateX || 0) * dragXScale;
+			const scaledBoundTranslateY = (boundValues.translateY || 0) * dragYScale;
+			const scaledBoundScaleX = (boundValues.scaleX || 1) * dragXScale;
+			const scaledBoundScaleY = (boundValues.scaleY || 1) * dragYScale;
+
+			const contentScale = interpolate(progress, [1, 2], [1, 0.9], "clamp");
+
+			return {
+				[activeBoundId]: {
+					transform: [
+						{ translateX: dragX || 0 },
+						{ translateY: dragY || 0 },
+						{ translateX: scaledBoundTranslateX },
+						{ translateY: scaledBoundTranslateY },
+						{ scale: dragXScale },
+						{ scale: dragYScale },
+						{ scaleX: scaledBoundScaleX },
+						{ scaleY: scaledBoundScaleY },
+					],
+					opacity,
+					zIndex: current.animating ? 999 : -1,
+					position: "relative",
+				},
+				contentStyle: {
+					transform: [{ scale: contentScale }],
+				},
+			};
+		},
+		transitionSpec: {
+			open: {
+				stiffness: 1000,
+				damping: 500,
+				mass: 3,
+				overshootClamping: true,
+				restSpeedThreshold: 0.02,
+			},
+			close: {
+				stiffness: 600,
+				damping: 60,
+				mass: 3,
+				overshootClamping: false,
+				restSpeedThreshold: 0.02,
+				restDisplacementThreshold: 0.002,
+			},
+		},
+		...config,
+	};
+};
+
+export const SharedXImage = (
+	config: Partial<ScreenTransitionConfig> = {},
+): ScreenTransitionConfig => {
+	return {
+		enableTransitions: true,
+		gestureEnabled: true,
+		gestureDirection: ["vertical", "vertical-inverted"],
+		gestureDrivesProgress: false,
+		screenStyleInterpolator: ({
+			focused,
+			activeBoundId,
+			bounds,
+			current,
+			layouts: { screen },
+			progress,
+		}) => {
+			"worklet";
+
+			// twitter doesn't animate the unfocused screen
+			if (!focused) return {};
+
+			const boundValues = bounds({ method: "transform", raw: true });
+
+			// content styles
+			const dragY = interpolate(
+				current.gesture.normalizedY,
+				[-1, 0, 1],
+				[-screen.height, 0, screen.height],
+			);
+
+			// dynamically changes direction based on the drag direction
+			const contentY = interpolate(
+				progress,
+				[0, 1],
+				[dragY >= 0 ? screen.height : -screen.height, 0],
+			);
+
+			const overlayClr = interpolateColor(
+				current.progress - Math.abs(current.gesture.normalizedY),
+				[0, 1],
+				["rgba(0,0,0,0)", "rgba(0,0,0,1)"],
+			);
+
+			const borderRadius = interpolate(current.progress, [0, 1], [12, 0]);
+
+			// bound styles - only enter animation
+			const x = !current.closing ? boundValues.translateX : 0;
+			const y = !current.closing ? boundValues.translateY : 0;
+			const scaleX = !current.closing ? boundValues.scaleX : 1;
+			const scaleY = !current.closing ? boundValues.scaleY : 1;
+
+			return {
+				[activeBoundId]: {
+					transform: [
+						{
+							translateX: x,
+						},
+						{
+							translateY: y,
+						},
+						{ scaleX: scaleX },
+						{ scaleY: scaleY },
+					],
+					borderRadius,
+					overflow: "hidden",
+				},
+				contentStyle: {
+					transform: [{ translateY: contentY }, { translateY: dragY }],
+					pointerEvents: current.animating ? "none" : "auto",
+				},
+				overlayStyle: {
+					backgroundColor: overlayClr,
+				},
+			};
+		},
+		transitionSpec: {
+			open: DefaultSpec,
+			close: DefaultSpec,
+		},
+		...config,
+	};
+};

package/src/configs/specs.ts

@@ -5,4 +5,5 @@ export const DefaultSpec: WithSpringConfig = {
 	damping: 500,
 	mass: 3,
 	overshootClamping: true,
+	restSpeedThreshold: 0.02,
 };

package/src/hooks/animation/use-associated-style.tsx

@@ -1,27 +1,28 @@
 import { useAnimatedStyle } from "react-native-reanimated";
-import { _useScreenAnimation } from "./use-screen-animation";
+import { useTransitionStyles } from "../../providers/transition-styles";
+
+type Props = {
+	id?: string;
+};
+
+const EMPTY_STYLE = Object.freeze({});
 
 /**
  * This hook is used to get the associated styles for a given styleId.
  * It is used to get the associated styles for a given styleId.
  * It is used to get the associated styles for a given styleId.
  */
-export const useAssociatedStyles = ({ id }: { id?: string } = {}) => {
-	const { screenStyleInterpolator, screenInterpolatorProps } =
-		_useScreenAnimation();
+export const useAssociatedStyles = ({ id }: Props = {}) => {
+	const stylesMap = useTransitionStyles();
 
 	const associatedStyles = useAnimatedStyle(() => {
 		"worklet";
 
-		if (!id || !screenStyleInterpolator) {
-			return {};
+		if (!id || !stylesMap) {
+			return EMPTY_STYLE;
 		}
 
-		return (
-			screenStyleInterpolator(screenInterpolatorProps.value)[id] || {
-				opacity: 1, // <-- This fixes flickering?? We'll have to deep dive this?? wtf
-			}
-		);
+		return stylesMap.value[id] || EMPTY_STYLE;
 	});
 
 	return { associatedStyles };