TextInput crashes an app if Samsung Keyboard uses Predictive Text & Suggest text corrections

[BohdanSol]

Description

Main issue: Generated release .apk TextInput crash the app on Samsung when Predictive Text & Suggest text corrections is activated. React-native versions checked: 0.63.3, 0.67.2 Phones produced the issue: Samsung S20 Ultra, Samsung Galaxy S21 Plus Another possible issue: For all the crashes captured some parts of the text were underlined green or red, maybe the issue is with that suggestions... It was first produced by the production project based on 0.63.3v, then I created bare 0.67.2v project and added simple TextInput, and the issue still exists. Attaching a video so everybody can replicate.

https://user-images.githubusercontent.com/48454610/154644390-61bdd58c-e647-422d-b69b-c26dda88e721.mp4

Version

0.63.3, 0.67.2

Output of npx react-native info

System: OS: macOS 12.2.1 CPU: (8) arm64 Apple M1 Memory: 439.56 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 17.2.0 - /opt/homebrew/bin/node Yarn: 1.22.17 - /opt/homebrew/bin/yarn npm: 8.1.2 - /usr/local/bin/npm Watchman: 2021.12.13.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: API Levels: 29, 30, 32 Build Tools: 28.0.3, 29.0.2, 30.0.0, 30.0.2, 32.0.0 System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play ARM 64 v8a, android-31 | Google APIs ARM 64 v8a, android-32 | Google APIs ARM 64 v8a, android-32 | Google APIs Intel x86 Atom_64 Android NDK: Not Found IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7935034 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 1.8.0_292 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.67.2 => 0.67.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

1. Get my repo: https://github.com/BohdanSol/projectTwo
2. yarn install
3. Generate keystore, put it inside android>app. Change values regarding keystore inside gradlew.properties
4. From root cd android && ./gradlew assembleRelease
5. Test generated apk in real device

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

https://github.com/BohdanSol/projectTwo

[BohdanSol]

UPD: Seems like it's related with Samsung devices upgraded to Android 12

[kcsuyog]

I have the same issue. For us, it's mostly happening with SM-G998B and SM-G991B on Android 12

[tarouboy]

Not sure is it related but received app crash when typing. here's the log from Sentry

java.lang.IllegalStateException: Drag shadow dimensions must be positive
    at android.view.View.startDragAndDrop(View.java:26740)
    at android.widget.Editor.startDragAndDrop(Editor.java:1393)
    at android.widget.Editor.performLongClick(Editor.java:1432)
    at android.widget.TextView.performLongClick(TextView.java:12405)

[BohdanSol]

@tarouboy For me it's:

android.text.SpannableStringInternal in getSpanFlags at line 331
android.text.SpannableString in getSpanFlags at line 24
android.text.SpannableStringInternal in getSpans at line 389
android.text.SpannableString in getSpans at line 24
android.text.SpannableStringBuilder in change at line 431
android.text.SpannableStringBuilder in replace at line 560
android.text.SpannableStringBuilder in replace at line 518
android.text.SpannableStringBuilder in replace at line 39
android.view.inputmethod.BaseInputConnection in replaceText at line 945
android.view.inputmethod.BaseInputConnection in commitText at line 219
com.android.internal.widget.EditableInputConnection in commitText at line 204
com.android.internal.view.IInputConnectionWrapper in executeMessage at line 561
com.android.internal.view.IInputConnectionWrapper$MyHandler in handleMessage at line 118
android.os.Handler in dispatchMessage at line 106
android.os.Looper in loopOnce at line 226
android.os.Looper in loop at line 313
android.app.ActivityThread in main at line 8582
java.lang.reflect.Method in invoke
com.android.internal.os.RuntimeInit$MethodAndArgsCaller in run at line 563
com.android.internal.os.ZygoteInit in main at line 1133

[BohdanSol]

@JoshuaGross , @RSNara , @mdvacca , sorry for mentioning you all straight, but It seems very important issue for me. Maybe somebody can take at least a quick look at the repo I attached and give this higher priority status.

[rakefetWorkiz]

we having the exact same issue. this is real show stopper 🤦‍♀️

[efstathiosntonas]

Any updates regarding this issue? It’s happening on both Android 11 & 12 (rn 0.67.3), we get lot’s of crashes every day. It also lags a lot if a user enters a big block of text and it leads to ANR.

[JuanAlejandro]

We were able to reproduce this bug and we found that setting autoCorrect to false in the TextInput solves the issue. We are planning to roll out this soon and expect ANR numbers to go down. I'll keep you posted.

Try this and let me know if it works for you.

P.S.: Since this is happening only for Samsung devices with Android 12 I made this util to only set autoCorrect to false when the device meets these props:

import { toLower } from 'lodash';
import { getSystemVersion, useManufacturer } from 'react-native-device-info';

