React-Native app freezing on Android 13 when using animations inside inverted FlatList

[git-user-1337]

Description

I am facing an issue with animations inside inverted flat-lists on android. After a few seconds, the app gets laggy and finally seems to freeze and causes ANR-Alerts. I first noticed the problem in the live version of our app after updating my phone to Android 13. In our case, the problem is triggered by a typing indicator animation within react-native-gifted-chat. After further investigation, I was able to identify the animation within an inverted FlatList as the cause of the problem (see code example below).

Video of the issue:

https://user-images.githubusercontent.com/86466408/188163278-66deec4d-b8f0-4394-a771-8f7d2e9e6955.mp4

Further findings:

• I've only been able to reproduce the issue on my phone so far, so here's some more detailed information about the device:
  • Device: Google Pixel 4
  • Android Version: 13 (TP1A.220624.014)
  • Rooted: no
• iOS does not seem to be affected
• The type of animation does not seem to matter
• As the issue occurs in our live app, so it's not a debug issue
• Possibly related issue: https://github.com/facebook/react-native/issues/30034
  • The scaleY: -1 fix suggested in this thread also fixes this issue, as the inverted prop of flatlist is causing it
• Note: the number of animations is not relevant: Although I render an animation for each line in my example, there are only 20 lines in total. A single animation (e.g. in the ListHeaderComponent) is sufficient to reproduce the issue.

Excerpt from the android logs:

2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8809ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8800ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8790ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8781ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8773ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8763ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8753ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8745ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8736ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8726ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8717ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8708ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8699ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8690ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8681ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8672ms processing MotionEvent
2022-09-02 14:36:40.142 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8664ms processing MotionEvent
2022-09-02 14:36:40.143 1849-2276/? I/InputDispatcher: 13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) spent 8648ms processing MotionEvent
...
2022-09-02 14:36:40.154 1849-28955/? E/ActivityManager: ANR in com.awesomeproject (com.awesomeproject/.MainActivity)
    PID: 27392
    Reason: Input dispatching timed out (13c9f64 com.awesomeproject/com.awesomeproject.MainActivity (server) is not responding. Waited 5001ms for MotionEvent)
    Parent: com.awesomeproject/.MainActivity
    ErrorId: d7e8d93d-8fd5-43c5-9acd-bf012e4f6592
    Frozen: false
    Load: 3.95 / 2.91 / 2.7
    ----- Output from /proc/pressure/memory -----
    some avg10=0.06 avg60=0.07 avg300=0.01 total=409463474
    full avg10=0.00 avg60=0.00 avg300=0.00 total=139253478
    ----- End output from /proc/pressure/memory -----
    
    CPU usage from 23405ms to 0ms ago (2022-09-02 14:36:12.971 to 2022-09-02 14:36:36.376):
      95% 27392/com.awesomeproject: 89% user + 6% kernel / faults: 8984 minor 25 major
      18% 711/surfaceflinger: 12% user + 5.2% kernel / faults: 1437 minor 1 major
      7.9% 713/[email protected]: 3.8% user + 4% kernel / faults: 14 minor
      7.4% 1849/system_server: 4.6% user + 2.8% kernel / faults: 12861 minor 17 major
      3.5% 296/crtc_commit:125: 0% user + 3.5% kernel
      3.4% 3899/com.google.android.googlequicksearchbox:interactor: 2.2% user + 1.1% kernel / faults: 21792 minor 7876 major
      2.8% 2403/com.android.systemui: 1.9% user + 0.8% kernel / faults: 6076 minor 10 major
      2% 9902/com.google.android.gms.persistent: 1.4% user + 0.6% kernel / faults: 3235 minor 2295 major
      1.7% 24317/kworker/u16:1: 0% user + 1.7% kernel
      1.6% 28229/kworker/u16:2: 0% user + 1.6% kernel
      1.4% 28450/kworker/u16:6: 0% user + 1.4% kernel
      0.4% 1389/media.swcodec: 0.1% user + 0.2% kernel / faults: 9932 minor 12 major
      1.2% 5807/com.google.android.inputmethod.latin: 0.8% user + 0.4% kernel / faults: 3280 minor 33 major
      0.9% 1083/[email protected]: 0.8% user + 0.1% kernel
      0.8% 288/kgsl_worker_thr: 0% user + 0.8% kernel
      0.2% 26061/kworker/u16:8: 0% user + 0.2% kernel
      0.7% 1424/adbd: 0.2% user + 0.4% kernel / faults: 336 minor
      0.6% 28366/kworker/u16:3: 0% user + 0.6% kernel
      0.4% 891/iaxxx tunnel pr: 0% user + 0.4% kernel
      0% 1325/media.extractor: 0% user + 0% kernel / faults: 4060 minor
      0.3% 2718/com.android.phone: 0.2% user + 0% kernel / faults: 975 minor 8 major
      0.3% 3977/com.android.nfc: 0.2% user + 0.1% kernel / faults: 1628 minor 26 major
      0.2% 9/rcu_preempt: 0% user + 0.2% kernel
      0.2% 297/crtc_event:125: 0% user + 0.2% kernel
      0.2% 653/logd: 0.1% user + 0.1% kernel / faults: 46 minor
      0.2% 1135/audioserver: 0% user + 0.2% kernel / faults: 1240 minor
      0% 1360/media.codec: 0% user + 0% kernel / faults: 1529 minor 7 major
      0.2% 22144/com.facebook.katana: 0.1% user + 0.1% kernel / faults: 2 minor
      0.2% 2495/com.android.networkstack.process: 0.1% user + 0.1% kernel / faults: 591 minor
      0.2% 18101/com.instagram.android: 0.1% user + 0.1% kernel / faults: 34 minor
      0.2% 26706/com.twitter.android: 0.1% user + 0% kernel / faults: 18 minor
      0.2% 1100/[email protected]: 0.1% user + 0% kernel / faults: 128 minor
      0.2% 2637/.qtidataservices: 0.2% user + 0% kernel / faults: 935 minor 16 major
      0.2% 16091/com.android.bluetooth: 0% user + 0.1% kernel / faults: 552 minor
      0.2% 26596/logcat: 0% user + 0.1% kernel
      0.2% 28491/kworker/u17:1: 0% user + 0.2% kernel
      0.1% 1021/qrtr_rx: 0% user + 0.1% kernel
      0% 2715/com.android.se: 0% user + 0% kernel / faults: 442 minor 1 major
      0.1% 3395/com.google.android.apps.scone: 0.1% user + 0% kernel / faults: 39 minor
      0% 4034/com.qualcomm.qti.services.secureui:sui_service: 0% user + 0% kernel / faults: 645 minor 1 major
      0.1% 12/rcuop/0: 0% user + 0.1% kernel
      0.1% 2586/com.google.oslo: 0% user + 0% kernel / faults: 586 minor
      0% 2657/com.qti.phone: 0% user + 0% kernel / faults: 445 minor
      0% 2687/org.codeaurora.ims: 0% user + 0% kernel / faults: 506 minor 2 major
      0% 4000/com.google.SSRestartDetector: 0% user + 0% kernel / faults: 427 minor
      0.1% 27925/kworker/2:0: 0% user + 0.1% kernel
      0% 30/rcuop/2: 0% user + 0% kernel
      0% 46/rcuop/4: 0% user + 0% kernel
