Skip to content

Commit 6a3a305

Browse files
Add C++ Turbo Module Event Emitter example (#44810)
Summary: Pull Request resolved: #44810 Adds an example how to use the `EventEmitter` on a (C++) Turbo Module ## Changelog: [General] [Added] - Add C++ Turbo Module Event Emitter example Reviewed By: javache Differential Revision: D57473949 fbshipit-source-id: 1a8d17fb83af4220ef12379e0102b5b2e233ed45
1 parent 872d5d3 commit 6a3a305

File tree

3 files changed

+43
-1
lines changed

3 files changed

+43
-1
lines changed

packages/rn-tester/NativeCxxModuleExample/NativeCxxModuleExample.cpp

+8-1
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,14 @@ std::optional<bool> NativeCxxModuleExample::getWithWithOptionalArgs(
166166
}
167167

168168
void NativeCxxModuleExample::voidFunc(jsi::Runtime& rt) {
169-
// Nothing to do
169+
// Emit some events
170+
emitOnPress();
171+
emitOnClick<std::string>("value from callback on click!");
172+
emitOnChange(ObjectStruct{1, "two", std::nullopt});
173+
emitOnSubmit(std::vector{
174+
ObjectStruct{1, "two", std::nullopt},
175+
ObjectStruct{3, "four", std::nullopt},
176+
ObjectStruct{5, "six", std::nullopt}});
170177
}
171178

172179
void NativeCxxModuleExample::setMenu(jsi::Runtime& rt, MenuItem menuItem) {

packages/rn-tester/NativeCxxModuleExample/NativeCxxModuleExample.js

+5
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
*/
1010

1111
import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport';
12+
import type {EventEmitter} from 'react-native/Libraries/Types/CodegenTypes';
1213

1314
import {TurboModuleRegistry} from 'react-native';
1415

@@ -76,6 +77,10 @@ export type CustomDeviceEvent = {
7677
};
7778

7879
export interface Spec extends TurboModule {
80+
+onPress: EventEmitter<void>;
81+
+onClick: EventEmitter<string>;
82+
+onChange: EventEmitter<ObjectStruct>;
83+
+onSubmit: EventEmitter<ObjectStruct[]>;
7984
+getArray: (arg: Array<ObjectStruct | null>) => Array<ObjectStruct | null>;
8085
+getBool: (arg: boolean) => boolean;
8186
+getConstants: () => ConstantsStruct;

packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js

+30
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
*/
1010

1111
import type {RootTag} from 'react-native/Libraries/ReactNative/RootTag';
12+
import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
1213

1314
import NativeCxxModuleExample, {
1415
EnumInt,
@@ -72,6 +73,7 @@ type ErrorExamples =
7273

7374
class NativeCxxModuleExampleExample extends React.Component<{||}, State> {
7475
static contextType: React$Context<RootTag> = RootTagContext;
76+
eventSubscriptions: EventSubscription[] = [];
7577

7678
state: State = {
7779
testResults: {},
@@ -262,6 +264,34 @@ class NativeCxxModuleExampleExample extends React.Component<{||}, State> {
262264
'Cannot load this example because TurboModule is not configured.',
263265
);
264266
}
267+
if (NativeCxxModuleExample) {
268+
this.eventSubscriptions.push(
269+
NativeCxxModuleExample.onPress.addListener(value =>
270+
console.log('onPress: ()'),
271+
),
272+
);
273+
this.eventSubscriptions.push(
274+
NativeCxxModuleExample.onClick.addListener(value =>
275+
console.log(`onClick: (${value})`),
276+
),
277+
);
278+
this.eventSubscriptions.push(
279+
NativeCxxModuleExample.onChange.addListener(value =>
280+
console.log(`onChange: (${JSON.stringify(value)})`),
281+
),
282+
);
283+
this.eventSubscriptions.push(
284+
NativeCxxModuleExample.onSubmit.addListener(value =>
285+
console.log(`onSubmit: (${JSON.stringify(value)})`),
286+
),
287+
);
288+
}
289+
}
290+
291+
componentWillUnmount() {
292+
for (const subscription of this.eventSubscriptions) {
293+
subscription.remove();
294+
}
265295
}
266296

267297
render(): React.Node {

0 commit comments

Comments
 (0)