react native-tutorial

React Native Third Party Libraries

A collection of integrated core components and APIs are available with React Native and are ready for usage in your app. You are not restricted to the React Native-bundled components and APIs. There are thousands of developers who work using React Native. You might be able to locate and install a library from the community to add the functionality you need to your app if the Core Components and APIs don’t contain what you need.

Setting Up a Library

Navigate to the project directory in your terminal and issue the installation command to add a library to your project. Let’s give react-native-webview a go.

npm install react-native-webview

We installed a library that contains native code, and before using it, we must link it to our app.

Linking Native Code on iOS

The majority of React Native libraries adhere to this approach, and React Native uses CocoaPods to handle iOS project dependencies. Please see the README of the library you are using if it doesn’t for more information. The guidelines below will typically be applicable.

To attach it to our native iOS project, run pod install in the ios directory. Run npx pod-install as a shortcut to accomplish this without going to the ios directory.

npx pod-install

For Mac M1 users only

Rebuild the app binary after this is finished to use your new library:

npx react-native run-ios

Linking Native Code on Android

Gradle is used by React Native to control Android project dependencies. To use a library that has native dependencies after installation, you must rebuild the app binary:

npx react-native run-android

Libraries to Visit

A searchable database of libraries created especially for React Native is called React Native Directory. For your React Native app, this is where you should start your search for a library.

The React Native Community or Expo produced a large number of the libraries that you can discover on the directory.

Volunteers and employees at businesses that rely on React Native operate libraries created by the community. Although it varies amongst projects, they frequently support iOS, tvOS, Android, and Windows. This organization’s libraries have a history of using React Native Core Components and APIs.

All of the libraries created by Expo are written in TypeScript and where feasible support iOS, Android, and react-native-web.

If you can’t locate a library designed particularly for React Native on the directory, the npm registry is your next best option after React Native Directory. The most reliable place to find JavaScript libraries is the npm registry, however not all of the libraries it lists will work with React Native. A number of JavaScript development environments, such as React Native, Node.js, web browsers, Electron, and others, are supported by npm’s libraries.

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

import React, {Component} from 'react';  
import {Platform, StyleSheet, Text, View, TouchableOpacity,Alert} from 'react-native';  
import Icon from 'react-native-vector-icons/Ionicons';  
  
type Props = {};  
export default class App extends Component<Props> {  
  deleteItem = ()=>{  
    Alert.alert("delete icon pressed")  
  }  
  render() {  
    return (  
      <View style={styles.container}>  
        <Text style={styles.textStyle}>Adding Ionicons library</Text>  
        <TouchableOpacity style={styles.touchableStyle} onPress= {this.deleteItem} >  
            <Icon size={30} name="ios-trash" color="red"/>  
        </TouchableOpacity>  
      </View>  
    );  
  }  
}  
  
const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
  },  
   textStyle:{  
      fontSize:25,  
      marginTop: 30,  
      textAlign: 'center',  
   },  
   touchableStyle:{  
     marginTop: 80,  
     justifyContent: 'center',  
     alignItems: "flex-end",  
     marginRight: 50,  
   }  
});  

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *