How to get ONLY numeric keyboard in React-Native?

Question

My goal is to get ONLY numeric keyboard without punctuation. number-pad is not working properly on every device and it also allows to enter symbols "-, _." that is not what I want. I noticed that when secureTextEntry is set to true on TextInput the keyboard is just the one I want, but I can't use it like this because my text is getting masked. So I wonder is there a way to use that keyboard without masking the text? Maybe a hack in the native code exists?

The screen of desired keyboard

NUMBER-PAD IS NOT WORKING ON EVERY DEVICE! THIS IS NUMBER-PAD ON HONOR 8X

Anchal_Systematix · Accepted Answer · 2019-12-26 06:42:25Z

4

You can try by doing like this- keyboardType={Platform.OS === 'android' ? "numeric" : "number-pad"} and then in a method call from onChangeText do this:

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

this.setState({ trimNumber });**

and it is the value prop of TextInput

value={this.state.trimNumber}

By this user wont be able to give any punctuation, if any, we are restricting to enter.

answered Dec 26, 2019 at 6:42

Anchal_Systematix

693 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Makar Over a year ago

Thank you! But number-pad is different on Honor 8x so it may be different on other devices (see pinned screenshot). Also cutting non numerical values from the string programmatically leads to symbol being visible for half a second before it deleted, It can be dealt with setting value through setNativeProps but why do that if we can find a way to use "secure" keyboard and be happy

Kunvar Singh · Accepted Answer · 2019-12-25 16:07:45Z

3

You may try below :

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

and for more : click here

answered Dec 25, 2019 at 16:07

Kunvar Singh

1,8852 gold badges16 silver badges21 bronze badges

4 Comments

Makar Over a year ago

Thank you! But number-pad is deferent on Honor 8x so it may be different on other devices (see pinned screenshot). We need to find a better approach

Kunvar Singh Over a year ago

sure! give me the time for do R&D on this! i'll let you know. thanks for you vote up!

Makar Over a year ago

I have found that the keyboard inputType is used in react-native/ReactAndroid/src/main/react/views/textinput/ReactEditText.java, line 771 and in ReactTextInputManager.java, line 102, but it seems that to see the changes we need to compile it github.com/facebook/react-native/wiki/Building-from-source

Makar Over a year ago

Also this issue may be helpful github.com/facebook/react-native/issues/4090

Gaurav Roy · Accepted Answer · 2019-12-26 05:34:50Z

2

As per the docs ,

You can achieve this by doing :

keyboardType={Platform.OS === 'ios'? "number-pad":"numeric"}

Hope it helps . feel free for doubts

answered Dec 26, 2019 at 5:34

Gaurav Roy

12.4k3 gold badges30 silver badges51 bronze badges

1 Comment

Makar Over a year ago

Thank you! But number-pad is deferent on Honor 8x so it may be different on other devices (see pinned screenshot). We need to find a better approach

iddar · Accepted Answer · 2020-12-23 05:09:36Z

1

To show numeric pad in IOS same a pic in an original question. And use the returnKeyType at the same time.

keyboardType={Platform.OS === 'android' ? "numeric" : "numbers-and-punctuation"}

answered Dec 23, 2020 at 5:09

iddar

5211 gold badge5 silver badges6 bronze badges

Comments

Helder Pereira · Accepted Answer · 2022-01-08 01:33:31Z

1

Try

<Input keyboardType= 'phone-pad'/>

it worked for me.

or for both android & ios or something else

 <Input keyboardType= {Platform.OS === 'android' ? 'phone-pad' : (Platform.OS ==='ios'?'number-pad' :'numbers-and-punctuation')} />

you can check the documentation here react-native keyboardType

answered Jan 8, 2022 at 1:33

Helder Pereira

1122 silver badges9 bronze badges

Comments

Zanyar Jalal · Accepted Answer · 2021-02-23 17:23:45Z

-1

This keyboard only available for secureText secureTextEntry={true}

Code

<Input keyboardType={Device.isAndroid ? "numeric" : "number-pad"}
       secureTextEntry={true} />

answered Feb 23, 2021 at 17:23

Zanyar Jalal

1,9541 gold badge16 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to get ONLY numeric keyboard in React-Native?

6 Answers 6

1 Comment

4 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

4 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related