React Native Hook Form Builder

Simple and configurable form builder with react native components build with:

Getting started

yarn add react-native-hook-form-builder

or

npm install react-native-hook-form-builder

Follow the installation instructions of the dependencies:

• Datetimepicker
• React Native Vector Icons

General Usage

import Form from "react-native-hook-form-builder";

or

const Form = require("react-native-hook-form-builder");

Base usage

import React from "react";
import { Alert, Text, SafeAreaView, ScrollView } from "react-native";
import Form from "react-native-hook-form-builder";
// JSON WITH FORM CONFIGURATION
import appFormConfig from "../../utils/appFormConfig.json";
// CUSTOM FORM STYLE
import formStyle from "../../utils/formStyle";

export default class App extends React.Component {
  onSubmit = data => Alert.alert("Form Data", JSON.stringify(data));

  onChangeCustom = (field, value) => {
    if (field === "firstName") {
      return value.toUpperCase();
    }
    return value;
  };

  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <ScrollView>
          <Text>Form Builder!</Text>
          <Form
            formConfig={appFormConfig}
            mode="onBlur"
            onSubmit={this.onSubmit}
            onChangeCustom={this.onChangeCustom}
            customStyles={formStyle}
          />
        </ScrollView>
      </SafeAreaView>
    );
  }
}

Props

formConfig (required)

JSON file for form configuration retrieved by a static file or via API.

onSubmit (required)

This function is called when submited the form.

mode

Event to trigger form submit. Possible values are:

• "onSubmit"
• "onBlur"
• "onChange"

You can find more informations about the React Hook Form configuration at this page.

onChangeCustom

This function is called before set value of the field.

customStyles

JSON file with custom style rules.

In lib/utils/formStyle.js file there is the list with the possible values to override.

You can override a single field style by adding configuration field key at the end of the name.

For example if you have a field with name email and you want to change the style of input text only for this element, in the custom styles file you can add inputTextEmail key with custom style rules.

const formStyle = {
  inputText: {
    color: "red",
    marginBottom: 10
  }
};

export default formStyle;

currentLocale

App current locale.

Default value is device language.

customIcon

Custom icon component.

For example, if you want to use FontAwesome5 instead of MaterialCommunityIcons,

import Icon from 'react-native-vector-icons/FontAwesome5'

<Form
...
...
customIcon={Icon}
showPasswordIconName="eye"
hidePasswordIconName="eye-slash"
/>

Additionally since we expect MaterialCommunityIcons as default, showPasswordIcon and hidePasswordIcon may have different names, thus to override those, you can specify the same to showPasswordIconName and hidePasswordIconName props.

defaultValues

Object with default values.

The keys are the name of fields in configuration file.

{
  email: '[email protected]',
  firstName: 'Mario',
  age: 21,
  privacy: true,
}

defaultSelectValues

Object with default array of values for the select.

You have to remove items key from configuration of the field.

The keys are the name of fields in configuration file.

{
  eventDate: [
    {label: 'Day 1', value: 18},
    {label: 'Day 2', value: 19},
    {label: 'Day 3', value: 20},
    {label: 'Day 4', value: 21},
  ]
}

defaultTextModals

Object with default string for text of the modal.

You have to remove text key from configuration of the field.

The keys are the name of fields in configuration file.

{
  privacy: "Static text"
}

Configuration

Supported type of fileds:

• email
• password
• text input
• date
• select
• checkbox
• radio
• only text (for disclaimer or privacy policy text)

You can dinamicaly show/hide fields via showIf property.

In the value you have to add the name of the field you want to watch and the corrispondent value. Es="showIf": "terms-and-conditions=true" to show a field when terms and conditions are accepted.

Example

