React Native wrapper

The purpose of this document is to provide a detailed overview of how to wrap the native iOS and Android Microblink Platform SDKs so they can be implemented in the React Native environment.

To get a more detailed overview of how Microblink's native mobile SDKs are used in React Native, see the BlinkID React Native SDK here. All examples in this document will be compared to this SDK.

Even thought this library is written with vanilla JavaScript, the process mostly stays the same, even if you are using TypeScript.

Creating the library

To create a new React Native library, run the following command:

npx create-react-native-library@latest microblink-platform-react-native

Add the project details (name, description, etc.) and select Turbo module when prompted.

Library structure

After the installation process has finished, the project folder will be created. It should consist of:

The android folder, where all the native Android (Kotlin) code is stored.
The ios folder, where all the native iOS (Objective-C / Swift) code is stored.
The src folder, where all the TypeScript code is stored.

As an example, see the BlinkID React-Native SDK structure here.

Adding native SDKs to the project

note

Before proceeding with the integration, make sure you have Git LFS installed, as the libraries are stored in Git Large File Storage.

Android

First, clone the native Microblink Platform Android SDK:

git clone https://github.com/MicroblinkPlatform/microblink-platform-android.git

Add the libraries from the GitHub repository to the created React-Native library:
- Instructions on manually adding the library in the build.gradle file can be found here.
- An example of the native build.gradle.kts file and how the library is integrated can be found here.
- An example of the BlinkID library’s build.gradle file can be found here.

iOS

note

Before proceeding with the iOS integration, make sure you have Xcode 16.2 or above installed.

Since React Native does not support Swift Package Manager dependency installation, and the Microblink Platform SDK supports the Swift Package Manager and the manual integration, the frameworks need to be manually added to the module structure.

Clone the native Microblink Platform iOS SDK:

git clone https://github.com/MicroblinkPlatform/microblink-platform-ios.git

Clone the native BlinkID Verify iOS SDK (needed for document scanning):
```
git clone https://github.com/BlinkID/blinkid-verify-ios.git
```
In your project, in the ios directory, create a "Frameworks" directory.
From the previously cloned repositories, copy all of the .xcframework directories from their respective "Frameworks" directories to your project's "Frameworks" directory.

Open your .podspec file, and add the following information:

Pod::Spec.new do |s|
  s.name         = "TestingMicroblinkPlatform"
  s.version      = "1.0.0"
  s.summary      = "A React Native TurboModule for MicroblinkPlatofrm"
  s.description  = "TestingMicroblinkPlatform"
  s.homepage     = "https://your-homepage.example"
  s.license      = { :type => "MIT" }
  s.author       = { "Your Name" => "you@example.com" }
  s.platform     = :ios, "16.0"
  s.source       = { :path => "./ios" }

  s.source_files = [
    "ios/*.{swift,h,m,mm,cpp}",
    "ios/generated/**/*.{swift,h,m,mm,cpp}"
  ]
  s.private_header_files = "ios/**/*.h"

  # Vendored frameworks -> add the neccessary frameworks for Microblink platform
  s.vendored_frameworks = "ios/Frameworks/*.xcframework"

  if respond_to?(:install_modules_dependencies, true)
    install_modules_dependencies(s)
  else
    s.dependency "React-Core"
  end
  end

Verifying the integration of native SDKs

When a Turbo Module is created, an example directory is created. This is the place where you can test out the module.

Go to the project root directory.
Run yarn.
Run yarn example ios to initialize the iOS project.
Run yarn example android to initialize the Android project.

The iOS example project is located in the example > ios > ModuleName.xcworkspace, and you can open it directly via Xcode.
The Android example project is located in the example > android folder. Open the android folder via Android Studio.

If you can build both projects, without any compilation errors and can see the neccessary frameworks in the project structure, this means that everything has been integrated successfully.

Creating native modules for React Native

Native modules serve as the communication bridge between React Native and the native SDKs.

First, review how the native SDKs are integrated and used:
- Android SDK instructions, along with a sample application, are available here.
- iOS SDK instructions, along with a sample application, can be found here.
Implement the native code from step above in the following files:
- Android: ModuleNameModule.kt and ModuleNamePackage.kt in the main android folder.
- iOS: see the instructions below
- Example implementations for the BlinkID SDK can be found for iOS and Android.
Implement the TypeScript code that connects React Native to the native code in the NativeModuleName.ts and index.tsx files (located in the src folder).

An example of the BlinkID implementation can be seen here.

iOS: Swift and Objective-C bridge

Since the Platform SDK is primarily built with Swift, and React Native primarily supports Objective-C, you will need to make a "bridge" between Swift and Objective-C.

Add your function to the NativeModuleName.ts:

import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  presentMicroblinkModule(): Promise<void>;
}

