react-native-reanimated

react-native-reanimated copied to clipboard

Description

I'm trying to master the concept of using shared element transitions. I've set up a very basic example which animates a view with some standard properties to animate. Then I added the layer of custom animations. I am not doing anything fancy in the custom animation, I essentially just wanted to replicate the standard behavior with a custom animation to see how it works.

Here's my example. All I have is a button that navigates to a different page, and I animate an Animated.View as a shared element between the two pages.

import { Text, View } from '@atomic';
import { Button } from '@molecules';
import {
	NavigationContainer,
	RouteProp,
	useNavigation
} from '@react-navigation/native';
import {
	createNativeStackNavigator,
	NativeStackNavigationProp
} from '@react-navigation/native-stack';
import { StackNavigationProp } from '@react-navigation/stack';
import React from 'react';
import { StyleSheet } from 'react-native';
import Animated, {
	SharedTransition,
	withSpring
} from 'react-native-reanimated';

export const Stack = createNativeStackNavigator();

const bouncyTransition = SharedTransition.custom((values) => {
	'worklet';
	return {
		height: withSpring(values.targetHeight),
		width: withSpring(values.targetWidth),
		originX: withSpring(values.targetOriginX),
		originY: withSpring(values.targetOriginY),
		borderRadius: withSpring(values.targetBorderRadius)
	};
});

export type RootStackParamList = {
	HomePage: undefined;
	DetailsPage: undefined;
};

export type HomeScreenNavigationProp = StackNavigationProp<
	RootStackParamList,
	'HomePage'
>;
export type DetailScreenNavigationProp = StackNavigationProp<
	RootStackParamList,
	'DetailsPage'
>;
export type DetailScreenRouteProp = RouteProp<
	RootStackParamList,
	'DetailsPage'
>;

const DetailsPage = () => {
	const navigation =
		useNavigation<NativeStackNavigationProp<RootStackParamList>>();
	const back = () => {
		navigation.goBack();
	};
	return (
		<View flex={1} justifyContent='center'>
			<Text>Details Page</Text>
			<Button text='Back' onPress={back} />
			<Animated.View
				sharedTransitionTag='box'
				sharedTransitionStyle={bouncyTransition}
				style={styles.box2}
			/>
		</View>
	);
};

const HomePage = () => {
	const navigation =
		useNavigation<NativeStackNavigationProp<RootStackParamList>>();
	const goToDetails = () => {
		navigation.navigate('DetailsPage');
	};
	return (
		<View flex={1} justifyContent='center' alignItems='center'>
			<Text>Home Page</Text>
			<Button text='Details' onPress={goToDetails} />
			<Animated.View
				sharedTransitionTag='box'
				sharedTransitionStyle={bouncyTransition}
				style={styles.box1}
			/>
		</View>
	);
};

const styles = StyleSheet.create({
	box1: {
		backgroundColor: 'red',
		borderRadius: 5,
		height: 100,
		width: 100
	},
	box2: {
		backgroundColor: 'red',
		borderRadius: 50,
		height: 200,
		width: 200
	}
});

const TransitionMaster = () => {
	return (
		<NavigationContainer>
			<Stack.Navigator>
				<Stack.Screen name='HomePage' component={HomePage} />
				<Stack.Screen
					name='DetailsPage'
					component={DetailsPage}
					options={{
						presentation: 'transparentModal',
						animation: 'fade'
					}}
				/>
			</Stack.Navigator>
		</NavigationContainer>
	);
};

export default TransitionMaster;

https://github.com/user-attachments/assets/c1845874-b41b-42bf-b635-a645545505b9

All of this comes from my current project where I was playing around with this. When I tried to reproduce this in a minimal repo, I installed all the latest react native things, and shared transitions weren't even working at all.

https://github.com/user-attachments/assets/6eb03c8e-a907-485f-b106-0364b36d89cf

The example I'm going to provide is to address the fact that it is not working at all with the latest react native.

Steps to reproduce

1. Install & configure react native, react navigation, react native reanimated
2. Set up a basic shared element transition on an Animate.View

Snack or a link to a repository

https://github.com/aymather/custom-shared-transitions

Reanimated version

^3.16.1

React Native version

0.76.0

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

iPhone 15 Plus

Acknowledgements

Yes