CODEWITHSUNDEEP
reactjsreact-native
Hector4888
Hector4888

Reputation: 569

How to add Icons in TabBar (createMaterialTopTabNavigator) ReactNative

Hii I'm new in React Native and I'm using TabBar createMaterialTopTabNavigator ,now i want to add icons add locally in tabs My Code is 

 const TabScreen = createMaterialTopTabNavigator(
 {
   Home: { screen: Home },
   Settings: { screen: Settings }
 });

I have two classes name Home and Settings also i'm code for stylling my tabs

{
tabBarPosition: 'top',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {
  activeTintColor: '#FFFFFF',
  inactiveTintColor: '#F8F8F8',
  style: {
    backgroundColor: '#633689',
  },
  labelStyle: {
    textAlign: 'center',
  },
  indicatorStyle: {
    borderBottomColor: '#87B56A',
    borderBottomWidth: 2,
  },
},}

Upvotes: 1

Views: 3329

Answers (1)

David Vittori
David Vittori

Reputation: 1196

You have to add in the Tab screen the Navigation Option with TabBarIcon,

 Home: {
      screen: Home,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          //Your icon component for example => 
          <Icon name="home" size={30} color="#900" />
        )
      },
    },

and add showIcon: true in the tabBarOptions, 

{
tabBarPosition: 'top',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {

 showIcon: true,
  activeTintColor: '#FFFFFF',
  inactiveTintColor: '#F8F8F8',
  style: {
    backgroundColor: '#633689',
  },
  labelStyle: {
    textAlign: 'center',
  },
  indicatorStyle: {
    borderBottomColor: '#87B56A',
    borderBottomWidth: 2,
  },
},}

Upvotes: 3

Related Questions