JavaScript – lose focus and close the keyboard when you click outside the textinput field locally?

I have studied it and found that this article:

react-native: hide keyboard

But it didn't work for me. When I touched the part of the screen outside the text input field, I thought the input field would lose focus and the keyboard would be released. However, nothing happened. The cursor kept flashing on the input

The following is the code I tried. Please note that I use 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>

The textfield component contains textinput. I'm not sure what I did wrong

I have tested the code on the genymotion simulator using the Samsung S6 image and my Samsung note 4

resolvent:

You need to check the size of touchablewithoutfeedback to make sure you call onpress