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