feat: make SwiftUI React Native entry point (#68)

* feat: add Swift entrypoint

[wip] add module maps to some RN modules to allow for swift c++ imports

feat: implement RCTReactController and RCTSwiftUIAppDelegate

feat: introduce new method to RCTAppDelegate

* feat: modify template to use SwiftUI

* fix: dimensions, use RCTMainWindow()

* fix: fallback to DarkMode on visionOS

* fix: use KeyWindow() in RCTPerfMonitor

Author: okwasniewski

packages/react-native/Libraries/AppDelegate/RCTAppDelegate.h

@@ -136,8 +136,11 @@
 - (BOOL)bridgelessEnabled;
 
 /// Return the bundle URL for the main bundle.
-- (NSURL *)getBundleURL;
+- (NSURL *__nullable)bundleURL;
 
-#endif
+/// Don't use this method, it's going to be removed soon.
+- (UIView *)viewWithModuleName:(NSString *)moduleName
+             initialProperties:(NSDictionary *)initialProperties
+                 launchOptions:(NSDictionary *)launchOptions;
 
 @end

packages/react-native/Libraries/AppDelegate/RCTAppDelegate.mm

@@ -86,62 +86,18 @@ - (instancetype)init
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  BOOL enableTM = NO;
-  BOOL enableBridgeless = NO;
-  BOOL fabricEnabled = NO;
-#if RCT_NEW_ARCH_ENABLED
-  enableTM = self.turboModuleEnabled;
-  enableBridgeless = self.bridgelessEnabled;
-  fabricEnabled = [self fabricEnabled];
-#endif
-  NSDictionary *initProps = updateInitialProps([self prepareInitialProps], fabricEnabled);
-
-  RCTAppSetupPrepareApp(application, enableTM);
-
-  UIView *rootView;
-
-  if (enableBridgeless) {
-#if RCT_NEW_ARCH_ENABLED
-    // Enable native view config interop only if both bridgeless mode and Fabric is enabled.
-    RCTSetUseNativeViewConfigsInBridgelessMode(fabricEnabled);
+  RCTSetNewArchEnabled([self newArchEnabled]);
+  BOOL enableTM = self.turboModuleEnabled;
 
-    // Enable TurboModule interop by default in Bridgeless mode
-    RCTEnableTurboModuleInterop(YES);
-    RCTEnableTurboModuleInteropBridgeProxy(YES);
-
-    [self createReactHost];
-    [self unstable_registerLegacyComponents];
-    [RCTComponentViewFactory currentComponentViewFactory].thirdPartyFabricComponentsProvider = self;
-    RCTFabricSurface *surface = [_reactHost createSurfaceWithModuleName:self.moduleName initialProperties:initProps];
-
-    RCTSurfaceHostingProxyRootView *surfaceHostingProxyRootView = [[RCTSurfaceHostingProxyRootView alloc]
-        initWithSurface:surface
-        sizeMeasureMode:RCTSurfaceSizeMeasureModeWidthExact | RCTSurfaceSizeMeasureModeHeightExact];
-
-    rootView = (RCTRootView *)surfaceHostingProxyRootView;
-#endif
-  } else {
-    if (!self.bridge) {
-      self.bridge = [self createBridgeWithDelegate:self launchOptions:launchOptions];
-    }
-#if RCT_NEW_ARCH_ENABLED
-    self.bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:self.bridge
-                                                                 contextContainer:_contextContainer];
-    self.bridge.surfacePresenter = self.bridgeAdapter.surfacePresenter;
-
-    [self unstable_registerLegacyComponents];
-    [RCTComponentViewFactory currentComponentViewFactory].thirdPartyFabricComponentsProvider = self;
-#endif
-
-    rootView = [self createRootViewWithBridge:self.bridge moduleName:self.moduleName initProps:initProps];
-  }
-
-  [self customizeRootView:(RCTRootView *)rootView];
+  RCTAppSetupPrepareApp(application, enableTM, *_reactNativeConfig);
+    
 #if TARGET_OS_VISION
-  self.window = [[UIWindow alloc] initWithFrame:RCTForegroundWindow().bounds];
+  /// Bail out of UIWindow initializaiton to support multi-window scenarios in SwiftUI lifecycle.
+  return YES;
 #else
+  UIView* rootView = [self viewWithModuleName:self.moduleName initialProperties:[self prepareInitialProps] launchOptions:launchOptions];
+    
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-#endif
 
   UIViewController *rootViewController = [self createRootViewController];
   [self setRootView:rootView toRootViewController:rootViewController];
@@ -150,6 +106,57 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   [self.window makeKeyAndVisible];
 
   return YES;
+#endif
+}
+
+- (void)applicationDidEnterBackground:(UIApplication *)application
+{
+  // Noop
+}
+
+- (UIView *)viewWithModuleName:(NSString *)moduleName initialProperties:(NSDictionary*)initialProperties launchOptions:(NSDictionary*)launchOptions {
+    BOOL fabricEnabled = self.fabricEnabled;
+    BOOL enableBridgeless = self.bridgelessEnabled;
+
+    NSDictionary *initProps = updateInitialProps(initialProperties, fabricEnabled);
+    
+    UIView *rootView;
+    if (enableBridgeless) {
+      // Enable native view config interop only if both bridgeless mode and Fabric is enabled.
+      RCTSetUseNativeViewConfigsInBridgelessMode(self.fabricEnabled);
+
+      // Enable TurboModule interop by default in Bridgeless mode
+      RCTEnableTurboModuleInterop(YES);
+      RCTEnableTurboModuleInteropBridgeProxy(YES);
+
+      [self createReactHost];
+      [RCTComponentViewFactory currentComponentViewFactory].thirdPartyFabricComponentsProvider = self;
+      RCTFabricSurface *surface = [_reactHost createSurfaceWithModuleName:self.moduleName initialProperties:initProps];
+
+      RCTSurfaceHostingProxyRootView *surfaceHostingProxyRootView = [[RCTSurfaceHostingProxyRootView alloc]
+          initWithSurface:surface
+          sizeMeasureMode:RCTSurfaceSizeMeasureModeWidthExact | RCTSurfaceSizeMeasureModeHeightExact];
+
+      rootView = (RCTRootView *)surfaceHostingProxyRootView;
+    } else {
+      if (!self.bridge) {
+        self.bridge = [self createBridgeWithDelegate:self launchOptions:launchOptions];
+      }
+      if ([self newArchEnabled]) {
+        if (!self.bridgeAdapter) {
+          self.bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:self.bridge
+                                                                       contextContainer:_contextContainer];
+          self.bridge.surfacePresenter = self.bridgeAdapter.surfacePresenter;
+
+          [RCTComponentViewFactory currentComponentViewFactory].thirdPartyFabricComponentsProvider = self;
+        }
+      }
+      rootView = [self createRootViewWithBridge:self.bridge moduleName:moduleName initProps:initProps];
+    }
+
+    [self customizeRootView:(RCTRootView *)rootView];
+    
+    return rootView;
 }
 
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
@@ -212,45 +219,44 @@ - (void)windowScene:(UIWindowScene *)windowScene
 - (std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge
 {
   _runtimeScheduler = std::make_shared<facebook::react::RuntimeScheduler>(RCTRuntimeExecutorFromBridge(bridge));
-#if RCT_NEW_ARCH_ENABLED
-  std::shared_ptr<facebook::react::CallInvoker> callInvoker =
-      std::make_shared<facebook::react::RuntimeSchedulerCallInvoker>(_runtimeScheduler);
-  RCTTurboModuleManager *turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge
-                                                                                   delegate:self
-                                                                                  jsInvoker:callInvoker];
-  _contextContainer->erase("RuntimeScheduler");
-  _contextContainer->insert("RuntimeScheduler", _runtimeScheduler);
-  return RCTAppSetupDefaultJsExecutorFactory(bridge, turboModuleManager, _runtimeScheduler);
-#else
-  return RCTAppSetupJsExecutorFactoryForOldArch(bridge, _runtimeScheduler);
-#endif
+  if ([self newArchEnabled]) {
+    std::shared_ptr<facebook::react::CallInvoker> callInvoker =
+        std::make_shared<facebook::react::RuntimeSchedulerCallInvoker>(_runtimeScheduler);
+    RCTTurboModuleManager *turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge
+                                                                                     delegate:self
+                                                                                    jsInvoker:callInvoker];
+    _contextContainer->erase("RuntimeScheduler");
+    _contextContainer->insert("RuntimeScheduler", _runtimeScheduler);
+    return RCTAppSetupDefaultJsExecutorFactory(bridge, turboModuleManager, _runtimeScheduler);
+  } else {
+    return RCTAppSetupJsExecutorFactoryForOldArch(bridge, _runtimeScheduler);
+  }
 }
 
