Skip to content
Advertisement

React Native BottomTabNavigator remove white space

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!enter image description here

enter image description here

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>
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement