"bubbling" vs "direct" events in React Native Android custom view

Question

React Native Android custom views are able to declare events in 2 different ways in a ViewManager subclass :

• "bubbling" events via getExportedCustomBubblingEventTypeConstants()
• "direct" events via getExportedCustomDirectEventTypeConstants()

What is the difference between these 2 types of event?

If I am trying to send an event from an Android custom view onClick(View v) method up to the JS representation of my view, which of these methods would I use to declare my custom event name?

---

Follow up: I ended up using a "direct" event to send a click from my Android view back to my JS component. This worked very well, but I would still like to know what the "bubbling" event is all about.

Answer 1

Thanks to your answer here https://stackoverflow.com/a/44207488/2881112 I was able to get a grasp on handling native events in Android.

After experimenting a lot this is what I found out.

There are basically two types of events

• direct events - this only seems to affect the custom native component
• bubbling events - this event if not handled by the native component gets bubbled up to the parent components till its handled.

Example:

if I define getExportedCustomDirectEventTypeConstants for onClick event on my custom view component CustomView

Then this works

 <CustomView onClick={() => console.log("Hello")}/>

but not this

<Pressable onPress={() => console.log("Hello")}>
   <CustomView/>
</Pressable>

but if I use

getExportedCustomBubblingEventTypeConstants

Then both of these work

 <CustomView onClick={() => console.log("Hello")}/>

and

<Pressable onPress={() => console.log("Hello")}>
   <CustomView/>
</Pressable>