Image - White flickering when changing screen

[Cengkaruk]

Hi,

I own some screens with Image as a full background, i have flickering moment when the navigator push another screen. I'm new with react-native (6 days), i don't recognize this issue is related to this library or react-native instead.

I realize the Image component needed some of time to load my image raw. Any advice for me? i have idea for giving the Image a fade-in animation, after they loaded. Have a better solution?

Thanks

[wgormley]

i am having this same issue but without full size images. i have a dark background and if i disable the animation i get a brief flicker of a white background.

[maxs15]

Same issue here, @guyca any idea about a fix ?
I see two possible solutions:
1/ We could define a backgroundColor in the navigatorStyles ?
2/ Prerender the view before it's pushed ?

[ninjz]

Is this somehow related to this issue #38 i'm having?

[maxs15]

Could be yes, @artald @guyca are you aware of this issue ?
It is currently the only thing preventing me from being able to use this awesome component

[guyca]

Hey guys. Are you experiencing these issues in Android or iOS?
Could one of you please provide us a sample project where this issue is recreated?

[maxs15]

Hey, I finally found the issue on my side.
I was using TouchableHighlight to handle the click where I was pushing my new view and this was the cause of my animation issue !
Pretty weird.. hope it'll maybe help some people

@maxs15 which component are you using instead for the click Event?
I mean the TouchableHighlight is used by different libraries as wrapper.

[maxs15]

I used TouchableWithoutFeedback for the moment.
But yes this is a problem indeed, maybe the solution would be to execute the navigator on a different thread ?

just tried with TouchableWithoutFeedback and had the same issue.. I also tried to setTimeout before pushing the new screen, same white flickering. I guess, it rerenders the whole application when you push to some screen, and it's not waiting for the componentDidMount event.. But I am not sure

[maxs15]

Well maybe you have a different problem, but in my case it was the issue.
Interesting article about RN perfs: http://facebook.github.io/react-native/docs/performance.html
I guess the main thread is too busy to perform the work under 16.67ms causing frames drop (white flickering)

@guyca I created a very simple project repo, which shows the bug. Please take a look when you have time https://github.com/dropfen/wix-nav-flickering-issue

Ok, the problem is, that React styles applies after the navigation started, and by default the backgroundColor is white, so this is the flicker effect..

To fix it, I took @maxs15 1. suggestion to apply a screenBackgroundColor in navigatorStyle, which is automatically added as the view.backgroundColor before React wakes up..

This was done in react-native-controllers, here's the PR
wix-incubator/react-native-controllers#63

So now, you can even have RED flickering, when you add

...
navigatorStyle: { screenBackgroundColor: '#f00' }
...

)))

[maxs15]

Awesome @dropfen ! Good job