React-native: [Image] White flickering when changing image

[PhilippKrone]

Hi,

I just updated from RN 0.8 to the current master and I'm seeing the following behaviour.

I'm showing images from the local UserDefaultsDirectory and when loading such an image, I see a very fast white flickering (I think while loading the image). This was not the case in RN 0.8. I know that the loading happens async and thus, loading times might occur. But is there any option to not have this white flickering - knowing that perhaps for 1 or 2 FPS, the view is not updated (I would prefer having the old content shown for another 1 or 2 FPS than having old content -> white screen -> new content).

My background is the following: I'm having a card which I "flip" via the Animated API. After the animation is done, I actually have to re-render the screen as otherwise, Touchable buttons are not working correctly (due to still being on the "wrong side" of the card). And while re-rendering, I get a white flickering on the position of the image (although the actual image is the same all the time, I'm rendering it in another Image component that is on the other side of the card).

Thanks
Philipp

[ide]

I encountered flickering when switching between tabs when upgrading from 0.9 to master as well. It may have to do with an optimization that removes off-screen images cc @a2

[jsierles]

Did anyone find a workaround for this?

[ghost]

I see flickering when doing navigator.push to a new view. The images on the previous screen flicker once as the new view slides from the right. Any ideas how to fix this? My issue posted here: https://github.com/facebook/react-native/issues/3187

[PhilippKrone]

@a2 Do you have any idea here?

[Purii]

I can notice a similar behavior as described by @PhilippKrone

[IlyasM]

I have image flickering when doing tab switching in TabBarIOS on 0.15, any fix yet?

[Intellicode]

I'm using the images for background purposes and when switching to a new scene using the navigator, it starts rendering the image mid transition. This is unfortunate, and I wouldn't mind waiting 1-2 frames for the transition to start too.

[satya164]

I think it would be better to at least fade in the images.

[eduardoboucas]

I wonder if the problem I'm having is related to this issue. Is there any successful workaround?

Thanks!

[hasen6]

This thread is closed in favour of #4869 and #4869 is closed in favour of this thread!

This is definitely an issue, I'm experiencing it with switching to any page in NavigatorIOS or Tab bar IOS and back to a page with a background image.

[xvalentino]

I'd like to note that resizeMode being set to 'cover' instead of 'contain' solved one flickering issue when the assets were being loaded for a second time.

However, I experience a flicker when switching between two images, on first load. I expect this is because the image is being decoded on the fly, can anyone think of a way we can decode assets before they are being rendered, so the user won't experience a flash?

[hasen6]

I'm experiencing flickering on rendering the same image. It re-renders when selected the image does not change. The previously selected image becomes deselected but also does not change image. Every time the image is deselected, it flickers, even though its position has not changed and the image is the same.

Is this every going to be fixed? Its been eight months now since this was raised and I feels its somewhat of a major issue. It makes apps look very unprofessional.

[roman01la]

We are experiencing the same issue for navigation bar icons when switching between screens using Navigator.

[MichaelDanielTom]

Just wondering if anything was in the works for this?

In the meantime, I have a _somewhat hacky_ workaround component to switch between 2 images on highlight, which works with resizeMode=contain

Check it out!

[roman01la]

@MichaelDanielTom We have switched to SVGs. Didn't notice any problems so far.

[hasen6]

@roman01la That's not really a solution for all though.

[MichaelDanielTom]

@roman01la I wasn't aware that SVGs were supported, how are you using them exactly, just in an ?

[blakeandrewwood]

I use a background image for several sequential screens and did the following as a quick fix for each.

    componentWillMount() {
        // "Preload" static image
        (<Image source={require('./background.png')} />);
    }

I know it's another hacky fix, but it helps for the mean time.

@roman01la I'm curious also, how are you using svg?

[roman01la]

@MichaelDanielTom @blakeandrewwood We are using ReactNativeART package which is included into React Native. This article has examples of rendering SVG.

[juanpujol]

@blakeandrewwood how are you rendering the Image inside the component after doing that with componentWillMount()? Thanks.

[di3goleite]

@juanpujol you can do something like:

componentWillMount() {
    this.image = (<Image source={require('./background.png')} />);
}

and in your render() function:

render() {
    return(
        <View>
            {this.image}
        </View>
    );
}

[tlcheah2]

@di3goleite What if the Image component is actually a container to several view?

[ammichael]

I have a List using images as row background, and my fps drop to 10 while scrolling. Doesn't matter image size, rendering an image slows down the whole app.

[roman01la]

@ammichael I had this issue before. The problem is that image is scaled at runtime, try to render images in their original resolution (do not scale them at runtime).

[ammichael]

@roman01la That is interesting! How am I supposed to not scale them at runtime? At first I thought about resizing manually, but this seems wrong in many ways..

[roman01la]

@ammichael For example if you want to render image at 10x10 points on 2x display, then the image should be exactly 20x20 pixels resolution.

[ammichael]

@roman01la Yeap. But in this case you have a fixed width and height. I just have a fixed height, since the width is the screen width.

Any suggestion?

[roman01la]

@ammichael I would recommend to test and find out if scaled images is really the problem. If it it, then you need to figure out how to not scale them.

[nicely]

Add backgroundColor to your container .I mean body , than problem fixed for me.

[ammichael]

Guys, for me the fix was resizing all the images to smaller sizes. Some of them was over 2000x2000, and I was using just 500x300 or so

[xvalentino]

@ammichael that makes sense, since the image is larger, it may take a longer time to load.

[MnemosyneMei]

After resizing all my images, it works well.. Thanks @ammichael .

[manishoo]

this is not working for me! I'm using react-navigation StackNavigator on iOS (haven't tested for android) and when I swipe back to the previous view, my background image flickers. I have set it to resizeMode: cover

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[rogerkerse]

I am still struggling with this issue, I have icon that is only 26@x3 on navbar and when I try to show modal, it flickers. resizemode or nothing works.

[marcosmartinez7]

Same problem here in ios

[RSSfeed]

+1

[StanislavMayorov]

We had the same issue on android devices (RN 0.55.4) when load local asset image first time. We have created component that shows previous source until new source is loaded for android.
https://www.npmjs.com/package/react-native-no-flicker-image