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 .
$ # In your react-native project :
$ npm install react-native-vector-icons — save
How to add custom fonts to a React Native app in Xcode:
- 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 .