Implement Icon In React Native

Question

I have seen in several articles about applying icons to this react native, but on my way I found an error. it's clearer like this

Step that i did :

npm intall react-native-vector-icons --save

then in Example.js

import Icon from 'react-native-vector-icons/MaterialIcons';

export defaul class App extends React.Component {
   render(){ 
       return(       
          <Icon name='person-outline' type="MaterialIcons" />
       )
   }
}

after I got here I tried it, but the icon didn't work. then I read a few articles, and needed to execute the following command. and i do

react-native link react-native-vector-icons

and I tried again. and this works. the icon appears. but in the command I get an error. more or less error like this

** error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: - react-native-vector-icons (to unlink run: "react-native unlink react-native-vector-icons") **

what should i do??

if you are using rn 0.60> then react-native unlink react-native-vector-icons first and then try with some other icons. if its still not working tell — Gaurav Roy
– Gaurav Roy, Commented Feb 26, 2020 at 7:49
I use npm 0.60 <higher. and I have done this command react-native unlink react-native-vector-icons. but icon not work again. so how can it work @GauravRoy — hirarqi
– hirarqi, Commented Feb 26, 2020 at 8:25

Akila Devinda · Accepted Answer · 2020-02-26 07:54:06Z

In your scenario once you are using React Native Version 0.60 or above you don't need to link packages manually. Autolinking will do that for you

If you need to remove this warning try this command

react-native unlink react-native-vector-icons

If you are still using React Native version 0.59 or less then you need to link those packages.

EXTRA

But you can also disable autolinking for unsupported library

During the transition period some packages may not support autolinking on certain platforms. To disable autolinking for a package, update your react-native.config.js's dependencies entry to look like this:

// react-native.config.js

module.exports = {
  dependencies: {
    'some-unsupported-package': {
      platforms: {
        android: null, // disable Android platform, other platforms will still autolink if provided
      },
    },
  },
};

Collectives™ on Stack Overflow

Implement Icon In React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related