React Native Vector Icons Setup For IOS Development

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