Animate shared "complex" component

[MatteoBuffo]

Description

Hello. My goal is to animate a React Native Paper Card.Cover component between two screens. Unfortunately, that doesn't seem to work.
I followed the steps reported in these doc pages:

• Shared Element Transitions
• createAnimatedComponent

Am I missing something? Or is it this related to this limitation:
The layout for shared view children is not computed during the transition.
?

Videos are provided below.

Library	Version
@react-navigation/native	^6.9.26
expo	~50.0.13
expo-status-bar	~1.11.1
react	18.2.0
react-native-paper	^5.12.3
react-native-safe-area-context	4.8.2
react-native-screens	~3.29.0

Steps to reproduce

1. Do all necessary setup to make animations between screens work in your local environment at all (in my case it was necessary to generate the native Android folder and a development build with EAS)
2. Open the app. The navigator is made of two screens - Home and Details - you basically navigate from Home to Details by pressing the shared, animated element. The animation consist in expanding/reducing the shared component width when navigating between screens
3. Press the Card.Cover and notice that the animation isn't working
4. Open the app/components/MyAnimatedComponent.tsx
5. Try the other components and see their animations are working

button.mp4

animatedImage.mp4

cardCover.mp4

Snack or a link to a repository

https://snack.expo.dev/@mbuffo/reanimated-custom-shared-component

Reanimated version

~3.6.2

React Native version

0.73.5

Platforms

Android

JavaScript runtime

None

Workflow

Expo Dev Client

Architecture

None

Build type

None

Device

Real device

Device model

Samsung Galaxy A9 (Android 9), Samsung Galaxy S20 FE (Android 13)

Acknowledgements

Yes