React-native-screens: Screens are blank for a few frames when navigating to them

[dereknelson]

Not sure if this is expected behavior or it's something to do with my configuration, but here's a video slowed down to 25% speed

My navigator setup:

StackNavigator: {
    DrawerNavigator: {
        BottomTabNavigator: {
            StackNavigator: {
                Screen
            }
            StackNavigator: {
                Screen
            }
            ...SimilarStackNavigators
        }
    }
}

Happy to answer any other questions about my implementation. My app works significantly smoother now, very excited about this project.

[brentvatne]

can you provide an example that reproduces this? is it happening in both dev/prod?

[dereknelson]

@brentvatne hey have been pretty swamped but will be getting to reproducing as soon as I can. It does happen in both development and production.

[raphaelrk]

Made a hacky fix for this by switching my BottomTabNavigator to a MaterialTopTabNavigator with the following settings

{
    tabBarPosition: 'bottom',
    animationEnabled: false,
    lazy: false,
}

But then I run into the following issue: all my tabs have long sectionlists. When I navigate away from e.g. tab C to tabs A, B, D, then back to C, the sectionlist in C doesn't appear until I try to scroll. I don't think that's a react-native-screens issue, however. Edit: fixed this by removing removeClippedSubviews from my section lists. Thanks @dereknelson!

I also had an unfruitful attempt at reproducing this in a snack which copied most of my app's navigation

[dereknelson]

@raphaelrk that's a navigation/list issue, I've run into that before. Try setting removeClippedSubviews={false} on the list.

(I've read that the optimization removeClippedSubviews gives you is negligible anyway, I have 4 mounted screens with something like 7 lists mounted at all times and it's still performant without any of them removing clipped subviews)

[dereknelson]

I updated to react-navigation 3.0 and the gray flash is there for significantly less time, but is still noticeable in some instances. Going to work on reproducing asap but my navigation config is complicated af so I'm not sure when I'll be able to get around to that.

[kmagiera]

I wonder if this issue is related to the one reported on react-navigation repo https://github.com/react-navigation/react-navigation/issues/5382

Does any of you observe this problem when using something else than tab navigator? The issue I mentioned above is specific to tab navigator and Android. I managed to find the root cause and submit a fix to react-navigaton-tabs repo (https://github.com/react-navigation/react-navigation-tabs/pull/80)

Please let me know if you can repro this in some other setup

[dereknelson]

@kmagiera forgot to update with this info - I've upgraded to Expo SDK 31 and there is no gray flash anymore. React-Navigation version is the same.

[kmagiera]

FYI we have found one more instance of this issue that may have cause a flash with stack navigator on Android. It's been addressed in #50 and also in react-navigation repo here https://github.com/react-navigation/react-navigation-stack/pull/73

Both react-nav changes and screens update will be released soon

[K-Leon]

I'm seeing this behaviour with react native router flux on android - it is using 2.x branch of react navigation as base.

I'm using latest screens and latest 2.x of react navigation - still seeing this flicker. Even if i backport the listed PR, removing opacity completly or switching to ios transitions. It is also not the root view that shines through - i'm wondering if there is any idea or fix that could help

[kmagiera]

Hey @K-Leon – unfortunately I have no idea how router flux is using react navigation under the hood but as far as I remember the change that fixed it in react navigation has been merged to 3.X not 2.X (might be wrong tho).

What helped me debug this in the past was to try record transision using screen recording and then playing in slow motion (managed to notice it was actually the transparency that's changed). If you have time to prepare such video and post it here in slow motion that might help.

I'm actually going to close this issue as it has been addressed a while ago. Can you please open a new one to hold the discussion about router flux?