I'm currently using the material-bottom-tabs to implement a navigation in my mobile app.For some odd reason, it isn't displayed correctly but cut off by the bottom of my screen.I should mention that this is happening regardless if I activate gesture control (so the Android built-in navigation bar disappears) or not.It is also irrelevant if I run this on my Android phone (Android 10).
If I add padding to the style of my Tabs.Navigator, then the Tab-Navigation-Bar is still cut off, now by a white padding.
I tried to wrap my Tab.Navigator into a SafeAreaView (from react-native-safe-area-context) but if I do this, I just get a plain white screen back.
This is my code:
const Tab = createMaterialBottomTabNavigator();const Stack = createStackNavigator();//const insets = useSafeArea();class App extends Component { constructor(props) { super(props); this.state = { userToken: 1, // set to 'null' in production state }; } render() { return this.userToken === null ? (<Stack.Screen name="LogIn" component={LoginScreen} /> ) : (<SafeAreaProvider><NavigationContainer><SafeAreaView><Tab.Navigator style={{ paddingBottom: "10%" }}><Tab.Screen name="Current Schedule" component={CarouselPage} options={{ tabBarLabel: "Current\nSchedule", tabBarIcon: <Ionicons name="ios-calendar" size={20} />, }} /><Tab.Screen name="Resources" component={ResourceScreen} /><Tab.Screen name="Schedule Selection" component={ScheduleSelectionScreen} /><Tab.Screen name="About" component={AboutScreen} /></Tab.Navigator></SafeAreaView></NavigationContainer></SafeAreaProvider> ); }}export default App;