Clever Geek Handbook

How to style or customize Android navigation tabs to match

I have a tab using react native and react-navigation

My 5 tabs are too twisted on Android but looks great on iOS. How can I customize the tabs to fit android? Can I make tabs horizontally scrollable? I think I remember that this is somewhere - is this standard android behavior?

+4


source to share


3 answers


Well, first you need to decide if you want to use the tabs at the bottom or the top of the Android app. I decided to go to the bottom and I only have icons, no text (I did this because icons with text on React Navigation on Android were crowded horribly, but they look great on iPhones). Here's some sample code:



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. 
      }
    },
});
Run codeHide result


Once I lowered the tabs to the bottom and selected the shortcut, only the icon looks great on Android and what I am going to use for my application. Many Android apps only use text, so you can do that too. But you still have to throw them to the bottom. I know this is not a long term solution as I would like to be able to put tabs on top of Android and have FIT! Alas, this was my hack. Good luck !!

+15


source


Had exactly the same problem, I fixed it by adding extra prop to tabBarOptions and using 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 in the tabBarOptions add the tabStyle prop for SCREEN_WIDTH and divide it 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
  }
}
+2


source


The comment here indicates that we can navigate between the two platform styles. Just use this:

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


source






More articles:


All Articles