feat: Generate view config as .json

packages/nitrogen/src/views/CppHybridViewComponent.ts

@@ -5,6 +5,7 @@ import { createFileMetadataString, escapeCppName } from '../syntax/helpers.js'
 import { NitroConfig } from '../config/NitroConfig.js'
 import { getHybridObjectName } from '../syntax/getHybridObjectName.js'
 import { includeHeader } from '../syntax/c++/includeNitroHeader.js'
+import { createHostComponentJs } from './createHostComponentJs.js'
 
 interface ViewComponentNames {
   propsClassName: `${string}Props`
@@ -232,7 +233,7 @@ namespace ${namespace} {
 #endif
 `.trim()
 
-  return [
+  const files: SourceFile[] = [
     {
       name: `${component}.hpp`,
       content: componentHeaderCode,
@@ -248,4 +249,7 @@ namespace ${namespace} {
       subdirectory: ['views'],
     },
   ]
+  const jsFiles = createHostComponentJs(spec)
+  files.push(...(jsFiles as unknown as SourceFile[]))
+  return files
 }

packages/nitrogen/src/views/createHostComponentJs.ts

@@ -0,0 +1,32 @@
+import type { Language } from '../getPlatformSpecs.js'
+import type { HybridObjectSpec } from '../syntax/HybridObjectSpec.js'
+import type { SourceFile } from '../syntax/SourceFile.js'
+import { getHybridObjectName } from '../syntax/getHybridObjectName.js'
+import { indent } from '../utils.js'
+
+export function createHostComponentJs(spec: HybridObjectSpec): SourceFile[] {
+  const { T } = getHybridObjectName(spec.name)
+  const props = spec.properties.map((p) => `"${p.name}": true`)
+
+  const code = `
+{
+  "uiViewClassName": "${T}",
+  "supportsRawText": false,
+  "bubblingEventTypes": {},
+  "directEventTypes": {},
+  "validAttributes": {
+    ${indent(props.join(',\n'), '    ')}
+  }
+}
+  `.trim()
+
+  return [
+    {
+      content: code,
+      language: 'json' as Language,
+      name: `${T}Config.json`,
+      platform: 'shared',
+      subdirectory: [],
+    },
+  ]
+}

packages/react-native-nitro-image/nitrogen/generated/ios/c++/views/HybridTestViewComponent.mm

@@ -53,9 +53,11 @@ - (instancetype) init {
 - (void) updateView {
   // 1. Get Swift part
   NitroImage::HybridTestViewSpec_cxx& swiftPart = _hybridView->getSwiftPart();
+
   // 2. Get UIView*
   void* viewUnsafe = swiftPart.getView();
   UIView* view = (__bridge_transfer UIView*) viewUnsafe;
+
   // 3. Update RCTViewComponentView's [contentView]
   [self setContentView:view];
 }

packages/react-native-nitro-image/nitrogen/generated/shared/json/TestViewConfig.json

@@ -0,0 +1,10 @@
+{
+  "uiViewClassName": "TestView",
+  "supportsRawText": false,
+  "bubblingEventTypes": {},
+  "directEventTypes": {},
+  "validAttributes": {
+    "someProp": true,
+    "someCallback": true
+  }
+}

packages/react-native-nitro-image/src/views/TestView.ts

@@ -0,0 +1,7 @@
+import { getHostComponent } from 'react-native-nitro-modules'
+import TestViewConfig from '../../nitrogen/generated/shared/json/TestViewConfig.json'
+
+/**
+ * Represents the HybridView `TestView`, which can be rendered as a React Native view.
+ */
+export const TestView = getHostComponent('TestView', () => TestViewConfig)

packages/react-native-nitro-modules/src/views/getHostComponent.ts

@@ -1,13 +1,13 @@
-import type { HostComponent } from 'react-native'
+import { Platform, type HostComponent } from 'react-native'
 // @ts-expect-error this unfortunately isn't typed or default-exported.
 import * as NativeComponentRegistry from 'react-native/Libraries/NativeComponent/NativeComponentRegistry'
 
-interface ViewConfig<Props> {
+export interface ViewConfig<Props> {
   uiViewClassName: string
   supportsRawText?: boolean
   bubblingEventTypes: Record<string, unknown>
   directEventTypes: Record<string, unknown>
-  validAttributes: Record<keyof Props, true>
+  validAttributes: Record<keyof Props, boolean>
 }
 
 /**
@@ -17,5 +17,10 @@ export function getHostComponent<Props>(
   name: string,
   getViewConfig: () => ViewConfig<Props>
 ): HostComponent<Props> {
+  if (NativeComponentRegistry == null) {
+    throw new Error(
+      `NativeComponentRegistry is not available on ${Platform.OS}!`
+    )
+  }
   return NativeComponentRegistry.get<Props>(name, getViewConfig)
 }