[Codegen] Unable to pass React components as props in Fabric Native Components

[effx13]

Description

Description

Codegen doesn't support ReactNode or ReactElement as prop types, blocking a common React Native pattern that works in the old architecture.

Error

Unknown prop type for "FallbackComponent": "ReactElement"

I believe this is a common pattern that is widely used in popular libraries like react-native-masked-view. The ability to pass React elements as props is fundamental to many component patterns in React Native, and the lack of support in Codegen seems like a significant limitation for migrating existing libraries to Fabric.

Is there a recommended approach for handling this use case, or is this a known limitation that's being addressed?

Steps to reproduce

1. Create a new Fabric view library:

pnpx create-react-native-library@latest react-native-secure-view
# Select: Fabric view

2. Add ReactElement/ReactNode prop to src/SecureViewNativeComponent.ts:

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

interface NativeProps extends ViewProps {
  enable?: boolean;
  maskElement?: React.ReactElement;  // <- Add this line
}

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

3. Run codegen:

cd example/ios
pod install

4. Observe error:

[Codegen] Unknown prop type for "maskElement": "undefined"

React Native Version

0.79.2

Affected Platforms

Runtime - iOS

Areas

Codegen

Output of npx @react-native-community/cli info

info Fetching system and libraries information...
System:
  OS: macOS 15.5
  CPU: (10) arm64 Apple M1 Pro
  Memory: 78.47 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.18.0
    path: ~/.nvm/versions/node/v22.18.0/bin/node
  Yarn:
    version: 3.6.1
    path: ~/.nvm/versions/node/v21.7.3/bin/yarn
  npm:
    version: 10.9.3
    path: ~/.nvm/versions/node/v22.18.0/bin/npm
  Watchman:
    version: 2025.03.10.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/effx/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.4
      - iOS 18.4
      - macOS 15.4
      - tvOS 18.4
      - visionOS 2.4
      - watchOS 11.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.26053.27.2432.13536105
  Xcode:
    version: 16.3/16E140
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.4
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/effx/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: 18.0.0
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.2
    wanted: 0.79.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

info React Native v0.80.2 is now available (your project is running on v0.79.2).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.80.2
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.79.2&to=0.80.2
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Stacktrace or Logs

pod install
Found 1 module for target `SecureViewExample`
link_native_modules! {:ios_packages=>[{:configurations=>[], :name=>"react-native-secure-view", :root=>"/Users/effx/Git/react-native-secure-view", :path=>"../..", :podspec_path=>"/Users/effx/Git/react-native-secure-view/SecureView.podspec", :script_phases=>[]}], :ios_project_root_path=>"/Users/effx/Git/react-native-secure-view/example/ios", :react_native_path=>"../node_modules/react-native"}
Auto-linking React Native module for target `SecureViewExample`: SecureView
Framework build type is static library
Configuring the target with the New Architecture

[!] Invalid `Podfile` file: [!] /Users/effx/.nvm/versions/node/v22.18.0/bin/node ./../node_modules/react-native/scripts/generate-codegen-artifacts.js -p /Users/effx/Git/react-native-secure-view/example/ios/.. -o /Users/effx/Git/react-native-secure-view/example/ios -t ios

[Codegen] Analyzing /Users/effx/Git/react-native-secure-view/example/package.json
[Codegen] Searching for codegen-enabled libraries in the app.
[Codegen] The "codegenConfig" field is not defined in package.json. Assuming there is nothing to generate at the app level.
[Codegen] Searching for codegen-enabled libraries in the project dependencies.
[Codegen] Found react-native
[Codegen] Searching for codegen-enabled libraries in react-native.config.js
[Codegen] Found react-native-secure-view
[Codegen] Processing FBReactNativeSpec
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Processing rncore
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Processing SecureViewSpec
[Codegen] Searching for podspec in the project dependencies.
[Codegen] Supported Apple platforms: ios for SecureViewSpec
[Codegen] Error: Unknown prop type for "FallbackComponent": "ReactElement"
[Codegen] Done.
.

 #  from /Users/effx/Git/react-native-secure-view/example/ios/Podfile:22
 #  -------------------------------------------
 #
 >    use_react_native!(
 #      :path => config[:reactNativePath],
 #  -------------------------------------------

MANDATORY Reproducer

https://github.com/effx13/react-native-secure-view

Screenshots and Videos

No response

[atulgpt17]

Hi @effx13 thanks for raising the request for this feature. You may also use https://github.com/react-native-community/discussions-and-proposals for discussions and proposals
Also adding @cortinico who may shed more light on the feasibility or whether this proposal can be picked or not(I am not sure if we can even pass React components across JSI layer)

[cipolleschi]

@effx13 that's correct. The React.ReactElement is not a valid codegen type.

However, I don't think this is a known issue or a known limitation.
The props that you specify in the Codegen specs, are props that you need to use in the native code, to set some platform specific thing. This is not the case and native platforms don't have the concept of a React node. So it is semantically correct that the React.ReactElement is not part of codegen.

In the example of masked view, the node is not used in the native code. Instead, the library relies on the assumption that the first children is the mask. This same thing can be achieved with Codegen by creating a level of indirection:

// MaskedViewNativeComponent.ts
// This is the spec file. The ViewProps will provide the `children` prop.

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

interface NativeProps extends ViewProps {
  enable?: boolean;
}

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

// -----

// MaskedView.js

export type MaskedViewProps = {
  maskElement: React.ReactElement;
  children: React.ReactElement
  // ... other elements ...
}

function MaskedView (props: MaskedViewProps) {
  const {maskElement, children} = props;

  return (<MaskedViewNativeComponent>
    {maskElement}
    {children}
  </MaskedViewNativeComponent>);
}

This is a simplified version, but your users will use the MaskedView.js file, while the spec file will remain an implementation detail of your Fabric library.