React-native-navigation: BottomTabs flash black when hiding them on screen push

[svenlombaert]

Issue Description

We're in the process of switching from react-navigation to react-native-navigation. Everything was working fine until we switched our lay-out to the sidemenu. So we have a drawer left, and the center contains bottomTabs.

When pushing a screen, we want to hide the bottomTabs. This still works, but the bottomTabs turn black when pushing in the screen.

Steps to Reproduce / Code Snippets / Screenshots

Our layout looks like this:

Navigation.setRoot({
      root: {
        sideMenu: {
          left: {
            component: {
              name: routes.SideMenu,
            },
          },
          center: {
            bottomTabs: {
              children: [
                {
                  stack: {
                    options: {
                      bottomTab: {
                        icon: require('resources/images/bottom-tabs/delta.png'),
                      },
                      sideMenu: {
                        left: {
                          enabled: true,
                        },
                      },
                    },
                    children: [{ component: { name: routes.Portfolio } }],
                  },
                },
                {
                  stack: {
                    options: {
                      bottomTab: {
                        icon: require('resources/images/bottom-tabs/markets.png'),
                      },
                      sideMenu: {
                        left: {
                          enabled: true,
                        },
                      },
                    },
                    children: [
                      { component: { name: routes.WatchlistAndMarkets } },
                    ],
                  },
                },
                {
                  stack: {
                    options: {
                      bottomTab: {
                        icon: require('resources/images/bottom-tabs/digest.png'),
                      },
                      sideMenu: {
                        left: {
                          enabled: true,
                        },
                      },
                    },
                    children: [{ component: { name: routes.Digest } }],
                  },
                },
                {
                  stack: {
                    options: {
                      bottomTab: {
                        icon: require('resources/images/bottom-tabs/notifications.png'),
                      },
                      sideMenu: {
                        left: {
                          enabled: true,
                        },
                      },
                    },
                    children: [{ component: { name: routes.Notifications } }],
                  },
                },
                {
                  stack: {
                    options: {
                      bottomTab: {
                        icon: require('resources/images/bottom-tabs/settings.png'),
                      },
                      sideMenu: {
                        left: {
                          enabled: true,
                        },
                      },
                    },
                    children: [{ component: { name: routes.Settings } }],
                  },
                },
              ],
            },
          },
        },
      },
    });

Before we just had the layout which is defined in the center, then the black flash didn't appear.

I created a video to show the problem.
https://jumpshare.com/v/SId8gggV5UvZ0LsIcMlc

---

Environment

• React Native Navigation version: 2.18.5
• React Native version: 0.59.8
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone X (real device), iPhone 6 (simulator) both latest iOS version

[ItsNoHax]

Hi @svenlombaert ,

Would you be able to fork this project and create a branch where you reproduce this behavior in the playground app?

[guyca]

Hey @svenlombaert
How are you hiding the BottomTabs when a screen is pushed? In Static options? Or in options passed in the command?

Seconding @ItsNoHax request, can you fork the library and push a branch with a reproduction in the playground app?

[svenlombaert]

It happens when the options are passed in the push command.

I have a branch here: https://github.com/svenlombaert/react-native-navigation/tree/bug/bottom-tabs-black-flash

If you just select sideMenu and then on the first tab, click Hide Tabs on Push, the bottomTabs will flash black.

[guyca]

Hey @svenlombaert
I ran you branch, thanks for taking the time to push a reproduction.

This could be an issue in our native SideMenu implementation, I don't have time to look into it further. You can overcome it by setting a background color to the ViewController, either in defaultOptions or directly to the center layout.

options: {
  layout: {
    backgroundColor: 'white' // Or whatever your screen's background color is
  }
}

Edit: Keep in mind setting a layout background color in defaultOptions will contribute to overdraw on Android so be careful with it.

[svenlombaert]

@guyca Since upgrading to v3, this is not working anymore on Android..

[svenlombaert]

Our app has multiple themes, and I do this when the theme changes:

Navigation.mergeOptions('bottom-tabs', {
      layout: {
        backgroundColor: getNativeLayoutBackgroundColor(newColorScheme),
      },
      bottomTabs: {
        backgroundColor: getBottomTabsBackgroundColor(newColorScheme),
      },
      bottomTab: {
        iconColor:
          colorScheme === ColorScheme.LIGHT
            ? COLOR_BACKGROUND_WITH_OPACITY
            : COLOR_DIRTIER_WHITE,
        selectedIconColor:
          colorScheme === ColorScheme.LIGHT ? COLOR_BACKGROUND : COLOR_WHITE,
      },
    });

All the options seem to apply, except for the layout one. This does work in iOS though.