Search code examples
androidreactjsreact-nativeredux-form

dirty/pristine changes in react-native with redux-form result in keyboard being hidden and flicker


I use redux-form with react-native and for some reason when the state of the form changes from dirty to pristinewhen 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 ?


Solution

  • 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.