React Native TextInput that only accepts numeric characters

Question

I need to have a React Native TextInput component that will only allow numeric characters  0 - 9  to be entered  I can set the keyboardType to numeric which almost gets me there for input except for the period      However this does nothing to stop pasting non-numeric characters into the field   What I ve come up with so far is to use the OnChangeText event to look at the text entered  I remove any non-numeric characters from the text  Then put the text in a state field  Then update the TextInput through it s Value property  Code snippet below    lt TextInput    style  styles textInput    keyboardType    numeric    onChangeText     text   gt  this onChanged text     value    this state myNumber    gt    onTextChanged text         code to remove non-numeric characters from text   this setState  myNumber  text       This seems to work but it seems like a hack  Is there another way to do this

User · Answer

lt TextInput autoCapitalize   none   maxLength  10  placeholder  Mobile Number   value  this state mobile  onChangeText   mobile    gt  this onChanged mobile    gt    and onChanged method    onChanged text      var newText          var numbers    0123456789      if text length  lt  1        this setState   mobile                 for  var i 0  i  lt  text length  i              if numbers indexOf text i    gt  -1                  newText   newText   text i                     this setState   mobile  newText

User · Answer

That is the correct way to do it till such a component  or attribute on the TextInput  is specifically developed   The web has the    number    type for the input element  but that is web based and react-native does not use a web view   You could consider to create that input as a react component on it   s own  maybe call NumberInput   that   ll enable you to reuse it or maybe even open source it since you can create many TextInputs that has different value filters checkers   The downside to immediate correction is to ensure correct feedback is given to the user as to prevent confusion as to what happened to his value

User · Answer

A kind reminder to those who encountered the problem that  onChangeText  cannot change the TextInput value as expected on iOS  that is actually a bug in ReactNative and had been fixed in version 0 57 1  Refer to  https   github com facebook react-native issues 18874

User · Answer

Here is my other simple answer to accept only numbers in the text box using Regular Expressions   onChanged text       this setState             myNumber  text replace    0-9  g

User · Answer

I had the same problem in iOS  using the onChangeText event to update the value of the text typed by the user I was not being able to update the value of the TextInput  so the user would still see the non numeric characters that he typed   This was because  when a non numeric character was pressed the state would not change since this setState would be using the same number  the number that remained after removing the non numeric characters  and then the TextInput would not re render   The only way I found to solve this was to use the keyPress event which happens before the onChangeText event  and in it  use setState to change the value of the state to another  completely different  forcing the re render when the onChangeText event was called  Not very happy with this but it worked

User · Answer

You can do it like this  It will only accept numeric values  and limit to 10 numbers as your wish    lt TextInput     style  styles textInput     keyboardType  numeric     onChangeText   text   gt  this onChanged text      value  this state myNumber     maxLength  10     setting limit of input   gt    You can see the entered value by  writing the following code in your page    this state myNumber    In the onChanged   function the code look like this   onChanged text       let newText           let numbers    0123456789        for  var i 0  i  lt  text length  i              if numbers indexOf text i    gt  -1                 newText   newText   text i                     else                  your call back function             alert  please enter numbers only                        this setState   myNumber  newText         I hope this is helpful to others

User · Answer

Well  this is a very simple way to validate a number different to 0  if   inputNum   It will be NaN if inputNum is not a number or false if it is 0

User · Answer

Only allow numbers using a regular expression   lt TextInput    keyboardType    numeric    onChangeText     e   gt  this onTextChanged e     value    this state myNumber    gt    onTextChanged e      if     d    test e toString            this setState   myNumber  e             You might want to have more than one validation    lt TextInput    keyboardType    numeric    onChangeText     e   gt  this validations e     value    this state myNumber    gt    numbersOnly e        return    d    test e toString      true   false    notZero e        return  0  test parseInt e     false   true    validations e        return this notZero e   amp  amp  this numbersOnly e            this setState   numColumns  parseInt e               false

User · Answer

if      0-9     test  123456askm        consol log  Enter Only Number      else       consol log  Sucess

User · Answer

I ve created a component that solves this problem   https   github com amirfl react-native-num-textinput

User · Answer

Using a RegExp to replace any non digit  Take care the next code will give you the first digit he found  so if user paste a paragraph with more than one number  xx xx  the code will give you the first number  This will help if you want something like price  not a mobile phone    Use this for your onTextChange handler   onChanged  text        this setState           number  text replace        d       d     d      g      split       0

User · Answer

For Decimal  Floating point number only try this      onChangeMyFloatNumber text   let newText       let numbers    0123456789     for  var i 0  i  lt  text length  i          if numbers indexOf text i    gt  -1             newText   newText   text i           if text i                   numbers    0123456789                      else              your call back function         alert  please enter numbers only            this setState   MyFloatNumber  newText

User · Answer

You can remove non numeric characters using regex  onTextChanged  text        this setState           myNumber  text replace   D g

User · Answer

Using a RegExp to replace any non digit is faster than using a for loop with a whitelist  like other answers do   Use this for your onTextChange handler   onChanged  text        this setState           mobile  text replace    0-9  g                   Performance test here  https   jsperf com removing-non-digit-characters-from-a-string

User · Answer

This not work on IOS  setState -  render -  not change the text  but can change other  The textinput can t change itself value when textOnChange   by the way  This work well on Android

User · Answer

I wrote this function which I found to be helpful to prevent the user from being able to enter anything other than I was willing to accept  I also used keyboardType  decimal-pad  and my onChangeText  this decimalTextChange     decimalTextChange    distance    gt        let decimalRegEx   new RegExp    d     d         if  distance length     0    distance            distance distance length - 1                   amp  amp  decimalRegEx test distance                  this setState   distance          else           const distanceRegEx   new RegExp    s -   d     d  1  2        d  1  2    s             if  distanceRegEx test distance   this setState   distance              The first if block is error handling for the event the user deletes all of the text  or uses a decimal point as the first character  or if they attempt to put in more than one decimal place  the second if block makes sure they can type in as many numbers as they want before the decimal place  but only up to two decimal places after the point

User · Answer

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    lt TextInput    style  styles textInput    keyboardType    number-pad    onChangeText     text   gt  this onChanged text     value    this state myNumber    gt    is what you have to use in your case   for more details please refer the official doc link for TextInput    https   facebook github io react-native docs textinput keyboardtype

User · Answer

First Solution You can use keyboardType    numeric  for numeric keyboard     lt View style  styles container  gt           lt Text style  styles textStyle  gt Enter Number lt  Text gt           lt TextInput           placeholder   Enter number here             style  styles paragraph            keyboardType  quot numeric quot            onChangeText  value   gt  this onTextChanged value             value  this state number            gt         lt  View gt   In first case punctuation marks are included ex -   and - Second Solution Use regular expression to remove punctuation marks   onTextChanged value           code to remove non-numeric characters from text     this setState   number  value replace   -       lt  gt               gi               Please check snack link https   snack expo io  vishal7008 numeric-keyboard

User · Answer

const  text  setText    useState       const onChangeText    text    gt      if   text        setText text            lt TextInput   keyboardType  quot numeric quot    value  text    onChangeText  onChangeText    gt   This should save from physical keyboards

User · Answer

Function to validate input   validateInputs text  type    let numreg      0-9        if  type     username         if  numreg test text             test ok       else           test not ok                  lt TextInput    onChangeText  text   gt  this validateInputs text   username      gt    I hope this is helpful

[react-native] React Native TextInput that only accepts numeric characters

Examples related to react-native