[2.3][Android] Layout animation on screen transition freezes gesture responder

[lukebars]

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

• [x] 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) ```

[github-actions[bot]]

Issue validator

The issue is valid!

[lukebars]

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)

[alantoa]

same issues

[shubhamdeol]

Same Issue, For me React Navigation Native Stack, stops detecting header height, once I enable Layout Animations. Should this issue belong to React Navigation?or react-native-screens?

@lukebars Thanks for adding reproducible example.

[reeved]

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.

[aldovandus]

Same issue for me

[justinkx]

Same issue for me

+1

[M0mentu]

same issue with me on android

[vladyslavNiemtsev]

same issue with me on IOS and Android.

this problem forces us to avoid using layout animations

[lukebars]

@vladyslavNiemtsev are you sure it's happenning on iOS? If yes, could you provide a reproducible demo? I'm sure that would help maintainers a lot.

[github-actions[bot]]

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?

[justinkx]

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?

Looks like expo snack (sdk 44) do not support reanimated v2.3.1 , getting error: _stopObservingProgress is not defined

[lukebars]

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

[trin4ik]

+1 same here. 2.4.0, not see changes, about this bug (

[wintermaples]

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.

[lukebars]

@wintermaples thanks!

Issue seems fixed with >2.4.0, so I'll close it.

[jfaq89]

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

[IlyaDylko]

Still get it in 2.8.0.

[meedwire]

O problema ainda persiste na versão 2.8.0, aparentemente sem logs, e sem erros no console nativo.

[t0ma5h]

same issues