Don’t Make Me Tap Twice

I've started rough work on a new app for digital "morning baskets". While I just used Expo when starting Storytime (another app I have in-progress), I decided to give the famous Ignite boilerplate from Infinite Red a chance. In short, it's fantastic. In just a few days of side-work time I've almost completed a fully-functioning minimum viable product (MVP) of this new app.

But I quickly ran into that annoying situation where you're editing a text field, and you want to press the "submit" button, but you've gotta tap it twice so that the keyboard gets dismissed before you can progress.

Thanks to a detailed blog post I found a quick solution. In a project generated by Ignite 6.x, we can open up app/components/screen/screen.tsx and find the place where ScrollView is used:

...
<ScrollView
    style={[preset.outer, backgroundStyle]}
    contentContainerStyle={[preset.inner, style]}
>
    {props.children}
</ScrollView>
...

All we have to do is add keyboardShouldPersistTaps="handled" to the props of ScrollView.

...
<ScrollView
    style={[preset.outer, backgroundStyle]}
    contentContainerStyle={[preset.inner, style]}
    keyboardShouldPersistTaps="handled" // <- Here!
>
    {props.children}
</ScrollView>
...

This instructs the scrollview to dismiss the keyboard if it receives a tap gesture which none of its children have handled, but to leave the keyboard alone if one of the children in the view handles the event. In my case, I navigate right after the button click, and this action dismisses the keyboard automatically anyway. So it resolves the problem for me!