Skip to main content

​
📘 Get Started with React Native SDK - Dojah

​
Installation [CLI]

npm install dojah-kyc-sdk-react_native
yarn

yarn add dojah-kyc-sdk-react_native
Configuration and usage Reference : https://www.npmjs.com/package/dojah-kyc-sdk-react_native Example Application: https://github.com/dojah-inc/dojah-react-native-sdk

​
Installation [Expo]

npm install dojah-kyc-sdk-react-expo


yarn add dojah-kyc-sdk-react-expo
Configuration and usage Reference : https://www.npmjs.com/package/dojah-kyc-sdk-react-expo Example Application: https://github.com/dojah-inc/dojah_kyc_sdk_rn_expo

​
Setup

​
Install expo-build-properties if you don’t have it

npx expo install expo-build-properties

​
Add the following plugins and permissions in your app.json

{
  "expo": {
    ...
    "ios": {
      "infoPlist": {
        "NSLocationWhenInUseUsageDescription": "This app uses location services to provide a better experience.",
        "NSLocationAlwaysUsageDescription": "This app uses location services to provide a better experience.",
        "NSLocationUsageDescription": "This app uses location services to provide a better experience.",
        "NSPhotoLibraryUsageDescription": "This app uses the photo library to provide a better experience.",
        "NSCameraUsageDescription": "This app uses the camera to provide a better experience.",
        "NSMicrophoneUsageDescription": "This app uses the microphone to provide a better experience."
      }
    },
    "plugins": [
      ...
      "dojah-kyc-sdk-react-expo",
      [
        "expo-build-properties",
        {
          "ios": {
            "extraPods": [
              {
                "name": "Realm",
                "version": "~> 10.52.2",
                "modular_headers": true
              },
              {
                "name": "DojahWidget",
                "git": "https://github.com/dojah-inc/sdk-swift.git",
                "branch": "pod-package"
              }
            ]
          }
        }
      ]
    ]
  }
}

​
Run prebuild:

npx expo prebuild

​
Android Setup

​
Requirements

  • Minimum Android SDK version - 21
  • Supported targetSdkVersion - 35
In your android root/build.gradle file set maven path: 
...
allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}
Or Set maven path in your root/settings.gradle file: 
...
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

​
Permissions

For Android you don’t need to declare permissions, its already included in the Package.

​
iOS Setup

​
Requirements

  • Minimum iOS version - 14

​
Add the following POD dependencies in your Podfile app under your App target

  pod 'Realm', '~> 10.52.2', :modular_headers => true
  pod 'DojahWidget', :git => 'https://github.com/dojah-inc/sdk-swift.git', :branch => 'pod-package'
example 
target 'Example' do
  ...
  pod 'Realm', '~> 10.52.2', :modular_headers => true
  pod 'DojahWidget', :git => 'https://github.com/dojah-inc/sdk-swift.git', :branch => 'pod-package'
  ...
end
and run pod install in your iOS folder: 
cd iOS
pod install

​
Make some few changes in your AppDelegate.mm file

  • Add the following imports:
#import <React/RCTBridge.h>
#import <React/RCTRootView.h>
  • Then replace application function in your AppDelegate with the following:
REMEMBER TO CHANGE THE Your App Name,to the actual name of your App 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

  // Initialize the React Native bridge
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"Your App Name"
                                            initialProperties:nil];

  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;

  // Wrap rootViewController in a UINavigationController
  UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:rootViewController];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  self.window.rootViewController = navigationController;
  [self.window makeKeyAndVisible];

  return YES;
}

​
Permissions

For iOS, Add the following keys to your Info.plist file: NSCameraUsageDescription - describe why your app needs access to the camera. This is called Privacy - Camera Usage Description in the visual editor. NSMicrophoneUsageDescription - describe why your app needs access to the microphone, if you intend to record videos. This is called Privacy - Microphone Usage Description in the visual editor. NSLocationWhenInUseUsageDescription - describe why your app needs access to the location, if you intend to verify address/location. This is called Privacy - Location Usage Description in the visual editor.

​
Usage

To start KYC, import Dojah in your React Native code, and launch Dojah Screen 
import {launchDojahKyc } from 'dojah-kyc-sdk-react_native';

launchDojahKyc(
  "{Required: Your_WidgetID}",
  "{Optional: Reference_ID}",
  "{Optional: Email_Address}"
)


//Example (If you're not passing Reference_ID and Email_Address values)

launchDojahKyc("1234678901234", "DJ-123456", "abc@gmail.com")


//Example (If you're not passing Reference_ID and Email_Address values)

launchDojahKyc("1234678901234", null, null)

​
SDK Parameters

  • WidgetID - a REQUIRED parameter. You get this ID when you sign up on the Dojah platform, follow the next step to generate your WidgetId.
  • Reference ID - an OPTIONAL parameter that allows you to initialize the SDK for an ongoing verification.
  • Email Address - an OPTIONAL parameter that allows you to initialize the SDK for an ongoing verification.

​
How to Get a Widget ID

To use the SDK, you need a WidgetID, which is a required parameter for initializing the SDK. You can obtain this by creating a flow on the Dojah platform. Follow these steps to configure and get your Widget ID: 
1. Log in to your Dojah Dashboard: If you don’t have an account, sign up on the Dojah platform.

2. Navigate to the EasyOnboard Feature: Once logged in, find the EasyOnboard section on your dashboard.

3. Create a Flow:

    - Click on the 'Create a Flow' button.
    - Name Your Flow: Choose a meaningful name for your flow, which will help you identify it later.

4. Add an Application:

    - Either create a new application or add an existing one.
    - Customise your widget with your brand logo and color by selecting an application.

5. Configure the Flow:

    - Select a Country: Choose the country or countries relevant to your verification process.
    - Select a Preview Process: Decide between automatic or manual verification.
    - Notification Type: Choose how you’d like to receive notifications for updates (email, SMS, etc.).
    - Add Verification Pages: Customize the verification steps in your flow (e.g., ID verification, address verification, etc.).

6. Publish Your Widget: After configuring your flow, publish the widget. Once published, your flow is live.

7. Copy Your Widget ID: After publishing, the platform will generate a Widget ID. Copy this Widget ID as you will need it to initialize the SDK as stated above.

​
Contributing

  • [KYC WIDGET Repository] (https://github.com/dojah-inc/dojah-react-native-sdk)
  • Fork it!
  • Create your feature branch: git checkout -b feature/feature-name
  • Commit your changes: git commit -am 'Some commit message'
  • Push to the branch: git push origin feature/feature-name
  • Submit a pull request 😉😉

​
WebView (Use this if you need custom UI not provided by launchDojahKyc)

-Usage
Webview
<WebView
    originWhitelist={['*']}
    source={{uri: 'https://identity.dojah.io?widget_id=12345678&user_data[first_name]=John&user_data[middle_name]=Doe&user_data[last_name]=John&user_data[email]&user_data[dob]=1900-04-30&metadata[user_id]='}}
    allowsInlineMediaPlayback={true}
    mediaPlaybackRequiresUserAction={false}
    startInLoadingState={true}
    javaScriptEnabled
    onError={e => console.log('error: ', e)}
  />
-NB: Kindly input your widget_id inside uri above, Get it from your Easy Onboard application dashboard here
⌘I