React Native: TextInput toUpperCase does not work on Android in onChangeText

Question

I have a TextInput component that should transform the input to capitals whilst typing. My code is as follows:

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

export default class ProfileTest extends React.Component {

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

  render() {
    return ( 
     <View>
          <TextInput
            style={{fontSize : 60}}
            onChangeText={text => {
              text = text
                .toUpperCase();
              this.setState({ text: text });
            }}
            value={this.state.text}
            placeholder="enter text"
          />

        </View>
    )
  }
}

And on Expo, this does work. However, when I try this on my Android device, I get the following behavior:

The first two letters work fine, but whenever I add a third letter, it suddenly repeats the first two letters so that ABC -> ABABC I have no idea why it does this and I cannot seem to get rid of it. I have identified the '.toUpperCase()' as the culprit.

Thanks for helping!

Answer 1

You can find more information here: https://github.com/facebook/react-native/issues/23578

1 person made a fix for it but it is still not in production: https://github.com/facebook/react-native/pull/29070

I tried to find some workaround like mutating state, refs but nothing works :/

Answer 2

import React, { useState } from 'react';
import { TextInput, Platform } from 'react-native';

const UselessTextInput = () => {
  const [info, setInfo] = useState('');

  return (
    <TextInput
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      onChangeText={text => {
       setInfo(text.toLowerCase()) 
      }}
      secureTextEntry={Platform.OS === 'ios' ? false : true}
      keyboardType={Platform.OS === 'ios' ? null : 'visible-password'}
      value={info}
    />
  );
}

export default UselessTextInput;