2022-09-02 14:36:40.155 1849-28955/? E/ActivityManager:   0% 62/rcuop/6: 0% user + 0% kernel
      0% 98/system: 0% user + 0% kernel
      0% 144/kswapd0: 0% user + 0% kernel
      0% 337/spi5: 0% user + 0% kernel
      0% 772/tombstoned: 0% user + 0% kernel
      0% 1032/ipacm: 0% user + 0% kernel
      0% 1045/statsd: 0% user + 0% kernel / faults: 165 minor 1 major
      0% 1046/netd: 0% user + 0% kernel / faults: 222 minor
      0% 1069/android.hardware.contexthub-service.generic: 0% user + 0% kernel
      0% 1113/msm_irqbalance: 0% user + 0% kernel
      0% 1217/irq/295-fts: 0% user + 0% kernel
      0% 1308/cameraserver: 0% user + 0% kernel / faults: 80 minor
      0% 2282/android.hardware.input.processor-service: 0% user + 0% kernel / faults: 8 minor
      0% 2601/com.android.hbmsvmanager: 0% user + 0% kernel / faults: 440 minor
      0% 2606/.dataservices: 0% user + 0% kernel / faults: 438 minor
      0% 2669/com.google.android.grilservice: 0% user + 0% kernel / faults: 452 minor
      0% 2826/com.google.android.apps.nexuslauncher: 0% user + 0% kernel / faults: 6 minor
      0% 3148/irq/33-90cd000.: 0% user + 0% kernel
      0% 3999/com.android.ims.rcsservice: 0% user + 0% kernel / faults: 441 minor
      0% 10045/com.google.android.gms: 0% user + 0% kernel / faults: 43 minor 30 major
      0% 25429/com.google.android.youtube: 0% user + 0% kernel / faults: 64 minor
      0% 10/rcu_sched: 0% user + 0% kernel
      0% 22/rcuop/1: 0% user + 0% kernel
      0% 35/ksoftirqd/3: 0% user + 0% kernel
      0% 38/rcuop/3: 0% user + 0% kernel
      0% 47/rcuos/4: 0% user + 0% kernel
      0% 63/rcuos/6: 0% user + 0% kernel
      0% 535/kworker/5:1H: 0% user + 0% kernel
      0% 654/lmkd: 0% user + 0% kernel
      0% 710/android.hardware.power-service.pixel-libperfmgr: 0% user + 0% kernel
      0% 821/loop9: 0% user + 0% kernel
      0% 877/loop23: 0% user + 0% kernel
      0% 892/iaxxx tunnel co: 0% user + 0% kernel
      0% 895/loop26: 0% user + 0% kernel
      0% 1064/android.hardware.audio.service: 0% user + 0% kernel / faults: 19 minor
      0% 1065/[email protected]: 0% user + 0% kernel
      0% 1332/media.metrics: 0% user + 0% kernel / faults: 508 minor 5 major
      0% 1340/mediaserver: 0% user + 0% kernel / faults: 186 minor 4 major
      0% 1358/wificond: 0% user + 0% kernel / faults: 1 major
      0% 1386/qcrild: 0% user + 0% kernel / faults: 8 minor 6 major
      0% 1685/qrtr_rx: 0% user + 0% kernel
      0% 3118/loop32: 0% user + 0% kernel
      0% 3147/irq/32-90b6400.: 0% user + 0% kernel
      0% 16117/scheduler_threa: 0% user + 0% kernel
      0% 21460/kworker/0:3: 0% user + 0% kernel
      0% 21837/kworker/1:2: 0% user + 0% kernel
      0% 22195/com.instagram.android:mqtt: 0% user + 0% kernel / faults: 6 minor
      0% 23051/kworker/5:0: 0% user + 0% kernel
      0% 23206/kworker/3:1: 0% user + 0% kernel
      0% 26913/com.android.chrome: 0% user + 0% kernel / faults: 2 minor
      0% 27626/android.process.acore: 0% user + 0% kernel / faults: 248 minor 268 major
      0% 27752/kworker/4:0: 0% user + 0% kernel
      0% 28149/com.kubi.kucoin: 0% user + 0% kernel / faults: 13 minor
      0% 28490/kworker/u17:0: 0% user + 0% kernel
    20% TOTAL: 15% user + 4.4% kernel + 0.2% iowait + 0.6% irq + 0.1% softirq
    CPU usage from 25ms to 351ms later (2022-09-02 14:36:36.401 to 2022-09-02 14:36:36.727):
      99% 27392/com.awesomeproject: 99% user + 0% kernel
        103% 27462/RenderThread: 103% user + 0% kernel
      29% 1849/system_server: 14% user + 14% kernel / faults: 793 minor
        26% 28955/AnrConsumer: 11% user + 14% kernel
        3.7% 2305/WifiHandlerThre: 0% user + 3.7% kernel
      3.5% 1083/[email protected]: 0% user + 3.5% kernel
        3.5% 11918/11_see: 3.5% user + 0% kernel
      4% 9902/com.google.android.gms.persistent: 0% user + 4% kernel
        4% 11999/SensorBatchThre: 4% user + 0% kernel
    18% TOTAL: 14% user + 3.4% kernel + 0.3% irq + 0.3% softirq

