If you have ever done mobile development in React Native, chances are you have used a TextInput. And, you’ve probably also used the numerical version of TextInput to create a numerical keypad.
There’s a rather annoying difference between a regular TextInput and a numerical TextInput. The numerical TextInput does not have a return key, and tapping outside of its bounds doesn’t cause the keyboard to dismiss automatically.
So, we’ve got a pretty unfortunate UX problem, as it’s pretty important to be able to dismiss the numerical keyboard to continue doing what we were doing.
Solve the problem of dismissing the numerical keypad
Thankfully, React Native has two built-in modules that, used together, help us solve this problem: Keyboard and TouchableWithoutFeedback.
Ultimately, what we want to do is wrap our components view with a TouchableWithoutFeedback and use its “onPress” hook to manually dismiss the keyboard via the “Keyboard” module.
Using TouchableWithoutFeedback is usually warned against unless you have a good reason, but I think this is one of those good reasons.
Make the entire screen touchable instead
Essentially what we are doing is making the entire screen touchable with, you guessed it, no feedback!
When a user touches outside of the other elements on the screen (i.e. our inputs) the TouchableWithoutFeedback’s “onPress” hook will trigger. We will use this event to dismiss the keyboard manually. Here is a simple example of my solution:
import React from 'react'
import {View, TextInput, Keyboard, TouchableWithoutFeedback} from 'react-native'
const DismissableKeypadView = () => {
return (
)
}
With this snippet, the numerical keypads (phone-pad and numerical) both effectively function just like a regular TextInput. When you tap the screen outside of the keypad or input, the keyboard will dismiss! No more frustrating keyboard staying open.
We're building an AI-powered Product Operations Cloud, leveraging AI in almost every aspect of the software delivery lifecycle. Want to test drive it with us? Join the ProdOps party at ProdOps.ai.