How to do event handling for android and iOS in react native's new architecture for fabric components?

[BraveEvidence]

I am trying to learn Fabric for the new architecture . Can someone please help me with this https://stackoverflow.com/questions/72981626/how-to-do-event-handling-for-android-and-ios-in-react-natives-new-architecture. I was trying to go through this repo on how this lib implemented it but found it extremely challenging due to the codebase.

[kkafar]

iOS

Assuming native spec you posted is correct (I'm not really familiar with TypeScript + Codegen duo) when you run pod install command in your ios/ directory codegen should generate EventEmitters cpp file (+ header) in React-Codegen pod (you can see below how to find it in XCode)

link to the screenshot with Pods structure

You can then use these classes in your Objective-C++ code to emit the events:

if (_eventEmitter != nullptr) {
    std::dynamic_pointer_cast<const facebook::react::$$NAME OF YOUR EVENT EMITTER TYPE$$>(_eventEmitter)
        ->onEvent(facebook::react::$$NAME OF YOUR EVENT EMITTER TYPE::OnEvent{.value = $$VALUE$$});
}

See links below to see how it is done in react-native-screens

1. Native component spec in Flow
2. Event emission in Obj-C++ code
3. Event exposure in screen manager - I'm not quite sure if this line is necessary, haven't tested it out yet.

Android

1. To trigger codegen just run native build.
2. Define native event class as done here
3. Take a look here for how to dispatch event
4. Export your event types

[BraveEvidence]

@kkafar Thanks will check on this. Do you have any idea on how do it for android. I have tried it for android as I have little experience with it but I am not able to transmit click listener event from native side to js side. In case you have time check this https://github.com/PritishSawant/ReactNativeFabricEventListenerExample

[kkafar]

I updated my previous comment to include links to example implementations for Android. Let me know if you succeeded. In case not, I will follow with more detailed explanation.

[BraveEvidence]

dispatch is deprecated. What's the alternative?

[kkafar]

For this moment, we're sticking to dispatch method. If I do some research, I'll let you know.

[BraveEvidence]

Can you help me in understanding how to refactor the above highlighted code according to my use case?

[kkafar]

As I described in main answer:

if (_eventEmitter != nullptr) {
    std::dynamic_pointer_cast<const facebook::react::$$NAME OF YOUR EVENT EMITTER TYPE$$>(_eventEmitter)
        ->onEvent(facebook::react::$$NAME OF YOUR EVENT EMITTER TYPE::OnEvent{.value = $$VALUE$$});
}

You should locate your event emitters in EventEmitters.{h,cpp} files (which you should be able to find following instructions from main answer).

[BraveEvidence]

@kkafar Brillaint stuff. Working for ios. Will try for android as well and get back to you

[BraveEvidence]

@kkafar I am facing issue on android. I get below screen when I click on my button.
I have pushed the latest code to my repo. Can you please check https://github.com/PritishSawant/ReactNativeFabricEventListenerExample

I did override dispatch but both dispatch and dispatchModern are deprecated. Not sure what the alternative is.

I also override getEventData() but not sure what exactly I need to pass in there as I don't see getEventData() overriden
in the sample you mentioned here

[BraveEvidence]

Ok I was able to figure it out and it works but I still don't understand few things.

1. I have to change the event name from OnClickHandler to topOnClickHandler in Native Android side.
2. Why do I have to override getEventData()
3. What is the alternative to dispatch and RCTEventEmitter if both are deprecated?

[BraveEvidence]

Further more debugging, I think I need to override getEventData() as according to my spec file in TS I need to return a string so may be that is necessary. Not 100% sure.