CODEWITHSUNDEEP
androidiosreact-nativenative-base
yusuf
yusuf

Reputation: 3646

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

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

Upvotes: 6

Views: 4433

Answers (3)

Vipul
Vipul

Reputation: 941

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

Upvotes: 2

Kes115
Kes115

Reputation: 2150

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

Upvotes: 3

Paul Nyondo
Paul Nyondo

Reputation: 2274

Pass this as a prop to the content component.

< Content keyboardShouldPersistTaps='always'>

Upvotes: 7

Related Questions