react-native: Can't modify text in TextInput onChangeText callback on Android

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 🙏 ☮️ 🏖️

I am not sure if this would also work on IOS, but it solved the problem for me on Android. The answer is quite simple: NEVER use value when rendering a TextInput. Use defaultValue instead.

If this turns out to really fix the issue for every platform, maybe we could just issue a warning every time someone uses value as a prop to TextInput.

UPDATE: I’ve tried this in iOS, and it also works.

Still an issue.

defaultValue doesn’t solve the problem. If you want to mask user inputs and show user masked inputs, still have to use value prop.

Still seeing this over here as well.

Can confirm this also happens on RN 0.59 as well. Looks like I didn’t need to modify controlled text input in a while, but when I did I remember using an overlay over transparent uncontrolled text input that would display the transformed text. I’d say it’s pretty serious bug (and pretty old, happens at least since 0.57).

Still present in “v0.63.2” which was released couple days ago. @hramos

You could mess around with a Math.random() key for the input field. This blurs the focus after each keystroke though, so you’d have to write code to re-focus and move the cursor to the end. Personally, I no longer modify the input at all on Android, and instead just do the all-caps (or whatever) on the back end before saving to the DB. Not the best user experience. It’s too bad the RN team seems uninterested in fixing pretty major issues like this one, and instead seems to spend their time making breaking changes to APIs, moving things arbitrarily out of the core APIs, etc.

same here on version “v0.63.2”

Experience the same bug right now. Basically there is no way to implement something as simple as masked input.

Here, before it becomes stale.

https://snack.expo.io/@anchi/8017c6

PS: run this on a real device.

This issue still persists. This is a pretty serious issue for inputting text and there is no special workaround except make a specific event triggering component (like a button) to ensure the textchange happens correctly. Using onEndEditing and oneSubmitHandler also doesn’t do anything. Please correct this soon.

My report of this bug

Summary

When attempting to ignore certain characters by controlling the state value that’s passed to the TextInput, the TextInput’s natively held value get’s out of sync. This makes it impossible to enforce a particular text pattern at the time of a user entering the text. This exact issue was occurring before React Native 57.1 on iOS, as noted here in this now closed issue #18874 .

React Native version: 0.59.8(based on Expo SDK 34)

Steps To Reproduce

1. Implement an onChangeText event handler that will selectively choose to not update the state value(which control’s the TextInput’s natively stored value). For example, let’s say uppercase letters like ‘A’, ‘B’, ‘C’, etc…
2. Enter characters other than the ones to be ignored
3. Enter at least 1 or more of the ignored characters
4. Go back to entering characters other than the ones to be ignored

Describe what you expected to happen:

1. Enter ‘abc’, resulting in ‘a’, ‘ab’, and ‘abc’ being passed to onChangeText handler each of which are valid and are set on the state value that controls the TextInput.
2. Enter ‘A’ which should be ignored, thus ‘abcA’ will not be set on the state value that controls the TextInput. Meaning only ‘abc’ is still displayed in the TextInput.
3. Enter ‘d’, which should result in onChangeText handler receiving ‘abcd’ which is valid and will be set on the state value that controls the TextInput.

Snack, code example, screenshot, or link to a repository

1. Snack here
2. Screenshots that follow the steps outlined in the Describe what you expected to happen section above. Notice after entering ‘A’ that a pattern emerges in the natively held text value. It concatenates the characters that have been entered to the state controlled value that has remained at ‘abc’ since the character ‘A’ was entered.
   • Enter ‘a’
   • 
   • Enter ‘b’
   • 
   • Enter ‘c’
   • 
   • Enter ‘A’
   • 
   • Enter ‘b’
   • 

Do you still experience this issue?

I have four years of experience maintaining facebook/react-native and I specialize in the Text and TextInput components. I currently have 58 facebook/react-native PRs.

If you still experience this issue, I will prepare a patched release with the fix.

Thanks a lot

