Ionicons not showing in react native

Question

I'm trying to add Icons to by Tab Navigator using Ionicons.

I'm importing them from expo/vector-icons

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

I then add my screens to my navigator

const TabNavigator = createBottomTabNavigator(
  {
    Home: {screen: HomeStack},
    AddNew: {screen: AddNewScreen},
    Settings: {screen: SettingsStack},
  },

And initiate my Ionicons in navigationOptions

{
navigationOptions: ({ navigation }) => ({

  tabBarIcon: ({ focused, tintColor }) => {

    const { routeName } = navigation.state;
    var iconName;
    if (routeName === 'Home') {
      iconName = 'add-circle-outline';
    } else if (routeName === 'AddNew') {
      iconName = 'ios-add-circle';
    } else if (routeName === 'Settings') {
      iconName = 'md-options';
    }
    return <Ionicons name={iconName} size={25} color={tintColor} />;
  },  });

Then I set up my AppContainer and export it

const AppContainer = createAppContainer(TabNavigator);

export default AppContainer;

I've tried using MaterialIcons instead of Ionicons with same results. My peers, who has successfully implemented ionicons, do not have to use the AppContainer to export their navigator, so I am inclined to think that's the issue.

Been at this for a while and it just wont work for me.

Answer 1

The error was due to the expo/vector-icons folder not being declared.

I solved it with this command in the terminal:

npm install @expo/vector-icons