react-native-form-builder

A basic form builder for react-native apps. Using a user defined template, it renders the required form elements.

Installation

Via npm

$ npm i @coffeebeanslabs/react-native-form-builder

Via yarn

$ yarn add @coffeebeanslabs/react-native-form-builder

Usage

import React from 'react';
import {
  StyleSheet,
  View
} from 'react-native';
import DynamicForm from '@coffeebeanslabs/react-native-form-builder';

function Example(props) {
  const formTemplate = {
    data: [
      {
        component: 'image',
        field_name: 'headerImage',
        meta: {
          label: 'alt text for header image',
          source: 'https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg'
        },
        style: {
          width: 200,
          height: 200
        }
      },
      {
        component: 'input-text',
        field_name: 'name',
        is_mandatory: 'true',
        meta: {
          label: 'Name',
          placeholder: 'Enter name..'
        }
      },
      {
        component: 'input-date',
        field_name: 'birthDate',
        is_mandatory: 'true',
        meta: {
          title: 'Birth Date'
        }
      },
      {
        component: 'input-radio',
        field_name: 'gender',
        is_mandatory: 'true',
        meta: {
          text: 'Your Gender',
          data: [
            {
              label: 'Male',
              value: 'male'
            },
            {
              label: 'Female',
              value: 'female'
            }
          ]
        }
      }
    ]
  }

  const onSubmit = formFields => {
    // Actions on submit button click.
    console.log('Form submitted with fields: ', formFields);
  }

  return (
    <View style={styles.container}>
      <DynamicForm formTemplate={formTemplate} onSubmit={onSubmit} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default Example;

Props

The component takes following props:

| Prop | Required | Type | Purpose | | ------------|-----------| -------| -------| | formTemplate | Yes | Object | A template representing form components to render (see Form Template for more info) | | onSubmit | Yes | Function | Callback method when the user clicks on submit button |

Form Template

Following properties are used in every template object representing a form element to be rendered: | Property | Required | Type | Purpose | | ------------|-----------| -------| -------| | component | Yes | String | The name of form component to be rendered (check below for list). | | index | Yes | Number | The placement index of the form component. | | field_name | Yes | String | Name of the form field. | | is_mandatory | No | String | Specifies if a form field is to be mandatorily filled. Until all mandatory fields are not provided by the user, the Submit button remains disabled| | meta | Yes | Object | Holds component specific props like label, placeholder, value etc. | | style | No | Object | Custom styles to be applied (Not supported for all components)|

Following form components are available:

• image
• input-checkbox
• input-date
• input-dropdown
• input-radio
• input-text (also supports multiline)
• rating
• read-only-text

Checkout the example here.

Feedback

Feel free to open a new Issue with a feature request or report a bug or submit a PR.

Thank you!