TextInputMask + Formik + Yup

[danielrmartins]

Is it possible to use TextInputMask with Formik and Yup?

[alecpo]

Yes, I'm using right now. :)

[IkaroAlef]

Yes, I'm using right now. :)

can you provide an example? I'm using this but i'm having a little bug on handling errors with formik's "errors." and "touched.";

[cloudworkpro-hassen]

I am also having trouble with Errors and Touched from formik is it possible to provide an example on how you handled this?

[danielrmartins]

Create an Input with TextInput Mask:

const FormInputCPF = ({ value, placeholder, ...rest }) => (
  <TextInputMask
    maxLength={255}
    ref={ref => (cpfField = ref)}
    {...rest}
    value={value}
    type={'cpf'}
    placeholder={placeholder}
    placeholderTextColor="gray"
    keyboardType={'numeric'}
    style={styles.item}
    onSubmitEditing={() => phone.focus()}
  />
);

then, inside the Formik:

<Item>
      <FormInputCPF
        value={values.cpf}
        placeholder={'CPF'}
        onChangeText={handleChange('cpf')}
        onBlur={handleBlur('cpf')}
        changeText={values.cpf}
      />
 </Item>
  <Text style={styles.textError}>
      {touched.cpf && errors.cpf}
  </Text>