How to use codegenNativeCommands for a RCTViewComponentView

[CptFabulouso]

While writing I found the solution. Since I did not find it documented anywhere, I still post it for anyone struggling with the same. I've found out how to do it in this react-native-wishlist lib, I can't thank the author enough.

Solution

let's create some RTNCenteredText component with a clear method.

RTNCenteredTextNativeComponent.ts spec file

import type { HostComponent, ViewProps } from 'react-native';
import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

export interface NativeProps extends ViewProps {
  text?: string;
}

/* Defined and export command START */
interface NativeCommands {
  clear: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
}

export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
  supportedCommands: ['clear'],
});
/* Defined and export command END */

export default codegenNativeComponent<NativeProps>(
  'RTNCenteredText'
) as HostComponent<NativeProps>;

RCTCenteredText.h header file (nothing special here)

#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTViewComponentView.h>
#import <UIKit/UIKit.h>

#ifndef RTNCenteredText_h
#define RTNCenteredText_h

NS_ASSUME_NONNULL_BEGIN

@interface RTNCenteredText : RCTViewComponentView

@end

NS_ASSUME_NONNULL_END

#endif /* RTNCenteredText_h */
#endif /* RCT_NEW_ARCH_ENABLED */

RCTCenteredText.mm file

This component does not render anything, all we are interested is in the method call

#import "RTNCenteredText.h"

#import <react/renderer/components/TheModuleSpec/ComponentDescriptors.h>
#import <react/renderer/components/TheModuleSpec/EventEmitters.h>
#import <react/renderer/components/TheModuleSpec/Props.h>
#import <react/renderer/components/TheModuleSpec/RCTComponentViewHelpers.h>

#import "RCTFabricComponentsPlugins.h"

using namespace facebook::react;

@interface RTNCenteredText ()  <RCTRTNCenteredTextViewProtocol>
@end

@implementation RTNCenteredText {}

+ (ComponentDescriptorProvider)componentDescriptorProvider
{
  return concreteComponentDescriptorProvider<RTNCenteredTextComponentDescriptor>();
}

Class<RCTComponentViewProtocol> RTNCenteredTextCls(void)
{
    return RTNCenteredText.class;
}

/* These two methods below are responsible for capturing the command */
// I guess this forwards the commands to our class
- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args
{
  RCTRTNCenteredTextHandleCommand(self, commandName, args); // <-- the HandleCommand is generated
}

// this function will be called directly, no need to RCT_EXPORT anything. It is defined in the generated RCTRTNCenteredTextViewProtocol
- (void)clear { 
  RCTLog(@"Clearing the text");
}
/* end of commands */

+ (NSString *)moduleName { 
  return @"RTNCenteredText";
}

@end

RTNCenteredText.tsx file wrapping the native component

As a functional component

import { forwardRef, useImperativeHandle, useRef } from 'react';
import RTNCenteredNative, {
  Commands,
} from '../specs/RTNCenteredTextNativeComponent';

type Props = {
  text?: string;
};

type Instance = {
  clear: () => void;
};

const RTNCenteredTextComponent = (props: Props, ref: React.Ref<Instance>) => {
  const nativeRef = useRef<InstanceType<typeof RTNCenteredNative> | null>(null);

  useImperativeHandle(
    ref,
    () => ({
      clear: () => {
        nativeRef.current && Commands.clear(nativeRef.current);
      },
    }),
    []
  );

  return <RTNCenteredNative {...props} ref={nativeRef} />;
};

export const RTNCenteredText = forwardRef(RTNCenteredTextComponent);

Or as a class component

import { Component } from 'react';
import RTNCenteredNative, {
  Commands,
} from '../specs/RTNCenteredTextNativeComponent';

type Props = {
  text?: string;
};

export class RTNCenteredText extends Component<Props> {
  _ref: React.ElementRef<typeof RTNCenteredNative> | null = null;

  _captureRef = (ref: React.ElementRef<typeof RTNCenteredNative>) => {
    this._ref = ref;
  };

  clear = () => {
    this._ref &&  Commands.clear(this._ref);
  };

  render() {
    return <RTNCenteredNative {...this.props} ref={this._captureRef} />;
  }
}

---

THE PAIN

This is the original post, which I leave, because I need to share my pain and is in my opinion a kind of prove that people really don't know how to work with codegenNativeCommands and that the docs are misleading.

TLDR:

Is there some example that uses both codegenNativeComponent and codegenNativeCommands for one component?
react-native-maps lib uses codegenNativeCommands, but no codegenNativeComponent. Instead they use the old requireNativeComponent
rnmapbox uses codegenNativeComponent but no codegenNativeCommands, instead they specify the commands in a Native Module.

The initial struggle

Let's follow this example and let's say I want to add a command, how do I do it?
Based on this documentation I assumed I should add this the RTNCenteredTextNativeComponent.ts file:

interface NativeCommands {
  clear: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
}

export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
  supportedCommands: ['clear'],
});

and to the RTNCenteredText.mm file

RCT_EXPORT_METHOD(clear: (nonnull NSNumber *)tag){
  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
    NativeView *view = viewRegistry[reactTag];
    if (!view || ![view isKindOfClass:[NativeView class]]) {
      RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
      return;
    }
    [view clear];
  }];
}

But that doesn't work, because I can't access self.bridge. I looked at how react-native-maps (e.g. the MapView does it and what they do is they extend RCTViewManager instead of RCTViewComponentView in the header file. So how do I find the view I need? The mentioned documentation above omits the function body entirely.

What I tried

So I did the most simple example e.g.

#import "RTNCenteredText.h"

@interface RTNCenteredText ()
@end

@implementation RTNCenteredText {}

@end

The build fails on Undefined symbol: _RTNCenteredTextCls

So I do:

#import "RTNCenteredText.h"

#import <react/renderer/components/TheModuleSpec/ComponentDescriptors.h>
#import <react/renderer/components/TheModuleSpec/EventEmitters.h>
#import <react/renderer/components/TheModuleSpec/Props.h>
#import <react/renderer/components/TheModuleSpec/RCTComponentViewHelpers.h>

#import "RCTFabricComponentsPlugins.h"

@interface RTNCenteredText ()
@end

@implementation RTNCenteredText {}

Class<RCTComponentViewProtocol> RTNCenteredTextCls(void)
{
    return RTNCenteredText.class;
}

@end

That fails during runtime on

After adding componentDescriptorProvider:

#import "RTNCenteredText.h"

#import <react/renderer/components/TheModuleSpec/ComponentDescriptors.h>
#import <react/renderer/components/TheModuleSpec/EventEmitters.h>
#import <react/renderer/components/TheModuleSpec/Props.h>
#import <react/renderer/components/TheModuleSpec/RCTComponentViewHelpers.h>

#import "RCTFabricComponentsPlugins.h"

using namespace facebook::react;

@interface RTNCenteredText ()
@end

@implementation RTNCenteredText {}

+ (ComponentDescriptorProvider)componentDescriptorProvider
{
  return concreteComponentDescriptorProvider<RTNCenteredTextComponentDescriptor>();
}

Class<RCTComponentViewProtocol> RTNCenteredTextCls(void)
{
    return RTNCenteredText.class;
}

@end

Fail happens here

So I notice I missed using the ViewProtocol, maybe thats' problem? So I ended up with

#import "RTNCenteredText.h"

#import <react/renderer/components/TheModuleSpec/ComponentDescriptors.h>
#import <react/renderer/components/TheModuleSpec/EventEmitters.h>
#import <react/renderer/components/TheModuleSpec/Props.h>
#import <react/renderer/components/TheModuleSpec/RCTComponentViewHelpers.h>

#import "RCTFabricComponentsPlugins.h"

using namespace facebook::react;

@interface RTNCenteredText ()  <RCTRTNCenteredTextViewProtocol>
@end

@implementation RTNCenteredText {}

+ (ComponentDescriptorProvider)componentDescriptorProvider
{
  return concreteComponentDescriptorProvider<RTNCenteredTextComponentDescriptor>();
}

Class<RCTComponentViewProtocol> RTNCenteredTextCls(void)
{
    return RTNCenteredText.class;
}

- (void)clear { 
  RCTLog(@"Clearing the text");
}

+ (NSString *)moduleName { 
  return @"RTNCenteredText";
}

@end

But the same fail as above happens

Closing Insights

So I go back to react-native-maps and I don't see them specifying the NativeComponent spec for the MapView, instead they do the old school requireNativeComponent. What got me confused is that they use the codegenNativeCommands here, but it seems like they are using it just for some polyfilling? ... never mind, all is left is to contemplate on my life choices. Nobody will read this far will they. I could share my credit credentials and no one would find out. Now lets go explain why I've spent 2 days on those few lines to add the method calls to my boss. HAHA, joking I have no boss. Just post it already. I don't want to. You don't make choices here! Yes I dooo aaaaaaaararrasrrasrar...!!!

[dbrouse]

brother I feel your pain, it's been 2.5 days of trying to make a basic fabric UI component and it's an absolute nightmare. None of the official docs or tutorials produce a working component, all I get is C lang compile errors, and the app just wont' build.

I too have been contemplating my life choices, why oh why did I enter into the JS/TS eco system, it's hell.