form0-react-native

React Native bindings for form0, the open-source schema-driven form ecosystem by paqu.io. Render a JSON form schema on mobile, including offline.

latest

Source

npm

Version: 0.2.1

Version published: 2 weeks ago

Maintainers: 1

Created: last year

Source

form0-react-native

NPM License NPM Last Update

[!NOTE] form0 is in active development and is available to use today. Its schema format and core concepts are stable in practice, but releases before 1.0 may include breaking changes. Pin your versions and review the release notes when upgrading. A formally stable release is coming.

form0-react-native is the React Native UI layer for the form0 ecosystem. It combines form0-core with platform-native field renderers for iOS and Android while allowing an application to provide its own components, theme, media handling, and image resolution.

🚀 Start with the CLI

For a new project, install form0-cli and follow the quickstart. Choose the mobile application option to start from the maintained Expo template.

Install form0-react-native directly when integrating it into an existing React Native project.

📦 Installation

npm install form0-react-native

Install compatible versions of the package's React Native peer dependencies. In an Expo project, use npx expo install so Expo selects compatible native versions.

⚡ Quick example

import { FormRenderer } from "form0-react-native";

const schema = {
  form: {
    name: "Inspection",
    status_field: null,
    elements: [
      {
        type: "TextField",
        key: "site_name",
        data_name: "site_name",
        label: "Site name",
        display: "default",
        description: null,
        description_mode: null,
        required: true,
        required_conditions: null,
        visible: true,
        visible_conditions: null,
        read_only: false,
        read_only_conditions: null,
        default_value: null,
        pattern: null,
        pattern_description: null,
        supporting_image: false,
        supporting_image_path: null,
        supporting_image_display: null,
      },
    ],
  },
};

export function InspectionForm() {
  return (
    <FormRenderer schema={schema} onSubmit={(record) => console.log(record)} />
  );
}

Renderer overrides

FormRenderer accepts a renderers prop so applications can replace or extend field components without forking the package:

const renderers = {
  PhotoField: CustomPhotoField,
  VideoField: CustomVideoField,
};

<FormRenderer schema={schema} renderers={renderers} />;

[!IMPORTANT] PhotoField and VideoField use placeholder-backed defaults. Production applications should provide renderers that own capture, storage, upload, and permission handling for those fields.

SignatureField has a built-in native renderer and can also be overridden. The package includes a mobile navigation and validation sheet, repeatable-section drilldown, theme overrides, and an image resolver integration point.

✅ Requirements

Node.js 22 or newer
React 18 or 19
React Native 0.72 or newer
Compatible lucide-react-native, react-native-svg, and optional safe-area dependencies

See the React parity tracker for current renderer coverage and planned work.

📚 Documentation

🔒 Security

Schema expressions are evaluated by form0-core. Only use schemas from trusted authors and review the form0-core security policy. Report vulnerabilities according to this repository's security policy.