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',
}
},
},
)
Figured it out had to add
tabBarOptions: {
showIcon: true
},
After this the icon showed.