React Native - text input blinking when using state

Question

I'm adding some validation to the input text of a TextInput component. The TextInput's value is handled in the state and is only updated when the value entered is valid.

my code looks like so:

class TextInputWithValidation extends Component {

  constructor(props) {
    super(props);
    this.state = { text: ''}
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(text) {
    if(isValid) {
        this.setState({text})
    }
  }

  render() {
    return (
            <TextInput
                value={this.state.text}
                onChangeText={this.handleChange}
            />
    )
  }
}

The problem is that when entering a non valid character to the TextInput the non valid text appears for a second and the disappears - what causes an unwanted blink.

Any ideas how to solve this?

It is actually a numeric input, the inserted value should be restricted to a certain decimal precision. So for example if the user types more than 2 digits after the decimal point - i don't update the state value — naomi, Sep 04 '17 at 10:55

Ryan Turnbull · Accepted Answer · 2017-09-04T11:33:47.193

Based on your comment, a work around could be to use your handleChange method to detect for a decimal point, and then simply set some sort of inputLengthState to the current location of the decimal

Then you can use the prop for text input maxLength = this.state.inputLengthState + this.state.precision, with precision being your decimal places. Ive written some basic code below

class TextInputWithValidation extends Component {

  constructor(props) {
    super(props);
    this.state = { 
       text: '',
       precision: 2,
       inputLength: 100,
    }
    this.handleChange = this.handleChange.bind(this);
  }

 handleChange(text) {
   if(isValid) {
     this.setState({text})
   }
   //somewhere here you would check text for a decimal place
   //and then set the inputLength the decimals' string index. If null,
   //set it to some limit however you would like ( i used 100 ).
 }

render() {
    return (
        <TextInput
            value={this.state.text}
            maxLength={this.state.inputLength + this.state.precision}
            onChangeText={(text) => {this.handleChange(text)}}
        />
    )
}

}

Apologies if my code is a bit off syntax wise, it has been a little while. For the algorithm to check for the decimal place, I'm sure this should be pretty straight forward. If not, say.

score 0 · Answer 2 · answered Sep 04 '17 at 08:22

you can try to use '=>' operator

class TextInputWithValidation extends Component {

constructor(props) {
  super(props);
  this.state = { text: ''}
  this.handleChange = this.handleChange.bind(this);
}
//here
handleChange = (text) => {
  if(isValid) {
      this.setState({text})
  }
}

render() {
  return (
          <TextInput
              value={this.state.text}
              //and here
              onChangeText={() => this.handleChange}
          />
  )
}
}

React Native - text input blinking when using state

2 Answers2

Linked