react-native-okra

okra-react-native

This is a react native library for non-expo users to help implement okra widget

Get Started

This library would help you add Okra widget to your react native IOS/Android app in no time.

Install Okra-Expo

1. install react-native-okra

$ npm install react-native-okra@0.0.2

2. link react-native-okra

$ react-native link react-native-okra

3. Pod install: enter the ios directory in the root directory the project and run:

$ pod install

Install react-native-webview and Device info plugin

1. install react-native-webview

npm install --save react-native-webview

2. link react-native-okra-expo

$ react-native link react-native-webview

3. install react-native-webview

npm install --save react-native-device-info

4. link react-native-okra

$ react-native link react-native-device-info

5. Pod install: enter the ios directory in the root directory the project and run:

$ pod install

Usage

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import OkraView from 'react-native-okra-expo';

export default function App() {
  var okraOptions = {
    callback_url:"https://webhook.site/ded54b3f-f4f5-4fa1-86c3-0def6098fb4d",
    clientName:"client",
    color:"#953ab7",
    connectMessage:"Which account do you want to connect with?",
    currency:"NGN",
    env:"production", // for sandbox use production-sandbox
    exp:"2020-08-06",
    filter:{
      banks: ['access-bank', 'guaranty-trust-bank'],
      industry_type: 'all',
    },
    options:{saverid: 'this is it'},
    isCorporate:false,
    key:"fa85e5ce-0e4e-5a88-883d-9ba9b4357683",
    limit:"24",
    logo:"https://cdn.okra.ng/images/icon.svg",
    products:['auth', 'balance', 'identity', 'transactions'],
    redirect_url:"redirect",
    success_message:"this is the success message",
    success_title:"it has entered success",
    token:"5da6358130a943486f33dced",
    widget_failed:"",
    widget_success:"Your account was successfully linked to Okra, Inc"
  }
  return (
    <OkraView
    okraOptions={okraOptions}
    onClose={response => {
      console.log('on close');
    }}
    onSuccess={response => {
      console.log('on success', response);
    }}
    onError={response => {
      console.log('on error');
    }}
/>
  );
}

OkraOptions

Name	Type	Required	Default Value	Description
key	String	true	undefined	Your public key from Okra.
token	String	true	undefined	Your pubic Key from okra. Use test key for test mode and live key for live mode
products	Array[String]	true	undefined	The Okra products you want to use with the widget.
env	String	true	undefined	'production' or 'production-sandbox'
clientName	String	true	undefined	Name of the customer using the widget on the application
onClose	function	true	undefined	This acts as a callback that gets fired when the OkraView Component has been closed. It is intended to hold your navigation code, to navigate to previous page or any intended page.