search

wix / react-native-navigation

A complete native navigation solution for React Native
https://wix.github.io/react-native-navigation/
MIT License
13.03k stars 2.67k forks source link

FastImage does not work well with Shared Element Transition on Android #7726

Open OmarBasem opened 1 year ago

OmarBasem commented 1 year ago

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?

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

stale[bot] commented 1 year ago

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.

OmarBasem commented 1 year ago

The bug is reproducible on the latest version

stale[bot] commented 12 months ago

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.