Im working on forms . but my data comes with api for dropdown the data . how to acheive data dynamically load on autocomplete option of form.

my api data is this type how to use option

api/Home/GetYear
Response: {   
 "StatusCode": 200,    
"Status": 1,    
"Message": "Success",    
"Response": [        
{           
 "Year_Range": "2016-2017"        
},        
{            
"Year_Range": "2017-2018"        
},        
{            
"Year_Range": "2018-2019"        
},        
{            
"Year_Range": "2019-2020"        
}    
]
}

Hi,
Input fields look right in the simulator but don't look right in the real device test flight version

.

Hey, I very much appreciate your work on this.

Is there any way to specify the width of a column, or is it just equal percents for the columns?

For example, I have City, State, Postal code columns. I'd like to give the city 50% and the state and postal 20% and 30% respectively.

Thanks!

I am trying to add a select type in my form and the TextInput appears but after clicking it I get a warning Unhandled Promise Rejection (id:0): and the items do not display. Any solution for the same!!
(Used the code from the Advance Examples from the documentation)

Thank you!!

I think the usage of as in Controller is deprecated.
https://react-hook-form.com/api#Controller suggests that For TypeScript user, if you are using custom component with required fields: onChange, onBlur, value, It will complain about missing declared field. Please use render instead of as.

Please change this to render instead of as, which is likely to take away this warning.

Also getting:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of Controller.
in AppAutocomplete (at FormBuilder.js:46)

Hi, great library, would like to know if its possible to use a date\time picker for a date field? and how?

large gap on IOS ^

and on the web (responsive mode chrome dev tools)

I tried to use marginTop: 0

<FormBuilder control={control} setFocus={setFocus} formConfigArray={[ { name: 'title', type: 'select', textInputProps: { label: 'Subject', left: <TextInput.Icon icon={'chevron-down'} />, style: { marginTop: 0 }, }, options: options, }, { name: 'description', type: 'text', textInputProps: { numberOfLines: 5, multiline: true, label: "What's going on", style: { height: 90, flexWrap: 'wrap' }, left: <TextInput.Icon icon={'pen'} />, }, rules: { required: { value: true, message: 'The details of your issue are required', }, }, }, ]} />

but that put the margin on top of the (unopened ) select box

I was trying to drill down to the

<div class="css-view-175oi2r r-position-u8s1d r-marginTop-p3zhlq r-minWidth-bgk546 r-width-1bkmhm5 r-pointerEvents-12vffkv" data-testid="menu-view" style="top: 317.5px; left: 50.75px;">

data-testid=menu-view element

which has a r-marginTop-p3zhlq class which is .r-marginTop-p3zhlq { margin-top: 56px; }

there's no id to hook into but I suppose worse comes to worse I could use this css to change it

div[data-testid^='menu-view'] { margin-top: 0; }

which works but... how to pass that into the component?

Firstly, thank you for building this! I've just begun my journey to learn RHF and I was not aware of this excellent helper!

I'm trying to build an address autocomplete using google place autocomplete. I saw this form builder has an autocomplete input type which is exactly what I need, as it is lacking in React Native Paper by default.

However, I saw the options are presented in an array that is part of the form config. Is it possible to define the array object elsewhere so this can be updated by an API call?

Also, I noticed in the advance example a JSX custom field. Is this an alternative option to implement the address autocomplete feature I'm looking for?

Thank you.

When I use "type: 'input'" and type something on the text box, I am getting error "Maximum call stack size exceeded"