Version

0.69.5

Output of npx react-native info

System: OS: macOS 12.5.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 23.44 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 14.19.1 - ~/.nvm/versions/node/v14.19.1/bin/node Yarn: 1.22.18 - /usr/local/bin/yarn npm: 6.14.16 - ~/.nvm/versions/node/v14.19.1/bin/npm Watchman: 2022.03.21.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /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: 3.5 AI-191.8026.42.35.5977832 Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild Languages: Java: 13.0.2 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.0.0 => 18.0.0 react-native: 0.69.5 => 0.69.5 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

1. Create a new project using npx react-native init AwesomeProject --version 0.69.5.
2. Replace the content of App.js with the snipped below.
3. Start the app on an Android Phone: It's unclear which device / OS combinations are affected, I could only reproduce it on my Pixel 4 with Android 13 - I tried it on a bunch of other android phones where I could not reproduce this issue.
4. Wait a bit: after 10 ~ 20 seconds the app freezes.

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

import React from 'react'
import { FlatList, View, Text, ActivityIndicator } from 'react-native'

const data = []
for (let i = 0; i < 20; i++) data.push(i)

const App = () => {
  return (
    <FlatList
      keyExtractor={(item) => item}
      data={data}
      inverted
      renderItem={(item) => (
        <View
          style={{
            backgroundColor: 'white',
            flexDirection: 'row',
            padding: 20
          }}
        >
          <ActivityIndicator size='large' color='red' />
          <Text
            style={{
              fontSize: 32,
              marginLeft: 10
            }}
          >
            {`Item ${item.item}`}
          </Text>
        </View>
      )}
    />
  )
}

