I’m facing a problem with my Bottom Tab Navigator. I get a white space between my tabs and the end of the screen of my iPhone 11 Simulator. On a iPhone 8 Simulator I don’t have these white space. There is also a small white space above the Tabs. How can I remove this space? I’m not able to find a solution and I’m running out of time. Thanks!
This is my implementation so far:
DetailsNavigation.js
const DetailsNavigation = ({ route }) => { return ( <Tab.Navigator tabBarOptions={{ activeBackgroundColor: colors.primary, activeTintColor: colors.secondary, inactiveBackgroundColor: colors.secondary, inactiveTintColor: colors.primary, labelStyle: { fontSize: 13, marginBottom: 5, }, }} > <Tab.Screen name="DetailsScreen" options={{ title: "Portfolio", tabBarIcon: ({ color, size }) => ( <MaterialIcons name="account-box" size={24} color={color} /> ), }} children={() => <DetailsScreen worker={route.params} />} /> <Tab.Screen name="RatingScreen" component={RatingScreen} options={{ title: "Bewertungen", tabBarIcon: ({ color, size }) => ( <MaterialIcons name="star" size={24} color={color} /> ), }} /> </Tab.Navigator> ); }; export default DetailsNavigation;
DetailsNavigation.js is implemented here:
WorkersNavigation.js
const WorkersNavigation = (props) => { return ( <Stack.Navigator> <Stack.Screen name="WelcomeScreen" component={WelcomeScreen} options={{ headerShown: false }} ></Stack.Screen> <Stack.Screen name="WorkersScreen" component={WorkersScreen} options={{ headerShown: false }} ></Stack.Screen> <Stack.Screen name="DetailsNavigation" component={DetailsNavigation} options={{ headerShown: false }} ></Stack.Screen> </Stack.Navigator> ); }; export default WorkersNavigation;
Advertisement
Answer
I think you are wrap outside of WorkersNavigation like this
<SafeAreaView> <WorkersNavigation /> </SafeAreaView>