OkCollect React Native

The OkCollect React Native library enables you to launch OkHi from your app and collect accurate addresses from your users.

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 OkCollect React Native library only works on Android devices. iOS support coming soon!

Installation

$ yarn add @okhi/react-native-okcollect react-native-webview

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-okcollect react-native-webview

iOS

If using cocoapods

$ cd ios/ && pod install

For iOS, while you can manually link the old way using react-native own tutorial, we find it easier to use cocoapods. If you wish to use cocoapods and haven't set it up yet, please instead refer to that article.

Android:

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

Please make sure AndroidX is enabled in your project by modifying android/gradle.properties and adding 2 lines:

android.useAndroidX=true
android.enableJetifier=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

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

export default function App() {
  const [launch, setLaunch] = useState(false);

  useEffect(() => {
    async function requestPermissions() {
    // request for location permissions to enable user's to create addresses at their current location
      await requestEnableLocationServices();
      await requestLocationPermission();
    }
    requestPermissions();
  }, []);

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

  const handleOnSuccess = (response: OkCollectSuccessResponse) => {
    // perform any logic you'd wish with user and location objects
    console.log(response.user);
    console.log(response.location);
    setLaunch(false);
  };

  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>
  );
}

Whenever a user's OkHi address is created or used an SMS is sent to them notifying them of this usage

Whereas OkCollect does provide ways to customise the look and feel of the address creation process as well as alter some of the in built functionality. Due to accessibility concerns, the product will work with select brand colours that provide enough contrast to the text being rendered.

Next steps

• Checkout the API Reference for more customisation options

• See a working integration example.

• OkHi integration best practices

• Integrate the OkCollect Webhook