Reputation: 961
My basic forms work fine, however, as there are some caveats with react-native, I could use some help in knowing if the issue is how I am using formik, or using it with react-native.
In this particular form, when I attempt to fill in a picker in react-native using formik, the form resets the picker to the original value immediately after I select an option. I have stripped the code down, as I feel someone should have the answer without a lot of code, but I am not seeing what I am missing. Thanks.
<Formik
onSubmit={
props.onSubmit(props.values)
}
mapPropsToValues = {(props) => ({
id: props.id,
status: props.status
})}
validate={values => {
// same as above
let errors = {};
return errors;
}}
onValueChange={ (itemIndex) => {
this.props.values.status = itemIndex
}}
render= { props => (
const { id, status } = this.props
<View>
<Text style={styles.textResultsHeaderStyle}>Job: {id}</Text>
<Picker
selectedValue={status}
onValueChange={itemIndex => this.onValueChange}>
<Picker.Item label="New" value="0" />
<Picker.Item label="Requested" value="1" />
<Picker.Item label="Responded" value="2" />
<Picker.Item label="Closed" value="3" />
</Picker>
<RoundedButton disabled={props.isSubmitting} onPress={props.handleSubmit} text="SUBMIT" />
</View>
)}
/>
Upvotes: 14
Views: 11717
Reputation: 519
I just answered a similar question on github. I suppose you're using the built in picker component in RN.
If not then you need to check the documentation for your picker component to see how to get the value on change.
https://github.com/jaredpalmer/formik/issues/1378#issuecomment-480189488
Upvotes: 11