RCTDirectEventBlock vs RCTBubblingEventBlock

Question

What's the difference between RCTDirectEventBlock vs RCTBubblingEventBlock?

Answer 1

It appears that there isn't much official documentation and Facebook has closed and locked Issues requesting better documentation. The one helpful doc I found suggests it's purely a stylistic difference:

Bubbling events are like DOM events so that a parent component can capture an event fired by its child. Generally these are UI-related, like "the user touched this box". Direct events are not bubbled and are intended for more abstract events like "this image failed to load".

Via this cheatsheet: https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c

Answer 2

Considering the Code on "RCTSlider.h"

https://github.com/facebook/react-native/blob/master/React/Views/RCTSlider.h

@property (nonatomic, copy) RCTBubblingEventBlock onValueChange;
@property (nonatomic, copy) RCTDirectEventBlock onSlidingComplete;

The RCTBubblingEventBlock is intended for things that has multiple callbacks possible like - "Value Changed" and will likely fire multiple changes.

But again even if RCTDirectEventBlock has same signature it is for single event callback for event like - "Completed".

From - https://github.com/facebook/react-native/blob/master/React/Views/RCTComponent.h

/**
 * These block types can be used for mapping input event handlers from JS to view
 * properties. Unlike JS method callbacks, these can be called multiple times.
 */
typedef void (^RCTDirectEventBlock)(NSDictionary *body);
typedef void (^RCTBubblingEventBlock)(NSDictionary *body);

Hence as both has same method signature, both will have equivalent code, but it is advised to use bubble event for multiple call cases and direct event for single call case, just for code consistency and clarity.