CODEWITHSUNDEEP
reactjsreact-nativeiconsreact-navigation
jrocc
jrocc

Reputation: 1346

Tab navigator icons in React Navigation

I'm using react-navigation v2 and react native vector icons.

I'm trying to add an icon in a react native tab navigator.

The icon shows up if its not in the tab navigator. The icon is not showing up in the tab navigator and I can't find a solid example of how to add an icon in a tab navigator.

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { createMaterialTopTabNavigator } from 'react-navigation'

import Home from '../HomePage.js'
import Profile s from '../ProfilePage.js'

import Icon from 'react-native-vector-icons/FontAwesome';

export const Tabs = createMaterialTopTabNavigator(
  {
    HomePage: {
      screen: Home,

      navigationOptions: {
        tabBarLabel:"Home Page",
        tabBarIcon: ({ tintColor }) => (
          <Icon name="home" size={30} color="#900" />
        )
      },
    },
    ProfilePage: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel:"Profile Page",
        tabBarIcon: ({ tintColor }) => (
          <Icon name="users" size={30} color="#900" />
        )
      }
    },
  },

  {
    order: ['HomePage', 'ProfilePage'],
    tabBarOptions: {
      activeTintColor: '#D4AF37',
      inactiveTintColor: 'gray',
      style: {
        backgroundColor: 'white',
      }
    },
  },
)

Upvotes: 32

Views: 88355

Answers (4)

Lonare
Lonare

Reputation: 4703

You can also simply add it with the help of Tab.Screen

First Import the icon from expo

import { Ionicons } from '@expo/vector-icons';

or choose any icons from here: https://icons.expo.fyi/

Then use it like this

<Tab.Screen
    name="Feed"
    component={Feed}
    options={{
      tabBarLabel: 'Home',
      tabBarIcon: ({ color, size }) => (
        <Ionicons name="home" color={color} size={size} />
      ),
    }}
  />

Upvotes: 31

Robby3bergen
Robby3bergen

Reputation: 11

Setting activeTintColor also does the trick.

tabBarOptions: {
    activeTintColor: '#e91e63'
}

Upvotes: 1

jrocc
jrocc

Reputation: 1346

Figured it out had to add

tabBarOptions: { 
   showIcon: true 
},

After this the icon showed.

Upvotes: 14

msalihbindak
msalihbindak

Reputation: 622

This works for me, without enable showIcon:true.

I am using Ionicons icon pack.

HomeScreen:{
    screen:HomeScreen,
    navigationOptions: {
      tabBarLabel:"Home",
      tabBarIcon: ({ tintColor }) => (
        <Icon name="ios-bookmarks" size={20}/>
      )
    },
  },

Upvotes: 13

Related Questions