react-native-form-builder

A simple and fully customizable React Native component that help to desing form.

• Form is displayed inside of a customizable ScrollView.
• Customizable buttons and controlled function of form are displayed at the bottom of the Form.

Screenshot 1 | Screenshot 2 | Screenshot 3 |Screenshot 4 |Screenshot 5 | :-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------: | | | |

Installation

If using yarn:

yarn add react-native-form-builder-pro

If using npm:

npm i react-native-form-builder-pro

Dependencies

    "expo-document-picker",
    "expo-image-manipulator",
    "expo-image-picker",
    "moment",
    "native-base",
    "prop-types",
    "react-native-modal-datetime-picker",
    "react-native-select-two"

Usage

import { Builder, FormEvents } from "react-native-form-builder-pro";

Simply place a <Builder /> tag with required parameter.

<View style={{flex: 1}}>
    <Builder
        fields={this.props.fields}
        dropdowns={this.props.dropdowns}
        onFormEvent={this.onFormEvent.bind(this, "form")}
        values={this.props.values}
        isFileUploading={this.props.fetching}
        onDatePickerPress={(uid, showTime) =>
        this.props.toggleDateTimePicker(
          uid,
          showTime ? 'datetime' : 'date'
        )}
      formValidationErrors={
        this.props.formValidationErrors
      }
      submitButtonStyle={styles.submitButtonStyle}
      submitButtonText={this.objectId ? 'Update' : 'Submit' }
    />
    <DateTimePicker
        isVisible={true} 
        onConfirm={date => {
            console.log(date)
        }}
        onCancel={() => console.log("cancel")}
        mode={"date"}
        minuteInterval={30}
    />
</View>

Documentation

Form Builder Props

| Name | Description | Required | Type | |---------------------------|------------------------------------------|-------------|---------| | fields | Input that want to be display | Yes | Array | | dropdowns | Related select box | No | Object | values | Prefilled values | No | Array | | isFileUploading | Loading when file is uploading | No | Boolean | | submitButtonStyle | Submit Button Styling | No | Style | | submitButtonText | Submit Button Text | No | String |

Support Field Format

"fields": [
    {
      "label": "Qns",
      "name": "form_name_1",
      "options": [
        Object
      ],
      "rules": "required",
      "type": "select_multiple"
    },
    {
      "label": "Name",
      "name": "form_name_2",
      "rules": "required",
      "type": "text"
    },
    {
      "label": "Discription",
      "name": "form_name_3",
      "rules": "required",
      "type": "text_area"
    },
    {
      "label": "photo",
      "name": "form_name_4",
      "rules": "required",
      "type": "image"
    },
    {
      "label": "Documents",
      "name": "form_name_5",
      "rules": "required",
      "type": "file"
    },
    {
      "label": "Mobile No",
      "name": "form_name_6",
      "rules": "required",
      "type": "number"
    },
    {
      "label": "Date of Birth",
      "name": "form_name_7",
      "rules": "required",
      "type": "date"
    },
    {
      "label": "What is the best options",
      "name": "form_name_8",
      "options": [
        Object
      ],
      "rules": "required",
      "type": "checkbox"
    },
    {
      "label": "What is the correct answer?",
      "name": "form_name_9",
      "options": [
        Object
      ],
      "rules": "required",
      "type": "multiple_checkbox"
    },
    {
      "label": "Which one is red color?",
      "name": "form_name_10",
      "options": [
        Object
      ],
      "rules": "required",
      "type": "select_dropdown"
    }
  ]

For Populate/Prefilled Value Example

Key name will be fields name as above :
 {
  "form_name_1": [0:A], //array
  "form_name_2": "Yogesh", // string
  "form_name_3": "Yogesh", // string
  "form_name_4": [{
                download_link:uploads/1623238864Adobe Scan 09 Jan 2021 (1).pdf
                original_name:Adobe Scan 09 Jan 2021 (1).pdf},
                {
                download_link:uploads/1623571260Adobe Scan 09 Jan 2021 (1).pdf
                original_name:Adobe Scan 09 Jan 2022 (1).pdf
                }], // array object
  "form_name_5": "download_link:uploads/1623571260Adobe Scan 09 Jan 2021 (1).pdf", // string
  "form_name_6": "9999332859", // string
  "form_name_7": "2021-06-09", // string
  "form_name_8": "option2", // string
  "form_name_9": [0:H,1:K], // array
  "form_name_10": "Red" // string
}

Form Event

FormEvents = {
  OnValueUpdate: "on_value_update",
  OnFileUploadRequest: "on_file_upload_request",
  SubmitRequest: "on_submit_button_click",
  CancelRequest: "on_cancel_button_click",
  ErrorInForm: "error_in_form",
  OnActionButtonClick: "on_action_button_click"
};

Form Action Control Function

onFormEvent = (formType, eventType, args) => {
    switch (eventType) {
      case FormEvents.OnValueUpdate:
        console.log(FormEvents.OnValueUpdate);
        break;
      case FormEvents.ErrorInForm:
        console.log(args.err);
        break;
      case FormEvents.OnActionButtonClick:
        console.log("action button", args.action);
        break;
      case FormEvents.SubmitRequest:
        console.log("Handle Submit Request");
        break;
      case FormEvents.CancelRequest:
        console.log('Handle Cancel Button Request');
        break;
    }
  };

Author

Yogesh Chauhan