I'm currently using the material-bottom-tabs to implement navigation in my mobile app.
For some odd reason, it isn't displayed correctly but cut off at the bottom of my screen.
This happens regardless of whether I activate gesture control (so the Android built-in navigation bar disappears) or not.
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 inside 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:
import React, { Component } from 'react';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import DrawerHome from './DrawerHome';import Bookmarks from './Bookmarks';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;