Unable to dispatch a custom event from Fabric components

[justblender]

Description

I've set up a custom Codegen component with a property of onProgress, which infers DirectEventHandler<Readonly<...>> type.

Codegen correctly identifies its type and generates an event emitter for this component, but dispatching it from Objective-C++ results in always receiving an Unsupported top level event type topXYZ is dispatched error.

Version

0.69.0

Output of npx react-native info

System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
    Memory: 270.31 MB / 8.00 GB
    Shell: 3.3.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 17.8.0 - /opt/homebrew/bin/node
    Yarn: 3.2.0 - /opt/homebrew/bin/yarn
    npm: 8.5.5 - /opt/homebrew/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8609683
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /opt/homebrew/Cellar/openjdk@11/11.0.14.1/libexec/openjdk.jdk/Contents/Home/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0
    react-native: 0.69.0 => 0.69.0
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Declare native Codegen component with any onEventName event handler prop.
2. On the native side, acquire an instance of the generated EventEmitter class and dispatch any generated event.

Snack, code example, screenshot, or link to a repository

1. Declare codegen native component TestComponent with onProgress event handler prop.

// @ts-ignore TODO: remove once there is a .d.ts file with definitions
import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps, HostComponent } from 'react-native';
import type {
  Int32,
  WithDefault,
  DirectEventHandler,
  // @ts-ignore TODO: remove once there is a .d.ts file with definitions
} from 'react-native/Libraries/Types/CodegenTypes';

interface NativeProps extends ViewProps {
  onProgress?: DirectEventHandler<
    Readonly<{
      bytesWritten: Int32;
      bytesExpected: Int32;
    }>
  >;
}

const codegenNativeComponent = codegenNativeComponentUntyped as <T extends {}>(
  name: string
) => HostComponent<T>;

export default codegenNativeComponent<NativeProps>('TestComponent');

2. On the native side, acquire an instance of the generated TestComponentEventEmitter class:

  - (std::shared_ptr<const TestComponentEventEmitter>)getEventEmitter
{
  if (!self->_eventEmitter) {
    return nullptr;
  }

  assert(std::dynamic_pointer_cast<TestComponentEventEmitter const>(self->_eventEmitter));
  return std::static_pointer_cast<TestComponentEventEmitter const>(self->_eventEmitter);
}

3. Dispatch onProgress event:

const auto eventEmitter = [self getEventEmitter];
if (eventEmitter) {
  eventEmitter->onProgress(TestComponentEventEmitter::OnProgress{
    .bytesWritten = bytesWritten,
    .bytesExpected = bytesExpected
  });
}

[andrestone]

Seems like this is not implemented for TypeScript.

react-native/packages/babel-plugin-codegen/index.js

Line 28 in f3db6cc

const libraryName = basename(filename).replace(/NativeComponent\.js$/, '');

[justblender]

Seems like this is not implemented for TypeScript.

@andrestone I've tried to rewrite Codegen types to Flow and it didn't help either, so it doesn't seem like TypeScript is the issue here.

Nonetheless, I was able to find a bit of free time today and "fix" this problem on my behalf. Strangely enough, using RCT_EXPORT_VIEW_PROPERTY on an inherited RCTViewManager class does the job, but I'm not sure why I have to touch old architecture files in order to enable direct event handlers for Fabric.

Feels super strange, so I'll probably keep this issue open.

[andrestone]

I think the way you've solved it is probably the "recommended" way. See this example.

Writing the spec in flow (not in TS) also registers the view with the correct ViewConfig if you do this:

// index.js
// ...
import { setRuntimeConfigProvider } from 'react-native/Libraries/NativeComponent/NativeComponentRegistry';

setRuntimeConfigProvider((name) => {
  return name === 'MyView' ? { native: false, strict: false, verify: false } : null;
});

// ...

[cortinico]

Nonetheless, I was able to find a bit of free time today and "fix" this problem on my behalf. Strangely enough, using RCT_EXPORT_VIEW_PROPERTY on an inherited RCTViewManager class does the job, but I'm not sure why I have to touch old architecture files in order to enable direct event handlers for Fabric.

cc @sammy-SC @cipolleschi is this related to Static View Config by any chance?

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[sammy-SC]

Hey @justblender

do you still experience this in 0.71?