useEvent hook not working for custom UI modules

[mrbrentkelly]

Description

The useEvent hook from Reanimated v2 doesn't work for events on a custom Android and iOS UI modules that use RCTEventEmitter.

If events are emitted using the EventDispatcher from UIManagerModule then the useEvent hook works just fine.

Works

EventDispatcher eventDispatcher = context
   .getNativeModule(UIManagerModule.class)
   .getEventDispatcher();

SomeCustomEvent event = SomeCustomEvent.obtain(/*params*/);

eventDispatcher.dispatchEvent(event);

Doesn't work

context.getJSModule(RCTEventEmitter.class).receiveEvent(getId(), "SomeEvent", data);

The RCTEventEmitter approach is probably what most custom native modules use (for example react-native-video) since that's what the docs say to use. So I think this might become a common gotcha if not fixed or at least documented.

Note, this issue exists on iOS as well.

Steps To Reproduce

1. Create new RN project and install reanimated2
2. Create a Native UI module on Android that emits events using RCTEventEmitter
3. Consume events on the JS layer using the useEvent hook.

Expected behavior

Events triggered using RCTEventEmitter should be picked up by the useEvent hook

Actual behavior

The worklet inside the useEvent hook is not triggered.

Snack or minimal code example

I've created a new RN project that repro's the issue:

https://github.com/mrbrentkelly/reanimated2-event-bug

Package versions

• React: 16.13.1
• React Native: 0.63.2
• React Native Reanimated: 2.0.0

[jakub-gonet]

Sorry for the late response.

Are those events direct (sent to the Views)? AFAIK we can only handle that type of events.

[mrbrentkelly]

Yes these are direct view events (although I would expect RE2 to work with bubbling view events also).

See my example here 👍

[github-actions[bot]]

Issue validator

The issue is valid!

[mrbrentkelly]

Just verified that this issue is occurring on iOS also... i.e. The only way I can get the reanimated2 useEvent hook to pick up events from a custom native module is to use the RCTEventDispatcher, which is not a common way to implement events on iOS UI Modules.

Works:

// Native View in a custom ViewManager

let eventDispatcher = bridge.eventDispatcher()
eventDispatcher.send(OnSomeDirectEvent(viewTag: viewTag, data))
eventDispatcher.send(OnSomeBubblingEvent(viewTag: viewTag, data))

Does not work:

// Native View in a custom ViewManager

@objc public var onSomeDirectEvent: RCTDirectEventBlock?
@objc public var onSomeBubblingEvent: RCTDirectEventBlock?

onSomeDirectEvent?(data)
onSomeBubblingEvent?(data)

Are there plans for renimated2 to support UI component events that were implemented using the standard UI component event mechanism? Implementing events using the event dispatcher is much more involved as you have to create a custom RCTEvent class for each event and manage coalescing.

[terrysahaidak]

Hi, I'm pretty sure reanimated would want to support custom ui events but it's just not a priority right now and team is working on something else.

If you could work on this PR I'm sure @Szymon20000 or @karol-bisztyga would provide some help and feedback.

[mrbrentkelly]

Sure thing 👍 Any directions to code on where I should start with Reanimated2 event logic would be appreciated and I can take a look.

Hopefully this will be a non trivial change since its something that was supported in Reanimated1 with Animated.Event. I pretty much can't migrate any of my Reanimated1 code that's using Animated.Event() to useEvent() 💔.

[p-sebastian]

This is still a problem, useEvent doesn't work for most nativeEvents.

[szydlovsky]

Closing the issue since the PR got already merged way back. If anything related to it still pops up please create new issues!

[mrbrentkelly]

Closing the issue since the PR got already merged way back

@szydlovsky what was the PR that resolved this issue? Could you link to it?

[szydlovsky]

@mrbrentkelly I thought that https://github.com/software-mansion/react-native-reanimated/pull/2207 solved it. We are doing some older issues cleanup, sorry for making a hasty decision 😄

[mrbrentkelly]

No problem! Unfortunately I don't believe https://github.com/software-mansion/react-native-reanimated/pull/2207 tackled this particular issue, so I'd recommend we keep it open 👍