react native navigation tab bar

Question

I am new to react native and currently i am working on it. I'm using react-native-navigation dependency to navigate different pages but it doesn't show the icons on tab bar even i used tab bar options and set show icon true but still it doesn't show icons. Here is my code:

import React,{Component} from 'react';
import { Navigation } from 'react-native-navigation';

import Home from './screens/Home.js';
import Info from './screens/Info.js';
import Stats from './screens/Stats.js';
import Register from './screens/Register.js';
import Details from './screens/Details.js';
import SideMenu from './components/SideMenu.js';
import {Icon} from 'react-native-elements';
import { TabBarBottom} from 'react-navigation';
var homeIcon;

//const homeIcon = (<Icon name="home" size={30} color="#900" />);
const homeIcon=(<Icon
    name='share'
    type='font-awesome'
    color='black'
    size={18}
  />);
export default () => {

  Navigation.registerComponent('Home', () => Home);
  Navigation.registerComponent('Info', () => Info);
  Navigation.registerComponent('Stats', () => Stats);
  Navigation.registerComponent('Register', () => Register);
  Navigation.registerComponent('Details', () => Details);
  Navigation.registerComponent('SideMenu', () => SideMenu);


  Navigation.startTabBasedApp({

    tabs: [
      {
        label: 'Home',
        screen: 'Home',
        title: 'Home',
        icon: 'homeIcon'
          },
      {
        label: 'Info',
        screen: 'Info',
        title: 'Info',
        icon: 'homeIcon'
      },
      {
        label: 'Stats',
        screen: 'Stats',
        title: 'Stats',
        icon: require('./images/two.png'),
        //Icon.getImageSource('user', 20, 'green').then((source) =>     this.setState({ userIcon: source }));
      },
      {
        label: 'Register',
        screen: 'Register',
        title: 'Register',
        icon: 'homeIcon'
      },

    ],

    tabBarOptions:{
  showIcon:true
},
appStyle: {
 tabBarBackgroundColor: '#006600',
 tabBarButtonColor: '#ffffff',
 tabBarSelectedButtonColor: '#63d7cc',
 tabFontFamily: 'Avenir-Medium.ttf' , 
 forceTitlesDisplay: true,
 showIcon:true
  },
  });
};

Please tell me what i am doing wrong. Thanks!

Answer 1

icon: 'homeIcon' sets the icon property to a String. You want to set it to the actual homeIcon object you've created, ie icon: homeIcon .

icon: require('./images/two.png') sets the icon property to an image which will work correctly.

Icon.getImageSource('user', 20, 'green').then((source) => this.setState({ userIcon: source })); looks like an attempt to use react-native-vector-icons .

Using react-native-vector-icons, we load the icons asynchronously, and then pass them in :

async startApp() {
  const userIcon = await Icon.getImageSource('user', 20, 'green');
  Navigation.startTabBasedApp({

  tabs: [
    {
      label: 'Home',
      screen: Home,
      title: 'Home',
      icon: userIcon
    },
  }
}