Repository navigation
TextInput is causing app to hang in Samsung devices with Android 13 #35155
Description
Activity
I'm having a similar ANR but with Pixel phones. And it's only happening in Android 13.
I have the same issue with samsung Android 13
Our users are experiencing the same thing. Can you confirm that suggestions are causing the hanging? How did you guys workaround it?
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
keyboardTypetovisible-password. This will not bring up the text suggestions menu up so it will not cause the hang.Subscribing
Currently we are setting
autoCorrectto false for android version 12 and 13 and for samsung devices, do we need to setkeyboardTypetovisible-passwordas well? @JuanAlejandroLooks 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
Reacted by Ludwig Villalba, justinfauci and Jacques de VilliersCurrently we are setting
autoCorrectto false for android version 12 and 13 and for samsung devices, do we need to setkeyboardTypetovisible-passwordas well? @JuanAlejandroYes @Saad-Bashar. This is an ugly hack but better to have that than the app freezing every time they are typing.
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).
Reacted by Saad@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?Reacted by Ludwig VillalbaHi @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
@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.Reacted by -81 remaining items
Does the above even work for a multiline textinput?
@swrobel
See this #35155 (comment)@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 - 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.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
Reacted by Stefan WrobelI 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.
Adding inputType
textNoSuggestionsin react-native to disable the autocomplete functionality. https://stackoverflow.com/a/1992201/7295772android:inputType="textNoSuggestions"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
@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.@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
Reacted by PierreThank you for your answer;
do you also keep the multiline with it, unlike visible-password? or is the emoji the only difference?Any solution without disabling the no-suggestions keyboard.
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 {}; };Closing issue as we're addressing in #35590 (comment)
Reacted by Stefan WrobelPlease suggest any accurate solution to resolve this issue.
I am getting more ANR crash reports from bugsnag.- locked and limited conversation to collaborators
on Jan 13, 2023
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
keyboardTypeasvisible-passwordto avoid suggestions.Version
0.69.3
Output of
npx react-native infoSteps to reproduce
1 - Clone the repo https://github.com/JuanAlejandro/keyboard-issue-samsung
2 - Run
yarn install3 - Test
releasevariant in a Samsung S22 with Android 134 - Start typing until you reach 3-4 lines of text.
Expected result:
Actual result:
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