Repository navigation
[Android] Inverted FlatList + Text Input causing ANR on android 13 #35350
Description
Activity
#35155
The similar problem seems to occur even with only 'TextInput'Interestingly the TextInput works for me on the device but stops working once it's next to an inverted FlatList. So I am not entirely sure if it's related, but I will test the reproduction of the issue you mentioned as well!
Observations I made:
- I just put a plain android
EditTextview instead of RN'sTextInputand the issue still happens (so I assume it isn't the TextInput implementation) - I tried it with
VirtualizedListand the following styles (to re-create the inverted effect), but the ANR still happens:
style={{ transform: [{scaleY: -1}], }} contentContainerStyle={{ transform: [{scaleY: -1}], }}
- I tried it with
ScrollView(used byVirtualizedList) using the styles above, and the issue keeps happening as well - If I don't do the inverted styling (its the same way
VirtualizedListdoes it) the ANR doesn't happen
Still looking for the place that's causing the issue 🔍
- I just put a plain android
@hannojg we had the same problem with our app. We are using the inverted FlatList in our chat screen. One time I wasn't typing, I was just receiving messages and the app froze. So I'm not 100% sure the TextInput is needed to repro. The workaround we implemented was to invert the list with styles instead of the prop. You can check the solution in this Github issue.
Ah! And also this issue was happening only for Pixel devices with Android 13. Since the first family of devices to get Android 13 was the Pixel, maybe that's why we only saw this issue in Pixel devices.
Wow thx for sharing this information, will give it a try!
What I found is, that you don't even need a list. You just need two views that have
scaleY: 1set:<View style={{ flex: 1, backgroundColor: 'red', transform: [{scaleY: -1}], }}> <View style={{ transform: [{scaleY: -1}], }}> {/* Some more children inside here that got inverted */}
However, I still need to input text constantly into a TextInput to cause the ANR 😅
Okay, the issue doesn't happen anymore if I also add
scaleX: -1👀 :<View style={{ flex: 1, backgroundColor: 'red', transform: [{scaleX: -1}, {scaleY: -1}], }}> <View style={{ transform: [{scaleX: -1}, {scaleY: -1}], }}>
Going to dig into the native code to see where the issue happens, maybe also a bug with yoga?
Reacted by Artur Eshenbrener@hannojg @JuanAlejandro sorry for telling this, this problem was occured at real device of galaxy22 with google play system version - 22.07.01, but, after updating google play system version to '22.10.01'. the problem was disappeared. ( i could not test my local, that device is our customer. )
so, i am looking for other galaxy22 for verifying. after results are out, i will write down.- added 2 commits that reference this issue
on Nov 17, 2022 I just found the offending line that's causing the issue. If I remove the
view.setRotationXline the issue stops happening.
At this point I am not sure whether this is a react native or an android bug. Will dig deeper:Reacted by Juan Hernandez, -, justinfauci, Jeff Gu Kang, Antonio Jaime, Ryan Pliske and Steve Galili- added a commit that references this issue
on Nov 21, 2022 So at this point, I was able to reproduce the issue with just a native android project (no react native involved). It's a bug in the android framework.
I tried to create an issue ticket on the AOSP, however, after creation, I get weird permission errors and the bug ticket just disappears.
Sorry for the ping, but maybe @cortinico you can help with opening a bug ticket for the android team (I recall you were an android engineer? 😅 )?
The bug report for the native android looks like this:
Setting
scaleY: -1androtationX: 180for two nested views causes an ANR on android API 33On Android 13 we are noticing an ANR, when we have two views that have each:
scaleY: -1rotationX: 180set.
In the video, you can see a green view, the parent of a blue view (and the blue view has a lot of children (list)). Both views have the transformation properties set (creating an "inverted" effect).
We then have an
EditTextrendered underneath these views. When entering text the ANR happens. This is much easier to reproduce on a real device. We are reproducing with a Pixel 4 Android API 33 emulator. Here you need to enter text rapidly with the help ofadd shell input textto cause the ANR.In the bottom right you can see a small FPS counter (using Choreographer), and you can see that the app starts to freeze at some point.
The full reproduction: https://github.com/hannojg/AndroidScaleYReproductionANR-
I also attached an
adb bugreport(it's from an emulator, so no sensitive data)The important code part to reproduce:
class MainActivity : AppCompatActivity() { private lateinit var binding: ActivityMainBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivityMainBinding.inflate(layoutInflater) setContentView(binding.root) val parentView = RelativeLayout(this) parentView.layoutParams = ViewGroup.LayoutParams(1000, 2000) parentView.setBackgroundColor(0xFF00FF00.toInt()) parentView.scaleY = -1f parentView.rotationX = 180f // add a child view to the parentView which we invert as well: val childView = LinearLayout(this) childView.orientation = LinearLayout.VERTICAL childView.layoutParams = ViewGroup.LayoutParams(800, 1800) childView.setBackgroundColor(0xFF0000FF.toInt()) childView.scaleY = -1f childView.rotationX = 180f parentView.addView(childView) // add 20 text views to the child view for (i in 0..19) { val textView = TextView(this) val layoutPrams = ViewGroup.MarginLayoutParams(200, 100) layoutPrams.topMargin = 10 textView.layoutParams = layoutPrams textView.setBackgroundColor(0xFFD3D3D3.toInt()) textView.gravity = Gravity.CENTER textView.text = "Text $i" childView.addView(textView) } binding.rootLayout.addView(parentView) } }Thanks in advance for checking!
android-reproduction.mov
Reacted by Phong-TH, 0xmiroslav, Santhosh Vaiyapuri, Stefan Wrobel, Tom McIntosh, Steve Galili, Rory Abraham and loczekSorry for the ping, but maybe @cortinico you can help with opening a bug ticket for the android team (I recall you were an android engineer? 😅 )?
You can do so by yourself here:
https://issuetracker.google.com/issues32 remaining items
- added a commit that references this issue
on Aug 21, 2023 - added a commit that references this issue
on Oct 2, 2023 @hannojg is this issue already fixed in react-native v0.72.4?
https://github.com/facebook/react-native/releases/tag/v0.72.4The android bug tracker seems to be working again: https://issuetracker.google.com/issues/287304310
Meanwhile I am preparing a workaround fix for within react native.
Any chances that your fix is also applied to 0.71? :) @hannojg
Reacted by Eric Jain, Jack Woodmansey and Drew MuliouIt looks like as of now it's only applied in 0.73: 3dd816c
Reacted by Hanno J. GödeckeThis 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.
Is this actually fixed?
Description
When having a
FlatListand aTextInputin one view and theFlatListhas theinverted={true}prop set and the android device is on API 33 (Android 13) the app will freeze/die in an ANR.Screen.Recording.2022-11-15.at.12.52.22.mov
Version
0.70.5
Output of
npx react-native infoSteps to reproduce
yarnyarn startyarn android, make sure the app launches on a device with android API 33 (Android 13)Snack, code example, screenshot, or link to a repository
https://github.com/hannojg/RN-AndroidAPI33-TextInput-ANR