CODEWITHSUNDEEP
javascriptformsreact-nativepicker
Jerry
Jerry

Reputation: 961

React-Native Picker with Formik

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

Answers (1)

Rik
Rik

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

Related Questions