Linking and Using Third Party Libraries

The third party Library provides the native app features which are not available in React Native features. If we refer to React Native documentation, there are lots of features that are not available (such as maps). Due to this, we need to add third party libraries in our project. In this tutorial, we would learn how to add the third parties libraries in our app (adding third party icons). There are different sets of bundled Icon available. Some of them are listed below:

• AntDesign
• Entypo
• EvilIcons
• Feather
• FontAwesome
• FontAwesome 5
• Foundation
• Ionicons
• MaterialIcons
• MaterialCommunityIcons
• Octicons
• Zocial
• SimpleLineIcons

Installing Libraries

There are different ways and commands to install the libraries depending upon the development OS and target OS. In this tutorial, we install the Ionicons libraries. To install the Ionicons libraries on Windows, run the command: $ npm install react-native-vector-icons --save.

Create a project and run 'npm install --save react-native-vector-icons' as D:\ReactNative\navigationApp>npm install --save react-native-vector-icons

Linking Libraries on Android

Open your android/settings.gradle file and add the below code. Here, we are adding only Ionicons library. If you want to add others libraries, just add them in include tag and mention their path and library in android folder at project as below.

1. include ':react-native-vector-icons'  
2. project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')  

Now, add the following dependency in android/app/build.gradle:

1. implementation project(':react-native-vector-icons')  

Earlier, upto 2018 the compile term is used in place of implementation.

In, android/app/src/main/java/com/{project_directory}/MainApplication.java

1. import com.oblador.vectoricons.VectorIconsPackage;  
2. ...  
3. @Override  
4.   protected List<ReactPackage> getPackages() {  
5.     return Arrays.<ReactPackage>asList(  
6.       new MainReactPackage(),  
7.       new VectorIconsPackage()  
8.     );  
9.   }  

To add more libraries, simply separate them with comma and add libraries packages. The above procedures are common to add native libraries in the Android.

Now, in 'android/app/build.gradle' add the following dependency:

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

1. project.ext.vectoricons = [  
2.     iconFontNames: ['Ionicons.ttf'] // Name of the font files you want to copy  
3. ]  

React Native Linking Third Party Library Example

In this example, we will add the trash icon of the Ionicons library. Open your project, and import Icon from 'react-native-vector-icons/Ionicons' package. Search for icon at ionicons.com which you want to add (in my case ios-trash).

In the npm doc, you will find the Icon Component and its properties.

App.js

1. import React, {Component} from 'react';  
2. import {Platform, StyleSheet, Text, View, TouchableOpacity,Alert} from 'react-native';  
3. import Icon from 'react-native-vector-icons/Ionicons';  
4.   
5. type Props = {};  
6. export default class App extends Component<Props> {  
7.   deleteItem = ()=>{  
8.     Alert.alert("delete icon pressed")  
9.   }  
10.   render() {  
11.     return (  
12.       <View style={styles.container}>  
13.         <Text style={styles.textStyle}>Adding Ionicons library</Text>  
14.         <TouchableOpacity style={styles.touchableStyle} onPress= {this.deleteItem} >  
15.             <Icon size={30} name="ios-trash" color="red"/>  
16.         </TouchableOpacity>  
17.       </View>  
18.     );  
19.   }  
20. }  
21.   
22. const styles = StyleSheet.create({  
23.   container: {  
24.     flex: 1,  
25.   },  
26.    textStyle:{  
27.       fontSize:25,  
28.       marginTop: 30,  
29.       textAlign: 'center',  
30.    },  
31.    touchableStyle:{  
32.      marginTop: 80,  
33.      justifyContent: 'center',  
34.      alignItems: "flex-end",  
35.      marginRight: 50,  
36.    }  
37. });  

Output: