feat: implement XR API (#81)

okwasniewski · okwasniewski · commit 78c5fd005d38 · 2024-08-23T12:37:10.000+02:00
* feat: implement Spatial API

* feat: make RCTSpatial decoupled from RCTMainWindow()

* feat: implement XR module

docs: add image to README, annotate nightly APIs

fix: export XR library from typescript
diff --git a/.gitignore b/.gitignore
@@ -165,3 +165,6 @@ vendor/
 
 # CircleCI
 .circleci/generated_config.yml
+.circleci/storage
+
+.yarn
diff --git a/packages/react-native/Libraries/SwiftExtensions/React-RCTSwiftExtensions.podspec b/packages/react-native/Libraries/SwiftExtensions/React-RCTSwiftExtensions.podspec
@@ -24,4 +24,5 @@ Pod::Spec.new do |s|
   s.frameworks = ["UIKit", "SwiftUI"]
 
   s.dependency "React-Core"
+  s.dependency "React-RCTXR" 
 end
diff --git a/packages/react-native/Libraries/XR/ImmersiveBridge.swift b/packages/react-native/Libraries/XR/ImmersiveBridge.swift
@@ -0,0 +1,55 @@
+import Foundation
+import SwiftUI
+
+@objc public enum ImmersiveSpaceResult: Int {
+  case opened
+  case userCancelled
+  case error
+}
+
+public typealias CompletionHandlerType = (_ result: ImmersiveSpaceResult) -> Void
+
+/**
+ * Utility view used to bridge the gap between SwiftUI environment and UIKit.
+ *
+ * Calls `openImmersiveSpace` when view appears in the UIKit hierarchy and `dismissImmersiveSpace` when removed.
+ */
+struct ImmersiveBridgeView: View {
+  @Environment(\.openImmersiveSpace) private var openImmersiveSpace
+  @Environment(\.dismissImmersiveSpace) private var dismissImmersiveSpace
+  
+  var spaceId: String
+  var completionHandler: CompletionHandlerType
+  
+  var body: some View {
+    EmptyView()
+      .onAppear {
+        Task {
+          let result = await openImmersiveSpace(id: spaceId)
+          
+          switch result {
+          case .opened:
+            completionHandler(.opened)
+          case .error:
+            completionHandler(.error)
+          case .userCancelled:
+            completionHandler(.userCancelled)
+          default:
+            break
+          }
+        }
+      }
+      .onDisappear {
+        Task { await dismissImmersiveSpace() }
+      }
+  }
+}
+
+@objc public class ImmersiveBridgeFactory: NSObject {
+  @objc public static func makeImmersiveBridgeView(
+    spaceId: String,
+    completionHandler: @escaping CompletionHandlerType
+  ) -> UIViewController {
+    return UIHostingController(rootView: ImmersiveBridgeView(spaceId: spaceId, completionHandler: completionHandler))
+  }
+}
diff --git a/packages/react-native/Libraries/XR/NativeXRModule.js b/packages/react-native/Libraries/XR/NativeXRModule.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;
diff --git a/packages/react-native/Libraries/XR/RCTXRModule.h b/packages/react-native/Libraries/XR/RCTXRModule.h
@@ -0,0 +1,6 @@
+#import <Foundation/Foundation.h>
+#import <React/RCTBridgeModule.h>
+
+@interface RCTXRModule : NSObject <RCTBridgeModule>
+
+@end
diff --git a/packages/react-native/Libraries/XR/RCTXRModule.mm b/packages/react-native/Libraries/XR/RCTXRModule.mm
@@ -0,0 +1,88 @@
+#import <React/RCTXRModule.h>
+
+#import <FBReactNativeSpec_visionOS/FBReactNativeSpec_visionOS.h>
+
+#import <React/RCTBridge.h>
+#import <React/RCTConvert.h>
+#import <React/RCTUtils.h>
+#import "RCTXR-Swift.h"
+
+@interface RCTXRModule () <NativeXRModuleSpec>
+@end
+
+@implementation RCTXRModule {
+  UIViewController *_immersiveBridgeView;
+}
+
+RCT_EXPORT_MODULE()
+
+RCT_EXPORT_METHOD(endSession
+                  : (RCTPromiseResolveBlock)resolve reject
+                  : (RCTPromiseRejectBlock)reject)
+{
+  [self removeImmersiveBridge];
+  resolve(nil);
+}
+
+
+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: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);
+        }
+      }];
+      
+      [rootViewController.view addSubview:self->_immersiveBridgeView.view];
+      [rootViewController addChildViewController:self->_immersiveBridgeView];
+      [self->_immersiveBridgeView didMoveToParentViewController:rootViewController];
+    } else {
+      reject(@"ERROR", @"Immersive Space already opened", nil);
+    }
+  });
+}
+
+- (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
diff --git a/packages/react-native/Libraries/XR/XR.d.ts b/packages/react-native/Libraries/XR/XR.d.ts
@@ -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;
diff --git a/packages/react-native/Libraries/XR/XR.js b/packages/react-native/Libraries/XR/XR.js
@@ -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;
diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -9079,6 +9079,22 @@ exports[`public API should not change unintentionally Libraries/WebSocket/WebSoc
 
 exports[`public API should not change unintentionally Libraries/WebSocket/WebSocketInterceptor.js 1`] = `"UNTYPED MODULE"`;
 
+exports[`public API should not change unintentionally Libraries/XR/NativeXRModule.js 1`] = `
+"export * from \\"../../src/private/specs/visionos_modules/NativeXRModule\\";
+declare export default typeof NativeXRModule;
+"
+`;
+
+exports[`public API should not change unintentionally Libraries/XR/XR.js 1`] = `
+"declare const XR: {
+  requestSession: (sessionId?: string) => Promise<void>,
+  endSession: () => Promise<void>,
+  get supportsMultipleScenes(): boolean,
+};
+declare module.exports: XR;
+"
+`;
+
 exports[`public API should not change unintentionally Libraries/YellowBox/YellowBoxDeprecated.js 1`] = `
 "declare const React: $FlowFixMe;
 type Props = $ReadOnly<{||}>;
@@ -9197,6 +9213,7 @@ declare module.exports: {
   get PushNotificationIOS(): PushNotificationIOS,
   get Settings(): Settings,
   get Share(): Share,
+  get XR(): XR,
   get StyleSheet(): StyleSheet,
   get Systrace(): Systrace,
   get ToastAndroid(): ToastAndroid,
diff --git a/packages/react-native/React-Core.podspec b/packages/react-native/React-Core.podspec
@@ -37,6 +37,7 @@ header_subspecs = {
   'RCTSettingsHeaders'          => 'Libraries/Settings/*.h',
   'RCTTextHeaders'              => 'Libraries/Text/**/*.h',
   'RCTVibrationHeaders'         => 'Libraries/Vibration/*.h',
+  'RCTXRHeaders'                => 'Libraries/XR/*.h',
 }
 
 frameworks_search_paths = []
diff --git a/packages/react-native/React.podspec b/packages/react-native/React.podspec
@@ -53,4 +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-RCTXR", version
 end
diff --git a/packages/react-native/React/Base/RCTUtils.m b/packages/react-native/React/Base/RCTUtils.m
@@ -577,6 +577,13 @@ BOOL RCTRunningInAppExtension(void)
       continue;
     }
 
+    #if TARGET_OS_VISION
+    /// Presenting scenes over Immersive Spaces leads to crash: "Presentations are not permitted within volumetric window scenes."
+    if (scene.session.role == UISceneSessionRoleImmersiveSpaceApplication) {
+      continue;
+    }
+#endif
+
     if (scene.activationState == UISceneActivationStateForegroundActive) {
       foregroundActiveScene = scene;
       break;
diff --git a/packages/react-native/index.js b/packages/react-native/index.js
@@ -90,6 +90,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');
@@ -300,6 +301,9 @@ module.exports = {
   get Share(): Share {
     return require('./Libraries/Share/Share');
   },
+  get XR(): XR {
+    return require('./Libraries/XR/XR');
+  },
   get StyleSheet(): StyleSheet {
     return require('./Libraries/StyleSheet/StyleSheet');
   },
diff --git a/packages/react-native/package.json b/packages/react-native/package.json
@@ -157,6 +157,13 @@
         "android": {},
         "jsSrcsDir": "src"
       },
+      {
+        "name": "FBReactNativeSpec_visionOS",
+        "type": "modules",
+        "ios": {},
+        "android": {},
+        "jsSrcsDir": "src/private/specs/visionos_modules"
+      },
       {
         "name": "rncore",
         "type": "components",
diff --git a/packages/react-native/scripts/cocoapods/utils.rb b/packages/react-native/scripts/cocoapods/utils.rb
@@ -637,6 +637,7 @@ def self.react_native_pods
             "glog",
             "hermes-engine",
             "React-hermes",
+            "React-RCTXR", # visionOS
         ]
     end
 
diff --git a/packages/react-native/scripts/react_native_pods.rb b/packages/react-native/scripts/react_native_pods.rb
@@ -135,6 +135,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-RCTXR', :path => "#{prefix}/Libraries/XR"
 
   if hermes_enabled
     setup_hermes!(:react_native_path => prefix)
diff --git a/packages/react-native/src/private/specs/visionos_modules/NativeXRModule.js b/packages/react-native/src/private/specs/visionos_modules/NativeXRModule.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);
diff --git a/packages/react-native/types/index.d.ts b/packages/react-native/types/index.d.ts
@@ -147,6 +147,7 @@ export * from '../Libraries/Utilities/Dimensions';
 export * from '../Libraries/Utilities/PixelRatio';
 export * from '../Libraries/Utilities/Platform';
 export * from '../Libraries/Vibration/Vibration';
+export * from '../Libraries/XR/XR';
 export * from '../Libraries/YellowBox/YellowBoxDeprecated';
 export * from '../Libraries/vendor/core/ErrorUtils';
 export {
diff --git a/packages/rn-tester/Podfile.lock b/packages/rn-tester/Podfile.lock
diff --git a/packages/rn-tester/RNTester-visionOS/App.swift b/packages/rn-tester/RNTester-visionOS/App.swift
diff --git a/packages/rn-tester/RNTester-visionOS/Info.plist b/packages/rn-tester/RNTester-visionOS/Info.plist
diff --git a/packages/rn-tester/js/examples/XR/XRExample.js b/packages/rn-tester/js/examples/XR/XRExample.js
diff --git a/packages/rn-tester/js/utils/RNTesterList.ios.js b/packages/rn-tester/js/utils/RNTesterList.ios.js

Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,7 @@ header_subspecs = {`
`37`	`37`	`'RCTSettingsHeaders' => 'Libraries/Settings/*.h',`
`38`	`38`	`'RCTTextHeaders' => 'Libraries/Text/*/.h',`
`39`	`39`	`'RCTVibrationHeaders' => 'Libraries/Vibration/*.h',`
	`40`	`+ 'RCTXRHeaders' => 'Libraries/XR/*.h',`
`40`	`41`	`}`
`41`	`42`
`42`	`43`	`frameworks_search_paths = []`
Original file line number	Diff line number	Diff line change
`@@ -637,6 +637,7 @@ def self.react_native_pods`
`637`	`637`	`"glog",`
`638`	`638`	`"hermes-engine",`
`639`	`639`	`"React-hermes",`
	`640`	`+ "React-RCTXR", # visionOS`
`640`	`641`	`]`
`641`	`642`	`end`
`642`	`643`