CODEWITHSUNDEEP
androidreact-nativereact-navigationexpocreate-react-native-app
YaSh Chaudhary
YaSh Chaudhary

Reputation: 2725

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}]} />
      )

  }

Upvotes: 1

Views: 11199

Answers (3)

Navin prasad
Navin prasad

Reputation: 600

Add the following things in android/app/build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

And then execute the command

react-native run-android

Upvotes: 10

dikaiosune
dikaiosune

Reputation: 1105

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.

Upvotes: 2

Codesingh
Codesingh

Reputation: 3384

I think what you did is just a half thing, so after running npm install did you link the project with the third party's native code by running react-native link? if yes, did you rebuild the project by going to android studio and hit play button?if yes then just restart your packager and we are good to go...

Cheers :)

Upvotes: -1

Related Questions