Wondering what’s next for npm?Check out our public roadmap! »

    react-native-paper-form-builder
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.9 • Public • Published

    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 :

    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
    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

    Install

    npm i react-native-paper-form-builder

    DownloadsWeekly Downloads

    83

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    20.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar