# react-native-form-engine

> A JSON-powered form generator

Latest version **2.0.1** (published 2019-10-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-form-engine
pnpm add react-native-form-engine
yarn add react-native-form-engine
bun add react-native-form-engine
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2019-10-14 |
| First published | 2019-10-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Richard Ng |
| Maintainers | ng-kode |
| Keywords | react-native, form-validation, json-form |

## Links

- npm: https://www.npmjs.com/package/react-native-form-engine
- Repository: https://github.com/ng-kode/react-native-form-engine
- Homepage: https://github.com/ng-kode/react-native-form-engine#readme
- Issues: https://github.com/ng-kode/react-native-form-engine/issues
- npm.io page: https://npm.io/package/react-native-form-engine

## Dependencies (9)

- [immer](https://npm.io/package/immer.md) ^4.0.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [typescript](https://npm.io/package/typescript.md) ^3.6.4
- [@types/jest](https://npm.io/package/@types/jest.md) ^24.0.18
- [validate.js](https://npm.io/package/validate.js.md) ^0.13.1
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.5
- [@types/react-native](https://npm.io/package/@types/react-native.md) ^0.60.19
- [@types/react-test-renderer](https://npm.io/package/@types/react-test-renderer.md) ^16.9.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 2.0.1 (latest) — 2019-10-14
- 2.0.0 — 2019-10-14
- 1.0.0 — 2019-10-08

## README

# React Native Form Engine

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![npm version](https://img.shields.io/npm/v/react-native-form-engine.svg?style=flat)](https://www.npmjs.com/package/react-native-form-engine)
[![CircleCI](https://circleci.com/gh/ng-kode/react-native-form-engine/tree/master.svg?style=shield)](https://circleci.com/gh/ng-kode/react-native-form-engine/tree/master)

JSON-powered form generator

![demo.gif](demo.gif)

# Features

- Add customized templates with ease (for both inputs and ui components)
- inter-field validations
- Disable / Hide fields by conditions

# How to use

1. Install through npm / yarn

   ```
   $ cd <your-project-root>
   $ yarn install react-native-form-engine
   ```

2. Define your own fields and templates

   ```
   const fields = [
       {
           "path": "profileHeader",
           "template": "Text",
           "templateProps": {
             "title": "Your Profile",
             "type": "h1"
           }
       },
       {
           "path": "userEmail",
           "template": "TextField",
           "templateProps": {
             "label": "Your Email"
           }
       },
       // ...etc
   ]

   const templates = {
        Text: ({title, type}) => (
            <Text style={[type === 'h1' && {fontSize: 24}]}>{title}</Text>
        ),
        TextField: ({label, value, onChange}) => (
            <View style={{marginBottom: 16}}>
                <Text style={{fontWeight: 'bold'}}>{label}</Text>
                <TextInput value={value} onCh={onChange} />
            </View>
        ),
   };
   ```

3. Render `FormEngine`, pass in the following

   - `fields` array
   - `formValue` object
   - `onChange` handler
   - `templates` (optional, fallback to default templates if not provided)

   ```
   class MyComponent extends React.Component {
       state = {
           value: {}
       }

       render() {
           <FormEngine
               fields={fields}
               formValue={this.state.value}
               onChange={value => this.setState({ value })}
               templates={templates}
           />
       }
   }
   ```

   The fields will be rendered with their corresponding value (find by "path").

4. When user interacts with the form, `onChange` handler will be called with
   ```
   {
       userEmail: 'user123@example.com'
   }
   ```
   Then `MyComponent` will be responsible for updating `this.state.value`, thereby triggering the `render` method again and specific fields will be re-rendered (React's one-way binding).

---
_Source: https://npm.io/package/react-native-form-engine · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._