How to use vector icons in your react-native project

Want to use vector icons in your reactive project ? There are a project right for your : react-native-vector-icons . This project is awesome , but It’s documents are kind of tricky and unintuitive if you are not familiar with xcode .

Installation :

$ # In your react-native project :
$ npm install react-native-vector-icons — save

How to add custom fonts to a React Native app in Xcode:

1. Create a new group Fonts within your Xcode project.

notice : you can’t just create a normal folder . Your can tell weather a folder is a normal folder or a xcode Group by it’s color ( blue for normal folder and yellow for Group)

2. Drag the font files (./node_modules/react-native-vector-icons/Fonts/*.ttf) you want to use in your project to the Fonts group your just created .

3. Expand your project name folder within the main directory in your project and Edit Info.plist .

4. Add Fonts provided by application as a new key

5. Run Shift + Command + K to clean last build

6. Command + B to start a new build

7. And finally Command + R to run the application

If you still see the error Unrecognized font family restart your react packager.

now you should go to react-native-vector-icons and see how to use it in detail .