React-Native Icons

React-Native CLI is a JavaScript framework for writing mobile applications for both iOS and Android. Many people use React-Native to build applications across the two platforms. There are already many applications in both marketplaces that were built by React-Native. Therefore, there is value in understanding this framework, because you never know when you need to fix a React-Native application. One interesting problem that a creator might need to solve is how to have icons in his applications.

React-Native uses Cocoapods to manage the iOS files and the Gradle plugin to manage the Android files. Because of the different managers, there is a different process to get icons to appear in your application based on the platform that you are building it for. Cross-platform builders will need to implement both processes.

To utilize icons for Android, we need to add the following line of code into the “build.gradle” file in the android/app folder:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

After the line of code has been applied to the appropriate folder, there is a need to install the icons in the React-Native application. In the main folder of the application, please execute the following line of code.

npm install --save react-native-vector-icons

If the react-native-vector-icons installation commanded was executed in the project before the line of code was added to the build.gradle file, there might be an error where the icons will not appear in the application. In those instances, deleting the package.json file and the node_modules folder, followed by npm install may get the Icons to work.

With the application icons working for the android platform, the configuration for iOS will need to be done. Running the React Native application on an iOS phone should yield the error above. To ensure the icons are allowed in the application for iOS systems, we need to add the following line in our Pod file in the IOS folder.

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

As per the picture below, the file and line are added to the current project.

After the code is added to the Podfile, the following command is required to add the library to the application.

pod install

Please note that pod installation and amendments must be made in the ios folder of the application. The following lines in the code box below must be added to the application for the application to run.

<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
</array> 

The above code needs to be added in the ios directory and in the folder that is the name of your project. My project is named Pokedex and the below are the lines of code in the appropriate file. The following code is needed to update the pod.

pod update

The Icon library can now be used by both iOS and Android systems. Please note that an application will need the installation of the React Native Elements to import and utilize the Icon component. The installation code for React Native Elements is in the code box below.

npm install react-native-elements

The following is code from the React Native Elements docs and the code shows how to utilize the Icon component:

import { Icon } from 'react-native-elements'
<Icon
  reverse
  name='ios-american-football'
  type='ionicon'
  color='#517fa4'
/>

Finally, the Icon component and components that inherit from the Icon component will now be able to show cute icons from the React Native libraries of your choice!

Geonbae!

James Wu

References:

https://github.com/oblador/react-native-vector-icons
https://stackoverflow.com/questions/45569034/react-native-vector-icons-error-on-build
https://stackoverflow.com/questions/53711332/how-to-resolve-react-native-vector-icons-error-for-a-successful-build
https://reactnativeelements.com/docs