CODEWITHSUNDEEP
react-nativereact-navigation
MonkeyBonkey
MonkeyBonkey

Reputation: 47851

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

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?

Upvotes: 5

Views: 22993

Answers (4)

Lonare
Lonare

Reputation: 4653

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.

Upvotes: 1

OluO
OluO

Reputation: 94

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
  }
}

Upvotes: 2

Tricode
Tricode

Reputation: 416

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!

Upvotes: 18

Aobo Cheng
Aobo Cheng

Reputation: 4528

Comment here points out that we can swith between two platform styles.Just use this:

TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
    ...TabNavigator.Presets.iOSBottomTabs
})

Upvotes: 1

Related Questions