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' )

• milkersarac: You might want to check this. The problem is not the same as yours but it might give some idea.
• milkersarac: And also what about using NativeBase's Input and InputGroup components instead of RN's TextInput?
• yusuf: @milkersarac thanks for the comments but I use some custom text inputs and that's why, but the answer I accepted solves the problem.
• milkersarac: Glad it did, great!

Answer 1

Pass this as a prop to the content component.

< Content keyboardShouldPersistTaps='always'>

• yusuf: Brilliant, this works (although I haven't gone through implications yet) thanks a lot! I googled for this quite a lot!
• Fadi Abo Msalam: in my case i needed to add it on the flatlist component

Answer 2

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

Answer 3

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