androidreact-nativereact-navigationreact-navigation-top-tabsreact-navigation-native-stack

Top Tabs Navigator tabBar floats below Android's navigation bar

I am using Material Top Tabs Navigator from React Navigation, as well as a custom tabBar component as shown in example in the official docs.

At the same time, I am using Native Stack Navigator. The Top Tabs Navigator (set position to bottom) is nested inside of one of the Stack screens.

It all works fine, except when I set navigationBarColor option on the Screen that hosts the Tab navigator, the tabBarfloats/falls behind Android's navigation bar, making it not fully visible.

The very act of setting navigationBarColor breaks the layout.

     <Stack.Screen
        options={{ headerShown: false, navigationBarColor: '#121212' }}
        name="MainScreen"
        component={MainScreen}
      />

enter image description here

Solution

  • Fixed by adding insets from react-native-safe-area-context, with some fine-tuning for iOS/Android variants:

      const insets = useSafeAreaInsets();

  const bottomInsetMargin = Platform.select({
    ios: 0,
    android: insets.bottom,
  });
  const bottomInsetPadding = Platform.select({
    ios: 16,
    android: 0,
  });