Как правильно изменить ширину индикатораStyle в React Native Top Navigation?

Question

Я хочу иметь возможность уменьшить ширину индикаторного стиля в верхней панели навигации для достижения следующих результатов:

Но всякий раз, когда я пытаюсь чтобы уменьшить ширину полосы, я не могу правильно ее центрировать. Вот то, что у меня сейчас есть:

Вот мой код ниже:

import React from 'react';
import { createAppContainer } from 'react-navigation';
import {createMaterialTopTabNavigator } from 'react-navigation-tabs';
import Colors from '../constants/Colors';
import Tab1 from '../screens/tab1';
import Tab2 from '../screens/tab2';


const HomeTab = createMaterialTopTabNavigator({
    TAB1: Tab1,
    TAB2: Tab2,
  }, 
  {
    tabBarOptions: {
        activeTintColor: 'black',
        inactiveTintColor: 'gray',
        labelStyle: { fontSize: 14, fontWeight:"700" },
        style: { backgroundColor: Colors.mainBackground, elevation: 0, shadowOpacity: 0, borderBottomWidth:2, borderColor:'#ccc' },
        indicatorStyle: { backgroundColor: 'blue', width:100},

    },
  }

);

Спасибо за вашу помощь! Очень ценю это:)

Answer 1

Вы можете использовать position Значение

Пример

indicatorStyle : {width:50,left:"18%"},