React Native Vector Icons Setup For IOS Development
Dec 11 2023
React Native Vector Icons is a popular library for using vector icons in your React Native applications. It provides a wide range of icons and allows you to easily customize their appearance.
However, for iOS development, it takes extra steps to set up. So, here's how to achieve this in Xcode.
Install react-native-vector-icons Package
Open a terminal and navigate to your project directory. Then, run the following command to install the react-native-vector-icons package:
npm install react-native-vector-icons
Install Pods
For iOS projects, you need to link libraries manually using the pod command. So, run the following commands:
cd ios
pod install
Open Your React Native App With Xcode
Open your ios folder in react native application with XCode then,
- Create a fonts folder to add icon packages
- Copy icons you want to use from
node_modules/react-native-vector-icons
- Paste them to fonts folder in XCode as shown below
Configure Info.plist
The final step is to add a new key(Fonts provided by application) to the info.plist file and add the icons as an item as shown below.
Make sure you include all the fonts you copied from the node_modules, we only copied the Ionicons.
Use Icons In Your React Native App
Now you can use the icon packages you add to your application as component after restarting the app as in the code snippet below.
import React from "react"
import {SafeAreaView} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
const App = () => {
return (
<SafeAreaView>
<Icon name="rocket" size={50} color="red"></Icon>
</SafeAreaView>
);
};
export default App;
Conclusion
That's all, in this article we have covered how to set up the react-native-vector-icons package for IOS development.
Thank you for reading