Fix tabBar width in react-native into the Icon

Question

I am Create like a whatsapp's TabBar, Camera Icon's width is very smaller than others. I can,t change equal width to other three tabBars Camera's Width Camera Icon have a 50pix of width, but Width is equal separate to all the four TabBar Headers other three TabBar's View

<NavigationContainer>
  {/* <Stack.Navigator>
    <Stack.Screen
      options={{
        title: 'WhatsApp',
        headerTintColor: '#8696a0',
        headerStyle: {
          backgroundColor: '#1f2c34',
        },
      }}
      name='main'
      component={SecondaryScreen}
    />
  </Stack.Navigator> */}
  <TopTab.Navigator
    initialRouteName='CHATS'
    screenOptions={{
      tabBarStyle: {
        backgroundColor: '#1f2c34',
      },
      
      tabBarLabelStyle: { fontWeight: '800', fontSize: 14 },
      tabBarActiveTintColor: '#25d366',
      tabBarInactiveTintColor: '#8696a0',
    }}
  >
    <TopTab.Screen
      name='camera'
      component={Camera}
      options={{
        tabBarShowLabel: false,
        tabBarIndicatorStyle: {
          flex: 1,
          width: 50,
          left: 10,
        },
        
        tabBarIconStyle: { width: 50 },
        tabBarIcon: ({ color, size }) => (
          <Feather name='camera' size={22} color={color} />
        ),
      }}
    />
    <TopTab.Screen name='CHATS' component={Chats} />
    <TopTab.Screen name='STATUS' component={Status} />
    <TopTab.Screen name='CALLS' component={Calls} />
  </TopTab.Navigator>
</NavigationContainer>

Answer 1

Maybe, Change this;

tabBarIndicatorStyle: {
          flex: 1,
          width: 50,
          left: 10,
        }

to this,

tabBarIndicatorStyle: {
          flex: 1,
          width: '50%',
          left: 10,
        }

And do play with the values until you are satisfied.