Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
  )}
/>
like image 435
Jerry Avatar asked Dec 24 '17 15:12

Jerry


People also ask

Can I use Formik With React Native?

Formik is 100% compatible with React Native and React Native Web. However, because of differences between ReactDOM's and React Native's handling of forms and text input, there are some differences to be aware of. This section will walk you through them and what we consider to be best practices.

What is Yup In React Native?

Yup is a JavaScript schema builder for value parsing and validation. Define a schema, transform a value to match, validate the shape of an existing value, or both. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformations.


1 Answers

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

like image 188
Rik Avatar answered Sep 28 '22 06:09

Rik