export default App

[c-goettert]

I have the same problem on my Android phone.

[youmitsu]

I got around this problem by using react-native's transform style.

const renderItem = () => {
  return (
    <View style={styles.item}>...</View>
  )
}

// no using `inverted` props
<FlatList
  style={styles.list}
  renderItem={renderItem}
  ...
/>

// Rotate 180 degrees using transform
const styles = StyleSheet.create({
  list: {
    transform: [{ rotate: '180deg' }],
  },
  item: {
    transform: [{ rotate: '180deg' }],
  },
})

[c-goettert]

Thank you for your comment @youmitsu. I am aware of this workaround, but it's not a real solution for me as I am not using FlatList directly but through a package (react-native-gifted-chat). I therefore hope that the real cause of the problem can be addressed.

[williamleungapptask]

I received a lot of similar issues reported. All issues happened on Pixel phones with Android 13.

[carsonxw]

Same, it happens exactly on my Pixel 4 which is running Android 13. Also i'm using the package react-native-gifted-chat

[hotaryuzaki]

any solution?? this issue solved if we using scaleY in styleesheet instead of transform like here https://github.com/facebook/react-native/issues/30034#issuecomment-806396274 but it's remove in RN 0.70

[afiller]

Hello, is there any official solution already? We are facing this issue with several Pixel users on Android 13 already.

[c-goettert]

The type of the animation does not seem to matter. Instead of using the animated library I tried using an animated gif or even a simple "state-based" animation. It all leads to the issue...

[MikelH911]

Hello,

Same problem here except it happens on my Samsung S21 Ultra and on my friend's Samsung phone too. Both of them on Android 13, older versions of Android doesn't seem to be affected. iOS not affected too.

Any kind of animation used seem to create the same behavior.

For me, it happens also if the animation is outside the Flatlist. If I use any animation on my component and I have an inverted Flatlist, the app freeze afer a few seconds.

I think more and more people will be facing this issue after upgrading to Android 13

[Moorst]

Has this been introduced with a recent version? Can it be resolved temporarily by falling back to a previous version?

[c-goettert]

No, I don't think its really related to a specific react-native version. Following @hannojg comment from #30034 (similar issue), I tend to believe that the root cause of the issue can be found in android framework itself:

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

Nevertheless, I assume that there must also be some kind of connection to react native, since the bug does not seem to occur so often in other Android apps (otherwise the bug would probably have a higher priority for the android team..). Maybe it's somehow the constellation of how inverted scrollviews are or rendered by React Native? Unfortunately my knowledge doesn't go that far...

[IshmamR]

style={{transform: [{rotate: '180deg'}]}} seems to be the best workaround for now. Really hoping it gets solved soon.

[fsher]

Hi there! It seems that we're facing the same issue on our end. Android 12 - no lag or freezes, android 13 (same phone) - freezes/lags after a couple of minutes.

We have videos (through a separate library - react-native-video) and texts in an inverted Flatlist. After a ton of tests and debugging we've noticed that it's the Text component in the FlatList causing that. Specifically the text itself (meaning if there is a Text component that has no text there, all good). So if one of the items has any text there - freezes start to appear. If the text is not visible on the screen or not part of the list at all - no lags/freezes.

React Native: 0.69.2. Tested on a freshly created project. Haven't tried the transform fix yet and haven't tested on newer versions of RN.

[pavelpashkovsky]

fun fact, I tried to substitute this indicator by some indicators from react-native-indicators, but all of them have the same issue, in addition to all replies above, I also noticed that this happens only on screen which cotains SectionList

[guygolanIL]

i found that the exact performance hit is happening with ScrollView using transform: [{ rotateY: "180deg" }]. on android 13. ios is working fine. also my screen is having a panresponder based animation but not in the scrollview/flatlist itself

[kelset]

Closing as duplicate of https://github.com/facebook/react-native/issues/35350 and https://github.com/facebook/react-native/issues/30034 - I'm trying to reduce the number of different issues people are reporting this performance problem with Inverted Flatlist (and especially on Android 13). Please add comments to those issues instead.