-#if RCT_NEW_ARCH_ENABLED
-
-#pragma mark - RCTTurboModuleManagerDelegate
+#pragma mark - New Arch Enabled settings
 
-- (Class)getModuleClassFromName:(const char *)name
+- (BOOL)newArchEnabled
 {
-  return RCTCoreModulesClassProvider(name);
+#if RCT_NEW_ARCH_ENABLED
+  return YES;
+#else
+  return NO;
+#endif
 }
 
-- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
-                                                      jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)jsInvoker
+- (BOOL)turboModuleEnabled
 {
-  return nullptr;
+  return [self newArchEnabled];
 }
 
-- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
-                                                     initParams:
-                                                         (const facebook::react::ObjCTurboModule::InitParams &)params
+- (BOOL)fabricEnabled
 {
-  return nullptr;
+  return [self newArchEnabled];
 }
 
-- (id<RCTTurboModule>)getModuleInstanceFromClass:(Class)moduleClass
+- (BOOL)bridgelessEnabled
 {
-  return RCTAppSetupDefaultModuleFromClass(moduleClass);
+  return NO;
 }
 
 #pragma mark - RCTComponentViewFactoryComponentProvider
@@ -260,34 +266,38 @@ - (Class)getModuleClassFromName:(const char *)name
   return @{};
 }
 
-#pragma mark - New Arch Enabled settings
+#pragma mark - RCTTurboModuleManagerDelegate
 
-- (BOOL)turboModuleEnabled
+- (Class)getModuleClassFromName:(const char *)name
 {
-  return YES;
+  return RCTCoreModulesClassProvider(name);
 }
 
-- (BOOL)fabricEnabled
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
+                                                      jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)jsInvoker
 {
-  return YES;
+  return nullptr;
 }
 
-- (BOOL)bridgelessEnabled
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
+                                                     initParams:
+                                                         (const facebook::react::ObjCTurboModule::InitParams &)params
 {
-  return NO;
+  return nullptr;
 }
 
-#pragma mark - New Arch Utilities
-
-- (void)unstable_registerLegacyComponents
+- (id<RCTTurboModule>)getModuleInstanceFromClass:(Class)moduleClass
 {
-  for (NSString *legacyComponent in [RCTLegacyInteropComponents legacyInteropComponents]) {
-    [RCTLegacyViewManagerInteropComponentView supportLegacyViewManagerWithName:legacyComponent];
-  }
+  return RCTAppSetupDefaultModuleFromClass(moduleClass);
 }
 
