toLowerCase on TextInput value is creating duplicate text if capital letter created

Question

This one's an interesting one.

I created a TextInput that takes a value, then lower cases it, adds it to state, and sets it as the default value. On my android physical device, if you force a capital letter ( autocapitalize is set to none), and then quickly tap other letters, it will duplicate and add extra text.

Is there a way to avoid this?

Here's a snack https://snack.expo.io/Hk1reKHJ4

Run it on your android or on the simulator, tap the upper case button on the keyboard, tap a few other letters, tap the upper case again, tap a few other letters, and you should set this error.

Thanks!

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      text: ''
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={ styles.inputContainer }
          defaultValue={ this.state.text }
          autoCapitalize="none"
          onChangeText={ value => this.setState({ 
            text: value.trim().toLowerCase()
            })}
        />
      </View>
    );
  }
}

Answer 1

Unfortunately this is an issue that has been open for a couple of years with no solution, you can check this thread, no one found a solution. There is a temporary workaround until the React Native team fixes this bug as it seems to be taking too long, check it out here.

Answer 2

add these three lines inside TextInput, it should fix the problem, original answer source

 autoCapitalize="none"
 secureTextEntry={true}
 keyboardType={"visible-password"}

see my this answer for example