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.

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

example