Preventing the importation of illegal content

[MickeyMouse623]

• Search for existing issues:
• onChangeText is too late? #13674
• [iOS] Disallow user to enter spaces in TextInput. #21417

Environment

  React Native Environment Info:
    System:
      OS: Windows 10
      CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
      Memory: 2.12 GB / 7.64 GB
    Binaries:
      Yarn: 1.7.0 - C:\Users\admin\AppData\Roaming\npm\yarn.CMD
      npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
   Android SDK:
      Build Tools: 23.0.1, 25.0.2, 26.0.2, 27.0.3, 28.0.2
      API Levels: 23, 24, 25, 26, 28
    npmPackages:
      "react": "16.5.0",
      "react-native": "0.57.1"

Description

No number is allowed in TextInput. Value cannot be updated when a number is entered on the keyboard.

Reproducible Demo

demo:

class InputText extends React.Component{
  constructor (props) {
    super(props);

    this.state = {
      value: ''
    }
  }

  render () {
    <View>
      <TextInput
        value={this.state.value}
        onChangeText={(val) => {
          if (/[0-9]/.val) return Toast.info('Input of numbers is not allowed');

          this.setState({ value: val });
        }}/>
    </View>
  }
}

Although numbers are forbidden, they are displayed first and then disappear. How to Avoid Input Numbers in Input Box

[bartolkaruza]

Although briefly displaying the number may be unavoidable because the value has to travel across the bridge, you can reduce this time drastically by always setting the value (even if it contains a number), but with the number filtered out. This triggers a state change and an immediate re-render, making the time the number is displayed minimal (0 in most cases): https://snack.expo.io/@bartolkaruza/rn-#22384

[Arkcoderunner21]

I agree with bartolkaniza. Rerender

[Arkcoderunner21]

Demo

[bartolkaruza]

I think this is solved with the suggested forced re-render. Just let me know if you still think this is an issue and we'll re-open it.

@kelset close