19

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

1
  • the phone-pad btw generates pause, wait etc keys, so thats not the answer Feb 15, 2018 at 0:36

7 Answers 7

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}
1
  • You could use this regex const cleanNumber = text.replace(/\D/g, ""); for much neater way. Oct 10, 2022 at 7:50
3

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

2
  • Note: "number-pad" only works in android from react-native version 0.56 or higher.
    – Dror Bar
    Jan 29, 2019 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... Apr 1, 2022 at 5:43
3

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

0
2

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

2
  • 3
    im NOT building an IOS-only app! Feb 15, 2018 at 3:13
  • Not supported in Ipad for some reason (haven't tested on Tablet).
    – Dror Bar
    Aug 6, 2019 at 14:03
1

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

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.

1
  • 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. Jan 21 at 15:44
-3

(Platform.OS === 'ios') ? 'done' : 'next' — good spike

2
  • 1
    I do not see how this answers the question at the top of this page, but it should. Please edit according to How to Answer or delete the answer. Otherwise it risks being flagged as "not an answer" and being deleted.
    – Yunnosch
    Jul 6, 2021 at 17:26
  • To expand on @Yunnosch's concern, this question was about how to display the number keypad. It may, in fact, be necessary to vary that by platform, as other answers have done, but you still need to show how to display the keypad, which your answer doesn't currently do. Jul 9, 2021 at 20:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.