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

Question

I have already researched about it and found this post:

react-native: hide keyboard

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 1

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