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 🎉
Okra provides open finance infrastructure that enables developers and businesses to build personalized digital products and services for consumers in Africa.
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.
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.
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.
App.js file, erase all that’s in there, copy and paste the codes below into it.
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 🎉
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.