CODEWITHSUNDEEP
iosxcodetabbarreact-native
santoki3
santoki3

Reputation: 83

React Native Customize TabBarIOS Style

I am implementing a view with TabBarIOS and tabBarIOS.Item in my app. So far everything works, but it seems like there is not much flexibility to customize it. For example, I want to make the tab bar taller, or make the icons go lower to take up the title space as well because right now they are floating towards the top of the bar.

You can see that the icons are much closer to the top. I am trying to adjust it so that they are more in the center vertically.

enter image description here

I tried to do something like - 

<TabBarIOS>
    <TabBarIOS.Item style={{paddingTop: 30}}> other content here </TabBarIOS.Item>
    <TabBarIOS.Item style={{paddingTop: 30}}> other content here </TabBarIOS.Item>
</TabBarIOS>

but the padding adjustment is not reflecting. I tried to adjust height, margin and other things too but the style is just not doesn't seem to be reflected at all. Am I missing anything here? Can this be done at all?

Thanks in advance!

Upvotes: 1

Views: 443

Answers (1)

Mithun
Mithun

Reputation: 11

<TabBarIOS>
    <TabBarIOS.Item title=''> content here </TabBarIOS.Item>
</TabBarIOS>

Leaving the title as an empty string will center the tab bar icon.

Upvotes: 1

Related Questions