react-native-hook-form-builder
react-native-hook-form-builder copied to clipboard
davideddr
defaultValues?
Unfortunately i still have to finish the documentation. For the default values it is necessary to create a hash where in the keys there are the names of the fields of the form with the respective associated values. For example { email: '[email protected]', firstName: 'Mario' }
Ok. My bad, I didn’t notice the defaultValues parameter before. This is so easy. It’s hard to believe forms can be this simple
Hello, here's more for setup (all are text fields). Two issues, first the fields do not contain the default values and second, I cannot type in the fields (the first letter shows and then immediately disappears. I wonder if this is a concern with react-hook-form? I notice the react-hook-form package encourages the use of react-hook-form-input to handle react-native components. Do you think the could be causing the issue? Do you have an example of a use case where the form contains initial values?
export const TaskForm = ({
title,
description,
significance,
}) => {
const onSubmit = data => console.log(JSON.stringify(data, 2, ''));
const onChangeCustom = (field, value) => {
if (field === 'firstName') {
return value.toUpperCase();
}
return value;
};
return (
<View style={styles.container}>
<Form
formConfig={TaskFormConfig}
mode="onBlur"
onSubmit={onSubmit}
onChangeCustom={onChangeCustom}
customStyles={formStyle}
defaultValues={{
title,
description,
significance,
}}
/>
</View>
);
};
You added the default values in the right way. Have you tried to update the latest version? For second issue i don't think is related to input text component and react-hook-form-input is only suggested and i never tried it. Params you passed in props value are store in component state? Because if you don't update it, form component set every time the default value.
It looks like react-hook-form-input is mostly concerned with eliminating the need to register default values via useEffect. I believe I am using the latest version. If it's working for you, it should be working for me. I'll keep tinkering.
But first, can you expound on
Params you passed in props value are store in the component state? Because if you don't update it, form component set every time the default value.
I'm passing initial values via a graphql response.
export default ({componentId, id}) => {
const {todoItem, loading} = useTodoQuery.getTodoItemById({id});
const onSubmit = data => console.log(JSON.stringify(data, 2, ''));
const defaultValues = {
title: todoItem.title,
description: todoItem.description,
expirationDate: todoItem.expirationDate,
};
return (
<Form
formConfig={TaskFormConfig}
mode="onBlur"
onSubmit={onSubmit}
customStyles={formStyle}
defaultValues={defaultValues}
/>
);
};
Without default values, the form works fine. With default values, not so much.
Environment: Running on the device, in debug mode, via Xcode. "react": "16.9.0", "react-hook-form": "^3.28.9", "react-native": "0.61.2", "react-native-hook-form-builder": "^0.4.1",
I figured it out, maybe.
In InputText.js , you have,
....
<TextInput
...
value={defaultValue}
...
/>
I did this instead and it appears to have resolved the problem,
....
<TextInput
...
defaultValue={defaultValue}
...
/>
The first time I implemented the default value for text input I used that property but it didn't work as I expected. If it works properly for you then I'll try again 😄
You've tried to put the props value in the component state? For example if you have the username value coming for props and save it in the state, in onCustomChange function you have to set the new value.
For me this approach works correctly:
componentDidMount(){
const {username} = this.props;
this.setState({username});
}
onChangeCustom = (field, value) => {
if (field === 'username') {
this.setState({username: value});
}
return value;
}
render(){
const {username} = this.state;
return(
<Form
formConfig={FormConfig}
mode="onBlur"
onChangeCustom={this.onChangeCustom}
onSubmit={this.onSubmit}
customStyles={formStyle}
defaultValues={{username}}
/>
);
}
I tried that also. Note, I am using functional components and hooks. I still don't understand why you set the "value" field and not the defaultValue field on the TextInput.
