[Android] Inverted FlatList + Text Input causing ANR on android 13

This issue has been created since 2022-11-15.

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.

Screen.Recording.2022-11-15.at.12.52.22.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

rudenick0309 wrote this answer on 2022-11-15

#35155
The similar problem seems to occur even with only 'TextInput'

hannojg wrote this answer on 2022-11-17

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!

hannojg wrote this answer on 2022-11-17

Observations I made:

  • I just put a plain android EditText view instead of RN's TextInput and the issue still happens (so I assume it isn't the TextInput implementation)
  • I tried it with VirtualizedList and 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 by VirtualizedList) using the styles above, and the issue keeps happening as well
  • If I don't do the inverted styling (its the same way VirtualizedList does it) the ANR doesn't happen

Still looking for the place that's causing the issue 🔍

JuanAlejandro wrote this answer on 2022-11-17

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

hannojg wrote this answer on 2022-11-17

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: 1 set:

     <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 😅

hannojg wrote this answer on 2022-11-17

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?

hannojg wrote this answer on 2022-11-17

Okay, with scaleX: -1 the ScrollBar will be on the wrong side in case of using a FlatList.

Using a matrix manually works:

const scaleYInvertedMatrix = [
    // seems to work
    -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1,
];

return (
    <FlatList
         style={{
             transform: [{matrix: scaleYInvertedMatrix}],
         }}
rudenick0309 wrote this answer on 2022-11-17

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

hannojg wrote this answer on 2022-11-20

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:

private static void setTransformProperty(@NonNull View view, ReadableArray transforms) {
sMatrixDecompositionContext.reset();
TransformHelper.processTransform(transforms, sTransformDecompositionArray);
MatrixMathHelper.decomposeMatrix(sTransformDecompositionArray, sMatrixDecompositionContext);
view.setTranslationX(
PixelUtil.toPixelFromDIP(
sanitizeFloatPropertyValue((float) sMatrixDecompositionContext.translation[0])));
view.setTranslationY(
PixelUtil.toPixelFromDIP(
sanitizeFloatPropertyValue((float) sMatrixDecompositionContext.translation[1])));
view.setRotation(
sanitizeFloatPropertyValue((float) sMatrixDecompositionContext.rotationDegrees[2]));
view.setRotationX(
sanitizeFloatPropertyValue((float) sMatrixDecompositionContext.rotationDegrees[0]));
view.setRotationY(
sanitizeFloatPropertyValue((float) sMatrixDecompositionContext.rotationDegrees[1]));
view.setScaleX(sanitizeFloatPropertyValue((float) sMatrixDecompositionContext.scale[0]));
view.setScaleY(sanitizeFloatPropertyValue((float) sMatrixDecompositionContext.scale[1]));
double[] perspectiveArray = sMatrixDecompositionContext.perspective;
if (perspectiveArray.length > PERSPECTIVE_ARRAY_INVERTED_CAMERA_DISTANCE_INDEX) {
float invertedCameraDistance =
(float) perspectiveArray[PERSPECTIVE_ARRAY_INVERTED_CAMERA_DISTANCE_INDEX];
if (invertedCameraDistance == 0) {
// Default camera distance, before scale multiplier (1280)
invertedCameraDistance = 0.00078125f;
}
float cameraDistance = -1 / invertedCameraDistance;
float scale = DisplayMetricsHolder.getScreenDisplayMetrics().density;
// The following converts the matrix's perspective to a camera distance
// such that the camera perspective looks the same on Android and iOS.
// The native Android implementation removed the screen density from the
// calculation, so squaring and a normalization value of
// sqrt(5) produces an exact replica with iOS.
// For more information, see https://github.com/facebook/react-native/pull/18302
float normalizedCameraDistance =
sanitizeFloatPropertyValue(
scale * scale * cameraDistance * CAMERA_DISTANCE_NORMALIZATION_MULTIPLIER);
view.setCameraDistance(normalizedCameraDistance);
}
}

hannojg wrote this answer on 2022-11-22

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!

android-reproduction.mov
cortinico wrote this answer on 2022-11-23

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? 😅 )?

You can do so by yourself here:
https://issuetracker.google.com/issues

cortinico wrote this answer on 2022-11-23

Closign also as it's a Android Bug apparently. Feel free to reopen if they send you here

GuoXiaoyang wrote this answer on 2022-11-24

@hannojg Hi, have you opened a bug ticket for the android team? Same issue here.

hannojg wrote this answer on 2022-11-24

Yeah that's the point, opening a bug ticket at https://issuetracker.google.com/issues doesn't work for me and results in permission errors.
Does anyone of you have created an issue there and can help with that?

GuoXiaoyang wrote this answer on 2022-11-24

Yeah that's the point, opening a bug ticket at https://issuetracker.google.com/issues doesn't work for me and results in permission errors. Does anyone of you have created an issue there and can help with that?

I will have a try. And I noticed that you have forked the React Native repo and added a verticalScrollbarPosition prop to FlatList to fix this issue as a workaround. But it's a little difficult for us to use a forked RN version😭.
I will try to find another solution if possible. Do you have any suggestions?

