feat: implement XR module

Author: okwasniewski

packages/react-native/Libraries/Spatial/NativeSpatialManager.js

@@ -1,6 +1,4 @@
 import SwiftUI
-import React
-
 
 /**
  This SwiftUI struct returns main React Native scene. It should be used only once as it conains setup code.

packages/react-native/Libraries/Spatial/Spatial.d.ts

@@ -24,5 +24,5 @@ Pod::Spec.new do |s|
   s.frameworks = ["UIKit", "SwiftUI"]
 
   s.dependency "React-Core"
-  s.dependency "React-RCTSpatial" 
+  s.dependency "React-RCTXR" 
 end

packages/react-native/Libraries/Spatial/Spatial.js

@@ -0,0 +1,8 @@
+/**
+ * @flow strict
+ * @format
+ */
+
+export * from '../../src/private/specs/visionos_modules/NativeXRModule';
+import NativeXRModule from '../../src/private/specs/visionos_modules/NativeXRModule';
+export default NativeXRModule;

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

@@ -1,6 +1,6 @@
 #import <Foundation/Foundation.h>
 #import <React/RCTBridgeModule.h>
 
-@interface RCTSpatialManager : NSObject <RCTBridgeModule>
+@interface RCTXRModule : NSObject <RCTBridgeModule>
 
 @end

packages/react-native/Libraries/SwiftExtensions/React-RCTSwiftExtensions.podspec

@@ -1,53 +1,47 @@
-#import <React/RCTSpatialManager.h>
+#import <React/RCTXRModule.h>
+
+#import <FBReactNativeSpec_visionOS/FBReactNativeSpec_visionOS.h>
 
-#import <FBReactNativeSpec/FBReactNativeSpec.h>
 #import <React/RCTBridge.h>
 #import <React/RCTConvert.h>
 #import <React/RCTUtils.h>
-#import "RCTSpatial-Swift.h"
+#import "RCTXR-Swift.h"
 
-@interface RCTSpatialManager () <NativeSpatialManagerSpec>
+@interface RCTXRModule () <NativeXRModuleSpec>
 @end
 
