react-native-paper-form-builder

Form Builder written in typescript with inbuilt Validation, dropdown, autocomplete powered by react-hook-form & react-native-paper.

Dependencies to Install :

• react-native-paper

• react-hook-form

• react-native-vector-icons Follow the configuration step of react-native-vector-icons as provided in the docs.

Demo :

Steps to install :

npm i react-native-paper-form-builder

import FormBuilder from 'react-native-paper-form-builder';

Usage :

import React from 'react';

import {View, StyleSheet, ScrollView, Text} from 'react-native';

import FormBuilder from 'react-native-paper-form-builder';

import {useForm} from 'react-hook-form';

import {Button} from 'react-native-paper';

function BasicExample() {
  const form = useForm({
    defaultValues: {
      email: '',

      password: '',
    },

    mode: 'onChange',
  });

  return (
    <View style={styles.containerStyle}>
      <ScrollView contentContainerStyle={styles.scrollViewStyle}>
        <Text style={styles.headingStyle}>Form Builder Basic Demo</Text>

        <FormBuilder
          form={form}
          formConfigArray={[
            {
              type: 'input',

              name: 'email',

              label: 'Email',

              rules: {
                required: {
                  value: true,

                  message: 'Email is required',
                },
              },

              textInputProps: {
                keyboardType: 'email-address',

                autoCapitalize: 'none',
              },
            },

            {
              type: 'input',

              name: 'password',

              label: 'Password',

              rules: {
                required: {
                  value: true,

                  message: 'Password is required',
                },
              },

              textInputProps: {
                secureTextEntry: true,
              },
            },
          ]}>
          <Button
            mode={'contained'}
            onPress={form.handleSubmit((data: any) => {
              console.log('form data', data);
            })}>
            Submit
          </Button>
        </FormBuilder>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
  },

  scrollViewStyle: {
    flex: 1,

    padding: 15,

    justifyContent: 'center',
  },

  headingStyle: {
    fontSize: 30,

    textAlign: 'center',

    marginBottom: 40,
  },
});

export default BasicExample;

For More Advanced Example as in the Demo check App.tsx

Props:

| Name | Description | | --------------- | -------------------------------------------------------------------------------------------- | | formConfigArray | Array of Input Configs which are specified below | | form | useForm hook value | | children | (Optional) React Component For Showing Buttons or any other component at the end of the form | | children | Optional React Component For Showing Buttons or any other component at the end of the form | | CustomInput | (Optional) Custom React Input in place of react native paper default input | | helperTextStyle | (Optional) Bottom Helper Text Style | | inputViewStyle | (Optional) Container Style wrapping text input |

How to generate different input types:

1. TextInput

{

type: 'input',

name: string, // Same as defined in default values

label?: string,

variant?:  'outlined'  |  'flat',

rules?: ValidationOptions,// Validation Rules of Controller component from React Hook Form

textInputProps?: React.ComponentProps<typeof TextInput>  // Props of React Native Paper TextInput

}

2. Select

{

type: 'select',

name: string, // Same as defined in default values

options: Array<{ value: string | number,label: string }>,

label?: string,

variant?:  'outlined'  |  'flat',

rules?: ValidationOptions,// Validation Rules of Controller component from React Hook Form

}

3. Autocomplete

{

type: 'autocomplete',

name: string, // Same as defined in default values

options: Array<{ value: string | number,label: string }>,

label?: string,

variant?:  'outlined'  |  'flat',

loadOptions?: any, // Pass a function that reloads options in case they fail to update

rules?: ValidationOptions,// Validation Rules of Controller component from React Hook Form

}

4. Checkbox

{

type: 'checkbox',

name: string, // Same as defined in default values

label?: string | React.ReactNode,

rules?: ValidationOptions,// Validation Rules of Controller component from React Hook Form

}

5. Radio

{

type: 'radio',

name: string, // Same as defined in default values

label?: string | React.ReactNode,

rules?: ValidationOptions,// Validation Rules of Controller component from React Hook Form

}

6. Switch

{

type: 'switch',

name: string, // Same as defined in default values

label?: string | React.ReactNode,

rules?: ValidationOptions,// Validation Rules of Controller component from React Hook Form

}

7. Custom

{

type: 'custom',

name: string, // Same as defined in default values

jsx?: React.ReactNode,

rules?: ValidationOptions,// Validation Rules of Controller component from React Hook Form

}

Simple Example of Custom Input:

function SimpleCustomTextInput(props: TextInputProps) {
  const {error, label, style} = props;

  return (
    <TextInput
      placeholder={label}
      {...props}
      style={{
        color: 'black',

        height: 56,

        borderBottomWidth: 2,

        borderBottomColor: error ? 'red' : 'grey',

        ...style,
      }}
    />
  );
}

TODO :

• ~~Modal Autocomplete~~

• ~~Custom Input~~

• ~~FlatList Integration in Autocomplete~~

• ~~Refresh handler in Autocomplete~~

• Input Icons

• Export Components like AutoComplete and Select