How to make touchables touchable when the keyboard is shown in react native

Question

I have an autocomplete screen where the very top is a textInput and below it is a list of autocompletes that are touchable. However, when the keyboard is up, I have to touch the autocompletes twice: the first time to dismiss the keyboard, and the second time to actually touch the autocomplete. How can I achieve the above with one touch.

Answer 1

Below the textInput where you have the list which shows all the autocompletes, usually a ScrollView just add this attribute to it keyboardShouldPersistTaps='handled'

It should look like this :

<ScrollView keyboardShouldPersistTaps='handled'>
    {autoCompletes}
</ScrollView>

The attribute keyboardShouldPersistTaps tells the app not to close the keyboard instead let the touch handler handle it, hence the keyboards persists its state. Refer this post for more details :: Ignore rest of screen when keyboard active

Answer 2

keyboardShouldPersistTaps='handled' or keyboardShouldPersistTaps='always' is the answer for your problem.

Note: All scrollable view present within the main parent scroll view should have this attribute keyboardShouldPersistTaps='handled'

Note: Flatlist is also scrollview so Flatlist also consider attribute keyboardShouldPersistTaps='handled'