React Native Paper Form Builder - Automate your forms

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: 'Email 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

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
	}

1. 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
	}

1. Autocomplete

{
		type:  'autocomplete',
		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
	}

1. 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
	}

1. 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
	}

1. 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
	}