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.

Answer 1

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 (
         {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.