Shared Element Transitions: Animating to transformed view doesn't work correctly

[mrousavy]

🐛 Bug Report

⚠️ First off: I think this is related to #6728.

When animating Shared Element Transitions to a view that is transformed in some sort (translateX in my case, but might also be scale, translateY, ...), the Shared Element Transitions weirdly miscalculates the destination coordinates at first, but manages to get it right halfway through. Yes, that's my explanation. It's weird, take a look at it yourself:

📹 Here's a video demo: https://i.imgur.com/tNcQwD1.mp4

So in this example, I'm translating the parent view across the X axis, so first Post is translateX: 0 which works perfectly fine. Second post is translateX: -SCREEN_WIDTH, which already looks a bit off. And then it just goes on, with the animation going further to the origin point (0 aka "left") the more you translate x.

To Reproduce

1. Create parent view that translates X axis
2. Create list of views in that translated view (Shared Elements)
3. Push a Modal with SETs that animates the Shared Element (image)
4. Dismiss the modal with the SET

Expected behavior

I expect the animation to work normally

Actual Behavior

The animation swiftly goes towards the origin (0 aka "left"), then finds out it's a bit drunk and finds it's way back home (actual position)

Your Environment

• React Native Navigation version: master (snapshot)
• React Native version: 0.63.3
• Platform(s) (iOS, Android, or both?): iOS

Reproducible Demo

@yogevbd hit me up on discord for a repro demo

Related Issues

• SET for Modals: Shared Element Transitions for Modals #6647
• Shared Element Transitions: Animating from scaled down state looks jumpy #6728

[mrousavy]

fixed with 6835d63