Android crash: Animated events must have event data. #976

valeriashpiner · 2020-02-27T16:24:21Z

Current behaviour

Android crashes when I scroll to the end of tabs.
It happens all the time on Android.

You scroll to the end and then you try to scroll the last item more and more few times, but it's the last item so app just crashed after few scrolls.

Expected behaviour

Android doesn't have crash when I scroll.

Screenshots (if applicable)

It's only your library in my project which uses reanimated and react-native-gesture-handler together, and it happens on react-native-tab-view components. So I believe, it's related to your library.

What have you tried

I updated react-native-tab-view to 2.13.0.
I updated reanimated to 1.7.0.
I put import 'react-native-gesture-handler' at the top of root file index.js.
Releated issue here

Your Environment

software	version
ios or android	android
react-native	0.61.2
react-native-tab-view	2.11.0 and 2.13.0
react-native-gesture-handler	^1.4.1
react-native-reanimated	^1.2.0 and ^1.7.0
node	12.12.0
npm or yarn	yarn

valeriashpiner · 2020-02-28T19:08:55Z

This is also reproducible on example from this repository.

ezechielk · 2020-02-29T10:27:11Z

Great ! Works like a charm thank you ! ᐧ Le ven. 28 févr. 2020 à 21:55, Valeria <[email protected]> a écrit :

…

@ezechielk <https://github.com/ezechielk> I fixed it *temporarily* in my fork: https://github.com/valeriashpiner/react-native-tab-view It's one line change there. You could try it. I checked it on a few real devices and it seems that everything works well. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#976>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKNG5ZKQJA5D5RMQDIFU3UDRFF24BANCNFSM4K46LQ2A> .

anastely · 2020-02-29T14:57:57Z

@valeriashpiner I don't use this library, And I got the same error 🤷‍♂️ Maybe related on react-native-gesture-handler So if you solve it, please tell me :))

valeriashpiner · 2020-02-29T18:34:42Z

@anastely

You could use my fork: https://github.com/valeriashpiner/react-native-tab-view if you need react-native-tab-view.
I fixed it temporarily.

It's one line change there exactly in PanGestureHandler component which is part of react-native-gesture-handler. You could try it.
I checked it on a few real devices and it seems that everything works well.

anastely · 2020-02-29T18:46:43Z

@valeriashpiner Sadly I used react-navigation-tabs but I will give a try

shehzabcodecraft · 2020-03-04T11:28:38Z

@anastely Are you able to solve it? Please explain if you have done it.

valeriashpiner · 2020-03-06T15:26:06Z

@shehzabcodecraft you could use my fork, I fixed it there.

osdnk · 2020-03-06T16:22:06Z

https://github.com/osdnk/rntv-976

cannot repro. Please provide an example.

valeriashpiner · 2020-03-06T19:29:18Z

@osdnk I just reproduced it on your repo and recorded video. To reproduce you should scroll the last screen to the right side (to next screen which obviously not exists) and vice versa.

It will exist everywhere because it exists in the original example.

osdnk · 2020-03-09T14:33:57Z

What I'm doing wrong?

https://streamable.com/tuwyc

valeriashpiner · 2020-03-09T20:59:03Z

It appears on the real device. It happened with me and also with another ppl in this thread. What the point of proving that you can't reproduce it if I already recorded video from your project that it exists there? @osdnk

osdnk · 2020-03-09T21:01:36Z

I have no problem with saying that the bug exists. But I’d like to fix it as well and stack trace is not sufficient for debugging

valeriashpiner · 2020-03-09T21:04:34Z

Okay, @osdnk, sorry for misunderstanding:

Steps to reproduce:

Go to the last screen by scrolling left.
At the last screen, keep scrolling left more and more (even if the next screen doesn't exist.)

Maybe @ezechielk can help to explain more.

shehzabdeveloper · 2020-03-10T11:00:25Z

I defined swipeEnabled as false.. so this issue got a workaround

lander854 · 2020-03-24T12:11:57Z

same problem

EugeneDraitsev · 2020-03-25T09:25:53Z

@osdnk It's reproduced by constantly swiping to the left on first tab or to the right on last tab, but I can reproduce it only on prod version of build. So would be nice if you can try to reproduce and maybe fix it

melkayam92 · 2020-03-28T16:42:31Z

same here

shehzabdeveloper · 2020-03-30T04:09:13Z

@osdnk It's reproduced by constantly swiping to the left on first tab or to the right on last tab, but I can reproduce it only on prod version of build. So would be nice if you can try to reproduce and maybe fix it

You can disable the swipe option. "swipeEnabled" component as false will solve the crash. But after that, you cant swipe between tabs. Instead, you need to tap on the options to open tabs.

avlonder · 2020-03-30T21:02:31Z

Hi, is there currently a workaround that still allows swiping between tabs? For example, is there a way to catch the erroneous swipes with react-native-gesture-handler? :)

svenlombaert · 2020-03-31T08:42:59Z

@avlonder This workaround works, and still allows swiping:
getdelta/react-native-gesture-handler@311da06

I copied it from another fork that fixed it on an older version of react-native-gesture-handler

jakub-gonet · 2020-03-31T20:32:39Z

Hi guys,
I reproduced this issue on example app running in production mode. However, the app is working when I run code in create-react-app with the newest versions of Reanimated and Gesture Handler.

@valeriashpiner, @melkayam92, @anastely, @EugeneDraitsev, @svenlombaert can you guys check if this issue still exists on [email protected] and Gesture [email protected]?

valeriashpiner · 2020-03-31T20:37:11Z

@jakub-gonet oh, I am without android device now (it's not reproducible on a simulator). I hope someone here could help!

svenlombaert · 2020-04-01T08:02:16Z

I don't have an android device either, but I reproduced it on [email protected] and [email protected]. From the commits I see in both patches, it would be highly unlikely it got fixed.

2788 · 2020-04-03T14:20:10Z

I reproduced it on [email protected] and [email protected].

chgsilva · 2020-05-13T13:42:51Z

i am still facing this issue, any news?

raj-upadhyay · 2020-05-13T14:55:12Z

I am still facing this issue reproduced in issue with [email protected], [email protected], and [email protected]

pradnesh-amin · 2020-05-13T14:56:21Z

I am still facing this issue reproduced in issue with [email protected], [email protected], and [email protected]

Yes me too..

drb1 · 2020-06-04T17:19:08Z

"react-native-gesture-handler": "1.6.1",
"react-native-reanimated": "1.9.0",
"react-native-tab-view": "^2.13.0",

still same issue

jakub-gonet · 2020-06-05T10:38:22Z

@chgsilva, @raj-upadhyay, @pradnesh-amin, @drb1

this issue is probably related to gesture handler, would really appreciate some reproduction examples.

sannajammeh · 2020-06-20T13:56:17Z

As a temporary fix you can replace the pager component with an entirely native one: https://github.com/software-mansion-labs/react-native-tab-view-viewpager-adapter . Thus bypassing the gesture-handler itself.

midoushitongtong · 2020-06-30T16:07:42Z

@chgsilva, @raj-upadhyay, @pradnesh-amin, @drb1

this issue is probably related to gesture handler, would really appreciate some reproduction examples.

hi!
Please try this snack.
You just have to slide normally to see the problem.
https://snack.expo.io/@midoushitongtong/rntv-976-test

jayzyaj · 2020-07-07T09:00:41Z

any updates on this?

leonimurilo · 2020-07-09T18:54:53Z

Same issue here. I still did not get the pattern but I have two nested createMaterialTopTabNavigator

rphlmr · 2020-07-10T14:41:38Z

I reproduce on android 10 but not on 9 and lower (physical device with expo and release build). If it helps :'(

but #976 (comment) works <3

hamidfzm · 2020-07-10T16:37:48Z

This bug should be fixed in react native gesture handler. This is my patch package file in order to fix the android crash. Hope it will be a useful workaround until they fix it.
https://gist.github.com/hamidfzm/b85332b6d7408307a1e250b0f2db4d7f

OsamaMukhtar · 2020-07-20T11:22:36Z

Needs to be fixed. Same issue here

ShahalKP · 2020-07-24T19:43:38Z

+1. I hope I'll notice when they patch this.

kamalpandey · 2020-07-25T08:16:07Z

Same issue. Any workaround?

"expo": "36",
 "react-native-gesture-handler": "~1.5.0",
 "react-native-reanimated": "~1.4.0",
 "react-native-tab-view": "2.15.0",
 "react-native-webview": "^7.0.5",
 "react-navigation": "^4.0.9",
 "react-navigation-stack": "^2.8.2",
 "react-navigation-tabs": "^2.9.0",

kamalpandey · 2020-08-04T09:46:52Z

@sannajammeh

In IOS the keyboard opens and closes automatically but works fine if i remove it but for android I should add this as this is working. How should i deal with IOS?

More Info Here

aliceathens · 2020-08-11T01:11:16Z

+1

mchambaud · 2020-08-19T15:26:45Z

+1 still happening

@midoushitongtong

## Description This commit fixes a threading issue connected with `enabled` property of gesture handlers. Changing this property in JS called `updateGestureHandler` in the RNGH Java module which in turn called `setEnabled`. `setEnabled` cancels handler by using `cancel()` method if it was in an active state previously. This method was mistakenly called directly from the native modules thread - state transition methods are intended to be called from the UI thread. This made GH orchestrator call `handler.dispatchStateChange()` on the wrong thread. This caused event listeners to receive the event on a non-UI thread (`NodeManager.onEventDispatch()` from Reanimated) via `EventDispatcher`. Reanimated handles non-UI events in `onEventDispatch` (e.g. `onLayout` event) by adding them to the internal queue and posting frame callback if it wasn't posted previously (`onAnimationFrame()` wasn't called). Then any queued event is handled on UI thread in the next frame. Problem is, `EventDispatcher` first calls `onEventDispatch()` of any registered listeners and then runs `maybePostFrameCallbackFromNonUI()` which tries to post frame callback dispatching and disposing events from JS thread. So there was a possibility that we: 1. queue event in `NodeManager.onEventDispatch` in native modules thread 2. handle and **dispose** event in `EventDispatcher`, setting extra data to `null` 3. take the event from the queue and try handling it in the `NodeManager.onAnimationFrame`, raising exception. The solution to that problem is to always run `cancel()` (and any other `stateChange` method) on UI thread. - Fixes react-navigation/react-navigation/issues/6403 - Fixes satya164/react-native-tab-view/issues/976 - Fixes software-mansion/react-native-reanimated/issues/704 ## Test plan Huge thanks to the @midoushitongtong who provided small enough code example which reproduced this issue. ```jsx import * as React from 'react'; import { View, StyleSheet, Dimensions, Text } from 'react-native'; import { TabView, SceneMap } from 'react-native-tab-view'; const FirstRoute = () => ( <View style={[styles.scene, { backgroundColor: '#ff4081' }]}> <Text>aaaaa</Text> <Text>aaaaa</Text> <Text>aaaaa</Text> <Text>aaaaa</Text> <Text>aaaaa</Text> </View> ); const initialLayout = { width: Dimensions.get('window').width }; const InnerTab = () => { const [index, setIndex] = React.useState(0); const [routes] = React.useState([{ key: 'first', title: 'First' }]); const renderScene = SceneMap({ first: FirstRoute, }); return ( <TabView lazy navigationState={{ index, routes }} renderScene={renderScene} onIndexChange={setIndex} initialLayout={initialLayout} /> ); }; export default () => { const [index, setIndex] = React.useState(0); const [routes] = React.useState([ { key: 'a', title: 'a' }, { key: 'b', title: 'b' }, { key: 'c', title: 'c' }, ]); const renderScene = SceneMap({ a: InnerTab, b: InnerTab, c: InnerTab, }); return ( <TabView lazy navigationState={{ index, routes }} renderScene={renderScene} onIndexChange={setIndex} initialLayout={initialLayout} /> ); }; const styles = StyleSheet.create({ scene: { flex: 1, }, }); ``` When swiping rapidly in the first or last tab app crashed. After running `cancel()` on UI thread it stopped crashing. Also made sure that the Example app still works correctly.

lsancheztapia · 2020-08-22T22:04:04Z

I disabled swipe and worked:
swipeEnabled={false}

jakub-gonet · 2020-08-23T12:37:50Z

This should be resolved by software-mansion/react-native-gesture-handler#1171

c-goettert · 2021-02-19T14:31:17Z

This issue is closed, but if I trace the PR from gesture-handler correctly, it was first introduced in version 1.8, while react-native-tab-view currently uses 1.6.
Are there any plans to update gesture-handler soon, to have the fix included? (Or did I misunderstand something?)

HugoGresse · 2021-02-19T14:37:56Z

you can specify the version yourself in the package.json

"react-native-gesture-handler": "1.9.0",

jakub-gonet · 2021-02-19T14:40:17Z

@c-goettert tab-view uses 1.6 but for development (in devDependencies section). RNGH version is actually ruled by your project dependency, as it's listed in peer dependencies.

c-goettert · 2021-02-19T15:34:45Z

@HugoGresse @jakub-gonet thanks for pointing that out! I'll try update gesture handler then. :)

@midoushitongtong

…sion#1171) ## Description This commit fixes a threading issue connected with `enabled` property of gesture handlers. Changing this property in JS called `updateGestureHandler` in the RNGH Java module which in turn called `setEnabled`. `setEnabled` cancels handler by using `cancel()` method if it was in an active state previously. This method was mistakenly called directly from the native modules thread - state transition methods are intended to be called from the UI thread. This made GH orchestrator call `handler.dispatchStateChange()` on the wrong thread. This caused event listeners to receive the event on a non-UI thread (`NodeManager.onEventDispatch()` from Reanimated) via `EventDispatcher`. Reanimated handles non-UI events in `onEventDispatch` (e.g. `onLayout` event) by adding them to the internal queue and posting frame callback if it wasn't posted previously (`onAnimationFrame()` wasn't called). Then any queued event is handled on UI thread in the next frame. Problem is, `EventDispatcher` first calls `onEventDispatch()` of any registered listeners and then runs `maybePostFrameCallbackFromNonUI()` which tries to post frame callback dispatching and disposing events from JS thread. So there was a possibility that we: 1. queue event in `NodeManager.onEventDispatch` in native modules thread 2. handle and **dispose** event in `EventDispatcher`, setting extra data to `null` 3. take the event from the queue and try handling it in the `NodeManager.onAnimationFrame`, raising exception. The solution to that problem is to always run `cancel()` (and any other `stateChange` method) on UI thread. - Fixes react-navigation/react-navigation/issues/6403 - Fixes satya164/react-native-tab-view/issues/976 - Fixes software-mansion/react-native-reanimated/issues/704 ## Test plan Huge thanks to the @midoushitongtong who provided small enough code example which reproduced this issue. ```jsx import * as React from 'react'; import { View, StyleSheet, Dimensions, Text } from 'react-native'; import { TabView, SceneMap } from 'react-native-tab-view'; const FirstRoute = () => ( <View style={[styles.scene, { backgroundColor: '#ff4081' }]}> <Text>aaaaa</Text> <Text>aaaaa</Text> <Text>aaaaa</Text> <Text>aaaaa</Text> <Text>aaaaa</Text> </View> ); const initialLayout = { width: Dimensions.get('window').width }; const InnerTab = () => { const [index, setIndex] = React.useState(0); const [routes] = React.useState([{ key: 'first', title: 'First' }]); const renderScene = SceneMap({ first: FirstRoute, }); return ( <TabView lazy navigationState={{ index, routes }} renderScene={renderScene} onIndexChange={setIndex} initialLayout={initialLayout} /> ); }; export default () => { const [index, setIndex] = React.useState(0); const [routes] = React.useState([ { key: 'a', title: 'a' }, { key: 'b', title: 'b' }, { key: 'c', title: 'c' }, ]); const renderScene = SceneMap({ a: InnerTab, b: InnerTab, c: InnerTab, }); return ( <TabView lazy navigationState={{ index, routes }} renderScene={renderScene} onIndexChange={setIndex} initialLayout={initialLayout} /> ); }; const styles = StyleSheet.create({ scene: { flex: 1, }, }); ``` When swiping rapidly in the first or last tab app crashed. After running `cancel()` on UI thread it stopped crashing. Also made sure that the Example app still works correctly.

Gogul-S · 2021-04-22T11:31:00Z

@c-goettert tab-view uses 1.6 but for development (in devDependencies section). RNGH version is actually ruled by your project dependency, as it's listed in peer dependencies.

@jakub-gonet Will updating gesture-handler version in package.json fix the crash in production also?

jakub-gonet · 2021-04-22T12:26:45Z

Yes, it'll fix this issue both in the development and release versions of your app.

valeriashpiner added the bug label Feb 27, 2020

valeriashpiner mentioned this issue Feb 27, 2020

Android crashes with IllegalArgumentException due to lack of event data on animated events react-navigation/react-navigation#6403

Closed

jakub-gonet mentioned this issue Apr 6, 2020

Animated events must have event data software-mansion/react-native-reanimated#704

Closed

bnchdrff mentioned this issue Jun 12, 2020

Guard against null event handler to prevent android crash software-mansion/react-native-gesture-handler#1089

Closed

jakub-gonet mentioned this issue Aug 20, 2020

Fix threading issue in RNGestureHandlerStateChangeEvent software-mansion/react-native-gesture-handler#1171

Merged

norbertschuler mentioned this issue Oct 3, 2020

Upgrade npm module react-native-gesture-handler to get rid of native Android crash Plant-for-the-Planet-org/treecounter-app#2767

Closed

satya164 closed this as completed Feb 17, 2021

Android crash: Animated events must have event data. #976

Android crash: Animated events must have event data. #976

Comments

valeriashpiner commented Feb 27, 2020 • edited Loading

Current behaviour

Expected behaviour

Screenshots (if applicable)

What have you tried

Your Environment

valeriashpiner commented Feb 28, 2020

ezechielk commented Feb 29, 2020 via email

anastely commented Feb 29, 2020

valeriashpiner commented Feb 29, 2020

anastely commented Feb 29, 2020

shehzabcodecraft commented Mar 4, 2020

valeriashpiner commented Mar 6, 2020

osdnk commented Mar 6, 2020

valeriashpiner commented Mar 6, 2020 • edited Loading

osdnk commented Mar 9, 2020 • edited Loading

valeriashpiner commented Mar 9, 2020 • edited Loading

osdnk commented Mar 9, 2020 • edited Loading

valeriashpiner commented Mar 9, 2020

shehzabdeveloper commented Mar 10, 2020

lander854 commented Mar 24, 2020

EugeneDraitsev commented Mar 25, 2020

melkayam92 commented Mar 28, 2020

shehzabdeveloper commented Mar 30, 2020

avlonder commented Mar 30, 2020

svenlombaert commented Mar 31, 2020

jakub-gonet commented Mar 31, 2020

valeriashpiner commented Mar 31, 2020

svenlombaert commented Apr 1, 2020

2788 commented Apr 3, 2020

chgsilva commented May 13, 2020

raj-upadhyay commented May 13, 2020

pradnesh-amin commented May 13, 2020

drb1 commented Jun 4, 2020

jakub-gonet commented Jun 5, 2020

sannajammeh commented Jun 20, 2020

midoushitongtong commented Jun 30, 2020

jayzyaj commented Jul 7, 2020

leonimurilo commented Jul 9, 2020

rphlmr commented Jul 10, 2020 • edited Loading

hamidfzm commented Jul 10, 2020

OsamaMukhtar commented Jul 20, 2020

ShahalKP commented Jul 24, 2020

kamalpandey commented Jul 25, 2020 • edited Loading

kamalpandey commented Aug 4, 2020

aliceathens commented Aug 11, 2020

mchambaud commented Aug 19, 2020

lsancheztapia commented Aug 22, 2020

jakub-gonet commented Aug 23, 2020

c-goettert commented Feb 19, 2021

HugoGresse commented Feb 19, 2021

jakub-gonet commented Feb 19, 2021

c-goettert commented Feb 19, 2021

Gogul-S commented Apr 22, 2021

jakub-gonet commented Apr 22, 2021

valeriashpiner commented Feb 27, 2020 •

edited

Loading

valeriashpiner commented Mar 6, 2020 •

edited

Loading

osdnk commented Mar 9, 2020 •

edited

Loading

valeriashpiner commented Mar 9, 2020 •

edited

Loading

osdnk commented Mar 9, 2020 •

edited

Loading

rphlmr commented Jul 10, 2020 •

edited

Loading

kamalpandey commented Jul 25, 2020 •

edited

Loading