Javatpoint Logo
Javatpoint Logo

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.

In your command prompt, run 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.

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

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

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

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

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

React Native Linking Third Party Library Example

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

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

App.js

Output:

React Native Third Party Libraries React Native Third Party Libraries
Next Topic#




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA