Number Keypad for iPad in React Native

Question

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.

Answer 1

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

Answer 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

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); }