React Native - how to key number pad ONLY (without punctuations)

Raheel Hasan picture Raheel Hasan · Feb 15, 2018 · Viewed 20.3k times · Source

Is there a way to key a numeric keypad without punctuations?

<TextInput keyboardType='numeric' ..... />

if I use secureTextEntry={true}, it gets the right keyboard I want, but the values are replaced with *.

so, this is what im getting: enter image description here

This is what I want: enter image description here

Answer

Miguel Cardenas picture Miguel Cardenas · Apr 17, 2019

I had the same problem.

I could solve doing something like this:

keyboardType={Device.isAndroid ? "numeric" : "number-pad"}

and then in a method call from onChangeText doing this:

const cleanNumber = number.replace(/[^0-9]/g, "");

this.setState({
  cleanNumber
});

and it the value prop of TextInput

value={this.state.cleanNumber}