Is there a way to make the `indicator` of `react-navigation`, fits to the tab?

Question

I wanna to fit the indicator of navigation bar, to the tab. but it only fits for the 1st tab. for all other tabs, the indicator is slipped a bit for right side. I have used margins for both left and right in the style section of navigation. Below images show the scenario.

Here is the code of the navigation component

const Navigation = createMaterialTopTabNavigator(
    {
        S: Screen1,
        S2: Screen2,
        S3: Screen3,
    },
    {
        swipeEnabled: false,
        tabBarOptions: {
            activeTintColor: "white",
            inactiveTintColor: "blue",
            upperCaseLabel: false,
            scrollEnabled: false,
            inactiveBackgroundColor: "white",
            indicatorStyle: {
                height: null,
                top: 0,
                backgroundColor: 'red',
                width:110,
            },
            style: {
                marginLeft: 15,
                marginRight:15,
                borderWidth: 1,
                height: 30,
                borderColor: "blue",
                backgroundColor: "white",
            },
            tabStyle: {
                borderWidth:1,
                borderColor:"blue",
                justifyContent: "center"
            },
            labelStyle: {
                marginTop: -4
            }
        }
    }
);

export default createAppContainer(Navigation);

How can i fix this ?

Answer 1

The problem is that your marginLeft and marginRight propagates through your whole tabBar.

You can fix this by introducing the following:

import { Dimensions } from 'react-native';
const width = Dimensions.get('window').width;
const tabBarWidth = width - 30;  // Subtract margins from your screen width. In your case 2*15= 30 

and updating your tabBarOptions:

tabBarOptions: {
            activeTintColor: "white",
            inactiveTintColor: "blue",
            upperCaseLabel: false,
            scrollEnabled: false,
            inactiveBackgroundColor: "white",
            indicatorStyle: {
                height: null,
                top: 0,
                backgroundColor: 'red',
                //width:110,  remove width here
            },
            style: {
                marginTop: 60, // quick hack for iphone X 
                marginLeft: 15,
                marginRight:15,
                borderWidth: 1,
                height: 30,
                borderColor: "blue",
                backgroundColor: "white",
            },
            tabStyle: {
                borderWidth:1,
                borderColor:"blue",
                justifyContent: "center",
                width: tabBarWidth/4, // divided by amount of screens you have 
            },
            labelStyle: {
                marginTop: -4
            }
        } 

As you can see the result works also with for example 4 Tabs: