Tab navigator icons in React Navigation

Question

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',       }     },   }, ) 

Answer 1

Figured it out had to add

tabBarOptions: {     showIcon: true  }, 

After this the icon showed.

Answer 2

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}/>       )     },   },