+#pragma mark - New Arch Utilities
+
 - (void)createReactHost
 {
+  if (_reactHost != nil) {
+    return;
+  }
   __weak __typeof(self) weakSelf = self;
   _reactHost = [[RCTHost alloc] initWithBundleURL:[self getBundleURL]
                                      hostDelegate:nil

packages/react-native/Libraries/SwiftExtensions/RCTMainWindow.swift

@@ -0,0 +1,34 @@
+import SwiftUI
+
+/**
+ This SwiftUI struct returns main React Native scene. It should be used only once as it conains setup code.
+ 
+ Example:
+ ```swift
+ @main
+ struct YourApp: App {
+   @UIApplicationDelegateAdaptor var delegate: AppDelegate
+   
+   var body: some Scene {
+     RCTMainWindow(moduleName: "YourApp")
+   }
+ }
+ ```
+ 
+ Note: If you want to create additional windows in your app, create a new `WindowGroup {}` and pass it a `RCTRootViewRepresentable`.
+*/
+public struct RCTMainWindow: Scene {
+  var moduleName: String
+  var initialProps: RCTRootViewRepresentable.InitialPropsType
+  
+  public init(moduleName: String, initialProps: RCTRootViewRepresentable.InitialPropsType = nil) {
+    self.moduleName = moduleName
+    self.initialProps = initialProps
+  }
+  
+  public var body: some Scene {
+    WindowGroup {
+      RCTRootViewRepresentable(moduleName: moduleName, initialProps: initialProps)
+    }
+  }
+}

packages/react-native/Libraries/SwiftExtensions/RCTReactViewController.h

@@ -0,0 +1,16 @@
+#import <UIKit/UIKit.h>
+
+/**
+  A `UIViewController` responsible for embeding `RCTRootView` inside. Uses Factory pattern to retrive new view instances.
+ 
+  Note: Used to in `RCTRootViewRepresentable` to display React views.
+ */
+@interface RCTReactViewController : UIViewController
+
+@property (nonatomic, strong, nonnull) NSString *moduleName;
+@property (nonatomic, strong, nullable) NSDictionary *initialProps;
+
+- (instancetype _Nonnull)initWithModuleName:(NSString *_Nonnull)moduleName
+                                   initProps:(NSDictionary *_Nullable)initProps;
+
+@end

packages/react-native/Libraries/SwiftExtensions/RCTReactViewController.m

@@ -0,0 +1,36 @@
+#import "RCTReactViewController.h"
+#import <React/RCTConstants.h>
+
+@protocol RCTRootViewFactoryProtocol <NSObject>
+
+- (UIView *)viewWithModuleName:(NSString *)moduleName initialProperties:(NSDictionary*)initialProperties launchOptions:(NSDictionary*)launchOptions;
+
+@end
+
+@implementation RCTReactViewController
+
+- (instancetype)initWithModuleName:(NSString *)moduleName initProps:(NSDictionary *)initProps {
+    if (self = [super init]) {
+        _moduleName = moduleName;
+        _initialProps = initProps;
+    }
+    return self;
+}
+
+- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
+  [[NSNotificationCenter defaultCenter] postNotificationName:RCTWindowFrameDidChangeNotification object:self];
+}
+
+// TODO: Temporary solution for creating RCTRootView on demand. This should be done through factory pattern, see here: https://github.com/facebook/react-native/pull/42263
+- (void)loadView {
+    id<UIApplicationDelegate> appDelegate = [UIApplication sharedApplication].delegate;
+    if ([appDelegate respondsToSelector:@selector(viewWithModuleName:initialProperties:launchOptions:)]) {
+        id<RCTRootViewFactoryProtocol> delegate = (id<RCTRootViewFactoryProtocol>)appDelegate;
+        self.view = [delegate viewWithModuleName:_moduleName initialProperties:_initialProps launchOptions:@{}];
+    } else {
+        [NSException raise:@"UIApplicationDelegate:viewWithModuleName:initialProperties:launchOptions: not implemented"
+                    format:@"Make sure you subclass RCTAppDelegate"];
+    }
+}
+
+@end

packages/react-native/Libraries/SwiftExtensions/RCTRootViewRepresentable.swift

@@ -0,0 +1,32 @@
+import SwiftUI
+
+/**
+ SwiftUI view enclosing `RCTReactViewController`. Its main purpose is to display React Native views inside of SwiftUI lifecycle.
+
+ Use it create new windows in your app:
+ Example:
+ ```swift
+  WindowGroup {
+    RCTRootViewRepresentable(moduleName: "YourAppName")
+  }
+ ```
+*/
+public struct RCTRootViewRepresentable: UIViewControllerRepresentable {
+  public typealias InitialPropsType = [AnyHashable: Any]?
+  
+  var moduleName: String
+  var initialProps: InitialPropsType
+  
+  public init(moduleName: String, initialProps: InitialPropsType = nil) {
+    self.moduleName = moduleName
+    self.initialProps = initialProps
+  }
+  
+  public func makeUIViewController(context: Context) -> UIViewController {
+    RCTReactViewController(moduleName: moduleName, initProps: initialProps)
+  }
+  
+  public func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
+    // noop
+  }
+}