{
  "showSubmit": true,
  "submitText": {
    "it": "Invia",
    "en": "Send",
    "default": "Submit"
  },
  "groups": [
    {
      "label": {
        "it": "Dati utente",
        "en": "User data",
        "default": "User data"
      },
      "children": [
        {
          "type": "email",
          "name": "email",
          "autoCompleteType": "email",
          "keyboardType": "email-address",
          "textContentType": "emailAddress",
          "changeBackgroundOnFocus": true,
          "required": false,
          "icon": "at",
          "label": {
            "it": "email",
            "en": "email",
            "default": "email"
          },
          "placeholder": {
            "it": "Inserisci la tua email",
            "en": "Insert your email",
            "default": "Insert your email"
          },
          "validations": [
            { "name": "string" },
            { "name": "required", "params": { "message": "Test" } },
            { "name": "email" }
          ],
          "showIf": "terms-and-conditions=true"
        },
        {
          "type": "text",
          "name": "username",
          "autoCompleteType": "email",
          "keyboardType": "email-address",
          "textContentType": "emailAddress",
          "required": false,
          "iconLeft": "at",
          "label": {
            "it": "Username",
            "en": "Username",
            "default": "Username"
          },
          "placeholder": {
            "it": "Username placeholder",
            "en": "Username placeholder",
            "default": "Username placeholder"
          },
          "validations": [
            { "name": "string" },
            { "name": "required", "params": { "message": "Test" } },
            { "name": "email" }
          ]
        },
        {
          "type": "password",
          "name": "password",
          "autoCompleteType": "password",
          "textContentType": "password",
          "secureTextEntry": true,
          "required": false,
          "iconLeft": "lock",
          "label": {
            "it": "Password",
            "en": "Password",
            "default": "Password"
          },
          "placeholder": {
            "it": "Password",
            "en": "Password",
            "default": "Password"
          },
          "validations": [
            { "name": "string" },
            { "name": "required" },
            { "name": "min", "params": { "limit": 6 } }
          ]
        },
        {
          "type": "password",
          "name": "password-confirmation",
          "autoCompleteType": "password",
          "textContentType": "password",
          "secureTextEntry": true,
          "required": false,
          "iconLeft": "lock",
          "label": {
            "it": "Password Confirmation",
            "en": "Password Confirmation",
            "default": "Password Confirmation"
          },
          "passwordConfirmationMessage": {
            "it": "Le password devono coincidere",
            "en": "Passwords must match",
            "default": "Passwords must match"
          },
          "placeholder": {
            "it": "Password Confirmation",
            "en": "Password Confirmation",
            "default": "Password Confirmation"
          },
          "validations": [
            { "name": "string" },
            { "name": "required" },
            { "name": "min", "params": { "limit": 6 } }
          ]
        }
      ]
    },
    {
      "label": {
        "it": "Informazioi personali",
        "en": "Informazioi personali",
        "default": "Informazioi personali"
      },
      "children": [
        {
          "type": "text",
          "name": "firstName",
          "required": false,
          "label": {
            "it": "Nome",
            "en": "First name",
            "default": "First name"
          },
          "placeholder": {
            "it": "Nome",
            "en": "First name",
            "default": "First name"
          }
        },
        {
          "type": "text",
          "name": "lastName",
          "required": false,
          "label": {
            "it": "Cognome",
            "en": "Last name",
            "default": "Last name"
          },
          "placeholder": {
            "it": "Cognome",
            "en": "Last name",
            "default": "Last name"
          }
        },
        {
          "type": "date",
          "name": "birthdayDate",
          "required": false,
          "label": {
            "it": "Data di nascita",
            "en": "Birthday date",
            "default": "Birthday date"
          },
          "placeholder": {
            "it": "Data di nascita",
            "en": "Birthday date",
            "default": "Birthday date"
          },
          "minimumDate": "2019-10-25",
          "maximumDate": "2019-10-30",
          "iconRight": "arrow-down",
          "iconSize": 15,
          "iconColor": "#000"
        },
        {
          "type": "select",
          "name": "age",
          "required": false,
          "label": {
            "it": "Etá",
            "en": "Age",
            "default": "Age"
          },
          "confirmLabel": {
            "it": "Conferma",
            "en": "Done",
            "default": "Done"
          },
          "placeholder": {
            "it": "Etá",
            "en": "Age",
            "default": "Age"
          },
          "items": [
            { "label": "18", "value": 18 },
            { "label": "19", "value": 19 },
            { "label": "20", "value": 20 },
            { "label": "21", "value": 21 },
            { "label": "22", "value": 22 }
          ],
          "validations": [
            { "name": "string" },
            { "name": "required" }
          ],
          "iconRight": "arrow-down",
          "iconSize": 15,
          "iconColor": "#000"
        },
        {
          "type": "select",
          "name": "sex",
          "required": false,
          "label": {
            "it": "Sesso",
            "en": "Sex",
            "default": "Sex"
          },
          "confirmLabel": {
            "it": "Conferma",
            "en": "Done",
            "default": "Done"
          },
          "placeholder": {
            "it": "Sesso",
            "en": "Sex",
            "default": "Sex"
          },
          "items": [
            { "label": "Male", "value": "m" },
            { "label": "Female", "value": "f" },
            { "label": "Other", "value": "o" }
          ]
        },
        {
          "type": "checkbox",
          "name": "privacy",
          "required": true,
          "openModal": true,
          "label": {
            "it": "Privacy",
            "en": "Privacy",
            "default": "Privacy"
          },
          "text": "Privacy text",
          "buttonAcceptLabel": "Accept",
          "buttonDeclineLabel": "Decline",
          "validations": [
            { "name": "bool" },
            { "name": "required" }
          ]
        },
        {
          "type": "checkbox",
          "name": "terms-and-conditions",
          "required": true,
          "label": {
            "it": "Terms",
            "en": "Terms",
            "default": "Terms"
          },
          "text": "Terms text",
          "buttonAcceptLabel": "Accept",
          "buttonDeclineLabel": "Decline",
          "validations": [
            { "name": "bool" },
            { "name": "required" }
          ]
        },
        {
          "type": "radio",
          "name": "newsletter",
          "label": {
            "it": "Newsletter",
            "en": "Newsletter",
            "default": "Newsletter"
          },
          "items": [
            { "label": "Yes", "value": true },
            { "label": "No", "value": false }
          ]
        }
      ]
    }
  ]
}

Contributors