hannojg wrote this answer on 2022-11-24

Yeah please try, you can copy paste the bug report I pasted in one of the above comments.
I always get this weird error after creation:

Screenshot 2022-11-24 at 10 30 11

Yeah, I was thinking about adding verticalScrollbarPosition prop to react native itself. Unfortunately, I haven't found any other workaround yet

More Details About Repo
Owner Name facebook
Repo Name react-native
Full Name facebook/react-native
Language JavaScript
Created Date 2015-01-09
Updated Date 2022-12-10
Star Count 106395
Watcher Count 3660
Fork Count 22685
Issue Count 2288

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Support assertions in constexpr functions 1 2022-05-10 2022-11-13
Customization point for stringification 1 2022-05-10 2022-09-30
Check that the SDK works with Vite 1 2021-10-29 2022-10-12
How to remove a vehicle 6 2021-11-01 2022-11-11
Known Bug: AFT 1.3.5 and Older Unexpectedly Upgrade Components 0 2022-07-07 2022-12-02
use nvim-lightbuld autocmd seems leader to LspRestart errors 1 2022-04-26 2022-12-10
Use `Lifecycle-2.5.0` and review internal `ViewModel` design 4 2022-07-08 2022-11-30
prepdb is an invalid command 2 2021-09-21 2022-11-28
[FR] Include heater power output in heater graph 2 2022-01-29 2022-11-15
Migration: Support dependencies inside buildSrc/src/main/kotlin/*.gradle.kts 3 2021-08-30 2022-09-29
url: Unexpected error on nonexistent domains 1 2022-09-09 2022-12-03
[BUG][CRITICAL] Moving and renaming files if folder doesnt exist will delete the files 2 2022-02-25 2022-07-27
stateMin is not correctly written in state object 4 2021-08-14 2022-11-28
Unable to use custom context file for OWASP Zap Scanner 6 2020-05-20 2022-12-04
Redesign support for remote storage locations 1 2021-09-22 2022-11-06
Question: Does wolfssl vcpkg port currently build with HAVE_EX_DATA set by default 10 2022-09-11 2022-12-09
storage: panic in GenerateFlamegraph 3 2021-10-16 2022-11-13
feat(node-swc): Add cargo feature for v2 0 2021-12-12 2022-04-08
sunrise-commander breaks other-window on emacs feature/native-comp branch 7 2021-03-08 2022-09-04
Autocomplete password 3 2022-09-30 2022-11-27
item splitting issues when using weapons/items having m2 skills 1 2022-07-09 2022-10-28
3.14.1: sphinx warnings 2 2022-02-11 2022-11-18
Suggestion: Weekly/Monthly/Yearly Hits 10 2021-04-23 2022-12-09
Infinite rerendering in ReferenceInput + AutocompleteInput 1 2022-04-04 2022-11-07
Datetime input within the editor resets when updating minutes/seconds 2 2022-05-20 2022-09-09
[Bug]: The calculation results are inconsistent when I set different headless 3 2022-01-07 2022-10-29
[TechDocs] Tab Title Formatting 1 2022-05-11 2022-10-26
New command: `todo list get` 4 2022-10-18 2022-10-20
关于fake-ip filter的建议 2 2021-11-24 2022-01-15
Surfboard 其实一直在更新 2 2021-11-29 2022-01-15
smartsupp service request 2 2021-10-25 2021-12-31
TS Object Schema Matching Reports False Positive 7 2022-05-26 2022-10-01
Can't scroll/swipe viewpager2/recyclerview with Gesture layouts inside 1 2021-10-05 2022-11-27
Rename only applies on declaration and not on references 6 2022-01-13 2022-11-09
Random, Intrinsic and Canon namespaces are missing summaries 1 2021-09-16 2022-12-09
some errors 0 2021-11-15 2021-12-18
RVXXI registers 1 2020-11-23 2022-01-23
[Admin] implement choices with Django framework 0 2019-02-07 2022-12-01
[Documentation] Just a lacking round bracket 1 2021-05-25 2022-12-03
Hope to produce an app scrcpy for Android tablets 0 2021-11-03 2022-10-15
Typo on DeploymentCircuitBreaker property 1 2021-03-10 2022-11-08
Question about table 5 0 2022-07-10 2022-12-02
3-finger drag gesture 5 2022-04-25 2022-09-30
Panic when vault attempts to rotate a corrupt/missing OIDC Key 15 2021-11-19 2022-10-15
Stuck Subscription while using JClouds Offloaders 0 2022-04-13 2022-11-24
[CI Problem] fail to export a tuned library 1 2022-01-04 2022-11-18
Add k8PetStore load generator application. 6 2015-03-10 2022-11-20
Using embedded font resources leaks memory 0 2022-11-15 2022-12-01
Core-React not started API(Server Side) 3 2021-11-17 2022-12-03
In the .net7 CollectionViewSource has a different behaviour than in the .net6 3 2022-11-15 2022-12-01