React native

📘

This guide also works for a React Native CLI and an Expo Project.

Overview

The Okra Widget SDK is a quick and secure way to link bank accounts to Okra in your Android an iOS React Native app. The widget is a drop-in module that handles connecting a financial institution to your app (credential validation, multi-factor authentication, error handling, etc). All without passing sensitive personal information to your server.

🚧

This library would help you add Okra widget to your react native IOS/Android app in no time. This is a react native library for non-expo users to help implement okra widget. If you are an expo user, click here

Requirement

• React Native Version 0.61.3 or higher
• Setup Android and iOS setup for platform- specific OS

Getting started

Integrate react native with Okra widget

The steps include;

1. install react-native-okra-webview

Using npm

npm install react-native-okra-webview

Using yarn

yarn add react-native-okra-webview

2. Install react-native-webview

Using npm

npm install react-native-webview

Using yarn

yarn add react-native-webview

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

$ pod install

Usage

Okra presents to you the flexibility of integrating the SDK in two ways, via the BuildWithOptions or the BuildWithShortUrl.

BuildWithOptions

This method allows you the freedom to hand-code the necessary parameters that are required to kickstart the SDK.
The advantage of using the BuildWithOptions is that you get to creatively customize the appearance, features, and lots more, hence it's the best choice for a developer that changes the look and feel of the widget frequently.

BuildWithShortUrl

This method takes away the sweat of customizing your widget in your text editor, instead, it gives you the privilege of leveraging the Okra dashboard to customize the appearance and features of your Widget, after customization, it presents a short-URL, which serves as an integral link for the widget.
This method saves time and it's a no-code option.

Here's a complete source code on how you would integrate this into your project, either by the BuildWithOptions or BuildWithShortUrl.

🚧

Want to check out Widget Options?
View a comprehensive list of the widget properties. here

import React, { useState } from 'react';
 import {
   Alert,
   SafeAreaView,
   StatusBar,
   StyleSheet,
   useColorScheme,
   View,
 } from 'react-native';

import { Okra } from 'react-native-okra-webview';

 const App = () => {
   const isDarkMode = useColorScheme() === 'dark';

   return (
     <SafeAreaView style={{flex:1}}>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
       <View style={[styles.container, styles.flex]}>
         <Okra.BuildWithOptions
           env="production-sandbox"
           name="Testing123"
           token="<your-Okra-client-token>"
           okraKey="<your-Okra-API-Key"
           products={['auth', 'identity', 'balance', 'transactions' ]}
           onSuccess={(response) => {
             Alert.alert('Success!', JSON.stringify(response))
           }}
           onClose={(response) => {
             Alert.alert('error!', JSON.stringify(response))
           }}
         />
       </View>
     </SafeAreaView>
   );
 };

 const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

 export default App;

import React, { useState } from 'react';
 import {
   Alert,
   SafeAreaView,
   StatusBar,
   StyleSheet,
   useColorScheme,
   View,
 } from 'react-native';

import { Okra } from 'react-native-okra-webview';

 const App = () => {
   const isDarkMode = useColorScheme() === 'dark';

   return (
     <SafeAreaView style={{flex:1}}>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
       <View style={[styles.container, styles.flex]}>
         <Okra.BuildWithShortUrl
          short_url={'your-shourt-url'}
          onSuccess={(response: any) => {
            Alert.alert('Success!', JSON.stringify(response))
          }}
          onClose={(response: any) => {
            Alert.alert('error!', JSON.stringify(response))
          }}
        />
       </View>
     </SafeAreaView>
   );
 };

 const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

 export default App;

Events

The Okra component is used to open a widget from a React Native application. Okra renders a Pressable component, which wraps the component you provide and intercepts onPress events to open the widget.

Not a developer?

Get started without writing a single line of code, Try our App Builder! Click here to get started or read this article on how to get started.