formConfigArray={[
            {
              type: 'input',

              name: 'email',

              label: 'Email',

              rules: {
                required: {
                  value: true,

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

              textInputProps: {
                keyboardType: 'email-address',

                autoCapitalize: 'none',
              },
            },
]};

could you help me to avoid this error.

Is there a way I can achieve flex-direction 'row' for form inputs? (trying to place components side by side)

I was able to achieve the UI functionality by returning custom JSX for 1 field but I don't understand how to add validation to type: 'custom',. Can you please add validation in your "Remember me" button example or a different example for custom component validation?

https://github.com/fateh999/react-native-paper-form-builder/blob/d0487b3bc5ff9f36370b2f985587633b6222acee/src/Inputs/InputText.tsx#L32C57-L32C57

Hi Fateh, Thanks for this work. I'm wondering how I could add custom styles, I was hoping to be able to do something like

                        selectionColor='#F19336'
                        activeOutlineColor='#757575'
                        outlineStyle={{ borderRadius: 20, borderColor: '#fff' }}

These I am able to do while using the TextInput from react-native-paper. Thanks again

Is it possible to use https://react-hook-form.com/api/useform/getvalues with react-native-paper-form-builder for validation?
If so can it be included in documentation or examples?
Thank You!

hello, thank you for your attention, i have this:
const formArray = [
{
type: 'checkbox',
name: '1',
label: '1',
},
{
type: 'checkbox',
name: '2',
label: '2',
},
}

What i am looking for is, when check checkbox 2, i want to dinamically check or uncheck checkbox 1, i have seen from react hook form that i can change value of form with SetValues, but i dont know how to handle this unique change :v

PD: nice lib, very easy usage

Once again, I have to thank you for this!

Can I humbly request support for the 'number' type that is supported by the underlying react-hook-form? I may be missing a way to do this, but it sure would be helpful.

Thanks!

D

Whenever i try to clear the InputText field by simply holding remove button, after the button is released I get the following error:

Error: Text strings must be rendered within a <Text> component.

This error is located at:
    in InputText (at Logic.js:18)
    in Logic (at FormBuilder.js:89)
    in FormBuilder (at IngredientForm.tsx:97)

Hi there, I ❤️ your library. It's clean and easy to use.

Can you help me with understanding how to:

• Multi-select items in the Autocomplete list.
• Load dynamic data that will probably be paginated.
  here is the kind of implementation I am trying to do.
  I am also looking into react useQuery

appreciate your guidance. 😄

I wanted to close the modal after selecting a value in the AutoComplete input type to avoid having to click the action button in the top right corner.

Created a PR for that: #70

Please forgive me if this is obvious, but I cannot figure it out.

I'm using a hook to grab a user's profile from a database and I'd like to prefill the form from the returned data. How do I load that data into the form for the user to change?

Thanks for this, BTW... Great library.

Hi, I faced a problem where I cannot set a default value to the TextInput.

  <FormBuilder
        control={control}
        setFocus={setFocus}
        formConfigArray={[
          {
            name: 'text',
            type: 'text',
            defaultValue: 'erererere',   <-- not working
            rules: {
              required: {
                value: true,
                message: 'Name is required',
              },
            },
            textInputProps: {
             text: '123'
            },
          },
        ]}
      />

Any idea what I had done wrongly? Thanks in advanced!

Hi, how to achieve unselect operation in autocomplete? I've already tried to implement custom autocomplete where I am callingfield.onChange(null) which sets form-value correctly but the textinput value keeps showing the unchanged label from options.

Edit 1:
Tried also field.ref.current.clear() from custom autocomplete component but getting undefined function error

Edit 2:
field.ref.clear() seems to work but this method just makes the InputText empty without any placeholder and it keeps stuck in this state - I mean picking up another option does not change value in TextInput.

Thank you

I'm wondering if there's a way to create a custom validation where if it logic or value was true it would then return an error message.

For example: In a signup form, if the user has already used an email, I'd like to have a validation message below the email field.

Please let me know if this makes sense. thanks

Hi,
I use a select that load dynamic data (managed with useState()), such as:

{
   type: 'select',
   name: 'select',
   label: 'select',
   options: listselect,
    variant: 'flat'
},

If I change type 'select' with 'autocomplete', it's load correctly data.
It is normal?

Hi all,
I have 3 element of form.
The first element is autocomplete. When I select one element of autocomplete, I need to call a POST request for get data can will put in 2nd and 3th elements.
How I can execute this functions? Do you have a call onSelect or onChange?
My autocomplete fields is named prest.
I have try with this code:
useEffect(()=> { console.log(form.watch('prest')); },[]);
but it can't show the difference when I select different elements.

The drop-down menu overflows the screen when the list has several options, making the last ones impossible to select.
(It has been tested in Android with and without the bottom system navigation bar)

There is an example to easily reproduce this bug:

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 Test1Screen() {
  const {control, setFocus, handleSubmit} = 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
          control={control}
          setFocus={setFocus}
          formConfigArray={[
            {
              type: 'select',
              name: 'select',
              rules: {
                required: {
                  value: true,
                  message: 'Fruit is required',
                },
              },
              textInputProps: {
                label: 'Favorite fruit',
              },
              options: [
                {
                  value: 'Banana',
                  label: 'Banana',
                },
                {
                  value: 'Mango',
                  label: 'Mango',
                },
                {
                  value: 'Strawberry',
                  label: 'Strawberry',
                },
                {
                  value: 'Pineapple',
                  label: 'Pineapple',
                },
                {
                  value: 'Grape',
                  label: 'Grape',
                },
                {
                  value: 'Apple',
                  label: 'Apple',
                },
                {
                  value: 'Starfruit',
                  label: 'Starfruit',
                },
                {
                  value: 'Blackberry',
                  label: 'Blackberry',
                },
                {
                  value: 'Orange',
                  label: 'Orange',
                },
                {
                  value: 'Watermelon',
                  label: 'Watermelon',
                },
                {
                  value: 'Coconut',
                  label: 'Coconut',
                },
                {
                  value: 'Peach',
                  label: 'Peach',
                },
                {
                  value: 'Lemon',
                  label: 'Lemon',
                },
              ],
            },
          ]}
        />
        <Button
          mode={'contained'}
          onPress={handleSubmit((data: any) => {
            console.log('form data', data)
          })}>
          Submit
        </Button>
      </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 Test1Screen

The fully scrolled menu seems like:

Do you have any idea why installing 2.0.7 causes a different react-native version to get installed as dependency of rnp-form-builder? It does not happen for 2.0.6 or earlier.

$ npm ls react-native-paper
/home/rachman/test
└── [email protected] 

$ npm ls react-hook-form
/home/rachman/test
└── [email protected] 

$ npm ls react-native
/home/rachman/test
└── [email protected] 

$ npm install react-native-paper-form-builder
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.2 (node_modules/react-native-paper-form-builder/node_modules/jest-haste-map/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.2 (node_modules/metro-transform-worker/node_modules/jest-haste-map/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] requires a peer of react-native-vector-icons@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of file-loader@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]
added 153 packages from 169 contributors and audited 1176 packages in 14.236s

36 packages are looking for funding
  run `npm fund` for details

found 5 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

$ npm ls react-native
/home/rachman/test
├── [email protected] 
└─┬ [email protected]
  └── [email protected] 

Hi all,
I use autocomplete type and I'm very happy for works.
Exist a method to style the "Dropdown" windows opened when I press on the field?
Can I change text "Search"?
Sorry but I don't find a solution

I'm trying to run the example shown on the last section of README but when I input some text to the input fields, I get yellow warning and when I console.log my form.onSubmit values, the response I get it this

{
  "email": {
    "dispatchConfig": null,
    "_targetInst": null,
    "_dispatchListeners": null,
    "_dispatchInstances": null,
    "nativeEvent": null,
    "type": null,
    "target": null,
    "eventPhase": null,
    "bubbles": null,
    "cancelable": null,
    "defaultPrevented": null,
    "isTrusted": null
  },
  "password": {
    "dispatchConfig": null,
    "_targetInst": null,
    "_dispatchListeners": null,
    "_dispatchInstances": null,
    "nativeEvent": null,
    "type": null,
    "target": null,
    "eventPhase": null,
    "bubbles": null,
    "cancelable": null,
    "defaultPrevented": null,
    "isTrusted": null
  }
}

I'm expecting something like
{ "email": "[email protected]", "password": "123" }

Did I set it up wrongly?

"react-hook-form": "^6.8.3",
"react-native-paper-form-builder": "^1.0.9",

The 'select' type input does not have a property to trigger an event handler when it changes.
I have tried with onChange into textInputProps, but it won't trigger because this is actually a Menu item with a onDismiss void property that has not been linked to the InputSelect props.

<FormBuilder
  control={control}
  setFocus={setFocus}
  formConfigArray={[
    {
      name: 'favoriteFruit',
      type: 'select',
      textInputProps: {
        label: 'What is you favorite fruit?',
        onChange: fruit =>
          console.log('Your favorite fruit is: ', fruit),
      },
      options: [
        {
          value: 'mango',
          label: 'Mango',
        },
        {
          value: 'banana',
          label: 'Banana',
        },
        {
          value: 'strawberry',
          label: 'Strawberry',
        },
        {
          value: 'pineapple',
          label: 'Pineapple',
        },
        {value: 'other', label: 'Other'},
      ],
      rules: {
        required: {
          value: true,
          message: 'This field is required.',
        },
      },
    },
  ]}
/>

When I close the form, I get this error Error: Looks like you forgot to wrap your root component with `Provider` component from `react-native-paper`.

This error only occurs when I have the select type in my formConfigArray. Also, the dropdown doesn't work at all. Clicking on it doesn't do anything.

import { StyleSheet, Text, View, ScrollView,KeyboardAvoidingView } from 'react-native';
import React, { useContext, Fragment} from 'react';
import { FormBuilder } from 'react-native-paper-form-builder';
import { useForm } from 'react-hook-form';
import { Button, TextInput } from 'react-native-paper';
import { AuthContext } from '../contexts/AuthContext';
import { JobStatusContext } from '../contexts/JobStatusContext';



const JobStatusForm = ({navigation}) => {

    const {user} = useContext(AuthContext)
    const {createJobStatus, resumeList} = useContext(JobStatusContext)

    // const navigation = useNavigation();

    const {control, setFocus, handleSubmit} = useForm({
        defaultValues: {
            auth_ID: user.uid,
            companyName: '',
            position: '',
            status: '',
            note: '',
            resume: '',
        },
        mode: 'onChange',
    });

    return (
        <KeyboardAvoidingView
            behavior='padding'
            style = {styles.container}>
            <View style={styles.containerStyle}>
                <View style={styles.btnContainer}>
                    <Button
                        // mode={'contained'}
                        style={styles.btn}
                        onPress={()=>{
                            navigation.replace('JobStatus')
                        }}>
                        Cancel
                    </Button>
                    <Button
                        // mode={'contained'}
                        style={styles.btn}
                        onPress={handleSubmit((data) => {
                            createJobStatus(data)
                            navigation.replace('JobStatus')
                        //   console.log('form data', data);
                        })}>
                        Add
                    </Button>
                </View>
                <ScrollView contentContainerStyle={styles.scrollViewStyle}>
                    <FormBuilder
                        control={control}
                        setFocus={setFocus}
                        formConfigArray={[
                            
                            {
                                type: 'text',
                                name: 'companyName',
                                rules: {
                                    required: {
                                        value: true,
                                        message: 'Company name is required',
                                    },
                                },
                                textInputProps: {
                                    label: 'Company Name',
                                },
                            },
                            {
                                type: 'text',
                                name: 'position',
                                rules: {
                                    required: {
                                        value: true,
                                        message: 'Position is required',
                                    },
                                },
                                textInputProps: {
                                    label: 'Position',
                                },
                            },
                            {
                                type: 'text',
                                name: 'status',
                                rules: {
                                    required: {
                                        value: true,
                                        message: 'Status is required',
                                    },
                                },
                                textInputProps: {
                                    label: 'Status',
                                },
                                
                            },
                            {
                                type: 'text',
                                name: 'note',
                                textInputProps: {
                                    label: 'Note',
                                },
                            },
                            {
                                type: 'select',
                                name: 'resume',
                                rules: {
                                    required: {
                                        value: true,
                                    },
                                },
                                textInputProps: {
                                    label: 'Resume',
                                },
                                options: [
                                    {
                                        value: 'test1.pdf',
                                        lable:'test1.pdf'
                                    },
                                    {
                                        value:'test2.pdf',
                                        lable:'test2.pdf'
                                    },
                                    {
                                        value:'test3.pdf',
                                        lable:'test3.pdf'
                                    }
                                ]
                            },
                        ]}
                    />
                </ScrollView>
            </View>
        </KeyboardAvoidingView>
    );
}

export default JobStatusForm

const styles = StyleSheet.create({
    container: {
        flex:0.60,
        alignContent: "center",
        justifyContent: "center",
        paddingHorizontal:25
      },
    btn:{
        flexDirection:'row-reverse',
        marginRight: 5,
        alignItems:'flex-end',

    },
    btnContainer:{
        flexDirection:'row',
        justifyContent:'space-between'
    }

    // containerStyle: {
    //     flex: 1,
    //   },
    //   scrollViewStyle: {
    //     flex: 1,
    //     padding: 15,
    //     justifyContent: 'center',
    //   },
    //   headingStyle: {
    //     fontSize: 30,
    //     textAlign: 'center',
    //     marginBottom: 40,
    //   },
});

I wish to dynamically configure the visibility or disability of a particular set of fields based on the current value of some other field.

For e.g. if I am asking someone whether they hold a driving license in a checkbox, depending on this input I might want to enable/ make visible a text input that asks the user to enter their Driver License.

I'm trying to get the AutoComplete to work by itself but I have an issue here:

  useEffect(() => {
    if (watch(name) === '') {
      return setDisplayValue('');
    } else {
      triggerValidation(name);
    }
    const activeOption = options.find((option: Option) => option.value === watch(name));
    setDisplayValue(activeOption?.label);
  }, [watch(name)]);

The useEffect never updates the displayValue, so the original textinput is never updated and stays empty. Not sure what I'm doing wrong, other than I didn't supply a default value. However even tapping an option doesn't do anything.

I have even tried to do a simple useEffect:

 useEffect(() => {
    setDisplayValue('test');
  }, []);

regardless of that the component does nothing and does not show the state.

Here is the component:
<Input editable={false} error={error} pointerEvents={'none'} {...props} value={displayValue} />

If I change value='blahblahlbah' then the component will show that string. No clue what's going on.

how to select value of dropdown to using fetch api to show second drop down