I have a component with an TextInput & Text :
const InputWithMessage = ({ label, formikProps, formikKey,ref, ...rest }) => {
if (formikProps.touched[formikKey] && formikProps.errors[formikKey]) {
styles.inputStyles.borderColor = 'red';
}
return (
<View style={styles.inputStyles}>
<TextField
lineWidth={0}
activeLineWidth={0}
style={styles.textFieldStyles}
label={label}
ref={ref}
tintColor={
formikProps.touched[formikKey] && formikProps.errors[formikKey]
? colors.red
: colors.primary
}
onChangeText={e => formikProps.setFieldValue(formikKey, e)}
onBlur={formikProps.handleBlur(formikKey)}
{...rest}
/> .....
This component is used in a formik form with refs to go from one input to another :
<View style={{width: '50%',marginRight: 1}}>
<InputWithMessage
formikProps={formikProps}
formikKey="firstName"
value={formikProps.values.firstName}
placeholder="Prénom*"
returnKeyType="next"
ref={this.firstName}
onSubmitEditing={() => {
this.birthName.current.focus()
}}
blurOnSubmit={false}
keyboardType='default'
autoFocus
/> ....
I shove my refs like this in the constructor: this.birthName = React.createRef();
Except that my dreams are all the time null and so the focus can not be done...
any ideas?