React Native Bridge

This page shows how to integrate App Drop-in via a custom React Native bridge. A bridge is a wrapper that connects your React Native app to the native iOS and Android SDKs and is built and maintained by your team.

To learn the difference between a bridge and a plugin, see Cross-platform integration > Comparison.

Prerequisites

You will need your fourthlineGithubToken
Access to Fourthline GitHub repos
Real devices for testing (scanners do not work on iOS Simulator)
The React Native project already set up
Check the following prerequisites and specifications for your operating system:

Minimum Xcode version: 16.1 or above
Minimum iOS version: 13.0 or above
Version compatibility: For detailed version requirements across SDK releases, see iOS Native SDK Compatibility

Note

Data exchanged between React Native and the Fourthline bridge APIs is transferred as JSON-formatted strings.

Implement React Native bridge

Follow these steps to integrate the Fourthline SDK on iOS.

1. Configure permissions

Start by configuring the required permissions in your app settings. To access the camera and near-field communication (NFC) capability, add the following keys in Info.plist:

<key>NSCameraUsageDescription</key>
<string>In order to verify your identity, please allow access to the camera</string>

2. Enable NFC capability in your app project

In Xcode, go to Signing & Capabilities.
Add the Near Field Communication Tag Reading capability. This automatically creates a YOUR_PROJECT_NAME.entitlements file in your project.
In the entitlements file, make sure that Near Field Communication Tag Reader Session Formats includes the following values:
- Tag-Specific Data Protocol (TAG)
- Password Authenticated Connection Establishment (PACE)

Example entitlements snippet


<dict>
  <key>com.apple.developer.nfc.readersession.formats</key>
  <array>
    <string>TAG</string>
    <string>PACE</string>
  </array>
</dict>

Example NFC workflow


<key>NFCReaderUsageDescription</key>
<string>Please enable NFC to read the chip from your document.</string>
<key>com.apple.developer.nfc.readersession.iso7816.select-identifiers</key>
<array>
  <string>A0000002471001</string>
  <string>A00000045645444C2D3031</string>
</array>

3. Enable optional functionalities

Enable microphone access

If you want selfie and document video recordings to include audio, add the following key to your Info.plist:

<key>NSMicrophoneUsageDescription</key>
<string>In order to verify your identity, please allow access to the microphone</string>

Enable location access

If you want to use the Location flow, add the following keys to your Info.plist:

<key>NSLocationWhenInUseUsageDescription</key>
<string>In order to verify your identity, please allow access to your location</string>

<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>In order to verify your identity, please allow access to your location</string>

<key>NSLocationTemporaryUsageDescriptionDictionary</key>
<dictionary>
 <key>FourthlineFullAuthorizationPurposeKey</key>
    <string>In order to verify your identity, your precise location will only be shared once with us</string>
</dictionary>

Add custom fonts

If you are using custom fonts in the App Drop-in, add the font files to your project and include them in your Info.plist:

<key>UIAppFonts</key>
 <array>
  <string>Your-Font-Medium.ttf</string>
  <string>Your-Font-Regular.ttf</string>
 </array>

4. Download and install FourthlineSDK

You can install the Fourthline iOS SDK using CocoaPods (recommended) or manually.

Install the SDK using CocoaPods

1. Add the following to your Podfile:

source 'https://github.com/Fourthline-com/FourthlineSDK-iOS-Specs.git '
source 'https://github.com/CocoaPods/Specs.git ' # to add other public pods


target 'ReactNativeiOSProject' do

.........

  pod 'FourthlineSDK'

.........

end

Run pod install.
Manually add the FourthlineScanner.xcframework in Xcode - Frameworks and Libraries. This framework is not yet available via CocoaPods.

Install the SDK manually

To do this, drag and drop the following Fourthline frameworks in Xcode - Frameworks and Libraries all:

FourthlineSDK
FourthlineNFC
FourthlineVision
FourthlineCore
FourthlineKYC
FourthlineScanners

5. Create the bridge

To expose the native Fourthline SDK to React Native, create a custom bridge.

Create a custom bridge

1. In the iOS folder, create a new file called Fourthline.swift.
2. Implement the bridge methods you need. For example, you can bridge the Workflow and Delete files APIs:

import FourthlineSDK
import FourthlineScanners
import React

@objc(Fourthline)
class Fourthline: RCTEventEmitter {
  private enum Event: String {
    case workflowData = "fourthlineWorkflowData"
  }
  
