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

user_383414 0
Viewed 1918

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.

react-native android
2 Answers

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>
user_28811120

In our project getExportedCustomDirectEventTypeConstants() has been working fine, but when I replaced it with getExportedCustomBubblingEventTypeConstants() it was broken. I don't know why. The only thing I know is they are not exchangeable.

user_74559750
Related