Shared Element Transition not Working With Latest React Native

[aymather]

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;

Simulator.Screen.Recording.-.iPhone.15.Plus.-.2024-10-24.at.12.00.54.mp4

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.

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-10-24.at.13.03.59.mp4

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

[bartlomiejbloniarz]

Hi @aymather! Shared Elements Transitions are not yet implemented on the New Architecture, which became the default in RN 0.76.

[aymather]

@bartlomiejbloniarz Oh ok. What about the existing architecture though? Seems like it still isn't stable (per the first video in my post). I could maybe make a minimal repo to reproduce that but what I posted is like the most basic usage of custom transitions. The documentation does seem to allude to the idea that shared transitions aren't exactly super supported yet, but I guess it'd be helpful for us all to know where that's at?

[Movsar-Khalakhoev]

@bartlomiejbloniarz Any plans for when this will be implemented?

[sahilverma-dev]

any updated?

[tjzel]

@sahilverma-dev No updates. This is a big feature to implement since all the underlying tools (the rendering engine) have changed. Once we have SETs on Fabric we'll definitely announce it.

[aashishpanchal]

you have any idea, how to do?

[AliMousa27]

Has anyone solved this yet?

[ikarapa5k]

so what?, we need stable shared transition, and other animations related to navigation

[aymather]

@tjzel Looks like reanimated 4 has been announced https://x.com/swmansion/status/1881733960478421037

Will this feature be covered in the major release?

[MikeKovarik]

+1

[criszst]

+1

[tjzel]

@aymather Reanimated 4 (aka css animations) doesn't have a lot in common with Shared Elements Transitions since the latter are interactive and the former of "fire and forget" kind. The works on SETs and Layout Animations are going in parallel with the CSS animations and aren't impacting one another. It's really hard to say if both these features will be available on the stable release of Reanimated 4. We definitely wouldn't want to delay the release of Reanimated 4 with CSS animations just to wait for the SETs to be finished.

[MikeKovarik]

@tjzel Thanks for answer.
Can you at least give a rough estimate like "it's a matter of months" or "more like next year because of other priorities" or "don't get your hopes high, it may be abandoned"?
I'm asking because the current implementation was in "not ready for production" state for a long time. And i need to make some design decisions in my app now that depend on whether or not I will be able to add SETs in the future.

[aymather]

@tjzel Thanks for answer.
Can you at least give a rough estimate like "it's a matter of months" or "more like next year because of other priorities" or "don't get your hopes high, it may be abandoned"?
I'm asking because the current implementation was in "not ready for production" state for a long time. And i need to make some design decisions in my app now that depend on whether or not I will be able to add SETs in the future.

+1 on this, I am in a similar situation, when I started working on my app I just assumed this feature would be available by now. I'm getting close to release and I kinda need to know whether or not to abandon this type of design functionality.

[du5rte]

@tjzel Thanks for answer.
Can you at least give a rough estimate like "it's a matter of months" or "more like next year because of other priorities" or "don't get your hopes high, it may be abandoned"?
I'm asking because the current implementation was in "not ready for production" state for a long time. And i need to make some design decisions in my app now that depend on whether or not I will be able to add SETs in the future.

+1 on this, I am in a similar situation, when I started working on my app I just assumed this feature would be available by now. I'm getting close to release and I kinda need to know whether or not to abandon this type of design functionality.

+1 Same here, anything we (the community) can do to bring this to the new architecture?

[tjzel]

We discussed the topic and here are our conclusions.

Shared Element Transitions are a feature we definitely want to land in Reanimated in production-ready state. However, as much as we'd love to push it, we have a lot of work of higher priority right now, most of which is a prerequisite to this feature. At the moment it's impossible to give any kind of estimate, even a rough one. If you are in a situation where you want to use Shared Element Transitions in production code, with hope that it'll be production ready soon, we advise against using it. The moment we can give any timeline on Shared Element Transitions we'll announce it to the community.

---

@du5rte Unfortunately we don't have any well documented task that we could submit. Shared Elements Transitions are extremely difficult to develop and requires a deep understanding of React Native and the native platforms. All I can say is the code is there and you can debug it and figure out what needs to be fixed still.