How can I conditionally render padding for text I have inside my top tab navigator?

Question

I'm currently in the process of making a fairly complex Top tab navigation bar using Material Top Tabs Navigator (included in React Navigation). What I've noticed is that the text inside my tab bar isn't centred on devices running Android 10 and below along with iPhones.

I would like to include a conditional render for tabBarLabelStyle so that there's bottom padding applied to the text only if it is a device on Android 10 or below and iOS devices.

screenOptions={{
                        tabBarActiveTintColor:colors.white,           // setting color here ensure that other tabs darken when not in focus
                        tabBarInactiveTintColor:colors.lightGrey,
                        tabBarLabelStyle: { textTransform: 'none', fontSize:RFPercentage(1.2), },          // font stuff added here, also had to make it lowercase cause navbar automatically uppercases whatever hmmm
                        tabBarStyle:{backgroundColor:colors.black, borderWidth:0, borderRadius:windowWidth, borderColor:colors.black, height:windowHeight/17, justifyContent:'center' },                                          //styles for the main top swipe navbar. Black in this case
                        tabBarIndicatorStyle:{backgroundColor:"#FFFFFF20", height:windowHeight/19, borderWidth:0, borderRadius:windowWidth, borderLeftWidth:windowWidth/200,borderRightWidth:windowWidth/200, borderColor:"black", bottom:windowHeight/350,  },              //HAD TO DO A LOT OF WORK HERE TO MAKE SURE THAT HIDDING INIDCATOR CAN BE FIT INSIDE THE NAVBAR. Since there is no literal way to highlight i had to use the bottom indicator using indicatorStyle object which i then made transparent by adding the number after the color hexcode                                                         
                        
                    }}

Bottom padding could possibly fix this problem if rendered conditionally.

I tried giving this code a go

                            tabBarLabelStyle: { textTransform: 'none', fontSize:RFPercentage(1.2), {Platform.OS === 'ios' ? paddingBottom:5 : paddingBottom:0  } },          

But that doesn't seem to work. I think android SDK version is used to check the Android version. Any help would be really cool. Thanks!

Answer 1

You could do this:

import { Platform } from 'react-native';
const version = Platform.constants['Release'];

And then to conditionally render the styles, have you tried something like this?

style={[styles.mainStyle, condition ? styles.styleOne : styles.styleTwo]}

Answer 2

I managed to conditionally render padding for iOS devices. However I've noticed that this problem happens on Motorolla devices. Anyway here's the code for the iOS version in case anyone needs it

 tabBarLabelStyle: Platform.OS === 'ios' ? { textTransform: 'none', fontSize:RFPercentage(1.2), paddingBottom: windowHeight/15 } : { textTransform: 'none', fontSize:RFPercentage(1.2), },