-@implementation RCTSpatialManager {
+@implementation RCTXRModule {
   UIViewController *_immersiveBridgeView;
 }
 
 RCT_EXPORT_MODULE()
 
-- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params {
-  return std::make_shared<facebook::react::NativeSpatialManagerSpecJSI>(params);
-}
-
-RCT_EXPORT_METHOD(dismissImmersiveSpace
+RCT_EXPORT_METHOD(endSession
                   : (RCTPromiseResolveBlock)resolve reject
                   : (RCTPromiseRejectBlock)reject)
 {
-  RCTExecuteOnMainQueue(^{
-    [self->_immersiveBridgeView willMoveToParentViewController:nil];
-    [self->_immersiveBridgeView.view removeFromSuperview];
-    [self->_immersiveBridgeView removeFromParentViewController];
-    self->_immersiveBridgeView = nil;
-    
-    resolve(nil);
-  });
+  [self removeImmersiveBridge];
+  resolve(nil);
 }
 
-RCT_EXPORT_METHOD(openImmersiveSpace
-                  : (NSString *)sceneId resolve
+
+RCT_EXPORT_METHOD(requestSession
+                  : (NSString *)sessionId resolve
                   : (RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)
 {
   RCTExecuteOnMainQueue(^{
     UIWindow *keyWindow = RCTKeyWindow();
     UIViewController *rootViewController = keyWindow.rootViewController;
 
     if (self->_immersiveBridgeView == nil) {
-      self->_immersiveBridgeView = [ImmersiveBridgeFactory makeImmersiveBridgeViewWithSpaceId:sceneId
-                                                                         completionHandler:^(enum ImmersiveSpaceResult result){
+      self->_immersiveBridgeView = [ImmersiveBridgeFactory makeImmersiveBridgeViewWithSpaceId:sessionId
+                                                                            completionHandler:^(enum ImmersiveSpaceResult result){
         if (result == ImmersiveSpaceResultError) {
           reject(@"ERROR", @"Immersive Space failed to open, the system cannot fulfill the request.", nil);
+          [self removeImmersiveBridge];
         } else if (result == ImmersiveSpaceResultUserCancelled) {
           reject(@"ERROR", @"Immersive Space canceled by user", nil);
+          [self removeImmersiveBridge];
         } else if (result == ImmersiveSpaceResultOpened) {
           resolve(nil);
         }
@@ -62,4 +56,33 @@ @implementation RCTSpatialManager {
   });
 }
 
+- (facebook::react::ModuleConstants<JS::NativeXRModule::Constants::Builder>)constantsToExport {
+  return [self getConstants];
+}
+
+- (facebook::react::ModuleConstants<JS::NativeXRModule::Constants>)getConstants {
+  __block facebook::react::ModuleConstants<JS::NativeXRModule::Constants> constants;
+  RCTUnsafeExecuteOnMainQueueSync(^{
+    constants = facebook::react::typedConstants<JS::NativeXRModule::Constants>({
+      .supportsMultipleScenes = RCTSharedApplication().supportsMultipleScenes
+    });
+  });
+  
+  return constants;
+}
+
+- (void) removeImmersiveBridge
+{
+  RCTExecuteOnMainQueue(^{
+    [self->_immersiveBridgeView willMoveToParentViewController:nil];
+    [self->_immersiveBridgeView.view removeFromSuperview];
+    [self->_immersiveBridgeView removeFromParentViewController];
+    self->_immersiveBridgeView = nil;
+  });
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params {
+  return std::make_shared<facebook::react::NativeXRModuleSpecJSI>(params);
+}
+
 @end

packages/react-native/Libraries/Spatial/ImmersiveBridge.swift renamed to packages/react-native/Libraries/XR/ImmersiveBridge.swift

@@ -21,9 +21,9 @@ header_search_paths = [
 ]
 
 Pod::Spec.new do |s|
-  s.name                   = "React-RCTSpatial"
+  s.name                   = "React-RCTXR"
   s.version                = version
-  s.summary                = "Spatial module for React Native."
+  s.summary                = "XR module for React Native."
   s.homepage               = "https://reactnative.dev/"
   s.documentation_url      = "https://reactnative.dev/docs/settings"
   s.license                = package["license"]
@@ -33,7 +33,7 @@ Pod::Spec.new do |s|
   s.source                 = source
   s.source_files           = "*.{m,mm,swift}"
   s.preserve_paths         = "package.json", "LICENSE", "LICENSE-docs"
-  s.header_dir             = "RCTSpatial"
+  s.header_dir             = "RCTXR"
   s.pod_target_xcconfig    = {
                                "USE_HEADERMAP" => "YES",
                                "CLANG_CXX_LANGUAGE_STANDARD" => "c++20",
@@ -43,7 +43,7 @@ Pod::Spec.new do |s|
   s.dependency "RCT-Folly", folly_version
   s.dependency "RCTTypeSafety"
   s.dependency "React-jsi"
-  s.dependency "React-Core/RCTSpatialHeaders"
+  s.dependency "React-Core/RCTXRHeaders"
 
   add_dependency(s, "React-Codegen", :additional_framework_paths => ["build/generated/ios"])
   add_dependency(s, "ReactCommon", :subspec => "turbomodule/core", :additional_framework_paths => ["react/nativemodule/core"])

packages/react-native/Libraries/XR/NativeXRModule.js

@@ -0,0 +1,9 @@
+
+export interface XRStatic {
+  requestSession(sessionId: string): Promise<void>;
+  endSession(): Promise<void>;
+  supportsMultipleScenes: boolean;
+}
+
+export const XR: XRStatic;
+export type XR = XRStatic;

packages/react-native/Libraries/Spatial/RCTSpatialManager.h renamed to packages/react-native/Libraries/XR/RCTXRModule.h

@@ -0,0 +1,33 @@
+/**
+ * @format
+ * @flow strict
+ * @jsdoc
+ */
+
+import NativeXRModule from './NativeXRModule';
+
+const XR = {
+  requestSession: (sessionId?: string): Promise<void> => {
+    if (NativeXRModule != null && NativeXRModule.requestSession != null) {
+      return NativeXRModule.requestSession(sessionId);
+    }
+    return Promise.reject(new Error('NativeXRModule is not available'));
+  },
+  endSession: (): Promise<void> => {
+    if (NativeXRModule != null && NativeXRModule.endSession != null) {
+      return NativeXRModule.endSession();
+    }
+    return Promise.reject(new Error('NativeXRModule is not available'));
+  },
+  // $FlowIgnore[unsafe-getters-setters]
+  get supportsMultipleScenes(): boolean {
+    if (NativeXRModule == null) {
+      return false;
+    }
+
+    const nativeConstants = NativeXRModule.getConstants();
+    return nativeConstants.supportsMultipleScenes || false;
+  },
+};
+
+module.exports = XR;

packages/react-native/Libraries/Spatial/RCTSpatialManager.mm renamed to packages/react-native/Libraries/XR/RCTXRModule.mm

@@ -37,7 +37,7 @@ header_subspecs = {
   'RCTSettingsHeaders'          => 'Libraries/Settings/*.h',
   'RCTTextHeaders'              => 'Libraries/Text/**/*.h',
   'RCTVibrationHeaders'         => 'Libraries/Vibration/*.h',
-  'RCTSpatialHeaders'           => 'Libraries/Spatial/*.h',
+  'RCTXRHeaders'                => 'Libraries/XR/*.h',
 }
 
 frameworks_search_paths = []

packages/react-native/Libraries/Spatial/React-RCTSpatial.podspec renamed to packages/react-native/Libraries/XR/React-RCTXR.podspec

@@ -53,5 +53,5 @@ Pod::Spec.new do |s|
   s.dependency "React-RCTSettings", version
   s.dependency "React-RCTText", version
   s.dependency "React-RCTVibration", version
-  s.dependency "React-RCTSpatial", version
+  s.dependency "React-RCTXR", version
 end

packages/react-native/Libraries/XR/XR.d.ts

@@ -71,7 +71,6 @@ import typeof ReactNative from './Libraries/Renderer/shims/ReactNative';
 import type {HostComponent as _HostComponentInternal} from './Libraries/Renderer/shims/ReactNativeTypes';
 import typeof Settings from './Libraries/Settings/Settings';
 import typeof Share from './Libraries/Share/Share';
-import typeof Spatial from './Libraries/Spatial/Spatial';
 import typeof {PlatformColor} from './Libraries/StyleSheet/PlatformColorValueTypes';
 // Plugins
 import typeof {DynamicColorIOS} from './Libraries/StyleSheet/PlatformColorValueTypesIOS';
@@ -90,6 +89,7 @@ import typeof Platform from './Libraries/Utilities/Platform';
 import typeof useColorScheme from './Libraries/Utilities/useColorScheme';
 import typeof useWindowDimensions from './Libraries/Utilities/useWindowDimensions';
 import typeof Vibration from './Libraries/Vibration/Vibration';
+import typeof XR from './Libraries/XR/XR';
 import typeof YellowBox from './Libraries/YellowBox/YellowBoxDeprecated';
 
 const warnOnce = require('./Libraries/Utilities/warnOnce');
@@ -296,8 +296,8 @@ module.exports = {
   get Share(): Share {
     return require('./Libraries/Share/Share');
   },
-  get Spatial(): Spatial {
-    return require('./Libraries/Spatial/Spatial');
+  get XR(): XR {
+    return require('./Libraries/XR/XR');
   },
   get StyleSheet(): StyleSheet {
     return require('./Libraries/StyleSheet/StyleSheet');

packages/react-native/Libraries/XR/XR.js

@@ -143,6 +143,13 @@
         "android": {},
         "jsSrcsDir": "src"
       },
+      {
+        "name": "FBReactNativeSpec_visionOS",
+        "type": "modules",
+        "ios": {},
+        "android": {},
+        "jsSrcsDir": "src/private/specs/visionos_modules"
+      },
       {
         "name": "rncore",
         "type": "components",

packages/react-native/React-Core.podspec

@@ -601,7 +601,7 @@ def self.react_native_pods
             "glog",
             "hermes-engine",
             "React-hermes",
-            "React-RCTSpatial", # visionOS
+            "React-RCTXR", # visionOS
         ]
     end
 

packages/react-native/React.podspec

@@ -133,7 +133,7 @@ def use_react_native! (
   pod 'React-nativeconfig', :path => "#{prefix}/ReactCommon"
   pod 'RCTDeprecation', :path => "#{prefix}/ReactApple/Libraries/RCTFoundation/RCTDeprecation"
   pod 'React-RCTSwiftExtensions', :path => "#{prefix}/Libraries/SwiftExtensions"
-  pod 'React-RCTSpatial', :path => "#{prefix}/Libraries/Spatial"
+  pod 'React-RCTXR', :path => "#{prefix}/Libraries/XR"
 
   if hermes_enabled
     setup_hermes!(:react_native_path => prefix)

packages/react-native/index.js

@@ -0,0 +1,21 @@
+/**
+ * @flow strict
+ * @format
+ */
+
+import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport';
+
+import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry';
+
+export type XRModuleConstants = {|
+  +supportsMultipleScenes?: boolean,
+|};
+
+export interface Spec extends TurboModule {
+  +getConstants: () => XRModuleConstants;
+
+  +requestSession: (sessionId?: string) => Promise<void>;
+  +endSession: () => Promise<void>;
+}
+
+export default (TurboModuleRegistry.get<Spec>('XRModule'): ?Spec);