react-native-navigation icon indicating copy to clipboard operation
react-native-navigation copied to clipboard

FastImage does not work well with Shared Element Transition on Android

Open OmarBasem opened this issue 2 years ago • 3 comments

What happened?

On Android, using FastImage with SET (Shared Element Transition) locks its dimensions. As a result, when trying to update the image's width and height it does not update, for example, when switching to landscape mode.

It works fine when not using SET, or when using RN Image component. Also works fine on iOS.

Screenshot_20230531_215047_Status Debug

What was the expected behaviour?

The image's dimensions shouldn't be locked. It should update.

Was it tested on latest react-native-navigation?

  • [X] I have tested this issue on the latest react-native-navigation release and it still reproduces.

Help us reproduce this issue!

Reproducible steps:

  1. On screen A, there is a FastImage component (with nativeID).
  2. On Screen B, there is a FastImage component (with nativeID).
  3. Navigate from screen A to screen B.
  4. Update image's width and/or height after navigating.

Below is a video to show you better what happens. In the video below, the image width on screen B is 200. After one second, I update the width to 300. After 2 seconds I update the width to 400. I have added a blue backgroundColor to FastImage component to help see what happens. Notice that the FastImage as a ReactNative component its width and height updates successfully. But the image does not fill the space, although it can be seen that the image re-renders with the new bigger dimensions, but for some reason it does not cover the whole space of the FastImage component. Its dimensions seems to be locked.

A possible related issue: https://github.com/wix/react-native-navigation/issues/6596#issuecomment-694099788

https://github.com/wix/react-native-navigation/assets/29354102/b23915c2-a25d-4b57-9edc-04cf48901b81

In what environment did this happen?

React Native Navigation version: 7.32.1 React Native version: 0.69.10 Has Fabric (React Native's new rendering system) enabled: no Node version: 18 Device model: Samsung S23 Android version: 13

OmarBasem avatar Jun 01 '23 08:06 OmarBasem

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

stale[bot] avatar Jul 19 '23 04:07 stale[bot]

The bug is reproducible on the latest version

OmarBasem avatar Jul 19 '23 08:07 OmarBasem

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

stale[bot] avatar Sep 16 '23 19:09 stale[bot]