react-native: TextInput is causing app to hang in Samsung devices with Android 13

Today a new update came out on my S22 Android 13, after installing it and testing out my production app the lag was almost 0. Can anyone else confirm?

edit: build number is TP1A.220624.014.S901BXXU2BVL1

I’ve posted it on this issue but posting here as well for anyone who can’t just set the keyboard to visible-password.

By using an uncontrolled input with memoized props we were able to reduce the amount of ANRs by an order of magnitude. It still happens but it’s much better, and most users who switched to an alternative keyboard like Gboard are saying they’re not seeing issues anymore.

Here is the exact change we made:

const NoteInput = (props: Props) => {
  const { onChangeText, formikFieldName } = props;
  const { values, setFieldValue } = useFormikContext<FormikNoteInputType>();
  const onChangeTextCallback = React.useCallback(
    (text: string) => {
      setFieldValue(formikFieldName ?? 'note', text);
      onChangeText?.(text);
    },
    [onChangeText, setFieldValue, formikFieldName],
  );

-  const inputValue = formikFieldName ? values[formikFieldName] : values.note;
+  const originalInputValue = useMemo(
+    () => (formikFieldName ? values[formikFieldName] : values.note),
+    // We don't want to rerender the TextInput when the value changes
+    // as it's an uncontrolled input and can create performance issues
+    // with some text suggestion integrations e.g. Grammarly.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [formikFieldName],
+  );

   return (
     <TextInput
       {...props}
-      value={inputValue || ''}
+      defaultValue={originalInputValue || ''}
       onChangeText={onChangeTextCallback}
     />
   );

Here is the data showing the drop in ANRs for Samsung devices with our update:

@Saad-Bashar No I mean the input will be narrowed to one line, so you can’t have TextArea-like inputs So it will always be 1 line without the return key as a new line ( while you can still scroll if the text is long enough )

We used returnKeyType=none, then it works fine for multiline.

For anyone dealing with this issue, the freezing only seems to be happening using the default Samsung keyboard. We’ve been able to recommend to our users to install Google’s Keyboard and the freezing does not happen.

https://play.google.com/store/apps/details?id=com.google.android.inputmethod.latin&hl=en_US&gl=US

Not a great long term solution, but hopefully can help provide some relief while this is investigated.

Running the following command mutliple times on Samsung S22 Android 13 using GBoard app version 12.3.04.47 does not produce an ANR. I would say that there’s definetely something going on with Samsung’s custom keyboard but then we got Pixel devices with the same issue that probably run GBoard by default.

If you want to test it, tap on a TextInput in app and run it on terminal.

get real device id:

adb devices

then run:

adb -s <enter your real device id here> shell input text Contrarytopopularbelief,LoremIpsumisnotsimplyrandomtext.IthasrootsinapieceofclassicalLatinliteraturefrom45BC,makingitover2000yearsold.RichardMcClintock,aLatinprofessoratHampden-SydneyCollegeinVirginia,lookeduponeofthemoreobscureLatinwords,consectetur,fromaLoremIpsumpassage,andgoingthroughthecitesofthewordinclassicalliterature,discoveredtheundoubtablesource.LoremIpsumcomesfromsections1.10.32and1.10.33ofdeFinibusBonorumetMalorumTheExtremesofGoodandEvilbyCicero,writtenin45BC.Thisbookisatreatiseonthetheoryofethics,verypopularduringtheRenaissance.ThefirstlineofLoremIpsum,Loremipsumdolorsitamet..,comesfromalineinsection1.10.32.Contrarytopopularbelief,LoremIpsumisnotsimplyrandomtext.IthasrootsinapieceofclassicalLatinliteraturefrom45BC,makingitover2000yearsold.RichardMcClintock,aLatinprofessoratHampden-SydneyCollegeinVirginia,lookeduponeofthemoreobscureLatinwords,consectetur,fromaLoremIpsumpassage,andgoingthroughthecitesofthewordinclassicalliterature,discoveredtheundoubtablesource.LoremIpsumcomesfromsections1.10.32and1.10.33ofdeFinibusBonorumetMalorumTheExtremesofGoodandEvilbyCicero,writtenin45BC.Thisbookisatreatiseonthetheoryofethics,verypopularduringtheRenaissance.ThefirstlineofLoremIpsum,Loremipsumdolorsitamet..,comesfromalineinsection1.10.32.Contrarytopopularbelief,LoremIpsumisnotsimplyrandomtext.IthasrootsinapieceofclassicalLatinliteraturefrom45BC,makingitover2000yearsold.RichardMcClintock,aLatinprofessoratHampden-SydneyCollegeinVirginia,lookeduponeofthemoreobscureLatinwords,consectetur,fromaLoremIpsumpassage,andgoingthroughthecitesofthewordinclassicalliterature,discoveredtheundoubtablesource.LoremIpsumcomesfromsections1.10.32and1.10.33ofdeFinibusBonorumetMalorumTheExtremesofGoodandEvilbyCicero,writtenin45BC.Thisbookisatreatiseonthetheoryofethics,verypopularduringtheRenaissance.ThefirstlineofLoremIpsum,Loremipsumdolorsitamet..,comesfromalineinsection1.10.32.Contrarytopopularbelief,LoremIpsumisnotsimplyrandomtext.IthasrootsinapieceofclassicalLatinliteraturefrom45BC,makingitover2000yearsold.RichardMcClintock,aLatinprofessoratHampden-SydneyCollegeinVirginia,lookeduponeofthemoreobscureLatinwords,consectetur,fromaLoremIpsumpassage,andgoingthroughthecitesofthewordinclassicalliterature,discoveredtheundoubtablesource.LoremIpsumcomesfromsections1.10.32and1.10.33ofdeFinibusBonorumetMalorumTheExtremesofGoodandEvilbyCicero,writtenin45BC.Thisbookisatreatiseonthetheoryofethics,verypopularduringtheRenaissance.ThefirstlineofLoremIpsum,Loremipsumdolorsitamet..,comesfromalineinsection1.10.32.Contrarytopopularbelief,LoremIpsumisnotsimplyrandomtext.IthasrootsinapieceofclassicalLatinliteraturefrom45BC,makingitover2000yearsold.RichardMcClintock,aLatinprofessoratHampden-SydneyCollegeinVirginia,lookeduponeofthemoreobscureLatinwords,consectetur,fromaLoremIpsumpassage,andgoingthroughthecitesofthewordinclassicalliterature,discoveredtheundoubtablesource.LoremIpsumcomesfromsections1.10.32and1.10.33ofdeFinibusBonorumetMalorumTheExtremesofGoodandEvilbyCicero,writtenin45BC.Thisbookisatreatiseonthetheoryofethics,verypopularduringtheRenaissance.ThefirstlineofLoremIpsum,Loremipsumdolorsitamet..,comesfromalineinsection1.10.32.Contrarytopopularbelief,LoremIpsumisnotsimplyrandomtext.IthasrootsinapieceofclassicalLatinliteraturefrom45BC,makingitover2000yearsold.RichardMcClintock,aLatinprofessoratHampden-SydneyCollegeinVirginia,lookeduponeofthemoreobscureLatinwords,consectetur,fromaLoremIpsumpassage,andgoingthroughthecitesofthewordinclassicalliterature,discoveredtheundoubtablesource.LoremIpsumcomesfromsections1.10.32and1.10.33ofdeFinibusBonorumetMalorumTheExtremesofGoodandEvilbyCicero,writtenin45BC.Thisbookisatreatiseonthetheoryofethics,verypopularduringtheRenaissance.ThefirstlineofLoremIpsum,Loremipsumdolorsitamet..,comesfromalineinsection1.10.32.Contrarytopopularbelief,LoremIpsumisnotsimplyrandomtext.IthasrootsinapieceofclassicalLatinliteraturefrom45BC,makingitover2000yearsold.RichardMcClintock,aLatinprofessoratHampden-SydneyCollegeinVirginia,lookeduponeofthemoreobscureLatinwords,consectetur,fromaLoremIpsumpassage,andgoingthroughthecitesofthewordinclassicalliterature,discoveredtheundoubtablesource.LoremIpsumcomesfromsections1.10.32and1.10.33ofdeFinibusBonorumetMalorumTheExtremesofGoodandEvilbyCicero,writtenin45BC.Thisbookisatreatiseonthetheoryofethics,verypopularduringtheRenaissance.ThefirstlineofLoremIpsum,Loremipsumdolorsitamet..,comesfromalineinsection1.10.32.

So, in our use case, I was able to identify the issue and it’s actually a bug in the android framework (issue only happens on android version 13 for us)

You can find more details here: https://github.com/facebook/react-native/issues/35350#issuecomment-1323399593

Is there any official place where we can follow up on this particular textinput ANR issue?

it is getting out of hand and I see it all over the place with nothing official and no actual progress on that issue so I don’t even know if it’s in google’s hands, or samsung, or react native?

For anyone experiencing inverted FlatList issues, here is a dedicated issue to that problem with solutions suggested: https://github.com/facebook/react-native/issues/30034

Looks like it might not just be related to react-native, https://support.google.com/pixelphone/thread/181332682/keyboard-freezing-after-android-13-update?hl=en

We’ve finally solved this issue for our app, the root cause was re-renders locking up the UI.

Echoing @Houguiram on this comment https://github.com/facebook/react-native/issues/35155#issuecomment-1335158354, making the component fully uncontrolled makes a huge difference.

For us we had a class component using Formik, so memoizing wasn’t possible. Formik was causing double re-renders every time the user typed. We refactored our component to remove Formik and make sure that zero re-renders happened while typing. This might be complex for some if you’re doing something like updating state on the component onDataChanged. We’re using mobx as our data store and are simply updating the value in data store with onDataChanged, to be accessed when the form is submitted. Since there’s no state update…no re-render.

Obviously it’d still be great to figure out the actual root cause of why this is only happening on Samsung devices. But for those looking for immediate relief, look into how often your components are re-rendering on text changes and try to eliminate/reduce that.

Adding inputType textNoSuggestions in react-native to disable the autocomplete functionality. https://stackoverflow.com/a/1992201/7295772

android:inputType="textNoSuggestions"

https://github.com/facebook/react-native/blob/76a14454d7f1f2b2ba8f5a79c2f640fafb42de6d/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L1153-L1168

I will test and publish a PR tomorrow.

But that does not solve the issue 😦 we still need to disable auto suggestions.

I’ve created a minimal react-native app with react-native init.The app was very minimal:

    <SafeAreaView style={{marginHorizontal: 16}}>
      <View style={{flex: 1}}>
        <TextInput multiline style={{height: 100, backgroundColor: 'red'}}/>
        </View>
    </SafeAreaView>

The TextInput will ANR after multiple lines on my Samsung S22 when using the Samsung Keyboard. It will not ANR when using GBoard.

The workaround of turning off auto complete works, but is a non-ideal experience for users. I haven’t found anything better since I can’t tell my users to change their keyboard for our app.

@efstathiosntonas in the interim can you use onContentSizeChange and set the height using a computed style manually?

Oh yeah I see, good separation! Sorry for any caused confusion 😄

@hannojg Thanks for your implementation but I do not use FlatList, just a screen have a TextInput with multiline={true} and predictive causes the ANR, so I don’t think the inverted prop causes the error 😕

Unfortunately, our case is the same. One of the key functionality of our apps is writing text in the TextInput. The majority of our android users are using Samsung. We are getting so many crashes every day 😦

Closing issue as we’re addressing in https://github.com/facebook/react-native/issues/35590#issuecomment-1380871509

@pierroo you’d need to build react-native from source I think and use the changes here to add the no-suggestions keyboard type. Once done though the outcome is nicer than visible-password which is the best we have without this change. At least users can use emojis again with this

https://github.com/facebook/react-native/pull/35691/files#diff-9a8e69138cf9cdf44b42d6593d0eba921cedf195288448b13984747336bd5dba

For anyone dealing with this issue, the freezing only seems to be happening using the default Samsung keyboard. We’ve been able to recommend to our users to install Google’s Keyboard and the freezing does not happen.

https://play.google.com/store/apps/details?id=com.google.android.inputmethod.latin&hl=en_US&gl=US

Not a great long term solution, but hopefully can help provide some relief while this is investigated.

I still get ANRs and all the other issues on the latest Samsung firmware with react-native based apps when using Google Keyboard

Much like the goggles, this does nothing

@kelset is the react-native team aware of this issue? Thank you 🙏

@efstathiosntonas have you tried using an uncontrolled input with no default value? For me it resolves the issue, even with the samsung keyboard with auto-correct and suggestions enabled.

Depending on the usage it might not be ideal but could be much better than disabling all the fancy keyboard features with keyboardType='visible-password'.

Also if it turns out to actually solve the issue, it could help identify a potential fix at TextInput level rather than waiting for a hypothetical fix from Samsung or Android.

Actually, here is something weird in our app: when on an uncontrolled input with an empty defaultValue, performance is fine with the Samsung keyboard. But if I set the defaultValue to a non-empty string then performance tanks and it eventually hangs.

I’ll try and see if I get the same thing with a minimal repro.

@Phong-TH - I will check it.Thanks.

On my Samsung S22 I used useState on onChangeText and no value. I’ve converted it to useRef and it still lags.

2022-11-24 09:46:12.768 1468-5955/? D/InputDispatcher: Inject key (20336/2000): action=1, f=0x0, d=-1, time=48053981766677
2022-11-24 09:46:12.768 1468-5955/? D/WindowManager: interceptKeyTq interceptKeyResult=1
2022-11-24 09:46:12.768 1468-1772/? I/InputDispatcher: Dropped event because it is stale.
2022-11-24 09:46:12.768 1468-5955/? W/InputManager: Input event injection from pid 20336 failed.
2022-11-24 09:46:12.768 1468-5955/? D/InputDispatcher: Inject key (20336/2000): action=0, f=0x0, d=-1, time=48053981766677
2022-11-24 09:46:12.768 1468-5955/? D/WindowManager: interceptKeyTq interceptKeyResult=1

@cortinico this should be closed too?

If the issue is with the usage of an inverted FlatList I recommend manually inverting the FlatList. If you guys are interested I can post an example

Same here! The solution keyboardType='visible-password' works for normal inputs, but won’t work for multiline inputs as it will always be 1 line without the return key as a new line ( while you can still scroll if the text it long enough )

@rudenick0309 just one last thing… are you using the default keyboard of Samsung? There are a handful of users that prefer to have the Gboard. I don’t know if the issue still persists with a different keyboard, but it might be a possibility.

And yes, I solved it by putting the keyboardType='visible-password' to the TextInput. But I wouldn’t do it in your app if you haven’t received complaints or your ANRs are increasing.

@JuanAlejandro thank your answer! but, i have device like you. exactly samsung 22, 22+, 22ultra with android 13. i dont know why i cannot reproduce this problem. am i lucky? 😃

By the way, did you solve it by putting " keyboardType={‘visible-password’} " in the TextInput tag? i have made a simple realtime chat app using ‘TextInput’. so i want to prevent textInput this problem.

@JuanAlejandro hi! i downloaded your repo today. but, i cannot reproduce the problem. there are only expected results - “The app works properly when the user types”. i followed your step - “Steps to reproduce”. and did not to change for code. and i builded on ‘galaxy 22, plus, ultra’. all results are same. in your local or emulator not applied to your solution, is the problem still occured?

Looks like it might not just be related to react-native, https://support.google.com/pixelphone/thread/181332682/keyboard-freezing-after-android-13-update?hl=en

I wouldn’t say this is related to this issue since there are not enough data to say this is happening to all devices with Android 13 (I have a Google Pixel 4 XL and I have not experienced any issue with the keyboard).