In React Native Formik Form, a TextBox with error doesn’t get the caret blinking when clicked on

[rafaelsoteldosilva]

Hi there:

I built a form in react Native with Formik and Yup, I’m using validationSchema for validation, I’m showing the errors immediately below the erroneous text:

<TextInput
    style={styles.input}
    label="Diner name"
    mode="outlined"
    keyboardType="generic"
    onChangeText={handleChange("dinerName")}
    onBlur={handleBlur("dinerName")}
    value={values.dinerName}
    error={
        touched.dinerName &&
        errors.dinerName
    }
    autoFocus={true} // This is the first one
/>
{touched.dinerName && errors.dinerName && (
    <Text style={styles.error}>
        {errors.dinerName}
    </Text>
)}

{!( // This is done to preserve the distance with the text below
    touched.dinerName && errors.dinerName
) && <Text style={styles.dummy}> </Text>}

The TextInput is React native Paper

The problem is that if a field is showing some error, the when clicked doesn’t show that is focused, you know, it should show a blinking caret

What am I missing here?

Thanks in advance

[angelxmoreno]

@rafaelsoteldosilva did you ever get this resolved ? I ended up creating react-native-paper-formik to reduce the boilerplate in my various projects