React native
A quick guide to integrate Okra widget with 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;
- install react-native-okra-webview
Using npm
npm install react-native-okra-webview
Using yarn
yarn add react-native-okra-webview
- Install react-native-webview
Using npm
npm install react-native-webview
Using yarn
yarn add react-native-webview
- 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.
onSuccess This function is called when a user has successfully linked an Item. The function should expect one argument. |
onClose This function is called when a user encounters an error. The function should expect one argument. |
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.
Updated 8 months ago