Documentation
  • Overview
  • Usage Guidelines
  • iOS SDK Integration Guide
  • Android SDK Integration Guide
  • Web SDK Integration Guide
    • Example Web SDK Integration
  • Golang SDK Integration Guide
  • React Native SDK Integration Guide
  • Flutter SDK Integration Guide
  • WordPress Plugin Integration Guide
  • Discord Bot Integration Guide
  • FAQ
  • Support
  • Once you hit scale - Fees
  • Adjust language & default country code
  • SMS Terms and Conditions
  • Privacy-Policy
Powered by GitBook
On this page
  • IMPORTANT
  • Overview
  • Requirements
  • Steps
  • 1. Installations
  • 2. Credentials Access
  • 3. Configuration
  • How To Use
  • Sample Code Here

Was this helpful?

React Native SDK Integration Guide

PreviousGolang SDK Integration GuideNextFlutter SDK Integration Guide

Last updated 2 years ago

Was this helpful?

IMPORTANT

The React Native SDK is currently being worked on and an updated version will be released shortly. We strongly recommend waiting until the updated version is completed before integration. Please email developers@human-id.org with any questions you may have.

Overview

Requirements

  • React 16.8.2+

  • React Native 0.55.0+

  • react-native-device-info 7.3.1+

Steps

1. Installations

Yarn

yarn add @human-id/react-native-humanid react-native-device-info  

npm

npm i @human-id/react-native-humanid react-native-device-info  

linking assets (IMPORTANT)

npx react-native link

2. Credentials Access

3. Configuration

at your index.js file

import {configureHumanID} from "@human-id/react-native-humanid";  
import AppLogo from "path/your-app-logo";
  
configureHumanID({  
    appName: "Your application NAme",
    clientSecret: "APP_SECRET",
    clientId: "APP_ID",
    Icon: AppLogo // Icon is JSX.Element
});
  
AppRegistry.registerComponent(appName, () => App);  

How To Use

Register humanID Provider at your Top Container Application

import {HumanIDProvider} from "@human-id/react-native-humanid";
  
const App = () => {
    return (
        <View>
            <HumanIDProvider />
        </View>
    );
};
  
export default App; 

Login

import {logIn} from "@human-id/react-native-humanid";
  
const HomeScreen = () => {  
    const handleLogin = () => {
        logIn();
    };
    
    return <Button title="Login" onPress={handleLogin} />;
}  
  
export default HomeScreen;  

Listener onSuccess, onError, onCancel

We suggest put this method into lifecycle that only live once on your screen, example: componentDidMount if you use class component, otherwise you can use useEffect

import {onCancel, onSuccess, onError} from "@human-id/react-native-humanid";  
  
const HomeScreen = () => {  
    React.useEffect(() => {
        const unsubscribeSuccess = () => onSuccess((exchangeToken) => {
          console.log("exchangeToken", exchangeToken)
        });
    
        const unsubscribeError = () => onError(() => {
          console.log("error")
        });
    
        const unsubscribeCancel = () => onCancel(() => {
          console.log("canceled")
        });
    
        unsubscribeSuccess();
        unsubscribeError();
        unsubscribeCancel();
    
        return () => {
          unsubscribeSuccess();
          unsubscribeError();
          unsubscribeCancel();
        }
    }, []);
}  
 
export default HomeScreen;

Receive the appId and appSecret through the .

Sample Code

App Registration Form
Here
Requirements
Installations
Credentials Access
Configuration
How To Use
Sample Code
Installations
Credentials Access
Configuration