Unvired Forms React Native SDK

A robust React Native wrapper for the Unvired Forms 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.

Installation

npm install rn-form-io-lib

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 './path/to/sdk';

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

  const handleEvent = (event) => {
    switch (event.type) {
      case FORM_EVENTS.SUBMIT:
        console.log('Form Submitted:', event.data.formData);
        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

When the SDK requests a missing attachment via the GET_ATTACHMENT event, use the AttachmentManager to resolve it:

import { AttachmentManager } from './path/to/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.