CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
wyndham007
wyndham007

Reputation: 181

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;

Upvotes: 8

Views: 6115

Answers (5)

Csutkas
Csutkas

Reputation: 189

In my case for remove bottom space I need to set the height for tabBarStyle and also for tabBarItemStyle:

<Tab.Navigator
      initialRouteName={ScreenNames.Home}
      screenOptions={{
        tabBarItemStyle: {
          height: 53,
        },
        tabBarStyle: {
          height: 53,
        },
      }}>

For remove upper white space:

<Tab.Navigator
  initialRouteName={ScreenNames.Home}
  screenOptions={{
    tabBarStyle: {
      borderTopWidth: 0,
      elevation: 0,
    },
  }}>

Upvotes: 0

Hacanna42
Hacanna42

Reputation: 11

Add this lines at your TabNavigator screenOptions:

tabBarItemStyle: {borderWidth: 1, borderColor:'#101010'},
tabBarStyle: {paddingBottom:0, backgroundColor: '#101010'},

and if you use <SafeAreaView>, delete it.

Upvotes: 1

user7008081
user7008081

Reputation: 41

    screenOptions={({route}) => ({
    tabBarStyle: {backgroundColor: '#436332', borderTopColor: '#23321A'},
    tabBarLabelStyle: {
      fontWeight: '600',
      fontSize: 12,
    },
    tabBarActiveTintColor: '#f1c522',
    tabBarInactiveTintColor: '#f4f1de',
    tabBarActiveBackgroundColor: '#436332',
    tabBarInactiveBackgroundColor: '#436332',
  })}

Upvotes: 2

Anhdevit
Anhdevit

Reputation: 2104

I think you are wrap outside of WorkersNavigation like this

<SafeAreaView> 
<WorkersNavigation /> 
</SafeAreaView>

Upvotes: 3

Nicholas Kim
Nicholas Kim

Reputation: 387

The white space found on iPhone X devices and above is called the Safe Area and exists to ensure appropriate insetting based on the device and context. Refer to the official Human Interface Guidelines for more information.

The react-navigation's BottomTabNavigator supports safe areas out-of-the-box for the default BottomTabBar, so in order to remove the SafeArea under it, you need to override the settings provided for the BottomTabNavigator.

<Tab.Navigator
    tabBarOptions={ {
        ...
        safeAreaInsets: {
            bottom: 0,
        },
    } }
>
...
</Tab.Navigator>

Upvotes: 11

Related Questions