react-native-reanimated
react-native-reanimated copied to clipboard
software-mansion
Shared Element Transition on inverted List
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
check the progress here https://github.com/software-mansion/react-native-reanimated/issues/4497
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:
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.
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.