Event emitters for Fabric components

[lindboe]

Today I learned that while I can add event emitters to my Turbo Module spec (readonly onTestEvent: CodegenTypes.EventEmitter<void>;)., the same pattern doesn't work for a Fabric component spec:

[Codegen] Supported Apple platforms: ios for TestComponentEventViewSpec
[Codegen] Error: Unknown prop type for "onTestEvent": "EventEmitter"

Is there support for this for Fabric components that I've missed? I'm not finding any docs about this, although I did find this link of an example about how to use EventDispatcher directly on Android: https://github.com/react-native-menu/menu/pull/749/files.

Generally this is hard to sort through myself as there's a lot of event emitting APIs and I'm not sure what I should use, and we seem to not have documentation on them.

[cipolleschi]

Hi @lindboe!
Modules and Components are inherently different things and use different abstractions.
To use events in components you need to use BubblingEvents or DirectEvents. We have an example in the website on how to use a bubbling event.

In JS, you have to specify your event as a prop:

type TestEventType = {
};

export interface NativeProps extends ViewProps {
  // ...
  onTestEvent?: CodegenTypes.BubblingEventHandler<TestEventType> | null;
}

In native, you do this (iOS)

// In RCTTestView

// Event emitter convenience method
- (const TestViewEventEmitter &)eventEmitter
{
  return static_cast<const TestViewEventEmitter &>(*_eventEmitter);
}

-(void)emitEvent
{
  self.eventEmitter.onTestEvent();
}

[lindboe]

Thank you! I missed that because the EventEmitter section was under "Advanced" for the modules guide but it's within the base component guide here. Might be helpful to work on making the structure a little more consistent there 🤔 I'll give it some thought. Thanks again!

[cipolleschi]

I think it is correct in this way, to be honest.

Events are a basic feature for components, and almost any fairly complex component would need events to send back information to JS when something changes on native.

On the other hand, not all the Native Modules need events, because in most case a native module is invoked by JS and if we need async messaging we can use promises and callbacks instead of events. That's why events are an advanced feature for modules but not for components

[jamonholmgren]

Probably technically correct organization, but maybe it would be helpful to have a link in a strategic place to make sure nobody misses it (I missed it too when I looked).