как динамически управлять индикатором стиля реакции навигации 5х

Question

У меня 4 экрана, затем я использовал индикатор Стиль, чтобы получить белую рамку. Однако моя граница на экране outros слишком велика, а экран Restaurantes - маленький. Как можно установить разную ширину индикатора стиля для каждого экрана? Я использую реагирующую навигацию 5x Посмотрите, как это https://i.stack.imgur.com/9D5UW.png
https://i.stack.imgur.com/eVgHi.png

Мой код

import React from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import Restaurantes from '../pages/Restaurantes';
import Mercados from '../pages/Mercados';
import Farmácias from '../pages/Farmácias';
import Outros from '../pages/Outros';

const Tab = createMaterialTopTabNavigator();

export default function Routes() {
 return (
   <>
   <Tab.Navigator
      tabBarOptions={{
        allowFontScaling: false,
        activeTintColor: '#111',
        inactiveTintColor: '#a8a8a8',

        indicatorStyle: {
          height: 23,
          width: 80,
          position: 'absolute',
          left: '3%',
          marginBottom: 12,
          borderRadius: 15,
          marginLeft: 5,

          backgroundColor: '#fff',
        },
        tabStyle: {
          marginLeft: 10,
          paddingLeft: 20,
        },
        labelStyle: {
          fontSize: 12,
          width: 100,
        },
        style: {
          backgroundColor: '#5f12b8',
        },
      }}
    >
      <Tab.Screen name="restaurantes" component={Restaurantes} />
      <Tab.Screen name="mercados" component={Mercados} />
      <Tab.Screen name="farmácias" component={Farmácias} />
      <Tab.Screen name="outros" component={Outros} />
    </Tab.Navigator>
    </>
  );
  }