React Native Form Builder

Package to create form using JSON schema

Installation

Install react native form builder

npm i --save stark-react-native-form-builder

Dependencies

Install dependent libraries

• native-base ^3.0.2
• react-native-modal-datetime-picker
• @react-native-community/datetimepicker
• simple-react-validator
• react-native-step-indicator
• react-native-image-crop-picker
• react-native-multiple-select
• react-native-google-places-autocomplete

This package is totally dependant on Native Base ^3.0.0

npm i --save native-base react-native-modal-datetime-picker @react-native-community/datetimepicker  simple-react-validator react-native-step-indicator react-native-image-crop-picker react-native-multiple-select react-native-google-places-autocomplete

Usage

Import this in your screen/component.

import FormBuilder from 'stark-react-native-form-builder';
import FormSchema from './formschema.json';

Use this in render / return

// some code


render() {
    return (
      <FormBuilder
        containerStyle={{}}
        formHeaderStyle={{}}
        headerTextStyle={{}}
        formSections={FormSections}
        formHeading="Registration"
        onFormSubmit={(formValues) => { console.log(formValues); }}
        options={options}
        callbacks={{}}
        defaultFormValues={defaultValues}
        currentUser={currentUser}
        submitBtnText=""
        showResetBtn
        resetBtnText="Clear"
        btnContainerStyle={{}}
        submitBtnStyle={{}}
        resetBtnStyle={{}}
        submitBtnTextStyle={{}}
        resetBtnTextStyle={{}}
        onFormReset={() => {
          console.log('form reset callback')
        }}
        fieldProps={{}}
        sectionProps={{}}
        isStepForm
        stepFormProps={{
          nextBtnText: 'Next >',
          prevBtnText: '< Prev',
          stepContainer: {},
          // renderLabel: (some) => { console.log('some', some); }
          // renderStepIndicator: (some) => { console.log('some', some); }
          customStyles: {},
        }}
      />
    );
}

Configurable props

• containerStyle - Style object for form container

• formHeaderStyle - Style object for form heading

• headerTextStyle - Style object for form heading text

• formHeading - Heading for form

• formSections - JSON form schema for form

