---
Source: https://docs.microblink.com/platform/sdk/react-native-wrapper
Title: React Native wrapper
Description: Wrap Microblink Platform native SDKs for React Native cross-platform apps
---

# 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](https://github.com/BlinkID/blinkid-react-native).
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:

```bash
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:

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

As an example, see the BlinkID React-Native SDK structure [here](https://github.com/BlinkID/blinkid-react-native/tree/master/BlinkID).

## Adding native SDKs to the project

:::note
Before proceeding with the integration, make sure you have [Git LFS](https://docs.github.com/en/repositories/working-with-files/managing-large-files/installing-git-large-file-storage) installed, as the libraries are stored in Git Large File Storage.
:::

### Android

1. First, clone the native Microblink Platform Android SDK:

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

2. 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](https://github.com/MicroblinkPlatform/microblink-platform-android?tab=readme-ov-file#-sdk-integration).
   - An example of the native `build.gradle.kts` file and how the library is
     integrated can be found
     [here](https://github.com/MicroblinkPlatform/microblink-platform-android/blob/main/MicroblinkPlatformSample/app/build.gradle.kts).
   - An example of the BlinkID library’s `build.gradle` file can be found
     [here](https://github.com/BlinkID/blinkid-react-native/blob/master/BlinkID/src/android/build.gradle).

### 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.

1. Clone the native Microblink Platform iOS SDK:

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

2. Clone the native BlinkID Verify iOS SDK (needed for document scanning):

   ```bash
   git clone https://github.com/BlinkID/blinkid-verify-ios.git
   ```

3. In your project, in the `ios` directory, create a "Frameworks" directory.

4. From the previously cloned repositories, copy all of the `.xcframework`
   directories from their respective "Frameworks" directories to your project's
   "Frameworks" directory.

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

   ```ruby
   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.

1. Go to the project root directory.
2. Run `yarn`.
3. Run `yarn example ios` to initialize the iOS project.
4. 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.

1. First, review how the native SDKs are integrated and used:

   - Android SDK instructions, along with a sample application, are available
     [here](https://github.com/MicroblinkPlatform/microblink-platform-android?tab=readme-ov-file#sdk-integration).
   - iOS SDK instructions, along with a sample application, can be found
     [here](https://github.com/MicroblinkPlatform/microblink-platform-ios/tree/main?tab=readme-ov-file#uikit).

2. 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](https://github.com/BlinkID/blinkid-react-native/blob/master/BlinkID/src/ios/MicroblinkModule/MicroblinkModule/MBBlinkIDModule.m)
     and
     [Android](https://github.com/BlinkID/blinkid-react-native/blob/master/BlinkID/src/android/src/main/java/com/microblink/blinkid/reactnative/MicroblinkModule.java).

3. 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](https://github.com/BlinkID/blinkid-react-native/blob/master/BlinkID/index.js).

## 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.

1. Add your function to the `NativeModuleName.ts`:

   ```typescript
   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'
   );
   ```

2. Adjust the `index.tsx` file, for example:

   ```typescript
   import TestingMicroblinkPlatform from './NativeTestingMicroblinkPlatform';
   
   export async function presentMicroblinkModule(): Promise<void> {
     return await TestingMicroblinkPlatform.presentMicroblinkModule();
   }
   ```

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

4. 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:

   ```objectivec
   #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
   ```

5. 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.

6. Add your implementation there:

   ```swift
   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)
         }
       }
   }
   ```

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

   ```objectivec
   #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
   ```

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

   ```ruby
   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
   
   ```

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

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

   ```typescript
   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,
     },
   });
   ```

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


Last updated on Apr 16, 2026