How to avoid double tap when keyboard is open on Native Base?

Question

This is question regarding Native Base framework for React Native applications:

Imagine a subscribe screen; 1 text input and a subscribe button;

After I type my email address I want to tap on subscribe button but my first tap only closes the keyboard and I need to tap again to press on button. How this can be avoided? My expected behaviour is that first tap is a press on button. (As far as I see this is something around < Content > component but I am not sure.)

(I have checked this issue on native-base kitchen sink app and same issue occurs there as well. Just go to: 'Forms and Input' section and see 'Fixed Label' )

You might want to check [this](https://stackoverflow.com/questions/29685421/react-native-hide-keyboard). The problem is not the same as yours but it might give some idea. — milkersarac, Jun 22 '17 at 14:31
And also what about using NativeBase's ```Input``` and ```InputGroup``` components instead of RN's ```TextInput```? — milkersarac, Jun 22 '17 at 14:33
@milkersarac thanks for the comments but I use some custom text inputs and that's why, but the answer I accepted solves the problem. — yusuf, Jun 22 '17 at 23:41

score 7 · Accepted Answer · answered Jun 22 '17 at 14:32

7

Pass this as a prop to the content component.

< Content keyboardShouldPersistTaps='always'>

answered Jun 22 '17 at 14:32

Paul Nyondo

2,126
2
23
30

Brilliant, this works (although I haven't gone through implications yet) thanks a lot! I googled for this quite a lot! – yusuf Jun 22 '17 at 23:40
1

in my case i needed to add it on the flatlist component – Fadi Abo Msalam Feb 03 '19 at 18:50

score 3 · Answer 2 · answered Sep 07 '17 at 22:43

If you use < Content keyboardShouldPersistTaps='always'>, the keypad would not disappear after selecting a button or if you tap outside the input field. To ensure that the keyboard disappears if you tap outside the input field, use

< Content keyboardShouldPersistTaps='handled'>

However, with this, the keyboard would not disappear if you select a button (as opposed to a blank part of the screen) even though the button's onPress event will get fired. To make the keyboard disappear after pressing a button, the onPress handler of the button should call

Keyboard.dismiss()

Don't forget to include the import statement:

import { Keyboard } from 'react-native';

For further details, see https://facebook.github.io/react-native/docs/scrollview.html#keyboardshouldpersisttaps

score 1 · Answer 3 · answered Jan 29 '19 at 11:49

keyboardShouldPersistTaps this property is now exist in ScrollView.

<ScrollView keyboardShouldPersistTaps="always">
     {..content or component}
</ScrollView>

For more detail Please visit on official document

https://facebook.github.io/react-native/docs/scrollview#keyboardshouldpersisttaps

How to avoid double tap when keyboard is open on Native Base?

3 Answers3