TextInput flickering when format the text

🐛 Bug Report

When trying to format the value and applying the state, the text in text input is flickering:

Any tips to prevent this behavior without the need to change the native code?

To Reproduce

Using the code sample:

• Tap the text input
• Type A
• Type 1 repetitively

Expected Behavior

The text input should not display the invalid character.

Code Example

import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';

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

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          value={this.state.text}
          onChangeText={text => {
            
            text = text.replace(/[0-9]/g, '')

            this.setState({
              text
            })
          }}
          style={styles.input}
        />
      </View>
    );
  }
}

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

Environment

React Native Environment Info:
    System:
      OS: macOS 10.14.4
      CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
      Memory: 612.89 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.14.1 - ~/.nvm/versions/node/v10.14.1/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 6.9.0 - ~/.nvm/versions/node/v10.14.1/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 21, 23, 26, 27
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.2, 26.0.0, 26.0.2, 26.0.3, 27.0.1, 27.0.3, 28.0.3
        System Images: android-23 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.1 AI-173.4720617
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0
      react-native: https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz => 0.57.1

[edipkavvas]

I can’t understand how that kind of big issue still remains unresolved. Input is the most important component for almost all kind of applications and it is obviously flickering when we try to disallow some characters using regex. Input shouldn’t take any action until the state given to value prop changes, so when it is controlled. It should wait the state change but it can’t. A very famous library like react-native shouldn’t have that kind of big bug

[lgenzelis]

I think I found an answer to this issue, and almost due to sheer luck, I must say. The answer is short: NEVER use value to render the value of TextInput. Use defaultValue instead. Tada! That solved my flickering problem! =D

In the example posted by OP, render function should have been:

render() {
    return (
      <View style={styles.container}>
        <TextInput
          defaultValue={this.state.text}  // -> Here! This is all we need to modify.
          onChangeText={text => {
            
            text = text.replace(/[0-9]/g, '')

            this.setState({
              text
            })
          }}
          style={styles.input}
        />
      </View>
    );
  }