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

Question

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:

This is what I want:

the `phone-pad` btw generates `pause`, `wait` etc keys, so thats not the answer — Raheel Hasan, Feb 15 '18 at 00:36

score 18 · Answer 1 · answered Apr 17 '19 at 20:52

18

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}

answered Apr 17 '19 at 20:52

Miguel Cardenas

1,215
9
5

You could use this regex `const cleanNumber = text.replace(/\D/g, "");` for much neater way. – Abdulrahman Hashem Oct 10 '22 at 07:50

score 4 · Answer 2 · answered Nov 15 '18 at 11:45

4

keyboardType={"number-pad"} Works on Android. Note: I am using FormInput from react-native-elements.

answered Nov 15 '18 at 11:45

Jithesh Kt

2,023
6
32
48

Note: "number-pad" only works in android from react-native version 0.56 or higher. – Dror Bar Jan 29 '19 at 14:37
@DrorBar, actually in 0.66.x version it doesn't work, I don't know if is a kind of error, but... – Juan Antonio Apr 01 '22 at 05:43

Vishal Dhanotiya · Answer 3 · 2020-09-04T05:38:19.190

React native not provided keyboardType which remove punctuation from keyboard. You need to use regular expression with replace method to remove punctuation from text and set keyboardType = 'numeric'.

Regular Expression

/[- #*;,.<>{}[]\/]/gi

Example code

 onTextChanged(value) {
    // code to remove non-numeric characters from text
    this.setState({ number: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
  }

Please check snack link

https://snack.expo.io/@vishal7008/numeric-keyboard

score 2 · Answer 4 · answered Feb 15 '18 at 02:57

2

Did you try number-pad? both number-pad and numeric work for me on iOS.

answered Feb 15 '18 at 02:57

Karim Varela

7,562
10
53
78

3

im NOT building an IOS-only app! – Raheel Hasan Feb 15 '18 at 03:13
Not supported in Ipad for some reason (haven't tested on Tablet). – Dror Bar Aug 06 '19 at 14:03

score 1 · Answer 5 · answered Nov 27 '20 at 12:08

1

Android doesn't support keyboardType without punctuations A visual guide to the React Native TextInput keyboardType prop values

answered Nov 27 '20 at 12:08

Vasyl Nahuliak

1,912
2
14
32

score 1 · Answer 6 · answered Feb 26 '21 at 01:15

1

For Android in my case I prevent set any special char with Miguel Cardenas example.

Here what I did:

const inputRef = useRef(null);
const setRefValue = v => {
      const clean = v.replace(/[^0-9]/g, '');
      inputRef.current.value = clean;
      inputRef.current.setNativeProps({ text: clean });
    }
  };

<TextInput
   ref={inputRef}
   keyboardType={numeric}
   onChangeText={setRefValue}
/>

Every time type in TextInput the constant setRefValue will clean special characters.

answered Feb 26 '21 at 01:15

Daniel Tiago Fischer

53
6

But fraction of second value display then clean, it's not good. How to make input like phonepe and Google pay after qr scan, when we type hyphen doesn't happen like that way we want in react native. – gausmohammad Jan 21 '23 at 15:44

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

6 Answers6

Linked