17

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

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

enter image description here

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?

4

8 Answers 8

23

You can fix the non-uppercase issue with javascript:

navigationOptions: {
  tabBarLabel: 'Job #1'.toLowerCase(),
},

Or use the tabBarOptions property upperCaseLabel:

tabBarOptions: {
  upperCaseLabel: false,
}

To avoid the wrapping text I'm suggesting you reduce the font size of the labels:

tabBarOptions: {
  labelStyle: {
    fontSize: 10,
    margin: 0,
    padding: 0,
  },
}

Finally, it has to look something like this:

TabNavigator({
    ...
    filesTab: {
      screen: filesTabComponent,
      navigationOptions: {
        tabBarLabel: 'Files'.toLowerCase(),
      },
    },
    ...
  },
  {
    tabBarPosition: 'bottom',
    tabBarOptions: {
        upperCaseLabel: false,
    },
  }
);
16
<Tab.Navigator 
  tabBarOptions={{
    labelStyle: { textTransform: "none", },
      style: {
        /* ** */
      },
}}>

  <Tab.Screen name="Screen 1" component={Screen1} />
  <Tab.Screen name="Screen 2" component={Screen2} />
</Tab.Navigator>
2
  • 6
    While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. From Review Jun 3, 2020 at 19:06
  • @double-beep style prop applies style for the whole tab screen navigation container while labelStyle applies style to the text label. Aug 29, 2021 at 16:42
13

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 }) => ({  })}
0
3

To remove text wrapping you can do as below

tabBarOptions: {
    tabStyle: {
        width: 'auto'
    }
}
1

There is property in tabbar

tabBarOptions:{ upperCaseLabel: false} //accept boolean default is true

https://reactnavigation.org/docs/tab-navigator.html#tabbaroptions-for-tabbartop-default-tab-bar-on-android

1
import * as React from 'react';
import { Text, View, SafeAreaView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import Followers from './Followers ';
import Following from './Following';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import CustomStatusBar from '../../../Components/CustomStatusBar';
import { COLORS } from '../../../Components/Colors';

const Tab = createMaterialTopTabNavigator();

const name = 'jklhdsjkhka';

export default function FolloweList() {
  return (
    <SafeAreaProvider>
      <CustomStatusBar />
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={{
            tabBarActiveTintColor: '#00a3ff',
            tabBarInactiveTintColor: '#F3B1CD',
            tabBarLabelStyle: { textAlign: 'center' },
            tabBarIndicatorStyle: {
              borderBottomColor: '#C2D5A8',
              borderBottomWidth: 2,
            },
            tabBarStyle: { backgroundColor: COLORS.White },

            tabBarLabelStyle: {
              textTransform: 'none',
            },
          }}
        >
          <Tab.Screen name="Home" component={Followers} />
          <Tab.Screen name="Settings" component={Following} />
        </Tab.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}
1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Nov 8, 2021 at 17:43
0
<Tab.Navigator
            tabBarOptions={{
                activeTintColor: "#50d3a7",
                inactiveTintColor: "gray",
                labelStyle: {
                    fontSize: 15,
                },
            }}
        >

refer:- use referance

0

The API has changed, most other answers do not work anymore. This works:

<Tab.Navigator screenOptions={() => ({
  tabBarLabelStyle: styles.dashboard.tabBarLabelStyle
})}>

styles.dashboard.tabBarLabelStyle is the style object.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.