Shared Element Transition on inverted List

[Bayramito]

Description

Shared Element Transition does not work as expected in a inverted FlatList.

it's kind a flipping the image before moving the destination screen. And once we go back it stays flipped vertically

https://github.com/software-mansion/react-native-reanimated/assets/44513402/292b98fc-7121-4422-ba33-9fbe365d131e

Steps to reproduce

none

Snack or a link to a repository

https://github.com/Bayramito/invertedflatlist

Reanimated version

3.5.4

React Native version

0.72.5

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

None

Build type

Debug mode

Device

iOS simulator

Device model

Iphone 12

Acknowledgements

Yes

[arasrezaei]

Also SET has bugs when RTL is enabled

[fukemy]

check the progress here https://github.com/software-mansion/react-native-reanimated/issues/4497

[PierreCapo]

Commenting on this issue given the other one is closed.

The inverted property on a FlatList/SectionList in react-native applies some rotation effect to its children to produce the desired behavior. I haven't checked the source code, but I suspect it is built that way: when you pass the inverted prop, it actually flips the convent to mimic the inverted behavior and then rotate each item individually so they are not displayed upside down.

The issue here is that, as per mentionned in the documentation, shared elements only supports height, width, and origin. It says it supports also transformMatrix that could help in our scenario to apply some transformation but unfortunately when using a custom transition with a transformMatrix it just crashes the app with the following logs:

[Bayramito]

I think this is a very common and popular feature that you can find almost everywhere when it comes to power of Reanimated and animations in React Native. But it's still has some bugs and problems such as this one. I don't know why, it's not in the TODO list at Software Mansion yet. In my opinion that is a very waiting feature by the devs but unfortunatelly not stable yet.

[PierreCapo]

I know this can be frustrating as a consumer of a library @Bayramito , and as you I really dream to have a stable shared element transition API given the delightful UX it provides. Remember though that in an ideal world, I bet the folks at software-mansion would hope to have a bug-free library with every "customer" happy. But ideal world doesn't exist with money and time constraints, and instead we need to be immensely grateful for all the work already accomplished by some of the best mobile engineers out there. It's also up to us as "customers" to try to help and create PRs or forks to improve this library.