White blank screen shows for a while in Android (react-navigation)

What kind of Issue is this?

Bug Report

Actual behavior

What is happening?

Blank screen shows for a while in Android. I have integrated the library with React-Navigation (V1) and provided tabBarComponent: NavigationComponent,. When user Login in the app, he/she redirect to Tab Navigator. After loading TabNavigator, initial screen takes 2-3 seconds to load. Meanwhile it just show white screen to user. This is just happening for once.

Is it happening on Android, iOS or both?

Only for Android, iOS working fine

Could you identify sections in your code which triggers this behavior?

This is only happening when I set false to animationEnabled.

Expected behavior

What did you expect to happen?

same work as iOS

Environment

software	version
react-native-material-bottom-navigation	0.9.0
react-native or expo	0.51.1
node	v8.11.3
npm or yarn	5.6.0

Hi! Your issue is related to an older version of the Bottom Navigation (0.9.0). The new version 1.0.0 is a complete overhaul of the Bottom Navigation.

Unfortunately I have to tell you that I don't provide out-of-the-box support for react-navigation anymore, and NavigationComponent was removed in v1.0.0. You can read more about the decision here: https://github.com/timomeh/react-native-material-bottom-navigation#react-navigation-support

This section in the Readme also provides some information on how to use the new version of the Bottom Navigation with react-navigation. You can also find more informations in #98.

However, I have some additional informations which maybe can help you:

Of course you can continue to use v0.9.0 of the Bottom Navigation. You can try to replace the tabBarComponent with the TabBarBottom from react-navigation and check if the issue is still happening. If it's still happening with the TabBar, this issue might be related to react-navigation and not to the Bottom Navigation. In this case you're likely to find better solutions in react-navigation's docs/issues/etc. (But I won't provide support for the old version anymore – use it on your own risk)
Your issue sounds like a known issue in react-navigation, and I had this issue (a few seconds of blank screen) as well. This issue is not an issue with the Bottom Navigation. The TabNavigator initially loads all your screens (not only the first one!), and while it does that, it shows a blank screen. So If you have a screen which needs a few seconds to load (e.g. it loads a bunch of images), this screen will block rendering until it has finished loading. Back then there was a lazy option for this, but I don't know the current state of it.

I hope I could help you.

Note: I'm going to close this issue because it's related to an old feature which is not supported anymore. I'm also adding "react-navigation" to the title so it's easier to find for other people, which may be searching for this issue.

timomeh / react-native-material-bottom-navigation