Shared Element Transition does not transform Image correctly

[mrousavy]

Progress

• [x] iOS (thanks @yogevbd)
• [ ] Android (WIP)

Issue Description

When using Shared Element Transitions to animate Images between Screens, the animation does not work in the following scenarios:

1. The source image and destination image have different layout sizes (aspect ratios), e.g.: source image layout is 400 x 300, destination image is 440 x 300.
2. The source image and destination image have different resizeModes.

I've created a repro for this bug in a branch on my fork. This shows the first scenarios, change the resizeMode to 'contain' to reproduce the second scenario.

Steps to Reproduce / Code Snippets / Screenshots

1. Create Shared Element Transitions as explained in the docs
2. Give source image a different aspect ratios than the destination image, e.g.:

   sourceImage: { 
     width: 400,
     height: 300
   }

   and destination:

   destImage: {
     width: 440,
     height: 300
   }

3. Animate between them.

Demo GIF

	iOS	Android
Animating between Images with different Aspect Ratios
Animating between Images with different resizeModes

---

Environment

• React Native Navigation version: 6.12.0
• React Native version: 0.63.2
• Platform: iOS only
• Device info: Simulator & Device, Debug & Release

[mrousavy]

Can confirm that the issue also occurs with <TextInput> components of different dimensions and/or font sizes. SETs are becoming more and more brainf*ck...

[tastyqbit]

This is still not working properly. Any updates?

[yogevbd]

@tastyqbit Are you talking about image transition with different resizeMode? it's still not supported on iOS but we will add it soon.

[tastyqbit]

@yogevbd Yes that is what I was asking about, thanks for the update :) Do you have any idea on the timeline? I am just in the process of upgrading a lot of libraries including react-native from 0.59 to 0.63 and RNN from v2 to v7 and maybe I wait instead of redo my workaround I made for v2 if its not too long

[FawadMahmood]

In my case shared element only working for IOS,on android element just disappear.

[guyca]

Closing this issue as the last messages don't provide substantial info to work with. If there are any more issues related to image transformations, we would greatly appreciate if you could open new issues with reproductions and we will look into them ASAP.

[tastyqbit]

@guyca Does that mean the "Animating between Images with different resizeModes" issue shown in the demo gifs above is solved?

[mrousavy]

Yes. See https://github.com/wix/react-native-navigation/commit/e184102db2299fb421971b55582e8f11b62ac4aa, https://github.com/wix/react-native-navigation/commit/0c97477b0088e787782736e13869cb40147a843d and https://github.com/wix/react-native-navigation/commit/c49567f17cd62bc5261cbaafd143791281ae4c40