1.0.12 • Published 3 years ago

isatech-react-native-paper-form-builder v1.0.12

Weekly downloads
1
License
MIT
Repository
github
Last release
3 years ago

react-native-paper-form-builder

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

NPM

Dependencies to Install :

Demo :

npm.io

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:

NameDescription
formConfigArrayArray of Input Configs which are specified below
formuseForm hook value
children(Optional) React Component For Showing Buttons or any other component at the end of the formchildrenOptional 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

}
  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',

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

}
  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

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