How to remove white space between the tabs in react navigation top bar

Question

How do you remove white space between the tabs in react-navigation top bar. So what should happen is the tab size should adjust based on the screen size.

This is what my navigation looks like at the moment.

You can see that the tabs are really big. They are taking too much space. How can I get those white spaces so the tabs are only taking enough size to fit the tab name.

I've tried styling Tab.Navigator with no luck. For example Ive tried the following:

<Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        scrollEnabled: true,
        labelStyle: { padding: 0, margin: 0, border: 0 },
        tabStyle: { padding: 0, margin: 0, border: 0 },
      }}
      lazy={true}
      style={{ padding: 0, margin: 0, border: 0 }}
    >

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

import Home from "../screens/Home";

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const HomeTabNavigation = () => {
  return (
    <Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        scrollEnabled: true,
        labelStyle: { padding: 0, margin: 0, border: 0 },
        tabStyle: { padding: 0, margin: 0, border: 0 },
      }}
      lazy={true}
      style={{ padding: 0, margin: 0, border: 0 }}
    >
      <Tab.Screen name="All" component={Home} />
      <Tab.Screen name="Hot" component={Home} />
      <Tab.Screen name="Winners" component={Home} />
    </Tab.Navigator>
  );
};

const HomeNavigation = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeTabNavigation" component={HomeTabNavigation} />
    </Stack.Navigator>
  );
};

export default HomeNavigation;

score 3 · Answer 1 · answered Apr 24 '20 at 23:19

I had the same problem just a couple of days ago.

Here is my solution for you:

import React from "react";
import { useWindowDimensions } from "react-native"; // <-- add this hook
import { createStackNavigator } from "@react-navigation/stack";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

import Home from "../screens/Home";

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const tabsConfig = () => {
    const { width } = useWindowDimensions()
    return {
        lazy: true,
        tabBarOptions: {
            showLabel: true,
            tabStyle: {
                // here you can set the tab width , in this case , 3 tabs , width / 3
                width: width / 3,
                justifyContent: 'center',
                alignItems: 'center',
                alignSelf: 'center',
            },
            indicatorStyle: {
                borderWidth: 1,
                borderColor: 'red',
            }
        },
    }
}

const HomeTabNavigation = () => {
  return (
    <Tab.Navigator {...tabsConfig()}>
      <Tab.Screen name="All" component={Home} />
      <Tab.Screen name="Hot" component={Home} />
      <Tab.Screen name="Winners" component={Home} />
    </Tab.Navigator>
  );
};

const HomeNavigation = () => {
  return (
      <Stack.Navigator>
        <Stack.Screen name="HomeTabNavigation" component={HomeTabNavigation} />
      </Stack.Navigator>
  );
};

export default HomeNavigation;

Only setting the `width` property will still leave large amount of space between. Set `marginHorizontal` to negative value to fully get rid of the spaces. — Matt Yoon, Jul 15 '21 at 08:21

score 1 · Answer 2 · answered Sep 14 '22 at 15:21

1

Set width to auto like this:

screenOptions={{
   tabBarItemStyle: {width: "auto"}
}}

answered Sep 14 '22 at 15:21

Gabriel Uhlíř

609
3
9
18

score 0 · Answer 3 · answered Apr 24 '20 at 23:20

0

You can adjust the height by simply using :

<Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        style: {
          height: 40,
       }
      }}
>

answered Apr 24 '20 at 23:20

Soufiane Odf

1,054
2
9
23

score 0 · Answer 4 · answered Dec 10 '20 at 17:43

0

Make shadowOffset and elevation as 0 in the homeTabNavigator style

answered Dec 10 '20 at 17:43

Srinath Thangavelu

11

please, explain better why do you say that – Giuppox Dec 10 '20 at 20:59
By default in react navigation, the shadowOffset Or elevation value is not zero. That means it will give some shadows. To remove that we are making them as zero. (Note: shadowOffset is used in ios for shadows.. In Android we can achieve that with the help of elevation) – Srinath Thangavelu Dec 13 '20 at 05:53

How to remove white space between the tabs in react navigation top bar

4 Answers4