iOS allows too many characters

[scottmas]

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

[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.

[bhrott]

This issue is opened on React-Native's github: LINK To ISSUE

[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. :+1:

[bhrott]

Guys! Good news! This PR solves this problem!

To solve this problem without painful merge, just merge this PR in the ios project

OR

1 - Open this file:

2 - Add this code:

3 - And this code:

I will keep this issue opened until official fix.

[bhrott]

Fixed in RN 0.57