react-native: [Android] Inverted FlatList + Text Input causing ANR on android 13

Description

When having a FlatList and a TextInput in one view and the FlatList has the inverted={true} prop set and the android device is on API 33 (Android 13) the app will freeze/die in an ANR.

https://user-images.githubusercontent.com/16821682/201913904-fd6f071d-2712-4cb5-b7b2-f6c1c7a4ee02.mov

Version

0.70.5

Output of npx react-native info

info Fetching system and libraries information...
System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1 Pro
    Memory: 96.63 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: Not Found
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    Android SDK:
      API Levels: 28, 29, 30, 31, 32, 33
      Build Tools: 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0
      System Images: android-32 | Google APIs ARM 64 v8a, android-32 | Google APIs Intel x86 Atom_64, android-32 | Google Play ARM 64 v8a, android-33 | Google APIs ARM 64 v8a, android-33 | Google Play ARM 64 v8a
      Android NDK: 21.4.7075529
  IDEs:
    Android Studio: Chipmunk 2021.2.1 Patch 1 Chipmunk 2021.2.1 Patch 1
    Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
  Languages:
    Java: 17.0.5 - /Users/hannogodecke/.jenv/shims/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0 
    react-native: 0.70.5 => 0.70.5 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

  • Clone this repository
  • Run yarn
  • Run yarn start
  • Run yarn android, make sure the app launches on a device with android API 33 (Android 13)
  • Open the app
  • Open the developer tools and enable the performance monitor
  • Focus the text input
  • Run the following in your terminal:
adb shell input text "Lorem\ ipsum\ dolor\ sit\ amet,\ consetetur\ sadipscing\ elitr,\ sed\ diam\ nonumy\ eirmod\ tempor\ invidunt\ ut\ labore\ et\ dolore\ magna\ aliquyam\ erat,\ sed\ diam\ voluptua.\ At\ vero\ eos\ et\ accusam\ et\ justo\ duo\ dolores\ et\ ea\ rebum.\ Stet\ clita\ kasd\ gubergren,\ no\ sea\ takimata\ sanctus\ est\ Lorem\ ipsum\ dolor\ sit\ amet.\ Lorem\ ipsum\ dolor\ sit\ amet,\ consetetur\ sadipscing\ elitr,\ sed\ diam\ nonumy\ eirmod\ tempor\ invidunt\ ut\ labore\ et\ dolore\ magna\ aliquyam\ erat,\ sed\ diam\ voluptua.\ At\ vero\ eos\ et\ accusam\ et\ justo\ duo\ dolores\ et\ ea\ rebum.\ Stet\ clita\ kasd\ gubergren,\ no\ sea\ takimata\ sanctus\ est\ Lorem\ ipsum\ dolor\ sit\ amet."
  • Run it repeatedly until the app freezes (for me it takes ~ 3 repetitions until the ANR happens. On a real Pixel 4 of a colleague the app almost freezes immediately).

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

https://github.com/hannojg/RN-AndroidAPI33-TextInput-ANR

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Comments: 32 (16 by maintainers)

Commits related to this issue

Most upvoted comments

It shouldn’t be closed for sure; seems like it is still an ongoing issue based on multiple threads on the very same topic.

An issue that seems quite huge to be honest and should be part of priorities; but should it be on react-native or Android?

+15
pierroo on Dec 19, 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: -1 and rotationX: 180 for two nested views causes an ANR on android API 33

On Android 13 we are noticing an ANR, when we have two views that have each:

scaleY: -1

rotationX: 180

set.

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 EditText rendered 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 of add shell input text to 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!

https://user-images.githubusercontent.com/16821682/203284168-c5c6ad81-338f-4132-8f9f-c220d1d448f9.mov

+8
hannojg on Nov 22, 2022

I just found the offending line that’s causing the issue. If I remove the view.setRotationX line the issue stops happening. At this point I am not sure whether this is a react native or an android bug. Will dig deeper:

https://github.com/facebook/react-native/blob/e504141583fc2b695fb42a1037edf92c89ae552a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java#L441-L483

+7
hannojg on Nov 17, 2022

The 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

+3
winterdouglas on Oct 24, 2023

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

+3
hannojg on Jun 15, 2023

It looks like as of now it’s only applied in 0.73: https://github.com/facebook/react-native/commit/3dd816c6b7bcd9cc4c21199f0b645755fb97f50f

+1
roryabraham on Nov 8, 2023

@t0nyh0 check this: https://github.com/facebook/react-native/issues/30034#issuecomment-1063980066

+1
efstathiosntonas on Feb 1, 2023

At least I reported it again: issuetracker.google.com/issues/266987950

I also can’t open this sadly

+1
cortinico on Jan 30, 2023

Re-opening as this seems to affect a significant number of users, although this seems to be an Android-specific issue (and not an RN one).

@hannojg I believe I succeeded to add it with the correct info and at the right place (the issue tracker is a jungle 😅) issuetracker.google.com/issues/261572772

@EmilScherdin can you (or someone else) open another issue on Google’s issue tracker to report this?

+1
cortinico on Jan 27, 2023

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?

+1
hannojg on Nov 16, 2022
Read more comments on GitHub
← react-native: [Android] intermittent crash A/libc: Fatal signal 4 (SIGILL), code 1 (ILL_ILLOPC), fault addr 0x72609e9760 in tid 19730 (mqt_js), pid 19470
react-native: Android java.lang.IllegalAccessError Method void android.support.v4.net.ConnectivityManagerCompat →