0

I'm trying to set up a simple screen navigation bar using react-navigation. I've got the navigation working but can't make any icons appear on each tab.

I've tried using FontAwesome instead of IonicIcons but the same Box with an X through it appears in place of the desired icon.

import React, {Component} from 'react';
import {createBottomTabNavigator, createAppContainer} from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';

import HomeScreen from './screens/HomeScreen'
import SearchScreen from './screens/SearchScreen'
import ScanScreen from './screens/ScanScreen'

const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
    tabBarIcon: () => (<Icon name="md-home" />)
    }
  },
  Scan: {
    screen: ScanScreen
  },
  Search: {
    screen: SearchScreen
  }
});

export default createAppContainer(TabNavigator);
Fez Abbas
  • 107
  • 1
  • 10

1 Answers1

2

You have to link it react-native-vector-icons, in your command prompt:

 react-native link react-native-vector-icons
Rodrigo
  • 224
  • 3
  • 12
  • 1
    Yes this worked! Could you explain why you have use link in this situation but don't have to with several other packages? Edit: Found this answer https://stackoverflow.com/questions/49874385/the-use-of-react-native-link-command Thanks again – Fez Abbas May 13 '19 at 18:52