TurboForms React Native Embed SDK

A robust React Native wrapper for the TurboForms SDK, providing a seamless bridge between your mobile application and powerful dynamic forms.

Features

• Embedded WebView: Renders complex forms using a high-performance WebView.
• Native Bridges: Direct integration with device features like Camera, Barcode Scanning, and Location.
• Attachment Management: Centralized utility for handling file attachments and IndexedDB persistence.
• Form Lifecycles: Full support for form rendering, saving, submission, and validation events.
• Theming & Customization: Pass theme data and configuration options directly from React Native.
• Smart Storage Initialization: Event-driven initialization ensures storage is immediately available.

Installation

npm install @unvired/turboforms-rn-embed-sdk

Automation (Asset Linking)

This library includes a postinstall script that automatically copies the required HTML assets:

• Android: Automatically copied to android/app/src/main/assets/.
• iOS: Bundled automatically via the React Native asset system.

Peer Dependencies

Ensure you have the following dependencies installed in your project:

• react-native-webview
• react-native-safe-area-context

Basic Usage

import React, { useRef } from 'react';
import { SDKFormWrapper, FORM_EVENTS } from '@unvired/turboforms-rn-embed-sdk';

const MyFormScreen = () => {
  const webViewRef = useRef(null);

  const handleEvent = (event) => {
    switch (event.type) {
      case 'smartStorageReady':
        // Storage is immediately initialized 
        console.log('SmartStorage ready.');
        break;
      case FORM_EVENTS.SUBMIT:
        console.log('Form Submitted:', event.data.formData);
        break;
      case 'FORM_SAVE_ATTACH':
        // Intercepted physically separated attachment data
        console.log('Attachment Data:', event.data.attachments);
        break;
      case "GET_ATTACHMENT":
        // Handle missing attachments
        break;
    }
  };

  return (
    <SDKFormWrapper
      ref={webViewRef}
      formsData={formTemplateJson}
      submissionData={existingDataJson}
      eventCallback={handleEvent}
      options={{
        platform: 'ios',
        themeData: myTheme,
      }}
    />
  );
};

Attachment Management Workflow

The SDK utilizes a robust, event-driven attachment synchronization system to handle heavy files asynchronously without blocking the UI.

1. Outgoing Flow (Save/Submit)

When saving or submitting, the SDK automatically intercepts FORM_SAVE and FORM_SUBMIT events. It resolves file IDs from IndexedDB and dispatches the submission data and physical attachment data back to the app as separate events (FORM_SAVE/FORM_SUBMIT and FORM_SAVE_ATTACH), keeping the UI responsive.

2. Incoming Flow (Pre-load)

When the HTML SDK requests a missing attachment via the GET_ATTACHMENT event, use the AttachmentManager to resolve and persist it into the WebView's IndexedDB.

import { AttachmentManager } from '@unvired/turboforms-rn-embed-sdk';

// Inside your event handler
if (event.type === "GET_ATTACHMENT") {
  const attachments = event.data.missingFiles.map(file => ({
    fileId: file.fileId,
    name: "resolved_file.png",
    size: 1024,
    type: "image/png",
    url: "data:image/png;base64,..."
  }));

  AttachmentManager.saveMultipleToIndexedDB(webViewRef, attachments);
}

// When resolution is complete, refresh the form
if (event.type === "ATTACHMENT_SAVED") {
  webViewRef.current.reloadForm();
}

API Reference

SDKFormWrapper Props

| Prop | Type | Description | | :--- | :--- | :--- | | formsData | string \| object | The form template JSON. | | submissionData | object | Initial data for the form fields. | | eventCallback | function | Handlers for SDK events. | | options | object | Configuration (theme, permissions, etc.). |

Exposed Methods via Ref

• reloadForm(): Re-injects the current payload into the WebView, useful for refreshing after data updates or attachment resolution.

© 2026 Unvired Inc. All rights reserved.