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!