react-native: Using `toUpperCase` or `textTransform: 'uppercase'` breaks on an Android controlled TextInput

keyboardType={Platform.OS === 'ios' ? 'default' : 'visible-password'}

Seems to be the only workaround for me with Android at the moment (I’ve been looking for ages!). Will need some cross platform testing locally though.

autoCapitalize={'characters'} Seems to solve the problem. https://www.reddit.com/r/reactnative/comments/jhdref/any_solution_to_the_touppercase_problem

Text transform Example in React Native

Table of content

1. textTransform Props
2. textTransform uppercase
3. textTransform lowercase
4. textTransform capitalize

https://infinitbility.com/react-native/text-transform-in-react-native

This issue is still present in React Native version: 0.63.2

I find a possible solution to my problem, the TextInput has a property autoCapitalize with the values ‘words, sentences, characters’, but the user can disable the uppercase in his keyboard so is necessary convert the value to uppercase when i want to save the data

i have the same issue when i want to save the value on the onChangeText function. i’m using expo and react-hook-form for handle the form.

Hello ReactNative Developers! 😃

I just prepared Pull Request https://github.com/facebook/react-native/pull/29070 that seems to solve this issue

PREVIEWS OF THE BUGFIX

BEFORE	AFTER

You can contact me by email at fabrizio.developer@gmail.com

Please head over to the Pull Request https://github.com/facebook/react-native/pull/29070 and thumbs up if you like it. If you want to get this fix you can follow the instructions for building ReactAndroid or checkout my video introduction on forking react-native (patch-package does not work).

If you don’t like the pr please feel free to leave a code review or comment, I’ll be happy to add improvements and changes.

Thanks a lot 🙏 ☮️ 🏖️

You have the same behaviour with the code that delegates the ‘toLowercase’ function elsewhere :

const [filter, setFilter] = useState('');

useEffect(() => {
    console.log('filter:', filter);
    if (filter != filter.toLowerCase()) {
      const replic = filter.toLowerCase();
      console.log('replic:', replic);
      setFilter(replic);
    }
  }, [filter]);

<TextInput
              onChangeText={text => setFilter(text)}
              value={filter}
              placeholder="post filter"
              style={CommonPrxStyles.inputWoWidth}
              maxLength={15}
              autoCapitalize="none" //bug of double 1st letter-still in 0.73.2 - facebook/react-native/issues/27449
            />

you get in console with typing “fgHj” : LOG filter: f LOG filter: fg LOG filter: fgH LOG replic: fgh LOG filter: fgh LOG filter: fghfgHj LOG replic: fghfghj LOG filter: fghfghj

it as if there is a state inside the Textinput that is emerging back with an old memory not updated.

hi, yes on RN 0.73.2 , with code :

const [filter, setFilter] = useState('');

<TextInput
              onChangeText={text => setFilter(text.toLowerCase())}
              value={filter}
              placeholder="post filter"
              style={CommonPrxStyles.inputWoWidth}
              maxLength={15}
            />

autoCapitalize="none" solve the problem for 1st letter if you don not force to uppercase.

The problem is :

• double 1st letter if uppercase : ex: “Fg” gives “ffg” but “fg” remains “fg” and “Fgh” gives “ffgffgh”
• “fghK” gives “fghk” but “fghKl” gives “fghkfghkl”
• no effect on lowercases : “fghj” gives “fghj”

yes I got that bug also on RN 0.70.6 the first letter is doubled with .toLowerCase() (Android) and with autoCapitalize=“none” in the Text Input parameters it is “solved” (does not reaprear)