sharedTransitionTag wierd behavior

[xposionn]

Description

sharedTransitionTag is not working as expected, both with image and text, seems there is kind of animation but not as expected, also the elements disappeared when returning

Steps to reproduce

1. Open the app, choose iOS,
2. Press on the button (no animation, both text and image)
3. Press on the back button, both elements are gone.

Snack or a link to a repository

https://snack.expo.dev/@xposionn/github.com-xposionn-reanimated-shared-tag?platform=ios

Reanimated version

~3.6.2

React Native version

0.73.2

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[xposionn]

seems in #5375 also

[vivianmauer]

I have the same issue in several projects, and even in a completely new project. It seems its not working at all :/

[xposionn]

I have the same issue in several projects, and even in a completely new project. It seems its not working at all :/

By their documentation, seems this field is experimental..

[vivianmauer]

I have the same issue in several projects, and even in a completely new project. It seems its not working at all :/

By their documentation, seems this field is experimental..

Absolutely! But I tested it some time ago on some recently created projects and it was working, with some bugs but working. Now it is not working at all, hope it gets stable soon, this is a awesome feature

[szydlovsky]

Hey @xposionn @vivianmauer! Unfortunately, Shared Element Transitions are unable to properly handle when the text's fontSize changes. As described by docs: You can only animate width, height, originX, originY, and transformMatrix properties when using the shared transition. So doing such thing with text would need it to be some sort of SVG. On Reanimated 3.12.1, I was able to run this example with some super small tweaks (only setting the same font size):

import React from 'react';
import { View, Button } from 'react-native';
import Animated from 'react-native-reanimated';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Details: undefined;
};

const RootStack = createNativeStackNavigator<RootStackParamList>();

export type HomePageProps = NativeStackScreenProps<RootStackParamList, 'Home'>;
export type DetailsPageProps = NativeStackScreenProps<
  RootStackParamList,
  'Details'
>;

const RootStackNavigation = () => {
  return (
    <RootStack.Navigator>
      <RootStack.Group>
        <RootStack.Screen name="Home" component={Home} />
        <RootStack.Screen name="Details" component={Details} />
      </RootStack.Group>
    </RootStack.Navigator>
  );
};

const Details = () => {
  return (
    <View style={{ flex: 1 }}>
      <Animated.Text sharedTransitionTag="text" style={{ fontSize: 60 }}>
        Text
      </Animated.Text>
    </View>
  );
};

const Home = ({ navigation }: HomePageProps) => {
  return (
    <View
      style={{
        alignContent: 'center',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Animated.Text style={{ fontSize: 60 }} sharedTransitionTag="text">
        Text
      </Animated.Text>
      <Button title="click me" onPress={() => navigation.navigate('Details')} />
    </View>
  );
};

export default RootStackNavigation;

(you might need to add NavigationContainer wrapped around RootStackNavigation, I made it in an app that already had a navigation container)

[szydlovsky]

Or a second option: you can play with transformMatrix: scaleX and scaleY might work 😄