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.

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.

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

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

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 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 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

Output:

React Native Third Party Libraries React Native Third Party Libraries




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA