react-native-reanimated: [2.3][Android] Layout animation on screen transition freezes gesture responder

Description

Currently, when displaying an element with layout animation while navigating back or forth, it freezes the gesture responder. Nothing on screen reacts to touches or gestures.

react-native-gesture-handler’s elements do respond to touches and gestures, but default ones from React-Native do not, my guess is - it somehow breaks the default gesture handler.

Works good on iOS.

Expected behavior

Layout animations should not break the gesture responder system.

Actual behavior & steps to reproduce

https://user-images.githubusercontent.com/46403446/147118154-ee401e50-b63a-4178-af47-9e90abb82895.mov

  1. Launch the app from completely killed state (this is hard to reproduce on an app which was soft-killed)
  2. Navigate to different screen.
  3. Click on a button which navigates back and shows an element with layout animations.
  4. Loose control on all of the touchables.

Snack or minimal code example

We’ve created this scruffy reproducible demo, it’s under 100 lines of code in App.js, created with react-native init

Package versions

  • React Native: 0.66.4
  • React Native Reanimated: 2.3.1
  • NodeJS: 16.13
  • Xcode: -
  • Java & Gradle: 15.0.2 & 6.9
  • React Navigation: 5 / 6

Affected platforms

  • Android
  • iOS
  • Web

Coupe of logs on Logcat

It usually ends up in a Davey and GC kicks in, plus sometimes Choreographer skips some frames. Here are the logs:

Log 1 
2021-12-21 18:32:21.232 2745-2764/com.company.app I/company.app: Background young concurrent copying GC freed 225399(7542KB) AllocSpace objects, 12(240KB) LOS objects, 25% free, 20MB/26MB, paused 300us total 154.029ms
2021-12-21 18:32:22.165 2745-2745/com.company.app W/Looper: Slow Looper main: Long Msg: seq=16808 plan=18:32:21.159  late=0ms wall=1006ms running=0ms h=android.view.Choreographer$FrameHandler c=android.view.Choreographer$FrameDisplayEventReceiver
2021-12-21 18:32:22.165 2745-2745/com.company.app I/Choreographer: Skipped 59 frames!  The application may be doing too much work on its main thread.
2021-12-21 18:32:22.167 2745-2745/com.company.app W/Looper: Slow Looper main: doFrame is 991ms late because of 1 msg, msg 1 took 1006ms (seq=16808 h=android.view.Choreographer$FrameHandler c=android.view.Choreographer$FrameDisplayEventReceiver)
2021-12-21 18:32:22.191 2745-2909/com.company.app I/OpenGLRenderer: Davey! duration=1032ms; Flags=0, IntendedVsync=4897431297563, Vsync=4897431297563, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=4897431882522, AnimationStart=4897431885829, PerformTraversalsStart=4898407919676, DrawStart=4898408303368, SyncQueued=4898429983676, SyncStart=4898430946753, IssueDrawCommandsStart=4898437485291, SwapBuffers=4898461448983, FrameCompleted=4898464385830, DequeueBufferDuration=476000, QueueBufferDuration=523000, 
2021-12-21 18:32:22.278 2745-2764/com.company.app I/company.app: Background concurrent copying GC freed 302444(9364KB) AllocSpace objects, 6(116KB) LOS objects, 49% free, 17MB/35MB, paused 111us total 141.602ms
Log 2 
2021-12-21 18:35:17.853 3988-4002/com.company.app I/company.app: Background young concurrent copying GC freed 163869(4913KB) AllocSpace objects, 4(80KB) LOS objects, 18% free, 19MB/24MB, paused 276us total 115.249ms
2021-12-21 18:35:19.034 3988-4002/com.company.app I/company.app: Background concurrent copying GC freed 215965(6933KB) AllocSpace objects, 2(36KB) LOS objects, 49% free, 17MB/34MB, paused 242us total 156.458ms
2021-12-21 18:35:19.222 3988-3988/com.company.app W/Looper: Slow Looper main: Long Msg: seq=3818 plan=18:35:17.582  late=1ms wall=1638ms running=0ms h=android.view.Choreographer$FrameHandler c=android.view.Choreographer$FrameDisplayEventReceiver
2021-12-21 18:35:19.231 3988-4084/com.company.app I/OpenGLRenderer: Davey! duration=1647ms; Flags=1, IntendedVsync=5073855752132, Vsync=5073855752132, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=5073856427686, AnimationStart=5073856492301, PerformTraversalsStart=5075462635071, DrawStart=5075471667686, SyncQueued=5075493524609, SyncStart=5075493730148, IssueDrawCommandsStart=5075494798225, SwapBuffers=5075502172917, FrameCompleted=5075503876917, DequeueBufferDuration=128000, QueueBufferDuration=187000,
Log 3 
2021-12-22 13:54:12.253 18742-18755/com.company.app I/company.app: Background young concurrent copying GC freed 226746(7568KB) AllocSpace objects, 17(340KB) LOS objects, 29% free, 19MB/27MB, paused 295us total 113.134ms
2021-12-22 13:54:14.176 18742-18742/com.company.app W/Looper: Slow Looper main: Long Msg: seq=14797 plan=13:54:12.561  late=1ms wall=1614ms running=0ms h=android.view.Choreographer$FrameHandler c=android.view.Choreographer$FrameDisplayEventReceiver
2021-12-22 13:54:14.177 18742-18742/com.company.app W/Looper: Slow Looper main: MotionEvent is 1577ms late (event_seq=574, action=ACTION_DOWN) because of 1 msg, msg 1 took 1614ms (seq=14797 late=1ms h=android.view.Choreographer$FrameHandler c=android.view.Choreographer$FrameDisplayEventReceiver)
2021-12-22 13:54:14.177 18742-18742/com.company.app W/InputEventReceiver: App Input: 1577ms before dispatchInputEvent (MotionEvent: event_seq=574, seq=39421, action=ACTION_DOWN)
2021-12-22 13:54:14.181 18742-18742/com.company.app W/InputEventReceiver: App Input: 1291ms before dispatchInputEvent (MotionEvent: event_seq=580, seq=39483, action=ACTION_UP)
2021-12-22 13:54:14.181 18742-18755/com.company.app I/company.app: Background concurrent copying GC freed 304644(9532KB) AllocSpace objects, 5(96KB) LOS objects, 49% free, 18MB/36MB, paused 180us total 130.147ms
2021-12-22 13:54:14.182 18742-18742/com.company.app W/Looper: Slow Looper main: MotionEvent is 1174ms late (event_seq=583, action=ACTION_DOWN) because of 1 msg, msg 1 took 1614ms (seq=14797 late=1ms h=android.view.Choreographer$FrameHandler c=android.view.Choreographer$FrameDisplayEventReceiver)
2021-12-22 13:54:14.182 18742-18742/com.company.app W/InputEventReceiver: App Input: 1174ms before dispatchInputEvent (MotionEvent: event_seq=583, seq=39487, action=ACTION_DOWN)
2021-12-22 13:54:14.189 18742-18812/com.company.app I/System.out: [socket] e:java.lang.ClassNotFoundException: com.mediatek.cta.CtaUtils
2021-12-22 13:54:14.191 18742-19626/com.company.app I/System.out: [socket] e:java.lang.ClassNotFoundException: com.mediatek.cta.CtaUtils
2021-12-22 13:54:14.192 18742-18742/com.company.app W/InputEventReceiver: App Input: 1044ms before dispatchInputEvent (MotionEvent: event_seq=592, seq=39517, action=ACTION_UP)
2021-12-22 13:54:14.193 18742-18742/com.company.app W/Looper: Slow Looper main: MotionEvent is 953ms late (event_seq=595, action=ACTION_DOWN) because of 7 msg, msg 1 took 1614ms (seq=14797 late=1ms h=android.view.Choreographer$FrameHandler c=android.view.Choreographer$FrameDisplayEventReceiver)
2021-12-22 13:54:14.193 18742-18742/com.company.app W/InputEventReceiver: App Input: 953ms before dispatchInputEvent (MotionEvent: event_seq=595, seq=39521, action=ACTION_DOWN)
2021-12-22 13:54:14.196 18742-18742/com.company.app W/InputEventReceiver: App Input: 756ms before dispatchInputEvent (MotionEvent: event_seq=601, seq=39565, action=ACTION_UP)
2021-12-22 13:54:14.197 18742-18742/com.company.app W/Looper: Slow Looper main: MotionEvent is 607ms late (event_seq=604, action=ACTION_DOWN) because of 7 msg, msg 1 took 1614ms (seq=14797 late=1ms h=android.view.Choreographer$FrameHandler c=android.view.Choreographer$FrameDisplayEventReceiver)
2021-12-22 13:54:14.197 18742-18742/com.company.app W/InputEventReceiver: App Input: 607ms before dispatchInputEvent (MotionEvent: event_seq=604, seq=39569, action=ACTION_DOWN)
2021-12-22 13:54:14.201 18742-18742/com.company.app W/InputEventReceiver: App Input: 411ms before dispatchInputEvent (MotionEvent: event_seq=610, seq=39609, action=ACTION_UP)

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 18
  • Comments: 20

