I use redux-form with react-native and for some reason when the state of the form changes from dirty
to pristine
when user types the first char into an input the keyboards gets hidden and screen flickers. This happens on the Android Nexus 5X device.
View component:
const TextField = ({placeholder: p, ...props}) =>
<Field {...props}
component={({input}) => {
return <TextInput
value={input.value}
onChange={input.onChange}
secureTextEntry={props.type === 'password'}
placeholder={p}
/>
}}/>
const Login = ({submit}) =>
<View>
<Text>You need to log in</Text>
<TextField placeholder="Name"
name="name"/>
<Button title="Login" onPress={submit}/>
</View>
export default login(Login)
login
is HOC which is wrapped in
reduxForm({
form: 'login',
initialValues: {
name: 'a',
},
onSubmit: vals => {
console.log('submitting', vals)
}
})
What kind of event in react-native can create such behavior ?
So in the end the problem had nothing to do with redux-form but with using an inline anonymous component
({input}) => {
return <TextInput
value={input.value}
onChange={input.onChange}
secureTextEntry={props.type === 'password'}
placeholder={p}
/>
}
This was done just for 'prototyping' purposes so it was overlooked.
Declaring component normally like const TextFieldComponent = ({input}) => ...
solved the problem.