React Navigation: styling TabNavigator text

Question

I am using React Navigation in a create-react-native-app.

I am using the TabNavigator component like this (iPhone SE):

The TabNavigator is the dark blue strip with 'Job #1', 'Chat', Files', 'Details.

I want to customise the text of these items. I want non-uppercase text (which as far as I know is impossible to achieve with React Native Stylesheet), and to apply a fix for the 'Details' item which is wrapping onto two lines.

I have looked through the React Navigation API at TabNavigator but have not been able to find the answer.

How can I style these items?

Answer 1

Simply do this for new version of react native

<Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarActiveTintColor: "#f5610a",
      tabBarInactiveTintColor: "#555",
      tabBarLabelStyle: {
        fontSize: 10,
      },
    })}
  >

as you see in aboove line of code....just put following

tabBarLabelStyle: {
  fontSize: 10,
},

Inside

 screenOptions={({ route }) => ({  })}

Answer 2

<Tab.Navigator 
  tabBarOptions={{
    labelStyle: { textTransform: "none", },
      style: {
        /* ** */
      },
}}>

  <Tab.Screen name="Screen 1" component={Screen1} />
  <Tab.Screen name="Screen 2" component={Screen2} />
</Tab.Navigator>