TextInput allow only numbers react native

Question

I'm using TextInput to allow only numbers using state, it works on android but not on iOS. Here's how I'm using state to allow only numbers.

handleInputChange = (text) => {

  if (/^\d+$/.test(text) || text === '') {
    this.setState({
      text: text
    });
  }
}

my render method

render = () => {
  return (
    <View style={{
      flex: 0,
      flexDirection: 'row',
        alignItems: 'flex-end',
        marginTop: 50
    }}>
      <View style={{ flex: 0, marginLeft: 10 }}>
        <Text style={{ fontSize: 20}}>$</Text>
      </View>
      <View style={{flex: 1,}}>
        <TextInput
          onChangeText={this.handleInputChange}
          value={this.state.text}
          underlineColorAndroid='transparent'
          autoCorrect={false}
          spellCheck={false}
          style={{ paddingLeft: 5, fontSize: 20 }} />
      </View>
    </View>
  );
}

This only works in Android, I guess because the state has changed react doesn't update the ui.

It's been a known bug since long, you can check TextInput value can't be change during onChangeText - iOS — Ravi
– Ravi, Commented Sep 8, 2018 at 12:53

Junius L · Accepted Answer · 2018-09-08 16:16:47Z

2

As Ravi Rupareliya said this's a bug, which TextInput doesn't update, when the state text is shorter than the current TextInput value. Seems like the bug has been fixed in react-native 0.57.RC. For now I'm using the following fix.

handleInputChange = (text) => {

    const filteredText = text.replace(/\D/gm, '');

    if(filteredText !== text) {
      // set state text to the current TextInput value, to trigger
      // TextInput update.
      this.setState({ text: text });

      // buys us some time until the above setState finish execution
      setTimeout(() => {

        this.setState((previousState) => {
          return {
            ...previousState,
            text: previousState.text.replace(/\D/gm, '')
          };
        });

      }, 0);
    } else {
      this.setState({ text: filteredText });
    }
}

answered Sep 8, 2018 at 16:16

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

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

Comments

mdaniel · Accepted Answer · 2018-09-08 22:07:56Z

2

pls try this:

keyboardType='numeric' in the tag TextInput
when you prove don't put the numbers with the keyboard of your pc, pls use the keyboard of the emulator
if still not working put this textContentType='telephoneNumber'

edited Sep 8, 2018 at 22:07

mdaniel

33.5k6 gold badges60 silver badges66 bronze badges

answered Sep 8, 2018 at 15:22

Pedro Rico

312 bronze badges

2 Comments

Junius L Over a year ago

Yes, but the numeric keyboard has a . and I don't want it to be entered.

Pedro Rico Over a year ago

you can auto remove it with the onchangetext , if is only . the trouble would be a good solution.

Vishal Dhanotiya · Accepted Answer · 2019-12-26 09:21:31Z

2

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

answered Dec 26, 2019 at 9:21

Vishal Dhanotiya

2,6481 gold badge16 silver badges34 bronze badges

1 Comment

Weijing Jay Lin Over a year ago

You might not want to remove "." since it could be float point, but you still need handle dots in case there is ".."

Ronald Araújo · Accepted Answer · 2020-05-03 19:23:16Z

1

Worked for me:

<TextInput 
   ...
   textContentType='telephoneNumber' 
   dataDetectorTypes='phoneNumber' 
   keyboardType='phone-pad'
/>

answered May 3, 2020 at 19:23

Ronald Araújo

1,4995 gold badges21 silver badges32 bronze badges

Comments

Deepak Singh · Accepted Answer · 2023-01-12 10:15:35Z

1

onChangeText={value => setuserPrimaryPhone(value.replace(/[^0-9]/g, ''))}

javascript simple method replace(/[^0-9]/g, ''))}

answered Jan 12, 2023 at 10:15

Deepak Singh

1,1879 silver badges18 bronze badges

Comments

Bhupesh Kumar · Accepted Answer · 2020-06-16 11:50:26Z

0

While having input from user you can change the keyBoard type for that particular text input box like this i.e. numeric or alphabatic etc...

<TextInput>
  //contains some code
  keyboardType="Numeric"
</TextInput>

answered Jun 16, 2020 at 11:50

Bhupesh Kumar

2663 silver badges17 bronze badges

Comments

Rejsal · Accepted Answer · 2021-11-10 13:01:41Z

0

<TextInput>
  keyboardType="number-pad"
</TextInput>

answered Nov 10, 2021 at 13:01

Rejsal

1311 silver badge7 bronze badges

2 Comments

Jeremy Caney Over a year ago

Why do you prefer number-pad over numeric, as suggested in the accepted answer?

Rejsal Over a year ago

I think number-pad ll not accept special characters or alphabets in keyboard.

Collectives™ on Stack Overflow

TextInput allow only numbers react native

7 Answers 7

Comments

2 Comments

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

2 Comments

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related