Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image Flickering on transition #39

Closed
dev-andremonteiro opened this issue Sep 17, 2020 · 23 comments
Closed

Image Flickering on transition #39

dev-andremonteiro opened this issue Sep 17, 2020 · 23 comments

Comments

@dev-andremonteiro
Copy link

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.

sharedelementexample

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

Thanks!

@sergchernata
Copy link

sergchernata commented Sep 23, 2020

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
Copy link
Author

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
Copy link

Same

@xXDeonoXx
Copy link

Same here

@mdrajibsk8
Copy link

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

@xXDeonoXx
Copy link

xXDeonoXx commented Mar 30, 2021

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
Copy link

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
Copy link

ghost commented May 20, 2021

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
Copy link

ella33 commented Jun 15, 2021

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
Copy link

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

@IjzerenHein
Copy link
Owner

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
Copy link
Owner

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

@IjzerenHein
Copy link
Owner

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
Copy link

kemusa commented Oct 19, 2021

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

@NoahGiesel
Copy link

NoahGiesel commented Jan 8, 2022

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
Copy link

olamigokayphils commented Jan 22, 2022

"@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
Copy link

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

@pouyarezvani
Copy link

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

@IjzerenHein
Copy link
Owner

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

@pouyarezvani
Copy link

@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
Copy link

VictorioMolina commented Jul 17, 2023

@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
Copy link

@saad-alzion
Copy link

this works completely smooth af on iOS but on Android the image shrinks and then gets to the size while transitioning from screen A to B. This library is awesome and would love to have a solution for android Image sizing issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests