QoreID React Native SDK

npm install --save  @qore-id/react-native-qoreid-sdk

yarn add @qore-id/react-native-qoreid-sdk

npx expo prebuild

//in your project directory

cd ios
pod install

    //before your dependencies
repositories {
  mavenCentral()
  google()
  maven {
    url "https://repo.qoreid.com/repository/maven-releases/"
  }
  maven { url 'https://jitpack.io' }
}

-keep class com.qoreid.sdk.** { *; }
-dontshrink
-dontobfuscate
-dontoptimize

...
buildTypes {
        release {
            ...
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
...

import com.qoreidsdk.QoreidSdkModule;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        QoreidSdkModule.initialize(this);
    }

override fun onCreate(savedInstanceState: Bundle) {
        super.onCreate(savedInstanceState);
        QoreidSdkModule.initialize(this);
    }

...
<!-- Required for Verifind --> 
<uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
...

//AppDelegate.m

// 1. Import necessary headers
#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  
  // 2. Create an instance of UIWindow
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  
  // 3. Set up the UINavigationController with a UIViewController
  UIViewController *viewController = [UIViewController new];
  UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:viewController];
  [navigationController setNavigationBarHidden:YES animated:NO];
  
  // 4. Set the RN bridge to use the UIWindow as the root view controller
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:self.moduleName
                                            initialProperties:self.initialProps];
  viewController.view = rootView;
  self.window.rootViewController = navigationController; // Use the UINavigationController as the root
  
  [self.window makeKeyAndVisible];
  
  return YES;
}

...
@end

import UIKit
import React

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, RCTBridgeDelegate {
    
    var window: UIWindow?
    var bridge: RCTBridge?
    
    func application(_ application: UIApplication,
                     didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        
        // 1. Create RN bridge
        bridge = RCTBridge(delegate: self, launchOptions: launchOptions)
        
        // 2. Create RCTRootView
        guard let bridge = bridge else { return false }
        let rootView = RCTRootView(bridge: bridge, moduleName: "YourModuleName", initialProperties: nil)
        
        // 3. Create root UIViewController and assign RCTRootView
        let rootViewController = UIViewController()
        rootViewController.view = rootView
        
        // 4. Embed in UINavigationController and hide nav bar
        let navigationController = UINavigationController(rootViewController: rootViewController)
        navigationController.setNavigationBarHidden(true, animated: false)
        
        // 5. Setup window
        window = UIWindow(frame: UIScreen.main.bounds)
        window?.rootViewController = navigationController
        window?.makeKeyAndVisible()
        
        return true
    }
    
  ....
}

import UIKit
import React
import React_RCTAppDelegate
import ReactAppDependencyProvider

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  var reactNativeDelegate: ReactNativeDelegate?
  var reactNativeFactory: RCTReactNativeFactory?

  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    let delegate = ReactNativeDelegate()
    let factory = RCTReactNativeFactory(delegate: delegate)
    delegate.dependencyProvider = RCTAppDependencyProvider()

    reactNativeDelegate = delegate
    reactNativeFactory = factory

    window = UIWindow(frame: UIScreen.main.bounds)

// Remove    
//-    factory.startReactNative(
//-      withModuleName: "Your module name",
//-      in: window,
//-      launchOptions: launchOptions
//-    )
    
// Wrap the React Native Root View in a Navigation Controller    
    let rootView = reactNativeFactory!.rootViewFactory.view(withModuleName: "Your module name")
    
     let reactViewController = UIViewController()
     reactViewController.view = rootView

     let navigationController = UINavigationController(rootViewController: reactViewController)
     navigationController.setNavigationBarHidden(true, animated: false)

     window?.rootViewController = navigationController
     window?.makeKeyAndVisible()

     return true
  }
}

class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
  override func sourceURL(for bridge: RCTBridge) -> URL? {
    self.bundleURL()
  }

  override func bundleURL() -> URL? {
#if DEBUG
    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
#else
    Bundle.main.url(forResource: "main", withExtension: "jsbundle")
#endif
  }
}

...
<key>NSCameraUsageDescription</key>
<string>We need access to your camera to take photos for profile pictures.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access to your photo library to allow you to select and upload images.</string>
...

<key>NSMotionUsageDescription</key>
<string>We need access to your motiion usage to provide you with location-based services, even when the app is in the background.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>We need access to your location to provide you with location-based services, even when the app is in the background.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>We need access to your location while you are using the app to provide you with location-based services.</string>

//verify.tsx
import React from 'react';
import { Button, View } from 'react-native';
import { useQoreIdSdk } from '@qore-id/react-native-qoreid-sdk';


function App(){

  const callback = (data: any) => {
      console.debug(data);
    };

  const { launchQoreId } = useQoreIdSdk({
    onResult: callback,
  });

  function onSubmit() {
      const formData = {
        flowId: 0, /* Required for workflow */
        clientId: "", /* Required */
        productCode: "", /* Required for collection */
        customerReference: "", /* Required */
        applicantData: {
          firstName: "",
          middleName: "",
          lastName: "",
          gender: "",
          phoneNumber: "",
          email: "",
        },
        identityData: {
          idType: "",
          idNumber: "",
        },
        addressData: {
          address: "",
          city: "",
          lga: "",
        },
        ocrAcceptedDocuments:
          ['DRIVERS_LICENSE_NGA','VOTERS_CARD_NGA','NIN_SLIP_NGA','PASSPORT_NGA'],
      };

      launchQoreId(formData);
    }


  return (
      <View>
        <Button title="Launch QoreIdSdk" onPress={onSubmit} />
      </View>
    );
}

//verify.tsx
import React from 'react';
import { Button, View } from 'react-native';
import { QoreIdSdk } from '@qore-id/react-native-qoreid-sdk';

function App() {
    
  const callback = (data) => {
    console.debug(data);
  };

  function onSubmit() {
    const formData = {
      flowId: 0, /* Required for workflow */
      clientId: "", /* Required */
      productCode: "", /* Required for collection */
      customerReference: "", /* Required */
      applicantData: {
        firstName: "",
        middleName: "",
        lastName: "",
        gender: "",
        phoneNumber: "",
        email: "",
      },
      identityData: {
        idType: "",
        idNumber: "",
      },
      addressData: {
        address: "",
        city: "",
        lga: "",
      },
      ocrAcceptedDocuments:
        ['DRIVERS_LICENSE_NGA','VOTERS_CARD_NGA','NIN_SLIP_NGA','PASSPORT_NGA'],
    };

    QoreIdSdk.launch(formData);
  }

  useEffect(() => {
    const unsubscribe = QoreIdSdk.events(callback);
    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <View>
      <Button title="Launch QoreIdSdk" onPress={onSubmit} />
    </View>
  );
}

import React, {useRef} from 'react'
import { QoreIdButton, utils } from '@qore-id/react-native-qoreid-sdk';

function App() {

   // Array of string
   //For more information check -> https://docs.qoreid.com/docs/product-codes
   const productIds = utils.productCodes; 


   //An array of accepted documents in a specific country
   //For more information check -> https://docs.qoreid.com/docs/ocr-accepted-documents#accepted-documents-for-ocr-verifications
   const ocrLists = utils.acceptedDocuments["Nigeria"]
    ...
}

QoreIdSdk.events(onSuccess, onError);

useEffect(() => {
  const unsubscribe = QoreIdSdk.events(callback);
  return () => {
    unsubscribe();
  };
}, []);