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

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/android.hardware.graphics.composer@2.4-service-sm8150: 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/android.hardware.sensors@2.0-service.multihal: 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/vendor.google.wifi_ext@1.0-service-vendor: 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/android.hardware.bluetooth@1.0-service-qti: 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/android.hardware.sensors@2.0-service.multihal: 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® Core™ 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

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 19
  • Comments: 16

Most upvoted comments

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' }],
  },
})
+30
youmitsu on Sep 13, 2022

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

+5
afiller on Nov 4, 2022

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

+3
IshmamR on Feb 4, 2023

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

+2
MikelH911 on Dec 21, 2022

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…

+1
c-goettert on Jan 19, 2023

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…

+1
c-goettert on Nov 10, 2022

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

+1
carsonxw on Oct 13, 2022

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

+1
williamleungapptask on Oct 6, 2022

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.

+1
c-goettert on Sep 15, 2022
Read more comments on GitHub
← react-native: React Native App Crashes on Launch in Android (API 19)
react-native: React Native BUILD FAILED on run-ios →