How to use React Native vector icons?

Question

I have just installed React Native vector icons with this comand:

npm install react-native-vector-icons 

But if I use it in the index.android.js

<Icon name="ios-add" size={30} color="#4F8EF7" /> 

I get a square with a X in the center instead of the icon.

Why ?

EDIT:

If I try to install it with "npm install react-native-vector-icons --save", then I get this error:

C:\Users\xrobot\Desktop\React Native\AwesomeProject>npm install react-native-vector-icons --save      npm ERR! Windows_NT 10.0.14393     npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "react-native-vector-icons" "--save"     npm ERR! node v6.9.5     npm ERR! npm  v3.10.10     npm ERR! path C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7     npm ERR! code EPERM     npm ERR! errno -4048     npm ERR! syscall rename      npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'     npm ERR!     at destStatted (C:\Program Files\nodejs\node_modules\npm\lib\install\action\finalize.js:25:7)     npm ERR!     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:264:29     npm ERR!     at FSReqWrap.oncomplete (fs.js:123:15)     npm ERR!     npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'     npm ERR!     at Error (native)     npm ERR!  { Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\emiliano\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'     npm ERR!     at destStatted (C:\Program Files\nodejs\node_modules\npm\lib\install\action\finalize.js:25:7)     npm ERR!     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:264:29     npm ERR!     at FSReqWrap.oncomplete (fs.js:123:15)     npm ERR!     npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\emiliano\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'     npm ERR!     at Error (native) parent: 'AwesomeProject' }     npm ERR!     npm ERR! Please try running this command again as root/Administrator.      npm ERR! Please include the following file with any support request:     npm ERR!     C:\Users\xrobot\Desktop\React Native\AwesomeProject\npm-debug.log      C:\Users\xrobot\Desktop\React Native\AwesomeProject>npm install react-native-vector-icons     [email protected] C:\Users\xrobot\Desktop\React Native\AwesomeProject     `-- [email protected] 

EDIT 2:

C:\Users\xrobot\Desktop\React Native\AwesomeProject>react-native link react-native-vector-icons rnpm-install info Linking react-native-vector-icons android dependency rnpm-install info Android module react-native-vector-icons has been successfully linked rnpm-install info Linking react-native-vector-icons ios dependency rnpm-install info iOS module react-native-vector-icons has been successfully linked rnpm-install info Linking assets to ios project rnpm-install WARN ERRGROUP Group 'Resources' does not exist in your XCode project. We have created it automatically for you. rnpm-install info Linking assets to android project rnpm-install info Assets have been successfully linked to your project 

EDIT 3:

I have removed the app from the physical device and then I re-build it ( as QMFNP said ). Now it works

Answer 1

First, make sure you're saving the dependency in your project by doing:

npm install react-native-vector-icons --save. Including the --save is necessary, otherwise react-native link won't be able to locate the module.

Before you can use them in your iOS or Android project, you also have to link the native modules. The quick way to do this is by using the following command:

react-native link react-native-vector-icons

If for any reason you have problems using react-native link to link the native modules, the react-native-vector-icons README also provides detailed instructions for linking them manually on Android and iOS, and integrating the library on the web as well.

Answer 2

Here is full UPDATED answer, just follow these steps :-

1. npm install react-native-vector-icons --save 2. react-native link 3. react-native link react-native-vector-icons 4. import Icon using one of these ( as per your requirement )

   **MaterialCommunityIcons**      import Icon from 'react-native-vector-icons/MaterialCommunityIcons';    **Ionicons**      import Icon from 'react-native-vector-icons/Ionicons';     **FontAwesome5**      import Icon from 'react-native-vector-icons/FontAwesome5'; 

5. Uses (JSX)

     <Icon size={24} color="white" name="movie" />