TextInput is causing app to hang in Samsung devices with Android 13

[JuanAlejandro]

Description

Our app is throwing ANRs when users with Samsung devices with Android 13 are typing in input fields. We had a similar issue for Samsung users with Android 12 and we ended up disabling auto-correct for those users to fix this issue. Now it looks like is the suggestions setting that is causing ANRs in Android 13 so we are setting the keyboardType as visible-password to avoid suggestions.

Version

0.69.3

Output of npx react-native info

System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.36 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.5.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.12.1 - /opt/homebrew/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8609683
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.12 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1 - Clone the repo https://github.com/JuanAlejandro/keyboard-issue-samsung
2 - Run yarn install
3 - Test release variant in a Samsung S22 with Android 13
4 - Start typing until you reach 3-4 lines of text.

Expected result:

• The app works properly when the user types

Actual result:

• The app hangs

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

GitHub repo: https://github.com/JuanAlejandro/keyboard-issue-samsung

Video:
https://user-images.githubusercontent.com/11820379/199054761-5bd9d015-488f-4528-bf5e-4992f02e41c0.mp4

[lucasuracosta]

I'm having a similar ANR but with Pixel phones. And it's only happening in Android 13.

[Dlpan]

I have the same issue with samsung Android 13

[justindi15]

Our users are experiencing the same thing. Can you confirm that suggestions are causing the hanging? How did you guys workaround it?

[JuanAlejandro]

Our users are experiencing the same thing. Can you confirm that suggestions are causing the hanging? How did you guys workaround it?

We set the keyboardType to visible-password. This will not bring up the text suggestions menu up so it will not cause the hang.

[rikur]

Subscribing

[Saad-Bashar]

Currently we are setting autoCorrect to false for android version 12 and 13 and for samsung devices, do we need to set keyboardType to visible-password as well? @JuanAlejandro

[Saad-Bashar]

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

[JuanAlejandro]

Currently we are setting autoCorrect to false for android version 12 and 13 and for samsung devices, do we need to set keyboardType to visible-password as well? @JuanAlejandro

Yes @Saad-Bashar. This is an ugly hack but better to have that than the app freezing every time they are typing.

[JuanAlejandro]

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).

[rudenick0309]

@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?

[JuanAlejandro]

Hi @rudenick0309! Does your Samsung device has Android 13?

I just updated the steps to include "Samsung S22 with Android 13" in the 3rd step.

You can see how this issue is repro in the video below

video-repro-s22-android-13.mp4

[rudenick0309]

@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]

@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.

[rudenick0309]

@JuanAlejandro thank you for your advice. you are right. i have not received any complaints or ANRs. i will do more consider. thanks to your support, if i meet these case, i will solve more quickly! thank you

[Phong-TH]

@JuanAlejandro @rudenick0309 Our customers have the same issue with Android 13 on Samsung and Pixel devices (both Samsung Keyboard and Gboard). Just typing a sentence, the application will throw the ANR pop-up and must be forced close. We can't turn off the predictive or spell check due to production requirements. Do you have any suggestions, we have received many complaints about that day by day.

[Saad-Bashar]

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 :(

[Nasseratic]

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 )

[Saad-Bashar]

Same here! The solution keyboardType='visible-password' works for normal inputs, but won't work for multiline inputs

Do you mean you still get the crashes for multiline inputs? Because we have multiline inputs. Thanks.

[Nasseratic]

@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 )

[hannojg]

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: #35350 (comment)

[Saad-Bashar]

@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.

[Phong-TH]

@hannojg can we change any lines on the native or android framework to fix this problem?

[hannojg]

@Phong-TH If you don't use rotation anywhere in your react-native code, you can try commenting the rotation lines:

[hannojg]

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

[efstathiosntonas]

@hannojg by rotation you mean orientation change, right?

[pierroo]

+1 with the above, auto suggestions is a needed feature for any chatting app.
I hope this case won't be considered closed with such a hacky / temporary workaround? :/

