React Native - how to key number pad ONLY (without punctuations)

keyboardtype react native not working
react native textinput placeholder style
number-pad react native
react native text input clear button
react native textinput ref
react native-custom keyboard
textarea in react-native
react native input number format

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:

This is what I want:


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

React Native, Version tcomb-form-native v0.5.1 react-native v0.24.1 Expected to set keyboard in react native to show only numbers, no extra punctuation  React Native TextInput provides keyboardType props with following possible values : default number-pad decimal-pad numeric email-address phone-pad. so for your case you can use keyboardType='number-pad' for accepting only numbers. This doesn't include '.' so,


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}

Number keypad should show for numeric fields.. · Issue #171 , This guide has been updated for React Native 0.59 on iOS 12 and Android 8.1 So, here is a collection of all the available keyboard types currently on React Native v0.55 on iOS 11 and Android 8. number-pad, 02number pad, a02number pad numbers-and-punctuation, 08numbers and punctuation. TextInput has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColorAndroid to trans


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

A visual guide to the React Native TextInput keyboardType prop , A foundational component for inputting text into the app via a keyboard. auto-​capitalization, placeholder text, and different keyboard types, such as a numeric keypad. Note that some props are only available with multiline={true/false} . This property is not supported by some keyboard types such as name-phone-pad . Summary: For a current use-case we need the a keyboard with characters 0-9 and a decimal point (or comma depending on language settings) This exists on iOS as UIKeyboardType "decimalPad" and this is what react-native maps to for both "numeric" and "decimal-pad".


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/1e004c

TextInput · React Native, A foundational component for inputting text into the app via a keyboard. placeholder text, and different keyboard types, such as a numeric keypad. Note that some props are only available with multiline={true/false} : not supported in Open Source yet onTextInput: true, // not supported in Open Source yet children: true,  Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity: const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> );


Please try this,

<TextInput 
     keyboardType = 'numeric'/>

Ios numeric keyboard with dot, Buy the Apple Magic Keyboard w Numeric Keypad, US English, Space Gray and Importantly, iOS (on an iPhone) does not let the user switch keyboard types when React Native TextInput that only accepts numeric characters Logically in the other hand we have the Numbers and punctuations, which includes numbers,  Contribute to facebook/react-native development by creating an account on GitHub. Summary: For a current use-case we need the a keyboard with characters 0-9 and a decimal point (or comma depending on language settings) This exists on iOS as UIKeyboardType &amp;quot;decimalPad&a


React Native TextInput that only accepts numeric characters, A foundational component for inputting text into the app via a keyboard. placeholder text, and different keyboard types, such as a numeric keypad. The multiline prop is not supported in all releases, and some props are multiline only. 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad',  Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number. Flex. flex will define how your items are going to “fill” over the available space along your main axis


TextInput – React Native, source : React Native TextInput That Only Accepts Numeric Characters. By default TextInput component will not display numeric text qwerty keyboard. normal multi purpose keyboard with Alphabetic Keys, Numeric Keys  react-native#19366: Calling .focus() after closing Android's keyboard via back button doesn't bring keyboard up again. react-native#26799 : Doesn't support Android's secureTextEntry when keyboardType="email-address" or keyboardType="phone-pad" .


Note that some props are only available with multiline={true/false} . If true, the keyboard disables the return key when there is no text and automatically var { Text, TextInput, View, StyleSheet, } = ReactNative; var WithLabel = React. keyboardType="numbers-and-punctuation" placeholder="blurOnSubmit = true"  It often involves a three-step process. Tap on the 123 key, select the punctuation and then tap again to get the alphabet keyboard. With Gboard, one can quickly access the special keyboard.