How To Immediately Dismiss The Numerical Keypad in React Native

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.

If you enjoyed my post, cruise over here to read more of my work.

---

mobile development onPress React React Native TextInput touchable UX