feat: expose controller child views to UIKit hosts

Author: DjDeveloperr

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

@@ -7,6 +7,7 @@ const UIKIT_DEFINITION_CALLEES = new Set([
 const UIKIT_WORKLET_CALLBACKS = new Set([
   'create',
   'createController',
+  'childrenView',
   'dispose',
   'mounted',
   'update',

packages/react-native/src/index.d.ts

@@ -217,6 +217,7 @@ export type UIViewControllerDefinition<
   createController: (
     ctx: UIKitViewContext<Props & ViewProps> & Readonly<Props & ViewProps>,
   ) => Controller;
+  childrenView?: (controller: Controller) => unknown;
 };
 
 export function init(metadataPath?: string, options?: InstallOptions): boolean;

packages/react-native/src/index.ts

@@ -184,6 +184,7 @@ export type UIViewControllerDefinition<
   'create'
 > & {
   createController: (ctx: UIKitCreateArgument<Props & ViewProps>) => Controller;
+  childrenView?: (controller: Controller) => unknown;
 };
 
 const nativeApiGlobalName = '__nativeScriptNativeApi';
@@ -2456,6 +2457,7 @@ export function defineUIViewController<
       return {
         hostView: controllerRecord.view,
         lifecycleValue: controller,
+        childrenView: definition.childrenView?.(controller),
         controller,
       };
     },

packages/react-native/test/babel-plugin.test.js

@@ -29,6 +29,7 @@ NativeScript.defineUIViewController({
   createController() {
     return UIViewController.new();
   },
+  childrenView: (controller) => controller.view,
   mounted(controller) {
     controller.view.setNeedsLayout();
   },
@@ -44,9 +45,10 @@ defineUIKitContainer({
 
 const output = transform(source);
 const workletDirectiveCount = (output.match(/"worklet";/g) || []).length;
-assert.strictEqual(workletDirectiveCount, 6);
+assert.strictEqual(workletDirectiveCount, 7);
 assert(output.includes('create() {\n    "worklet";'));
 assert(output.includes('update: view => {\n    "worklet";'));
 assert(output.includes('createController() {\n    "worklet";'));
+assert(output.includes('childrenView: controller => {\n    "worklet";'));
 
 console.log('babel plugin tests passed');