CODEWITHSUNDEEP
reactjsreact-native
akshay gore
akshay gore

Reputation: 1006

RCTDirectEventBlock vs RCTBubblingEventBlock

What's the difference between RCTDirectEventBlock vs RCTBubblingEventBlock?

Upvotes: 11

Views: 2075

Answers (2)

Bishal Ghimire
Bishal Ghimire

Reputation: 2610

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.

Upvotes: 3

Zack
Zack

Reputation: 1003

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

Upvotes: 4

Related Questions