How to Integrate Okra in Your React Native App

Hey there, you might have opened this article because you want to use Okra in your react native application, but you’re not sure how to get started. Or maybe you are just curious. Whatever the case may be, you’re in luck! In this piece, I’ll be walking you through step-by-step instructions on how to get it done; spoilers - it’s super easy 🎉

Definitions

Okra provides open finance infrastructure that enables developers and businesses to build personalized digital products and services for consumers in Africa.

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.

Prerequisites

This article is not an intro to React Native, it doesn’t cover the basics. You’ll need to be familiar with Javascript and React Native syntax to get started. The Okra React Native SDK, works for both a typical React Native CLI and an Expo project. To keep things simple, we will be using an Expo setup in this article.

To get started, you’ll need to do the following things:

• Sign up with Okra (if you don’t already have an account with Okra)
• Retrieve your Okra credentials:
  - Client Token
  - API key
• Have an expo set up on your machine; if you don’t already have that, visit their docs.

Let’s Get Started 🎉

To get Expo started, run:

expo init OkraRNExample

This will create an OkraRNExample folder with your work files. Then, you need to change the directory(cd) to the working directory.

cd OkraRNExample

Once in this folder, you need to install react-native-okra-webview

To install, run:

yarn add react-native-okra-webview

Secondly, you will also need to install react-native-webview. To install, run:

yarn add react-native-webview

This will install the latest versions of react-native-okra-webview and react-native-webview in your application.

This upgraded React Native SDK currently supports buildWithShortUrl and BuildWithOption.

BuildWithShortUrl

This method takes away the burden of customizing your widget in your text editor; instead, it allows you to leverage 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.

Inside your App.js file, erase all that’s in there, copy and paste the codes below into it.

BuildWithOption

This method gives you the freedom to code by hand the necessary parameters that are required to kickstart the SDK.

The advantage of using BuildWithOptions is that you get to creatively customize the appearance, features, and more. Hence, it's the best choice for a developer that wants to change the look and feel of their widget frequently.

Still in your App.js file, copy and paste the codes below into it.

And that’s it! You have successfully setup Okra’s react-native SDK 🎉

Conclusion

I hope this guide was helpful for implementing Okra in a React Native project. We’d love to know how your integration with our SDKs is going, so feel free to buzz us on Slack.

Check out this repo for the entire project, and don’t forget to star it. Check out our documentation to explore all of Okra’s wonderful services. Or, if you want to try it out for yourself, sign up for a free account to start building with the Okra today.

If you are passionate about open finance, you can also visit our website to see all the services that might be appealing to you.

Contact sales or send an email to sales@okra.ng to get started!