iOS allows too many characters

The following custom definition permits too many characters on iOS. Android correctly forbids the user from entering more than the specified mask. In the following example, Android restricts the text input from having more than 1 digit, but iOS does not.

 <TextInputMask
            type='custom'
            options={{mask: '9'}}
            value={this.state.inputVal}
            keyboardType='numeric'
            onChangeText={val => val.length <= 1 && this.setState({ inputVal: val })}
          />

[zaguiini]

Hey, I’ve found a “workaround” for now: just define maxLength on your TextInput.

That’s the “solution” while there isn’t an official bugfix… Example:

If you define the credit-card mask, just define the maxLength of your input to 19, so it will cover the 16 digits of the credit card plus the 3 spaces. 👍

[bhrott]

Hi,

After a long investigation, I realize it can be a bug in react-native.

I tried with both TextInputMask and default TextInput. The state remains correct but it does not update current text input value O.o.

This is the code:

export default class App extends React.Component {
  state = {
    inputVal: ''
  }

  _updateVal(val) {
    if (val.length <= 1) {
      this.setState({ inputVal: val }, () => {
        console.log(this.state)
      })
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>TextInputMask: </Text>

        <TextInputMask
          type='custom'
          options={{ mask: '9' }}
          value={this.state.inputVal}
          keyboardType='numeric'
          onChangeText={this._updateVal.bind(this)}
          style={styles.input}
        />

        <Text>Default TextInput: </Text>
        <TextInput
          value={this.state.inputVal}
          keyboardType='numeric'
          onChangeText={this._updateVal.bind(this)}
          style={styles.input}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: 'red',
    height: 50,
    width: '90%'
  }
});

And take a look when we input some values into input:

Now, take a look at the console.log to see the state:

This is absolutely bizarre and the same happen if we input values on MaskedTextInput. I will open an issue on React-Native’s repository.

Thanks for reporting.