export const useIsSamsungWithAndroid12 = (): boolean => {
  const { loading, result } = useManufacturer();
  const systemVersion = getSystemVersion();

  return !loading && toLower(result) === 'samsung' && systemVersion.startsWith('12');
};

[BohdanSol]

@JuanAlejandro working as expected as workaround for this kind of issue. Thank you very much!

[systemride]

@JuanAlejandro Any update on whether your fix continues to solve the issue?

[smali-kazmi]

any fix for this issue? because lot of our users facing the same issue if they have Samsung Device

[smali-kazmi]

We were able to reproduce this bug and we found that setting autoCorrect to false in the TextInput solves the issue. We are planning to roll out this soon and expect ANR numbers to go down. I'll keep you posted.

Try this and let me know if it works for you.

P.S.: Since this is happening only for Samsung devices with Android 12 I made this util to only set autoCorrect to false when the device meets these props:

import { toLower } from 'lodash';
import { getSystemVersion, useManufacturer } from 'react-native-device-info';

export const useIsSamsungWithAndroid12 = (): boolean => {
  const { loading, result } = useManufacturer();
  const systemVersion = getSystemVersion();

  return !loading && toLower(result) === 'samsung' && systemVersion.startsWith('12');
};

doesn't fix the issue

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[efstathiosntonas]

Bad bot, issue still exists to this day

[efstathiosntonas]

Hey fellow devs, please upvote the comment under the Meta discussion about what to improve: https://github.com/react-native-community/discussions-and-proposals/discussions/528#discussioncomment-3890273

let’s hope it will get enough attention

[carstenhag]

Issue also exists with native android :D so I really don't think React can do anything apart from disabling hints on Samsung

[efstathiosntonas]

@carstenhag I have many samsung devices, I do not face such an issue with native apps. Can you please link a repro or a link to an issue? Thanks

[carstenhag]

@efstathiosntonas This is the code that we are using (native android project):

            <EditText
                android:id="@+id/inputFormFieldEditText"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:ellipsize="end"
                android:importantForAutofill="no"
                android:inputType="textFilter|textNoSuggestions"
                android:maxLines="1"
                android:textColor="@{whiteLabelThemePalette.textPrimaryColor}"
                android:textColorHint="@{whiteLabelThemePalette.textInactiveColor}"
                tools:text="Input text" />

        editText.addTextChangedListener(
            TextChangeListener {
                // Clear error text on input change.
                hideErrorText()
            }
        )
// and a few other methods like this, nothing affecting predictions 

Here's a repro description (sorry, only got it as png)

I can also reproduce it with a Samsung Galaxy S22.

[smali-kazmi]

This issue is still exist any work around of this issue?

[j-duggirala]

@smali-kazmi Did you get any work around?

[smali-kazmi]

@smali-kazmi Did you get any work around? this fix work for some user but for Android 13 facing the same issue https://github.com/facebook/react-native/issues/33139#issuecomment-1069560920

[JuanAlejandro]

@smali-kazmi Did you get any work around? this fix work for some user but for Android 13 facing the same issue #33139 (comment)

@j-duggirala @smali-kazmi I opened another issue because we are having problems again with Android 13. This time the text suggestions setting is causing the ANRs in our app. The temporary solution we implemented was to set the keyboardType to visible-password. This is not ideal because it adds a lot of limitations to the writing experience of the user but at least doesn't get the app to freeze.

I'm worried about this because this issue was opened almost one year ago and we haven't got one single response from the react-native team.

[Phong-TH]

@JuanAlejandro I have the same issue on our Samsung devices and received a lot of reports related to it. Just typing a sentence, the application will throw the ANR pop-up and must be forced close, the render thread is running forever. It can be solved by turning off the predictive and spell check but it causes a lot of bad situations 😕 We are crazy about this, any update for this?

[gkasireddy202]

@JuanAlejandro Any update on this?

[mark-careplanner]

We have this issue too. Disabling auto-suggest isn't an option for users who might have English as a second language.

[gkasireddy202]

Anyone please let me know if this issue is happening due to a Samsung OS update or a react-native problem?

[efstathiosntonas]

@gkasireddy202 prior Android 13 we had issues with autoCorrect and autoComplete, when we turned them off on Android devices it worked but with limitations for the end user.

Android 13 brings the issue back even though the “fix” above worked on < 13.

[gkasireddy202]

@efstathiosntonas - This issue will resolve by Google for Android 13?

[mark-careplanner]

@efstathiosntonas My only thought is why this hasn't become a bigger issue? Is there something unique we are doing (as in, people on this thread) that is causing this? Because if every RN TextInput on every new Samsung device failed to work, surely Facebook would have done something by now?!

[efstathiosntonas]

@gkasireddy202 no, we cannot get around it, only way to make the textInput to act as visible-password among all the other hacks: https://github.com/facebook/react-native/issues/35155#issuecomment-1324712290 to make it work.

@mark-careplanner it's an issue for a really long time (it's around for at least 2 years) and unfortunately it's not solved yet.