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>
