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

Question

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?

Answer 1

Well, first you need to decide if you want tabs on the bottom or top of your Android app. I opted to go for bottom, and I have only icons, no text (I did this because icons with text on React Navigation on Android crowds horribly, but look fine on iPhone). Here is some example code for you:

import React from 'react';
import { TabNavigator } from 'react-navigation';
import { MaterialIcons, Ionicons } from '@expo/vector-icons';
import { Platform } from 'react-native';

// Import Screens
import Screen1 from '../screens/Screen1';
import Screen2 from '../screens/Screen2';

export const Tabs = TabNavigator({
  Screen1: {
    screen: Screen1,
    navigationOptions: {
      tabBarLabel: 'Screen1',
      tabBarIcon: ({ tintColor }) => <MaterialIcons name='account-circle' size={26} style={{ color: tintColor }} />
    },
  },
  Screen2: {
    screen: Screen2,
    navigationOptions: {
      tabBarLabel: 'Screen2',
      tabBarIcon: ({ tintColor }) => <Ionicons name='ios-time' size={26} style={{ color: tintColor }} />
    },
  },
}, {
    headerMode: 'none',        // I don't want a NavBar at top
    tabBarPosition: 'bottom',  // So your Android tabs go bottom
    tabBarOptions: {
      activeTintColor: 'red',  // Color of tab when pressed
      inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
      showIcon: 'true', // Shows an icon for both iOS and Android
      showLabel: (Platform.OS !== 'android'), //No label for Android
      labelStyle: {
        fontSize: 11,
      },
      style: {
        backgroundColor: '#fff', // Makes Android tab bar white instead of standard blue
        height: (Platform.OS === 'ios') ? 48 : 50 // I didn't use this in my app, so the numbers may be off. 
      }
    },
});

As soon as I dropped the tabs to the bottom and took away the label, just the icon looks fine on Android and that's what I'm going with for my app. Many Android apps only use text, so you could do that too. But you're still probably gonna have to drop them to the bottom. I know this isn't a long term solution since I'd like to be able to have the freedom to put tabs on the top on Android and have them FIT! Alas, this was my hack for now. Good luck mate!