3

I'm developing an iPad application in React Native in which I want to show number only keypad. I have used keyboard type as phone-pad but is shows numbers alongwith extra characters. How should I achieve that? How should I use the Custom keypad in react native for iOS.

Amit Shetye
  • 133
  • 1
  • 11
  • If you are using `TextInput` from react-native, you can choose `keyboardType`. Here's a visual guide for different `keyboardType`s https://lefkowitz.me/visual-guide-to-react-native-textinput-keyboardtype-options/. `numeric` will give you a number only keypad which is available for both ios and android. – Amar Jul 12 '19 at 07:36

2 Answers2

2

I am attaching a below screenshot for how many keyboard type you can show along with their respective keywords.

for your case just add

keyboardType="number-pad"

if you are using TextInput for your keyboard

enter image description here

Update: for iPad either you need a custom keyboad which can only contains number only or what you can do is:

Simply remove the the text from number input even if the keyboard has characters

You can do this way

`<TextInput 
    placeHolder="*********"
    keyboardType="number-pad"
    onChangeText={this.onChangeText.bind(this)}
    value={text}
 />` 

`onChangeText(text) {
    const numbers = '0123456789';
    let numberOnly = '';

    for (let i = 0; i < text.length; i++) {
        if (numbers.indexOf(text[i]) > -1) {
            numberOnly += text[i];
        }
    }
   this.props.passwordChanged(numberOnly); }
Roshan
  • 712
  • 4
  • 17
  • Does this really work? I tested with iPad 13.4.1, though keyboard switch to "numeric" (where user still able to switch back to alphabet)... I was expecting something like https://lefkowitz.me/visual-guide-to-react-native-textinput-keyboardtype-options/.... Also I found out, from Apple site it seems they do support iPad numeric only keyboard. https://support.apple.com/en-us/HT205374 – Tommy Leong Jun 11 '20 at 08:14
1

Try adding keyboardType="number-pad". This solution works on both iOS and Android.

Dan
  • 8,041
  • 8
  • 41
  • 72
  • 2
    @RoshanSinghBisht Thanks for the Answer, but you are restricting the characters in the textfield with numbers. But my query is I want to display only number keypad in iPad. – Amit Shetye Jul 12 '19 at 11:03
  • 1
    @AmitShetye then you need a custom keypad, like this one. https://github.com/reactnativecn/react-native-custom-keyboard – Roshan Jul 12 '19 at 11:18