5

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 enter image description here

NUMBER-PAD IS NOT WORKING ON EVERY DEVICE! THIS IS NUMBER-PAD ON HONOR 8X enter image description here

Makar
  • 83
  • 2
  • 11

6 Answers6

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.

Anchal_Systematix
  • 71
  • 3
  • 1
    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 – Makar Dec 26 '19 at 09:01
3

You may try below : 

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

and for more : click here

Kunvar Singh
  • 1,779
  • 2
  • 13
  • 21
  • 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 – Makar Dec 26 '19 at 08:56
  • sure! give me the time for do R&D on this! i'll let you know. thanks for you vote up! – Kunvar Singh Dec 28 '19 at 18:18
  • 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 https://github.com/facebook/react-native/wiki/Building-from-source – Makar Dec 30 '19 at 08:52
  • Also this issue may be helpful https://github.com/facebook/react-native/issues/4090 – Makar Dec 30 '19 at 09:42
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

Gaurav Roy
  • 11,175
  • 3
  • 24
  • 45
  • 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 – Makar Dec 26 '19 at 09:02
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"}
iddar
  • 471
  • 1
  • 5
  • 6
0

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

Helder Pereira
  • 92
  • 1
  • 9
-1

This keyboard only available for secureText secureTextEntry={true}

Code

<Input keyboardType={Device.isAndroid ? "numeric" : "number-pad"}
       secureTextEntry={true} />
Zanyar Jalal
  • 1,407
  • 12
  • 29