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

admin管理员组

文章数量:1355529

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" ponent={TextField} />
          <Button onPress={handleSubmit(this.onSubmit)}>Sign In</Button>
        </View>
</TouchableWithoutFeedback>

TextField ponent 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.

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" ponent={TextField} />
          <Button onPress={handleSubmit(this.onSubmit)}>Sign In</Button>
        </View>
</TouchableWithoutFeedback>

TextField ponent 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.

• javascript
• android
• react-native

Share Improve this question Follow edited May 23, 2017 at 11:51 CommunityBot 111 silver badge asked Sep 15, 2016 at 15:04 shet_tayyyshet_tayyy 5,7551212 gold badges5454 silver badges9393 bronze badges 6

• 1 Do you know what the dimensions are of your TouchableWithoutFeedback ? – rclai Commented Sep 15, 2016 at 16:54
• In other words, do you know if your onPress callback is getting called? – rclai Commented Sep 15, 2016 at 17:04
• @rclai Perfect. Thanks for menting your query. Dimension was the real problem. Thanks. – shet_tayyy Commented Sep 19, 2016 at 11:37
• No problem. If you don't mind, I posted an answer so you can mark it as correct. – rclai Commented Sep 19, 2016 at 15:19
• 2 use ScrollView. "A better way is to use ScrollView and Keyboard.dismiss. By using ScrollView when the user taps outside of textInput, keyboard dismissed.". This answer has saved my day stackoverflow./a/43434126/2808371 – an0o0nym Commented Jun 21, 2021 at 21:59

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 4

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

本文标签：