• onFormSubmit - Callback for form submission, gives all form filled values NOTE: For image it will give you following response [{ uri: '', width: 10, height: 10, mime: image/*, data: imageData, sourceURL: '', fileName: '', }]

• options - Pass options dynamically to Select box and Checkboxes

  options: {{
      subjects: [{value: 'maths', label: 'Maths'}, {value: 'chem', label: 'Chemistry'}],
  }}

  NOTE: Key must be same as input value, then only it'll patch the values

• callbacks - On change callbacks for input type select change

  callbacks: {{
      callback1: (value) => { console.log(value); }
  }}

• defaultFormValues - This will be used to set default values to form.

  defaultFormValues: {{
      name: 'Sample Name',
      email: '[email protected]'
  }}

  NOTE: Key must be same as input value, then only it'll patch values

• apiKey - Google Places API required for type placesearch . For more info click here

• currentUser - Current users role id, it'll be used to restrict users to fill particular fields.

• submitBtnText - To change submit button text

• showResetBtn - Boolean value to show form reset button

• resetBtnText - To change reset button text

• onFormReset - Callback on reset form

• btnContainerStyle - Submit and reset buttons container style object to add custom styling

• submitBtnStyle - Submit button style object

• resetBtnStyle - Reset button style object

• submitBtnTextStyle - Submit button text style object

• resetBtnTextStyle - Reset button text style object

• fieldProps - Props object for input fields

  • containerStyle - Style object for input field container
  • labelStyle - Style object for input label
    • style - Style object for Item component You can pass other supportive props of Item for eg. regular, rounded
  • inputStyle - Style object for input element
  • errorStyle - Style object for error
  • iconStyle - Style object for icon
  • icon - Icon for input
  • inputProps - You can pass input props by this props. For placesearch field you can check props here

  fieldProps={{
    email: {
      containerStyle: {},
      labelStyle: {},
      inputStyle: {
        color: 'red'
      },
      errorStyle: {},
      icon: <Entypo name="lock" />,
      inputProps: {}
    }
  }}

  NOTE: Key must be same as input value, then only it'll patch the props

• sectionProps - Props object for sections

  • containerStyle - Style object for section
  • titleContainerStyle - Style object for title container
  • titleTextStyle - Style object for title text

  sectionProps={{
    userinfo: {
      containerStyle: {
        marginTop: 10
      },
      titleContainerStyle: {},
      titleTextStyle: {
        fontSize: 20
      }
    }
  }}

  NOTE: Key must be same as section name, then only it'll patch the props

• isStepForm - Boolean value to state whether its step form or not

• stepFormProps - (Optional)These are props for step form

  • nextBtnText - Text on next button
  • prevBtnText - Text on previous button
  • stepContainer - Style object for step indicator container
  • renderLabel - Callback to render label
  • renderStepIndicator - Callback to render step indicator
  • customStyles - Custom styles supported by react-native-step-indicator

  stepFormProps={{
    nextBtnText: 'Next >',
    prevBtnText: '< Prev',
    stepContainer: {},
    renderLabel: (some) => { console.log('some', some); }
    renderStepIndicator: (some) => { console.log('some', some); }
    customStyles: {},
  }}

JSON Schema

[
    {
        "name": "userinfo",
        "sectionTitle": "User info",
        "displaySection": true,
        "displaySectionTitle": true,
        "fields": [
            {
                "name": "name",
                "type": "text",
                "label": "Name",
                "placeholder": "",
                "validations": [
                    {
                        "type": "required",
                        "applyWhen": [],
                        "applyWhenRelation": "OR"
                    }
                ],
                "displayWhen": {
                    "conditions": [
                        {
                            "name": "gender",
                            "value": "female",
                            "condition": "=="
                        }
                    ],
                    "displayWhenRelation": "AND"
                },
                "disabled": false,
                "variant": "outline",
                "inputProps": {
                  "secureTextEntry": true
                },
                "allowedUsers": []
            }
        ]
    }
]

You can have multiple sections in schema.

Configurable JSON schema

• sectionTitle - Title of section
• containerClass - Class for section container
• displaySection - (Boolean value) whether to display section or not
• displaySectionTitle - (Boolean value) whether to display section title or not
• sectionLayout - Layout of sections. Allowed types '1column', '2column'.
• fields - Array of objects
  • name - Input name
  • type - Input type. Available type text, email, number, select, date, textarea, radio, checkbox, addmore, placesearch
  • label - Label for input field
  • placeholder - Placeholder for input type
  • validations - Validations for input element. Its array of objects
    • type - Type from react-simple-validator npm
    • applyWhen - Array of objects, conditions to apply validations
      • name - Input name
      • value - That input value
      • condition - Condition for name and value. Supported conditions are '==', '!=', '<=', '>=', '<', '>', 'empty', '!empty'
    • applyWhenRelation - 'AND'|'OR'. Relation for applyWhen conditions.
  • options - Array of objects. Options for 'radio','select','checkbox'.

    [{label: 'Option 1', value: 'option1'}, {label: 'Option 2', value: 'option2'}]

  • displayWhen - Object. This will be used for hide/show form element for particular conditions
    • conditions - Array of objects, conditions to apply validations
      • name - Input name
      • value - That input value
      • condition - Condition for name and value. Supported conditions are '==', '!=', '<=', '>=', '<', '>', 'empty', '!empty'
    • displayWhenRelation - 'AND'|'OR'. Relation for conditions.
  • variant - Variant for input fields.
  • disabled - To disable input field.
  • maxDateSelector - Form element name. If current type is date and to set maximum date this will be used
  • minDateSelector - Form element name. If current type is date and to set minimum date this will be used
  • callback - callback key. This will be called onchange of element
  • fields - If type is selected as "addmore" then to add fields under that input this options will be used.
  • fieldLayout - If type is selected as "addmore" then to set layout of add more section. Allowed types '1column', '2column'.
  • sectionClass - If type is selected as "addmore" then to add class for that section
  • inputProps - Extra props for input element e.g. "secureTextEntry": true.
  • itemProps - Extra props for Item component e.g. "regular": true.
  • fieldsToReset - Array of field names which values need to reset on change of select dropdown