Image Flickering on transition

[dev-andremonteiro]

Hello! First I want to thank you so much for maintaining such an amazing library.

I am tring to add this to a new project with react-native and expo, I tried combining a carousel and shared element to create a unique UI that shares a slide photo between screens but it seems there's something wrong with the transition animation. on Android: The photo doesn't reload but the hole screen flickers, it's easy to see the flickering.
on iOS: There's no flickering but the image needs to be reloaded even with it being cached, so you end up with a white square at the end of the transition.

Here is the code so you can take a look at : https://snack.expo.io/OniMGqZTw

Thanks!

[sergchernata]

Same issue here, shared element flickers once (fades out and back in) and images inside it are reloaded.

To clarify, the animation I'm using is move so there should be no opacity animation.

[dev-andremonteiro]

I have reworked some of the components that I used on that example to make it closer to the example you see in the docs.

https://snack.expo.io/YM5YkZNCx

You can see that it looks much better now, but we still have some resizing problems in the image ( I don't want to be as noticeable as it is right now ) and the name component also resizes both the text and the view.
Any help is much appreciated.

[servonlewis]

Same

[xXDeonoXx]

Same here

[mdrajibsk8]

Did anyone get any solution for this yet?
Any help is much appreciated.

[xXDeonoXx]

a workaround i found is to set the transition time to 500ms or less.

but if you want a more smooth transition, this isn't gonna save you.

check it here at line 37

[mdrajibsk8]

i found this solution

"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"react-navigation-shared-element": "^5.0.0-alpha1"

      <Stack.Screen
          name="Details"
          component={Details}
          options={()=>({
            gestureEnabled : false,
            transitionSpec : {
              open : {animation:'timing', config : {duration:300}},
              close : {animation:'timing', config : {duration:300}}
            },
            cardStyleInterpolator : ({current : {progress}}) => {
                return {
                  cardStyle : {
                    opacity : progress
                  }
                }
            }
          })}
        />

[ghost]

a workaround i found is to set the transition time to 500ms or less.

but if you want a more smooth transition, this isn't gonna save you.

check it here at line 37

Thank you!!

[ella33]

Unfortunately, changing the duration is not working well for the transitions I have. Would be nice to have this issue prioritised and fixed. Thank you!

[niraj-khatiwada]

Having the same issue. But whats weird is its only happening in release build not in development.

[IjzerenHein]

I have reworked some of the components that I used on that example to make it closer to the example you see in the docs.

https://snack.expo.io/YM5YkZNCx

You can see that it looks much better now, but we still have some resizing problems in the image ( I don't want to be as noticeable as it is right now ) and the name component also resizes both the text and the view.
Any help is much appreciated.

To fix this you'll need to animate the image and the bottom label independently. Put <SharedElement> around the image, and another <SharedElement> around the label and animate them both.

[IjzerenHein]

As for the image flicking, this appears to be related to react-native-screens. Could you try disabling it using enableScreens(false)?

[IjzerenHein]

This issue is related to the react-navigation binding and react-native-screens. Although more investigating is needed, it appears that disabling detachInactiveScreens solves the problem. Please upgrade to the just released new major version of react-navigation-shared-element which should fix this problem.

[kemusa]

Any update on this? Flickering still seems to be an issue.

[NoahGiesel]

Same problems on android 12.
"@react-navigation/native": "^5.9.8",
"@react-navigation/stack": "^5.14.9",
"react-navigation-shared-element": "^5.0.0-alpha1"

[olamigokayphils]

"@react-navigation/native": "^5.8.10",
"react-navigation-shared-element": "^5.0.0-alpha1"

options={() => ({
          ...,
          detachPreviousScreen: false,
          ...
})}

Setting stack screen option detachPreviousScreen like so Solved the issue for me

[Only-IceSoul]

https://www.youtube.com/watch?v=7LC9eHZBoJM

[pouyarezvani]

sadly the image still flickers with detachInactiveScreens .
Any more ideas? @IjzerenHein

[IjzerenHein]

Much things have changed since the original report of this issue. Can you provide a repro @pouyarezvani ?

[pouyarezvani]

@IjzerenHein You mentioned many things have changed.
What has changed? And is there a fix for this flickering issue? Because after disabling enableScreens and setting detachInactiveScreens to false it is still not working.
In my case, Some images flicker and some don't.
I'm reading the images from firebase and rendering them with the react-native Image library.

Also, can nested sharedElementTransition navigators be used with this library?

[VictorioMolina]

@dev-andremonteiro @pouyarezvani @IjzerenHein I am using expo-image (similar to react native fast-image), with proper cache policies, and I can confirm these tricks doesn't work:

1. enableScreens(false); not working
2. presentation: "modal"; not working
3. detachPreviousScreen={false} (on the destination screen) or detachInactiveScreens={Platform.OS === "ios"} (on the navigator) not working
4. Also not working:

  transitionSpec : {
    open : {animation:'timing', config : {duration:300}},
    close : {animation:'timing', config : {duration:300}}
  },
  cardStyleInterpolator : ({current : {progress}}) => {
      return {
        cardStyle : {
          opacity : progress
        }
      }
  }

Its quite annoying but it seems to be a problem related to react-native itself and cache policies. Not sure if there is a workaround, but in my scenario I have the following:

1. Masonry layout in my search screen with thousands of images from different users. As I am using expo-image and progressive loading, I have decided to use memory cache with high priority, instead of disk cache (as this last option doesn't have sense to me at all).
2. On iOS, everything goes fine. As both the source and destination screens renders the transition image using memory cache. But... if you close the app (not closing, just put in the background) and then reopen, the first couple transitions will experience this "image reloading" problem.
3. On Android, at least on the devices I have tried, seems to be impossible to avoid this problem. The only way for me is to replace the memory cache with the disk cache, something I won't do because I don't like this solution. But works.

[VictorioMolina]

IjzerenHein/react-navigation-shared-element#224