I am using react-native-tab-view
, but the TabBar is big, I want to make it small. How to customize it ? Applying margin/padding 0 didn't work.
Applying small height worked but the text went missing.
How to make it small or more customizable ?
<TabView
...
renderTabBar={props =>
<TabBar
{...props}
indicatorStyle={{ backgroundColor: 'white' }}
style={{ backgroundColor: 'pink' }}
tabStyle={{ backgroundColor: 'teal' }}
renderLabel={({ route, focused, color }) => (
<Text style={{ color, margin: 8 }}>
{route.title}
</Text>
)}
}
Try to use tabStyle
prop for TabBar
. By default it has a style:
minHeight: 48,
So in your case:
<TabView
...
renderTabBar={props =>
<TabBar
{...props}
indicatorStyle={{ backgroundColor: 'white' }}
style={{ backgroundColor: 'pink' }}
tabStyle={{ backgroundColor: 'teal', minHeight: 30 }} // here
renderLabel={({ route, focused, color }) => (
<Text style={{ color, margin: 8 }}>
{route.title}
</Text>
)}
}