[ruairioliverwv]

Agree this suggestion is a non runner. It also disables it for all android devices, right now we can just disable it for Samsung Android 13 by setting the type to visible-password

[efstathiosntonas]

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

[fabOnReact]

I believe TP1A.220624.014.S901BXXU2BVL1 is One UI update.

[fabOnReact]

https://developer.samsung.com/one-ui-beta
https://www.sammobile.com/news/samsung-one-ui-5-0-update-release-schedule/

Reporting Errors
When you have enrolled in the One UI Beta Program, you can help improve the Galaxy software stability by reporting issues you encounter while using the beta software.
To provide feedback on bugs or errors in beta software, in the Samsung Members application, select "Beta feedback > Send feedback".
Note: To ensure relevant log information is included in the error report, submit the report within 3 minutes of encountering the bug or error, and do not terminate (swipe away) the Samsung Members application until you are notified that the report has been sent. This can take up to 5 minutes.

[efstathiosntonas]

@fabriziobertoglio1987 it’s not clear if it is a UI or general bug fixes update: https://doc.samsungmobile.com/SM-S901B/EUX/doc.html

[welch174]

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'm still seeing the issue after installing the OTA update.

[mglobel]

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.

[pierroo]

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?

[rikur]

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

[swrobel]

If you got multiple TextInput in your app, the fastest way to temporally fix the issue is to put this in your index.js file:

I think we can be a bit more specific here to avoid affecting users on earlier versions of Android

import { Platform, TextInput } from "react-native";

TextInput.defaultProps = {
  ...TextInput.defaultProps,
  autoCorrect: Platform.OS === 'ios' || Platform.Version !== 33,
  keyboardType:
    Platform.OS === 'android' && Platform.Version === 33 ? 'visible-password' : 'default',
  returnKeyType: Platform.OS === 'android' && Platform.Version === 33 ? 'none' : 'default',
  spellCheck: Platform.OS === 'ios' || Platform.Version !== 33,
}

[pierroo]

Thank you @swrobel for this suggestion.
Unfortunately this is really not reliable for a chat app, that heavily relies on autocorrect.
Does the above even work for a multiline textinput?

[swrobel]

Does the above even work for a multiline textinput?

It seems that it does not. Here's a screenshot from one of my users. Has anyone fund a solution that doesn't cause multiline inputs to be squished to one line?

[rodrigobertolottizinsp]

@swrobel Not yet, the only workaround I found was increasing the number of lines property, like numberOfLines={3}

[mglobel]

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

Echoing @Houguiram on this comment #35155 (comment), 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.

[Nasseratic]

Does the above even work for a multiline textinput?

@swrobel
See this #35155 (comment)

[gkasireddy202]

@mglobel - Great.
I had a sample class component using TextInput.
How to resolve this issue without using mobx?
import React, { Component } from "react";
import { View, TextInput ,Text} from 'react-native';
class Loginpage extends Component {
constructor(props) {
super(props);
this.state = {
message: ''
}
}

render() {
    return (
        <View style={{ flex: 1 }}>
            <View style={{ flex: 1 }}>
            </View>
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', margin: 30 }}>
                <TextInput style={{ height: 70, width: '100%', borderWidth: 1, borderColor: 'grey' }}
                    placeholder="message"
                    numberOfLines={5}
                    multiline={true}
                    returnKeyType="done"
                    blurOnSubmit={true}
                    // defaultValue=""
                    value={this.state.message}
                    onChangeText={(text)=>this.setState({message:text})}>

                </TextInput>
                <Text>{this.state.message}</Text>
            </View>
            <View style={{ flex: 1 }}>
            </View>
        </View>
    )
}

}

[mglobel]

