TextInput in upperCase avoid rerenders

Question

I'm forcing the TextInput component with uppercase. And when I write for example "Bug" it shows me "BUBUG", but the first 2 letters it writes correctly. For example:

• When I press the B it shows "B". this is correct
• when I press the U it shows "BU". this is correct
• When I press the G it shows "BUBUG". this is incorrect

This problem only happens in android. In ios doesn't happen.

The text is a useState. I have tried the following code and also adding the textTtransform property inside textStyles.

 <TextInput
          {...register}
          autoFocus={autoFocus}
          value={text}
          onChangeText={onChangeText}
          style={[
            InputTextStyle.input,
            textStyles,
            !!error ? {color: baseColors.principal} : null,
          ]}
          onBlur={onBlurInput}
          onFocus={() => {
            textValue.value = 1;
            setShowGradient(true);
          }}
          cursorColor={baseColors.principal}
          keyboardType={keyboardType}
          maxLength={max}
          editable={editable}
          textAlign={textAlign}
        />

  const onChangeText = (text: string) => {
    // onChange(text);
    const uppercaseText = text.toUpperCase();

    setText(uppercaseText);
  };

Answer 1

The react version I'm using is 70.6. The work around I've found to avoid this bug is to convert the text to upperCase in the onblur() method.