How do I style or configure the react navigation tabs for android to fit

user_611750 0
Viewed 21744

I have a tab navigation using react native and react-navigation My 5 tabs are too squished on android but look fine for iOS. How do I style the tabs to fit on android? Can I make the tabs horizontally scrollable? I think I remember seeing that somewhere - is that standard android behavior?

react-navigation react-native
4 Answers

Had exactly the same problem, I fixed this by adding an additional prop to the tabBarOptions and using the RN screen width attributes.

First you need to grab the screen width. 

import {Dimensions} from 'react-native'
const SCREEN_WIDTH = Dimensions.get('window').width

Then within tabBarOptions add a tabStyle prop, for the SCREEN_WIDTH and divide this by the number of tabs you have. A bit hardcoded, but works well for me!

tabBarOptions{
  tabStyle: {
    width:SCREEN_WIDTH/2 //-> e.g number of tabs
  }
}
user_63028400

In reactnavigation 6 tabbaroptions has been depricated. now you have new set of options available. For styling you can use

tabBarStyle : {
     height: 150,
}

Here is the list of all options.

user_15511020
Related