  // MARK: - Private
  /// When using the Workflow product, Fourthline takes care of submitting data to the backend. Adding the data observer allows you to be notified when data have been uploaded.
  private var observingWorkflowData: Bool = true
  private var workflowLauncher: WorkflowLauncher?
  
  @objc override static func requiresMainQueueSetup() -> Bool {
    true
  }
  
  override func supportedEvents() -> [String]! {
    return [Event.workflowData.rawValue]
  }
  
  // MARK: - Workflow
  @objc(startWorkflow:withResolver:withRejecter:)
  func startWorkflow(config: String, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
    var dataCallback: FourthlineScanners.UploadCallback = nil
    if observingWorkflowData {
      dataCallback = { [weak self] jsonData in
        guard self?.observingWorkflowData == true else {
          return
        }
        
        DispatchQueue.main.async {
          self?.sendEvent(withName: Event.workflowData.rawValue, body: jsonData)
        }
      }
    }
    
    DispatchQueue.main.async { [unowned self] in
      self.workflowLauncher = WorkflowLauncher()
      self.workflowLauncher?.launch(jsonConfig: config, onSuccess: { [unowned self] result in
        resolve(result)
        self.workflowLauncher = nil
      }, onFailure: { [unowned self] jsonError in
        reject(nil, jsonError, nil)
        self.workflowLauncher = nil
      }, onDataUploaded: dataCallback
      )
    }
  }
  
  // MARK: - Overriding RCTEventEmitter
  override func addListener(_ eventName: String!) {
    super.addListener(eventName)

    guard let event = Event.init(rawValue: eventName) else {
      return
    }
    
    switch event {
    case .workflowData:
      observingWorkflowData = true
    }
  }
  
  // MARK: - Extending RCTEventEmitter
  @objc func removeListener(_ eventName: String) {
    guard let event = Event.init(rawValue: eventName) else {
      return
    }
    
    switch event {
    case .workflowData:
      observingWorkflowData = false
    }
  }
  
  // MARK: - Delete Fourthline Files
  @objc(deleteFourthlineFiles:withRejecter:)
  func deleteFourthlineFiles(resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) -> Void {
    FileManager.default.deleteFourthlineFiles()
    resolve(true)
  }
}

In the iOS folder, create a Fourthline.m file to export the native methods to JavaScript.
Export the API.

Use Fourthline.m to expose the native methods to React Native. For example, export the Workflow and Delete files APIs:

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(Fourthline, NSObject)


RCT_EXTERN_METHOD(startWorkflow:(NSString *)config
                  withResolver:(RCTPromiseResolveBlock)resolve
                  withRejecter:(RCTPromiseRejectBlock)reject)


RCT_EXTERN_METHOD(deleteFourthlineFiles:(RCTPromiseResolveBlock)resolve
                  withRejecter:(RCTPromiseRejectBlock)reject)

@end

Use React Native bridge

The React Native bridge exposes the native Fourthline SDK as a Fourthline module, which you can call from your React Native code. See an example below:

import { NativeModules } from 'react-native';
const { Fourthline } = NativeModules;

......
function startWorkflow() {
  var config = `{
    "configuration": {
      "validationCode": "IDV",
      "networkEnvironment": "mock"
    }
  }`

  Fourthline.startWorkflow(config)
    .then((result) => {
      showResult('Successfully Finished Workflow', result);
      // Delete files only if not needed anymore. Otherwise, delete when app will terminate.
      deleteFourthlineFiles();
    })
    .catch((error) => {
      var json = JSON.parse(error.message);
      showResult('Workflow error:', json);
    });
}

function deleteFourthlineFiles() {
  Fourthline.deleteFourthlineFiles().then(() => {
    console.log('Success: Fourthline files have been deleted.');
  });
}

function showResult(message: string, jsonToShow: string) {
  console.log('JSON response:' + message + '\n' + format(jsonToShow));
}

function format(json) {
  return JSON.stringify(json, null, 2);
}

Manage temporary files

Fourthline SDK stores sensitive data in your app’s temporary directory. Make sure you remove these files when they’re no longer required. For example:

After the workflow completes successfully.
Before the app is terminated.

Delete temporary files

Call the API to remove all Fourthline temporary files.

import { NativeModules } from 'react-native'

NativeModules.Fourthline.deleteFourthlineFiles().then(() => {
    // Fourthline files have been deleted.
});

Note

Remove these files to prevent sensitive data from remaining on the device.

Prerequisites

Implement React Native bridge

Use React Native bridge

Manage temporary files

Delete temporary files

Related pages