Correct. I’m only six months in but so far my impression is that Flutter/Dart is mature, well thought-out, concise, and free of sanctimony.

The same issue on Android in Emulator. It works fine for the Expo playground so don’t use it to test.

Simple reproduction:

const ControlledComponent = () => {
  const [state, setState] = useState('0.00');
  const cursor = 1;
  return (
    <TextInput
      ref={ref}
      autoFocus
      onKeyPress={() => { /* empty */ }}
      selection={{start: cursor, end: cursor}}
      value={state}
      keyboardType="numeric"
    />
  );
};

There is no way to prevent default behavior, event.preventDefault() also doesn’t work. The input is always updated even if the component is controlled.

I look again into this when I have more free time. I need to update my PR with the improvements included in https://github.com/facebook/react-native/pull/33468. For this reason https://github.com/facebook/react-native/pull/29070 is back to draft. We can not trigger setText in a ReactEditText. replace is used on purpose. Sorry for the delay in the development of this fix.

@fabriziobertoglio1987 You are awesome! Thank you so much.

Same here. Experiencing this with react-native-masked-input.

@lgenzelis, thanks! So what value is good for again?

Kind of a hacky work around (and doesn’t always work quite as expected):

const onChange = (e: string) => {
    if (isValidInput(e)) {
        textInputRef.current?.setNativeProps({ text: e });
    }
}

Thank you! I already tried that, but It’s still flickering on device… It works fine on Simulator. Incidentally, I would like to prevent type new lines.

Can you try something like this?

. . .
const previousValueRef = React.useRef('');
. . .
const onChange = (e: string) => {
    if (textInputRef.current) {
        const textInput = textInputRef.current;
        textInput.setNativeProps({ text: previousValueRef.current });
        if (isValidInput(e)) {
            textInput.setNativeProps({ text: e });
            previousValueRef.current = e;
        }
    }
}
. . .

If you need to accept only integers and know your max length, there was a suggestion from this SO post:

<TextInput
  maxLength={MAX_LENGTH}
  keyboardType="numeric"
  value={value}
  onChangeText={(e) => {
    if (/^\d+$/.test(e)) setValue(e);
  }}
  placeholder="Type only numbers..."
/>

Do you still experience this issue?

I have four years of experience maintaining facebook/react-native and I specialize in the Text and TextInput components. I currently have 58 facebook/react-native PRs.

If you still experience this issue, I will prepare a patched release with the fix.

Thanks a lot

Kind of a hacky work around (and doesn’t always work quite as expected):

const onChange = (e: string) => {
    if (isValidInput(e)) {
        textInputRef.current?.setNativeProps({ text: e });
    }
}

The issue still persists on both IOS and Android

I try to limit decimal points to 8 length. The user sees 9th character shortly before removal. It causes flickery.

https://snack.expo.dev/N5IcDRFWc

What I got to work on Android while @fabriziobertoglio1987’s PR is open. I want text input to be uppercased. autoCapitalize='characters' works on iOS but there needs to be some additional properties so android doesn’t jumble keystrokes

<TextInput
                autoCorrect={false}
                autoCapitalize={Platform.OS === 'ios' ? 'characters' : undefined}
                secureTextEntry={Platform.OS === 'ios' ? false : true}   // Add this for android to prevent duplicate keystrokes
                keyboardType={Platform.OS === 'ios' ? undefined : 'visible-password'}  // Add this for android to prevent duplicate keystrokes
                defaultValue={code}  // Use `defaultValue` instead of `value`
                onChangeText={(text) => setCode(text.toUpperCase()) }
                style={styles.textInputLarge}
                placeholder="enter code"
                returnKeyType="send"
                textContentType="oneTimeCode"
                maxLength={6}
              />

@umair-khanzada your issue seems different. In my case, the callbacks are being called just fine… it’s what happens when I modify the text that makes things screwy.

Shouting into the wind! Hope the next person can use this as a basis for reporting the issue.