TextInput allow only numbers react native

user_3858806 0
Viewed 11485

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>
  );
}

enter image description here

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

expo react-native
6 Answers

pls try this:

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

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 });
    }
}

enter image description here

user_38588060

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

user_91585430

Worked for me:

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

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>
user_133792860 
<TextInput>
  keyboardType="number-pad"
</TextInput>
user_99652300
Related