Q:

React Navigation MaterialTopTabNavigator - indicator did not follow custom tab bar width

I tried to customise the width of the tab bar. I managed to successfully do so, but the indicator is still consuming the whole width of the screen. Any idea on how to change the indicator width to follow the tab width? I know I can fully customise the tab bar, but is there any other way?
This is the current behaviour.

This is my configurations
const PersonalInfoTabs = createMaterialTopTabNavigator(
  {
    PersonalData: {
      screen: PersonalData,
      navigationOptions: {
        title: 'A'
      }
    },
    AccountSet: {
      screen: AccountSet,
      navigationOptions: {
        title: 'B'
      }
    },
    ModifyPassword: {
      screen: ModifyPassword,
      navigationOptions: {
        title: 'C'
      }
    }
  },
  {
    tabBarOptions: {
      activeTintColor: 'black',
      inactiveTintColor: 'black',
      style: {
        backgroundColor: 'yellow',
        width: 300
      }
    }
  }
);

A:

From the documentation for React Navigation for React-Native, it looks like you also have to set the style for the tabs in the tabStyle field:
{
  tabBarOptions: {
    activeTintColor: 'black',
    inactiveTintColor: 'black',
    style: {
      backgroundColor: 'yellow',
      width: 300
    },
    tabStyle: {
      width: 100
    }
  }
}

Thanks to @ValdaXD to point out the 100 width.

