reactjsreact-nativetabviewreact-native-tab-view

How to change font size in TabBar


I am trying to change font size in <TabBar/> react native. Can someone please help me to solve this problem?

enter image description here

trying to change font size for this tabBar option text(All Contest, My Contest, Teams) Pages.

Here is my code:

<TabView
    navigationState={{ index, routes }}
    renderScene={renderScene}
    onIndexChange={setIndex}
    initialLayout={initialLayout}
    renderTabBar={(props) => (
      <TabBar
        {...props}
        indicatorStyle={{
          backgroundColor: "#243642",
          height: 4,
          borderTopLeftRadius: 10,
          borderTopRightRadius: 10,
        }}
        style={{
          backgroundColor: "#FFFFFF", // Background color of the tab bar
          borderBottomWidth: 1, // Bottom border for the TabBar
          borderBottomColor: "#243642", // Light border color
          shadowColor: "#000", // Shadow color for iOS
          shadowOffset: { width: 0, height: 2 }, // Shadow position
          shadowOpacity: 0.1, // Shadow opacity
          shadowRadius: 5, // Shadow radius for iOS
          elevation: 5, // Shadow effect for Android
        }}
        tabStyle={{
          paddingVertical: Platform.OS === "ios" ? 14 : 10,
        }}
        activeColor="#243642"
        inactiveColor="#387478"
      />
    )}
  />

Solution

  • To change font size in TabBar, you can use labelStyle prop inside your TabBar.

    Refer the following code snippet to understand clearly.

    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      renderTabBar={(props) => (
        <TabBar
          {...props}
          indicatorStyle={{
            backgroundColor: "#243642",
            height: 4,
            borderTopLeftRadius: 10,
            borderTopRightRadius: 10,
          }}
          style={{
            backgroundColor: "#FFFFFF",
            borderBottomWidth: 1, 
            borderBottomColor: "#243642", 
            shadowColor: "#000", 
            shadowOffset: { width: 0, height: 2 }, 
            shadowOpacity: 0.1, 
            shadowRadius: 5,
            elevation: 5,
          }}
          tabStyle={{
            paddingVertical: Platform.OS === "ios" ? 14 : 10,
          }}
          labelStyle={{
            fontSize: 16, 
            fontWeight: 'bold', 
            color: '#387478',
          }}
          activeColor="#243642"
          inactiveColor="#387478"
        />
      )}
    />
    

    Hope this helps you out :)