OkVerify React Native

The OkVerify React Native library enables you to verify a user's OkHi address automatically

Get Started

The project is intended to work with a bare workflow installation of React Native. i.e projects created using npx react-native init MyAwesomeProject.

The OkVerify React Native only works on Android devices. iOS support coming soon!

Installation

yarn add @okhi/react-native-okverify

Link native dependancies

From react-native >=0.60 autolinking will take care of the link step but don't forget to run pod install

React Native modules that include native Objective-C, Swift, Java, or Kotlin code have to be "linked" so that the compiler knows to include them in the app.

$ react-native link @okhi/react-native-okverify

Android:

This module does not require any extra step after running the link command 🎉

Please make sure multiDexEnabled is enabled in your project by modifying android/app/build.gradle

android {
...config stuff
  defaultConfig {
    applicationId "com.okhi.myawesomeapp"
    minSdkVersion rootProject.ext.minSdkVersion
    targetSdkVersion rootProject.ext.targetSdkVersion
    versionCode 1
    versionName "1.0.0"
    multiDexEnabled true // set this to true
  }
}

For Android manual installation, please refer to this article where you can find detailed step on how to link any react-native project.

Usage

Initialization

Run the init method once on app start. To do this, place this in your index.js file. The init method performs crucial checks and verification signal uploads that are necessary for the library to work effectively. The init method takes in an optional, but highly recommended notification configuration that'll be used to start an Android foreground service that'll attempt to immediately upload verification signals as soon as they occur.

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import * as OkVerify from '@okhi/react-native-okverify';

OkVerify.init({
    channelId: 'okhi',
    channelDescription: 'OkHi verification alerts',
    channelName: 'OkHi Verification',
    title: 'Address verification in progress',
    text: 'Tap here to view your verification status.',
    notificationId: 22,
});

AppRegistry.registerComponent(appName, () => App);

To use start address verification you need to integrate the @okhi/react-native-okcollect library and pass the success response to the startVerification function available in the @okhi/react-native-okverify library. For this we'll modify the usage snippet taken from the previous section

import React, {useState, useEffect} from 'react';
import {View, ViewStyle, Button} from 'react-native';
import OkHiLocationManager, {
  OkCollectSuccessResponse,
} from '@okhi/react-native-okcollect';
import {OkHiUser, OkHiException} from '@okhi/react-native-core';
import {
  canStartVerification,
  startVerification,
} from '@okhi/react-native-okverify';

export default function App() {
  const [launch, setLaunch] = useState(false);
  const [conditionsMet, setConditionsMet] = useState(false);
  useEffect(() => {
    async function requestPermissions() {
      const result = await canStartVerification({
        requestServices: true
      });
      setConditionsMet(result);
    }
    requestPermissions();
  }, []);

  const viewStyles: ViewStyle = {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  };

  const handleOnSuccess = async (response: OkCollectSuccessResponse) => {
    // perform any logic you'd wish with user and location objects
    try {
      console.log(response.user);
      console.log(response.location);
      setLaunch(false);
      if (conditionsMet) {
        // check if permissions were granted
        const result = await startVerification(response);
        console.log('Verification started for: ' + result);
      }
    } catch (error) {
      console.log(error);
    }
  };

  const handleOnError = (error: OkHiException) => {
    console.log(error.code);
    console.log(error.message);
    setLaunch(false); // Make sure to change the launch value onError
  };

  const user: OkHiUser = {
    firstName: 'Julius',
    lastName: 'Kiano',
    phone: "[phone]", // Make sure its in MSISDN standard format
  };

  return (
    <View style={viewStyles}>
      <Button title="Create Address" onPress={() => setLaunch(true)} />
      <OkHiLocationManager
        user={user}
        launch={launch}
        onSuccess={handleOnSuccess}
        onCloseRequest={() => setLaunch(false)} // called when user taps on the top right close button
        onError={handleOnError}
      />
    </View>
  );
}

Recipes

Start verification without OkCollect

Its possible to construct your own OkHiLocation object using an identifier (provided by us, when a user creates an address using OkCollect) and a pair of coordinates

import { start } from '@okhi/react-native-okverify';

await start('[phone]', 'XthXJwz0qO', {lat: -1.2664398, lon: 36.7657483});

FAQs

Building with pro-guard enabled

If you have minifyEnabled set to true in your build.gradle file located android/app/build.gradle, you'll need to modify your proguard-rules.pro file, located android/app/proguard-rules.proas shown bellow to include classes required by the library to run.

-dontwarn sun.reflect.**
-dontwarn java.beans.**
-dontwarn sun.nio.ch.**
-dontwarn sun.misc.**

-keep class com.esotericsoftware.** {*;}

-keep class java.beans.** { *; }
-keep class sun.reflect.** { *; }
-keep class sun.nio.ch.** { *; }

-keep class com.snappydb.** { *; }
-dontwarn com.snappydb.**

# If you don't use OkHttp as a dep and the following

-dontwarn org.codehaus.mojo.animal_sniffer.*
-dontwarn javax.annotation.**
-keepnames class okhttp3.internal.publicsuffix.PublicSuffixDatabase
-dontwarn org.codehaus.mojo.animal_sniffer.*
-dontwarn okhttp3.internal.platform.ConscryptPlatform
-dontwarn org.conscrypt.ConscryptHostnameVerifier

Next steps

• Checkout the API Reference

• See a working integration example.

• Build a webhook endpoint to receive OkHi address verification scores.

• OkHi integration best practices