feat(react-native): support JS-defined UIKit views

Author: DjDeveloperr

packages/react-native/NativeScriptNativeApi.podspec

@@ -1,6 +1,7 @@
 require "json"
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+fabric_enabled = ENV["RCT_NEW_ARCH_ENABLED"] == "1"
 
 folly_compiler_flags = "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -DFOLLY_CFG_NO_COROUTINES=1 -Wno-comma -Wno-shorten-64-to-32"
 
@@ -19,6 +20,7 @@ Pod::Spec.new do |s|
     "ios/**/*.{h,mm}",
     "native-api-jsi/**/*.{h,mm}"
   ]
+  s.exclude_files = "ios/Fabric/**/*" unless fabric_enabled
   s.public_header_files = "ios/**/*.h"
   s.resource_bundles = {
     "NativeScriptNativeApi" => ["metadata/*.nsmd"]

packages/react-native/README.md

@@ -27,6 +27,66 @@ await NativeScript.runOnUI(() => {
 });
 ```
 
+## Defining native UIKit views in JS
+
+Use `defineUIKitView()` to turn a NativeScript-created `UIView` tree into a
+normal React Native component. The package owns the RN host view; your
+definition owns the UIKit subtree. `create`, `update`, `mounted`, and `dispose`
+run through the NativeScript UI dispatcher, so UIKit calls are safe and use the
+same globals and iOS SDK types as NativeScript.
+
+```tsx
+import NativeScript, {defineUIKitView} from "@nativescript/react-native";
+import type {UIKitViewRef} from "@nativescript/react-native";
+
+NativeScript.init();
+
+type BadgeProps = {
+  title: string;
+  tone?: "blue" | "green";
+};
+
+export const NativeBadge = defineUIKitView<BadgeProps, UIView>({
+  displayName: "NativeBadge",
+  create() {
+    const view = UIView.alloc().initWithFrame(CGRectZero);
+    const label = UILabel.alloc().initWithFrame(CGRectZero);
+    label.tag = 1;
+    label.textAlignment = NSTextAlignment.Center;
+    label.textColor = UIColor.whiteColor;
+    label.autoresizingMask =
+      UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
+    view.addSubview(label);
+    return view;
+  },
+  update(view, props) {
+    view.backgroundColor =
+      props.tone === "green" ? UIColor.systemGreenColor : UIColor.systemBlueColor;
+    view.layer.cornerRadius = 12;
+    view.clipsToBounds = true;
+    const label = view.viewWithTag(1) as UILabel;
+    label.text = props.title;
+  },
+});
+
+<NativeBadge title="UIKit from JS" tone="blue" style={{height: 48}} />;
+```
+
+Forward a ref when you need imperative access:
+
+```tsx
+const badgeRef = useRef<UIKitViewRef<UIView>>(null);
+
+await badgeRef.current?.runOnUI((view) => {
+  view.alpha = 0.8;
+});
+```
+
+React Native view props such as `style`, `testID`, accessibility props, responder
+props, and `pointerEvents` go to the host component. Your own props go to the
+UIKit definition; use `nativeProps(props)` when a plugin prop should also affect
+the RN host.
+
 The published package includes generated NativeScript metadata, the libffi
 xcframework, and generated iOS SDK TypeScript declarations. Build it from the
 repository root with:

packages/react-native/ios/Fabric/NativeScriptUIViewComponentView.h

@@ -0,0 +1,4 @@
+#import <React/RCTViewComponentView.h>
+
+@interface NativeScriptUIViewComponentView : RCTViewComponentView
+@end

packages/react-native/ios/Fabric/NativeScriptUIViewComponentView.mm

@@ -0,0 +1,67 @@
+#import "NativeScriptUIViewComponentView.h"
+
+#import <React/RCTFabricComponentsPlugins.h>
+#import <react/renderer/components/NativeScriptNativeApiSpec/ComponentDescriptors.h>
+#import <react/renderer/components/NativeScriptNativeApiSpec/Props.h>
+
+#import "NativeScriptUIView.h"
+
+using namespace facebook::react;
+
+@implementation NativeScriptUIViewComponentView {
+  NativeScriptUIView* _containerView;
+}
+
++ (void)load {
+  [super load];
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const NativeScriptUIViewProps>();
+    _props = defaultProps;
+
+    _containerView = [[NativeScriptUIView alloc] initWithFrame:self.bounds];
+    _containerView.autoresizingMask =
+        UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    self.contentView = _containerView;
+  }
+
+  return self;
+}
+
+- (void)dealloc {
+  [_containerView release];
+  [super dealloc];
+}
+
+- (void)updateProps:(Props::Shared const&)props oldProps:(Props::Shared const&)oldProps {
+  const auto oldViewProps = std::static_pointer_cast<const NativeScriptUIViewProps>(_props);
+  const auto newViewProps = std::static_pointer_cast<const NativeScriptUIViewProps>(props);
+  const std::string oldNativeViewHandle = oldViewProps->nativeViewHandle;
+  const std::string newNativeViewHandle = newViewProps->nativeViewHandle;
+
+  [super updateProps:props oldProps:oldProps];
+
+  if (oldNativeViewHandle != newNativeViewHandle) {
+    NSString* nativeViewHandle = newNativeViewHandle.empty()
+                                     ? nil
+                                     : [NSString stringWithUTF8String:newNativeViewHandle.c_str()];
+    _containerView.nativeViewHandle = nativeViewHandle;
+  }
+}
+
+- (void)prepareForRecycle {
+  [super prepareForRecycle];
+  _containerView.nativeViewHandle = nil;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<NativeScriptUIViewComponentDescriptor>();
+}
+
+@end
+
+Class<RCTComponentViewProtocol> NativeScriptUIViewCls(void) {
+  return NativeScriptUIViewComponentView.class;
+}

packages/react-native/ios/NativeScriptUIView.h

@@ -0,0 +1,7 @@
+#import <UIKit/UIKit.h>
+
+@interface NativeScriptUIView : UIView
+
+@property(nonatomic, copy) NSString* nativeViewHandle;
+
+@end

packages/react-native/ios/NativeScriptUIView.mm

@@ -0,0 +1,75 @@
+#import "NativeScriptUIView.h"
+
+static UIView* NativeScriptUIViewFromHandle(NSString* handle) {
+  if (handle == nil || handle.length == 0) {
+    return nil;
+  }
+
+  const char* text = handle.UTF8String;
+  if (text == nullptr || text[0] == '\0') {
+    return nil;
+  }
+
+  char* end = nullptr;
+  unsigned long long address = strtoull(text, &end, 0);
+  if (address == 0 || end == text) {
+    return nil;
+  }
+
+  id object = reinterpret_cast<id>(static_cast<uintptr_t>(address));
+  if (object == nil || ![object isKindOfClass:UIView.class]) {
+    return nil;
+  }
+
+  return static_cast<UIView*>(object);
+}
+
+@implementation NativeScriptUIView {
+  UIView* _nativeView;
+}
+
+- (void)dealloc {
+  [_nativeView removeFromSuperview];
+  [_nativeView release];
+  [_nativeViewHandle release];
+  [super dealloc];
+}
+
+- (void)setNativeViewHandle:(NSString*)nativeViewHandle {
+  if ((_nativeViewHandle == nativeViewHandle) ||
+      [_nativeViewHandle isEqualToString:nativeViewHandle]) {
+    return;
+  }
+
+  [_nativeViewHandle release];
+  _nativeViewHandle = [nativeViewHandle copy];
+  [self setNativeView:NativeScriptUIViewFromHandle(_nativeViewHandle)];
+}
+
+- (void)setNativeView:(UIView*)nativeView {
+  if (_nativeView == nativeView) {
+    return;
+  }
+
+  [_nativeView removeFromSuperview];
+  [_nativeView release];
+  _nativeView = nil;
+
+  if (nativeView == nil) {
+    return;
+  }
+
+  _nativeView = [nativeView retain];
+  [_nativeView removeFromSuperview];
+  _nativeView.frame = self.bounds;
+  _nativeView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+  [self addSubview:_nativeView];
+  [self setNeedsLayout];
+}
+
+- (void)layoutSubviews {
+  [super layoutSubviews];
+  _nativeView.frame = self.bounds;
+}
+
+@end

packages/react-native/ios/NativeScriptUIViewManager.mm

@@ -0,0 +1,18 @@
+#import <React/RCTViewManager.h>
+
+#import "NativeScriptUIView.h"
+
+@interface NativeScriptUIViewManager : RCTViewManager
+@end
+
+@implementation NativeScriptUIViewManager
+
+RCT_EXPORT_MODULE(NativeScriptUIView)
+
+- (UIView*)view {
+  return [[[NativeScriptUIView alloc] initWithFrame:CGRectZero] autorelease];
+}
+
+RCT_EXPORT_VIEW_PROPERTY(nativeViewHandle, NSString)
+
+@end

packages/react-native/package.json

@@ -38,12 +38,15 @@
   },
   "codegenConfig": {
     "name": "NativeScriptNativeApiSpec",
-    "type": "modules",
+    "type": "all",
     "jsSrcsDir": "src",
     "android": {
       "javaPackageName": "org.nativescript.nativeapi"
     },
     "ios": {
+      "componentProvider": {
+        "NativeScriptUIView": "NativeScriptUIViewComponentView"
+      },
       "modulesProvider": {
         "NativeScriptNativeApi": "NativeScriptNativeApiModuleProvider"
       }

packages/react-native/src/NativeScriptUIViewNativeComponent.ts

@@ -0,0 +1,10 @@
+import type {HostComponent, ViewProps} from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  nativeViewHandle?: string;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'NativeScriptUIView',
+) as HostComponent<NativeProps>;

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

@@ -1,5 +1,12 @@
 /// <reference path="../types/ios/index.d.ts" />
 
+import type {
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  RefAttributes,
+} from 'react';
+import type {ViewProps} from 'react-native';
+
 export type NativeApiHost = {
   runtime?: string;
   backend?: string;
@@ -30,20 +37,49 @@ export type InstallOptions = {
   globals?: boolean;
 };
 
+export type UIKitViewDefinition<Props extends object, NativeView = unknown> = {
+  displayName?: string;
+  create: (props: Readonly<Props & ViewProps>) => NativeView;
+  update?: (
+    view: NativeView,
+    props: Readonly<Props & ViewProps>,
+    previousProps?: Readonly<Props & ViewProps>,
+  ) => void;
+  mounted?: (view: NativeView, props: Readonly<Props & ViewProps>) => void;
+  dispose?: (view: NativeView, props: Readonly<Props & ViewProps>) => void;
+  nativeProps?: (
+    props: Readonly<Props & ViewProps>,
+  ) => Partial<ViewProps> | undefined;
+};
+
+export type UIKitViewRef<NativeView = unknown> = {
+  readonly nativeView: NativeView | null;
+  runOnUI: (callback: (view: NativeView) => void) => Promise<void>;
+};
+
+export type UIKitViewComponent<Props extends object, NativeView = unknown> =
+  ForwardRefExoticComponent<
+    PropsWithoutRef<Props & ViewProps> & RefAttributes<UIKitViewRef<NativeView>>
+  >;
+
 export function init(metadataPath?: string, options?: InstallOptions): boolean;
 export const install: typeof init;
 export function installGlobals(): boolean;
 export function isInstalled(): boolean;
 export function defaultMetadataPath(): string;
 export function getRuntimeBackend(): string;
 export function runOnUI(callback?: () => void): Promise<void>;
+export function defineUIKitView<Props extends object, NativeView = unknown>(
+  definition: UIKitViewDefinition<Props, NativeView>,
+): UIKitViewComponent<Props, NativeView>;
 
 declare const NativeScript: {
   init: typeof init;
   install: typeof install;
   installGlobals: typeof installGlobals;
   isInstalled: typeof isInstalled;
   defaultMetadataPath: typeof defaultMetadataPath;
+  defineUIKitView: typeof defineUIKitView;
   getRuntimeBackend: typeof getRuntimeBackend;
   runOnUI: typeof runOnUI;
 };