androidreact-nativereact-navigationexpocreate-react-native-app

Icon not displaying on screen android using react-native-vector-icons

I am using create-react-native-app. I want to use react-native-vector-icons

But its not showing anything on android screen (I am viewing it on expo app)

Here is what I did:

App.js:

       const Courses = TabNavigator({
  ReactCourses: { screen: ReactCourses },
  NativeCourses: { screen: NativeCourses },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
    swipeEnabled: true,
    showIcon:true,
  },
});

ReactCourses.js:

     import Icon from 'react-native-vector-icons/MaterialIcons';
    static navigationOptions = {
    tabBarLabel: 'React Courses',
    tabBarIcon:({ tintColor }) => (
        <Icon
          name={'home'}
          size={26}
          style={[styles.icon, {color: tintColor}]} />
      )

  }
Solution

  • When using Create React Native App, it's not possible to use react-native link with native module packages. Because CRNA projects are loaded in the Expo client app, you'll want to follow the relevant documentation to get vector icons working in your project.

    Also, make sure that you're using the Expo preset in .babelrc. It should look like the one provided in the template project.