I am trying to change font size in <TabBar/>
react native. Can someone please help me to solve this problem?
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"
/>
)}
/>
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 :)