# React Native SDK Integration Guide

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

1. [Requirements](#requirements)
2. [Installations](#installations)
3. [Credentials Access](#credentials-access)
4. [Configuration](#configuration)
5. [How To Use](#how-to-use)
6. [Sample Code](#sample-code-here)

## Requirements

* React 16.8.2+
* React Native 0.55.0+
* react-native-device-info 7.3.1+

## Steps

1. [Installations](#1-installations)
2. [Credentials Access](#2-credentials-access)
3. [Configuration](#3-configuration)

### 1. Installations

#### Yarn

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

#### npm

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

#### **linking assets (IMPORTANT)**

```bash
npx react-native link
```

### **2. Credentials Access**

Receive the appId and appSecret through the [App Registration Form](https://developers.human-id.org/home/).

### 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;
```

## Sample Code [Here](https://github.com/human-internet/humanid-reactnative-sdk/tree/example)

####