@mglobel - Great. I had a sample class component using TextInput. How to resolve this issue without using mobx? import React, { Component } from "react"; import { View, TextInput ,Text} from 'react-native'; class Loginpage extends Component { constructor(props) { super(props); this.state = { message: '' } }

render() {
    return (
        <View style={{ flex: 1 }}>
            <View style={{ flex: 1 }}>
            </View>
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', margin: 30 }}>
                <TextInput style={{ height: 70, width: '100%', borderWidth: 1, borderColor: 'grey' }}
                    placeholder="message"
                    numberOfLines={5}
                    multiline={true}
                    returnKeyType="done"
                    blurOnSubmit={true}
                    // defaultValue=""
                    value={this.state.message}
                    onChangeText={(text)=>this.setState({message:text})}>

                </TextInput>
                <Text>{this.state.message}</Text>
            </View>
            <View style={{ flex: 1 }}>
            </View>
        </View>
    )
}

}

@gkasireddy202 There was one place where we don't actually have mobx and used another solution. We simply added a variable on the class component instead of using state and updated it directly. Normally we don't do this because we want to use state to take advantage of React's DOM re-rendering. But in this case it seems to be hurting us.

So in your constructor function:

constructor(props) { 
  super(props); 
  this.message = ""
}

And then onChangeText:

onChangeText={(text)=> this.message = text}>

And then you can actually remove the value={this.state.message} prop from your <TextInput> component. <TextInput> will maintain its own value state, using the value prop is only necessary in certain scenarios. You'll notice in the react native docs they don't have a value prop: https://reactnative.dev/docs/handling-text-input.

[insanemal]

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

[welch174]

I would like to help some people here with chat views that are freezing. There are two issues at play here

• This issue is the Samsung Android 13 Keyboard.
• There is also an issue with Inverted FlatLists with text views performing very poorly. 35350

The inverted flat list issue has a work around that involves drawing it upside down and then drawing the contents upside down.

This issue has a "work around" of switching the text input type to visible password.

[ruairioliverwv]

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

android:inputType="textNoSuggestions"

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

Lines 1153 to 1168 in 76a1445

	/*
	* This class is set as the KeyListener for the underlying TextView
	* It does two things
	* 1) Provides the same answer to getInputType() as the real KeyListener would have which allows
	* the proper keyboard to pop up on screen
	* 2) Permits all keyboard input through
	*/
	private static class InternalKeyListener implements KeyListener {
	private int mInputType = 0;
	public InternalKeyListener() {}
	public void setInputType(int inputType) {
	mInputType = inputType;
	}

I will test and publish a PR tomorrow.

Actually this did come in useful in the end for me as a temporary measure. At least I can keep emojis for my input and I'm just losing autocomplete and autocorrect. So I'm just setting keyboardType: "no-suggestions" for Samsung Android 13 and leaving every other device and OS as normal

[pierroo]

@ruairioliverwv what keyboardType is the "no suggestions" you are talking about?
the "visible-password"?
It does lose the multiline ability unfortunately as mentioned above (and in spite of the "hacks" around it)

It is beyond me how such a huge issue can remain pending and obscure after all these months...
Non-react-native apps are not facing this issue with inputs, so I do believe it's in react-native team's hands but I'm not sure if they are aware of it? or if there is any way to raise this issue's priority? Since it literally kills any chatting app that heavily relies on multiline + text suggestions.

[ruairioliverwv]

@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

[pierroo]

Thank you for your answer;
do you also keep the multiline with it, unlike visible-password? or is the emoji the only difference?

[gkasireddy202]

Any solution without disabling the no-suggestions keyboard.

[ruairioliverwv]

Multiline is fine for me with visible-password and no-suggestions but need to set the returnKeyType to none.

So this is the function I'm using to get my extra input props.

const getExtraInputProps = () => {
    if (
        Platform?.constants?.Manufacturer === "samsung" &&
        Platform?.constants?.Release === "13"
    ) {
        return {
            keyboardType: "no-suggestions",
            returnKeyType: "none"
        };
    }
    return {};
};

[lunaleaps]

Closing issue as we're addressing in #35590 (comment)

[gkasireddy202]

Please suggest any accurate solution to resolve this issue.
I am getting more ANR crash reports from bugsnag.