Menu
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.
612
React Native provide Keyboard module to manage keyboard event, where you can track when keyboard open, close or also programatically close keyboard. For dismiss keyboard, React Native Keyboard module have dismiss() method, when you call Keyboard.
Wrap the View component that is the parent of the TextInput in a Pressable component and then pass Keyboard. dismiss to the onPress prop. So, if the user taps anywhere outside the TextInput field, it will trigger Keyboard. dismiss , which will result in the TextInput field losing focus and the keyboard being hidden.
Add the method submitAndClear to our class and set the <button /> component's onPress prop to this. submitAndClear. Change the <button /> component's title prop to the string 'Submit' Add the prop clearButtonMode='always' to the <TextInput /> component — this will give us an option to clear the text at any time.
You need to check the dimensions of your TouchableWithoutFeedback to ensure your onPress is being called.
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
