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!
Top comments (0)