export default TurboModuleRegistry.getEnforcing<Spec>(
  'TestingMicroblinkPlatform'
);

Adjust the index.tsx file, for example:

import TestingMicroblinkPlatform from './NativeTestingMicroblinkPlatform';

export async function presentMicroblinkModule(): Promise<void> {
  return await TestingMicroblinkPlatform.presentMicroblinkModule();
}

Codegen will now generate the necessary methods in the native iOS module. To test this out, go to example/ios and run pod install.

When you open the generated Xcode project, find your library and find the ModuleName.mm̨ file (this is an Objective-C++ file), and add your method:

#import "TestingMicroblinkPlatform.h"


@implementation TestingMicroblinkPlatform

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
    (const facebook::react::ObjCTurboModule::InitParams &)params
{
    return std::make_shared<facebook::react::NativeTestingMicroblinkPlatformSpecJSI>(params);
}

- (void)presentMicroblinkModule:(nonnull RCTPromiseResolveBlock)resolve reject:(nonnull RCTPromiseRejectBlock)reject {

}

@end

Create a Swift file where you will place your Microblink Platform implementation. When you get asked to create a bridge file, you do not need to create it.

Add your implementation there:

import Foundation
import MicroblinkPlatform
import UIKit

@objc class MicroblinkPlatformReactNativeTurboTest: NSObject, MicroblinkPlatformSDKDelegate {

  @objc public func presentMicroblinkModule(_ rootVc: UIViewController) {
    // your implementation here....
  }

  func microblinkPlatformSDKDidFinish(viewController: UIViewController, result: MicroblinkPlatformResult) {
    DispatchQueue.main.async {
      viewController.dismiss(animated: true)
    }
  }

    func microblinkPlatformSDKDidClose(viewController: UIViewController) {
      DispatchQueue.main.async {
        viewController.dismiss(animated: true)
      }
    }
}

Add the implementation in the Objective-C++ file:

#import "TestingMicroblinkPlatform.h"
#import "TestingMicroblinkPlatform-Swift.h"

@implementation TestingMicroblinkPlatform {
  TestingMicroblinkPlatform *moduleImplementation;
}

- (instancetype) init {
  self = [super init];
  if (self) {
    moduleImplementation = [[TestingMicroblinkPlatform alloc] init];
  }
  return self;
}

RCT_EXPORT_MODULE()

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
    (const facebook::react::ObjCTurboModule::InitParams &)params
{
    return std::make_shared<facebook::react::NativeTestingMicroblinkPlatformSpecJSI>(params);
}

- (void)presentMicroblinkModule:(nonnull RCTPromiseResolveBlock)resolve reject:(nonnull RCTPromiseRejectBlock)reject {
  dispatch_async(dispatch_get_main_queue(), ^{
    UIViewController *rootViewController = [[[UIApplication sharedApplication] keyWindow] rootViewController];
    [self->moduleImplementation presentMicroblinkModule:rootViewController];
  });
}

@end

Modify the .podspec file to now add Swift files, and the necessary frameworks:

Pod::Spec.new do |s|
  s.name         = "TestingMicroblinkPlatform"
  s.version      = "1.0.0"
  s.summary      = "A React Native TurboModule for MicroblinkPlatofrm"
  s.description  = "TestingMicroblinkPlatform"
  s.homepage     = "https://your-homepage.example"
  s.license      = { :type => "MIT" }
  s.author       = { "Your Name" => "you@example.com" }
  s.platform     = :ios, "16.0"
  s.source       = { :path => "./ios" }

  s.source_files = [
    "ios/*.{swift,h,m,mm,cpp}",
    "ios/generated/**/*.{swift,h,m,mm,cpp}"
  ]
  s.private_header_files = "ios/**/*.h"

  # Vendored frameworks -> add the neccessary frameworks for Microblink platform
  s.vendored_frameworks = "ios/Frameworks/*.xcframework"

  if respond_to?(:install_modules_dependencies, true)
    install_modules_dependencies(s)
  else
    s.dependency "React-Core"
  end
  end

Run pod install again, so that everything is added correctly in the project.

Test out the implementation. This is, for example, how the App.tsx is implemented:

import { Text, View, StyleSheet, Button } from 'react-native';
import { presentMicroblinkModule } from 'react-native-testing-microblink-platform';

export default function App() {
  const onPressHandler = () => {
    const sth = presentMicroblinkModule();
    console.log(sth);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to the Microblink Platform</Text>
      <Button title="Open Microblink Platform" onPress={onPressHandler} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
});

You should now be able to open the Microblink Platform on iOS.

Creating the library​

Adding native SDKs to the project​

Android​

iOS​

Verifying the integration of native SDKs​

Creating native modules for React Native​

iOS: Swift and Objective-C bridge​