How to style Bottom Tab Navigator in reactnative

Question

I'm trying to create a basic bottom tab navigator without any icons but I can't figure out how to style the label text I need to center the text and make it bigger here's what i have so far

ive tried using tabBarOptions and screenOptions but nothing seems to work

Answer 1

Use tabBarLabelStyle to style a label and tabBarIconStyle an icon. Something like this:

<Tab.Navigator
  screenOptions={{
    tabBarLabelStyle: { fontSize: 24, padding: 8 },
    tabBarIconStyle: { display: 'none' }
  }}>
  <Tab.Screen name="Upload" component={UploadScreen} />
  <Tab.Screen name="Create" component={CreateScreen} />
</Tab.Navigator>

Answer 2

You can check out my code. I have used icons and also updated the text sizes.

import React, {Component} from "react";
import {View} from "react-native";
import {NavigationContainer} from "@react-navigation/native";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import Ionicons from "react-native-vector-icons/Ionicons";

import SearchScreen from "../screens/search"
import TransactionScreen from "../screens/transaction"

const Tab = createBottomTabNavigator();

export default class BottomTabNavigator extends Component{
  render(){
    return(
     <NavigationContainer>
     <Tab.Navigator
     screenOptions={({route})=>({
       tabBarIcon: ({focused, color, size}) =>{
         let iconName;

         if(route.name==="Transaction"){
           iconName="logo-apple"
         }else if(route.name==="Search"){
           iconName="search"
         }

         return (
                <Ionicons
                  name={iconName}
                  size={size}
                  color={color}
                  size={size}
                />
              );
       }

     })}
     tabBarOptions={{
            activeTintColor: "#FFFFFF",
            inactiveTintColor: "black",
            style: {
              height: 80,
              borderTopWidth: 0,
              backgroundColor: "#9DFD24"
            },
            labelStyle: {
              fontSize: 20,
            },
            labelPosition: "beside-icon",
            tabStyle: {
              marginTop: 25,
              marginLeft: 10,
              marginRight: 10,
              borderRadius: 450,
              borderWidth: 3,
              alignItems: "center",
              justifyContent: "center",
              backgroundColor: "grey"
            }
          }}
     
      >
      <Tab.Screen name="Transaction" component={TransactionScreen}/>
      <Tab.Screen name="Search" component={SearchScreen}/>


     </Tab.Navigator>
     </NavigationContainer>

    )
  }
}