Lose focus and dismiss keyboard on clicking outside of the TextInput field in react native?

I have already researched about it and found this post:

But this didn’t work for me. When I touch the portion of the screen thats outside the text input field, I was expecting that the input field will lose focus and the keyboard will get dismissed. But, nothing is happening. The cursor keeps blinking on the input.

Below is the code I tried. Please note that I am using redux-form v6:

import dismissKeyboard from 'dismissKeyboard';

<TouchableWithoutFeedback onPress={()=> dismissKeyboard()}>
        <View style={styles.inputWrap}>
          <Field name="editLocation" component={TextField} />
          <Button onPress={handleSubmit(this.onSubmit)}>Sign In</Button>
        </View>
</TouchableWithoutFeedback>

TextField component contains TextInput. Not sure if I am doing anything wrong.

I have tested the code on Genymotion emulator with the Samsung S6 image and on my samsung note 4.

Answer

You need to check the dimensions of your TouchableWithoutFeedback to ensure your onPress is being called.

Advertisement

Answer