I have a weird problem with my react-native form (I am using formik library). I have a form which has one input with autofocus, user reads barcode with external reader and app shows him some data about the product. Everything works fine on the first try, but when the user wanna read another code, validation is triggered after navigation which causes the input to lose focus, so the user needs to manualy select it and then use the reader. My code looks like this, its simple form with one input and action on submit. Validation checks if the field is empty, but I need it only after submit not after navigation.
const handleSubmit = (values, {resetForm}) => {
if (nextPage === pages.TOKLIS19) {
dispatch(fetchPaletaSklad.request({ carovyKod: values.carovyKod, kodUzivatele, nextPage }));
} else {
dispatch(fetchPaleta.request({ carovyKod: values.carovyKod, nextPage }));
}
resetForm();
}
<Formik
initialValues={{carovyKod: ''}}
onSubmit={onSubmit}
validate={validateCarovyKod}>
{({handleSubmit, handleChange, values, ...rest}) => (
<Fragment>
<Text style={styles.text}>{i18n.paletaForm.carovyKod}: </Text>
<Input autoFocus values={values} name="carovyKod" handleChange={(name) => {onChange(name, values); return handleChange(name);} }
keyboardType={Platform.OS == 'android' ? "phone-pad" : "number-pad"}
{...rest} />
<Button
style={styles.button}
title={i18n.paletaForm.btnOk}
onPress={handleSubmit}
/>
<Button
title={i18n.common.back}
onPress={onBack()}
/>
</Fragment>
)}
</Formik>