React-native-navigation: 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

[ghost]

@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 ?

[ghost]

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)

[ghost]

@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

[ghost]

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
https://github.com/wix/react-native-controllers/pull/63

[ghost]

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

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

)))

[maxs15]

Awesome @dropfen ! Good job

[guyca]

@dropfen Good job! Thanks.

[ghost]

thanks guys :)

[reyalpsirc]

I'm having these issues of white flickering on Android for the starting screens that have an image background. How can I solve it knowing that a color is not an option since it is too much different from the background images? On iOS I solved it with screenBackgroundImageName but, Android has not support for that. Am I missing something for setting Images as backgrounds for screens??

[guyca]

Is it a flicker or a fade animation? did you try defining fadeDurarion: 0 on the image?

[reyalpsirc]

@guyca Its a kind of a fade with white only when calling the startSingleScreenApp or startTabBasedApp functions. Anyway, it seems that I solved the problem by adding this:

app/res/values/styles.xml:

<resources>
    ...
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:fitsSystemWindows">true</item>
        <item name="android:windowAnimationStyle">@style/DialogNoAnimation</item>
    </style>

    <style name="DialogNoAnimation">
        <item name="android:windowEnterAnimation">@anim/no_animation</item>
        <item name="android:windowExitAnimation">@anim/no_animation</item>
    </style>
    ...
</resources>

app/res/anim/no_animation.xml:

<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="1.0"
    android:duration="300" />

Please let me know if this was the correct approach or not.

[dnnnz]

I had exactly the same issue running TouchableHighlight.
Found a pretty good solution setting up the prop underlayColor of TouchableHighlight to the same dark color of my view alongside with setting cardStyle: { backgroundColor: '#242424' } on my StackNavigator options. Working like a charm!