Most upvoted comments

same issue with me on android

+6
M0mentu on Jan 24, 2022

I’m facing a similar issue in my app too. My touchables stop working, and I can’t swipe through lists, change tabs etc. either.

+5
reeved on Jan 18, 2022

After further investigation we found that it does work with native stack navigator, but does not work with the default stack navigator (could be a clash of reanimated animations then)

+5
lukebars on Dec 22, 2021

I still get it on iOS and Android in version 2.8.0.

+4
jfaq89 on May 19, 2022

Hey! 👋

The issue doesn’t seem to contain a minimal reproduction.

Could you provide a snippet of code, a snack or a link to a GitHub repository that reproduces the problem?

+2
github-actions[bot] on Feb 2, 2022

This bug is fixed on react-native-reanimated >= 2.4.0.(but that is not written on the release note) I tried lukebars’s demo with react-native-reanimated>=2.4.0, but this bug doesn’t happen.

When and why this bug is fixed is this commit. (I tried)

@trin4ik try this on your project root after upgrading to react-native-reanimated>=2.4.0 😃

cd android/
./gradlew clean
cd ..

and execute app.

+1
wintermaples on Feb 9, 2022

@justinkx, the issue already has a reproduction demo, that bot is just failing.

+1
lukebars on Feb 2, 2022
Read more comments on GitHub
← react-native-reanimated: [2.2.2] [Android] The application crashes on launch with react-native 0.65.1
react-native-reanimated: [3.0.0-rc.0] Cannot read property 'CLAMP' of undefined →