chore: rename id property to origin

alexbabrykovich · alexbabrykovich · commit 78d4024df8c6 · 2025-08-11T16:58:26.000+02:00
diff --git a/apps/demo/ios/Podfile.lock b/apps/demo/ios/Podfile.lock
@@ -2019,7 +2019,7 @@ PODS:
     - React-timing
     - React-utils
     - SocketRocket
-  - React-Sandbox (0.2.0):
+  - React-Sandbox (0.4.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2451,7 +2451,7 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: 17c70842d5e611130cb66f91e247bc4a609c3508
   React-RuntimeHermes: 3c88e6e1ea7ea0899dcffc77c10d61ea46688cfd
   React-runtimescheduler: 024500621c7c93d65371498abb4ee26d34f5d47d
-  React-Sandbox: 789583cf1f6db8c2bf95e54125aef4314fe9d8ca
+  React-Sandbox: e3cf3c955559ed9f0bf014b29dce1e94600cd790
   React-timing: c3c923df2b86194e1682e01167717481232f1dc7
   React-utils: 9154a037543147e1c24098f1a48fc8472602c092
   ReactAppDependencyProvider: afd905e84ee36e1678016ae04d7370c75ed539be
diff --git a/apps/fs-experiment/ios/Podfile.lock b/apps/fs-experiment/ios/Podfile.lock
@@ -2019,7 +2019,7 @@ PODS:
     - React-timing
     - React-utils
     - SocketRocket
-  - React-Sandbox (0.2.0):
+  - React-Sandbox (0.4.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2491,7 +2491,7 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: 17c70842d5e611130cb66f91e247bc4a609c3508
   React-RuntimeHermes: 3c88e6e1ea7ea0899dcffc77c10d61ea46688cfd
   React-runtimescheduler: 024500621c7c93d65371498abb4ee26d34f5d47d
-  React-Sandbox: 789583cf1f6db8c2bf95e54125aef4314fe9d8ca
+  React-Sandbox: e3cf3c955559ed9f0bf014b29dce1e94600cd790
   React-timing: c3c923df2b86194e1682e01167717481232f1dc7
   React-utils: 9154a037543147e1c24098f1a48fc8472602c092
   ReactAppDependencyProvider: afd905e84ee36e1678016ae04d7370c75ed539be
diff --git a/apps/p2p-chat/ios/Podfile.lock b/apps/p2p-chat/ios/Podfile.lock
@@ -2019,7 +2019,7 @@ PODS:
     - React-timing
     - React-utils
     - SocketRocket
-  - React-Sandbox (0.3.0):
+  - React-Sandbox (0.4.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2451,7 +2451,7 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: 17c70842d5e611130cb66f91e247bc4a609c3508
   React-RuntimeHermes: 3c88e6e1ea7ea0899dcffc77c10d61ea46688cfd
   React-runtimescheduler: 024500621c7c93d65371498abb4ee26d34f5d47d
-  React-Sandbox: 7f628c364e1e4f691c2f7f2eb82bd9aaca1989fa
+  React-Sandbox: e3cf3c955559ed9f0bf014b29dce1e94600cd790
   React-timing: c3c923df2b86194e1682e01167717481232f1dc7
   React-utils: 9154a037543147e1c24098f1a48fc8472602c092
   ReactAppDependencyProvider: afd905e84ee36e1678016ae04d7370c75ed539be
diff --git a/apps/p2p-chat/src/components/ChatCarousel.tsx b/apps/p2p-chat/src/components/ChatCarousel.tsx
@@ -82,7 +82,7 @@ const ChatInstanceView: React.FC<ChatInstanceViewProps> = ({
                 delete sandboxRefs.current[chat.id]
               }
             }}
-            id={chat.id}
+            origin={chat.id}
             componentName="ChatApp"
             initialProperties={{
               userId: chat.id,
diff --git a/apps/p2p-counter/App.tsx b/apps/p2p-counter/App.tsx
@@ -56,7 +56,7 @@ function CounterSandboxView({
         />
       </View>
       <SandboxReactNativeView
-        id={sourceName}
+        origin={sourceName}
         ref={sandboxRef}
         jsBundleSource={'sandbox'}
         componentName={'CounterApp'}
diff --git a/apps/p2p-counter/ios/Podfile.lock b/apps/p2p-counter/ios/Podfile.lock
@@ -2051,7 +2051,7 @@ PODS:
     - React-timing
     - React-utils
     - SocketRocket
-  - React-Sandbox (0.3.0):
+  - React-Sandbox (0.4.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2493,7 +2493,7 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: 17c70842d5e611130cb66f91e247bc4a609c3508
   React-RuntimeHermes: 3c88e6e1ea7ea0899dcffc77c10d61ea46688cfd
   React-runtimescheduler: 024500621c7c93d65371498abb4ee26d34f5d47d
-  React-Sandbox: 7f628c364e1e4f691c2f7f2eb82bd9aaca1989fa
+  React-Sandbox: e3cf3c955559ed9f0bf014b29dce1e94600cd790
   React-timing: c3c923df2b86194e1682e01167717481232f1dc7
   React-utils: 9154a037543147e1c24098f1a48fc8472602c092
   ReactAppDependencyProvider: afd905e84ee36e1678016ae04d7370c75ed539be
diff --git a/apps/side-by-side/ios/Podfile.lock b/apps/side-by-side/ios/Podfile.lock
@@ -2019,7 +2019,7 @@ PODS:
     - React-timing
     - React-utils
     - SocketRocket
-  - React-Sandbox (0.3.0):
+  - React-Sandbox (0.4.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2603,7 +2603,7 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: 17c70842d5e611130cb66f91e247bc4a609c3508
   React-RuntimeHermes: 3c88e6e1ea7ea0899dcffc77c10d61ea46688cfd
   React-runtimescheduler: 024500621c7c93d65371498abb4ee26d34f5d47d
-  React-Sandbox: 7f628c364e1e4f691c2f7f2eb82bd9aaca1989fa
+  React-Sandbox: e3cf3c955559ed9f0bf014b29dce1e94600cd790
   React-timing: c3c923df2b86194e1682e01167717481232f1dc7
   React-utils: 9154a037543147e1c24098f1a48fc8472602c092
   ReactAppDependencyProvider: afd905e84ee36e1678016ae04d7370c75ed539be
diff --git a/bun.lock b/bun.lock
@@ -137,8 +137,10 @@
       "version": "1.0.0",
       "dependencies": {
         "@callstack/react-native-sandbox": "workspace:*",
+        "@react-native/new-app-screen": "^0.80.2",
         "react": "19.1.0",
         "react-native": "0.80.1",
+        "react-native-linear-gradient": "^2.8.3",
       },
       "devDependencies": {
         "@babel/core": "^7.25.2",
@@ -177,7 +179,7 @@
     },
     "packages/react-native-sandbox": {
       "name": "@callstack/react-native-sandbox",
-      "version": "0.3.0",
+      "version": "0.4.0",
       "devDependencies": {
         "react": "19.1.0",
         "react-native": "0.80.1",
@@ -729,6 +731,8 @@
 
     "@react-native/metro-config": ["@react-native/metro-config@0.80.1", "", { "dependencies": { "@react-native/js-polyfills": "0.80.1", "@react-native/metro-babel-transformer": "0.80.1", "metro-config": "^0.82.2", "metro-runtime": "^0.82.2" } }, "sha512-VLfHJ1G/lHvpE0YzxPal3sslfr5e5RNQVFeVebMwS3zSf57ZiZbfAevWJJT+7/gfGADMIoiX7AUteCVlbxMu/g=="],
 
+    "@react-native/new-app-screen": ["@react-native/new-app-screen@0.80.2", "", { "peerDependencies": { "@types/react": "^19.0.0", "react": "*", "react-native": "*" }, "optionalPeers": ["@types/react"] }, "sha512-cszaO1s1WJNBSkvb9bYGxv9CYcHDbGMMmtgemhpe1HyzcoE2kKp9FLn6aAUxIP+aZ2RBP1Zya1Wt8oRuCyTNjQ=="],
+
     "@react-native/normalize-colors": ["@react-native/normalize-colors@0.74.89", "", {}, "sha512-qoMMXddVKVhZ8PA1AbUCk83trpd6N+1nF2A6k1i6LsQObyS92fELuk8kU/lQs6M7BsMHwqyLCpQJ1uFgNvIQXg=="],
 
     "@react-native/typescript-config": ["@react-native/typescript-config@0.80.1", "", {}, "sha512-rcDV6BMh+rjsYIh/f0pd6mWOKN4eTS9nov7CyeU2cAfuIEslScEJ7Kv6YZtlLZ5PgC9teUf5L9pqzx9GwmzY/w=="],
@@ -2219,6 +2223,8 @@
 
     "react-native-is-edge-to-edge": ["react-native-is-edge-to-edge@1.1.7", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-EH6i7E8epJGIcu7KpfXYXiV2JFIYITtq+rVS8uEb+92naMRBdxhTuS8Wn2Q7j9sqyO0B+Xbaaf9VdipIAmGW4w=="],
 
+    "react-native-linear-gradient": ["react-native-linear-gradient@2.8.3", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA=="],
+
     "react-native-reanimated": ["react-native-reanimated@3.19.0", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "invariant": "^2.2.4", "react-native-is-edge-to-edge": "1.1.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*" } }, "sha512-FNfqLuPuVHsW9KcsZtnJqIPlMQvuySnSFJXgSt9fVDPqptbSUkiAF6MthUwd4Mxt05hCRcbV+T65CENgVS5iCg=="],
 
     "react-native-toast-message": ["react-native-toast-message@2.3.3", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-4IIUHwUPvKHu4gjD0Vj2aGQzqPATiblL1ey8tOqsxOWRPGGu52iIbL8M/mCz4uyqecvPdIcMY38AfwRuUADfQQ=="],
diff --git a/packages/react-native-sandbox/README.md b/packages/react-native-sandbox/README.md
@@ -49,6 +49,7 @@ import SandboxReactNativeView from '@callstack/react-native-sandbox';
 | `componentName` | `string` | :ballot_box_with_check: | - | Name of the component registered through `AppRegistry.registerComponent` call inside the bundle file specified in `jsBundleSource` |
 | `moduleName` | `string` | :white_large_square: | - | **⚠️ Deprecated**: Use `componentName` instead. Will be removed in a future version. |
 | `jsBundleSource` | `string` | :ballot_box_with_check: | - | Name on file storage or URL to the JavaScript bundle to load |
+| `origin` | `string` | :white_large_square: | React Native view ID | Unique origin identifier for the sandbox instance (web-compatible) |
 | `initialProperties` | `object` | :white_large_square: | `{}` | Initial props for the sandboxed app |
 | `launchOptions` | `object` | :white_large_square: | `{}` | Launch configuration options |
 | `allowedTurboModules` | `string[]` | :white_large_square: | [check here](https://github.com/callstackincubator/react-native-sandbox/blob/main/packages/react-native-sandbox/src/index.tsx#L18) | Additional TurboModules to allow |
@@ -100,10 +101,11 @@ Use `allowedTurboModules` to control which native modules the sandbox can access
 
 #### Message Origin Control
 
-Use `allowedOrigins` to specify which sandbox IDs are allowed to send messages to this sandbox:
+Use `allowedOrigins` to specify which sandbox origins are allowed to send messages to this sandbox:
 
 ```tsx
 <SandboxReactNativeView
+  origin="my-sandbox"
   allowedOrigins={['sandbox1', 'sandbox2']}
   // ... other props
 />
diff --git a/packages/react-native-sandbox/ios/SandboxReactNativeDelegate.h b/packages/react-native-sandbox/ios/SandboxReactNativeDelegate.h
@@ -25,7 +25,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) std::shared_ptr<const facebook::react::SandboxReactNativeViewEventEmitter> eventEmitter;
 @property (nonatomic, assign) BOOL hasOnMessageHandler;
 @property (nonatomic, assign) BOOL hasOnErrorHandler;
-@property (nonatomic, copy, nullable) NSString *sandboxId;
+@property (nonatomic, copy, nullable) NSString *origin;
 @property (nonatomic, copy, nullable) NSString *jsBundleSource;
 
 /**
@@ -36,7 +36,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 /**
  * Sets the list of allowed origins for this sandbox instance.
- * Only sandboxes with IDs in this list can send messages to this sandbox.
+ * Only sandboxes with origins in this list can send messages to this sandbox.
  */
 @property (nonatomic, copy) NSArray<NSString *> *allowedOrigins;
 
diff --git a/packages/react-native-sandbox/ios/SandboxReactNativeDelegate.mm b/packages/react-native-sandbox/ios/SandboxReactNativeDelegate.mm
@@ -72,23 +72,23 @@ @implementation SandboxReactNativeDelegate
 
 #pragma mark - Instance Methods
 
-- (void)setSandboxId:(NSString *)sandboxId
+- (void)setOrigin:(NSString *)origin
 {
-  if ([sandboxId isEqual:_sandboxId]) {
+  if ([origin isEqual:_origin]) {
     return;
   }
 
-  // Unregister old ID if it exists
-  if (_sandboxId) {
-    [[SandboxRegistry shared] unregister:_sandboxId];
+  // Unregister old origin if it exists
+  if (_origin) {
+    [[SandboxRegistry shared] unregister:_origin];
   }
 
-  // Set new ID
-  _sandboxId = [sandboxId copy];
+  // Set new origin
+  _origin = [origin copy];
 
-  // Register new ID if it's not nil
-  if (_sandboxId) {
-    [[SandboxRegistry shared] registerSandbox:_sandboxId delegate:self allowedOrigins:self.allowedOrigins];
+  // Register new origin if it's not nil
+  if (_origin) {
+    [[SandboxRegistry shared] registerSandbox:_origin delegate:self allowedOrigins:self.allowedOrigins];
   }
 }
 
@@ -104,9 +104,9 @@ - (void)setAllowedOrigins:(NSArray<NSString *> *)allowedOrigins
 {
   _allowedOrigins = [allowedOrigins copy];
 
-  // Re-register with new allowedOrigins if sandboxId is set
-  if (self.sandboxId) {
-    [[SandboxRegistry shared] registerSandbox:self.sandboxId delegate:self allowedOrigins:self.allowedOrigins];
+  // Re-register with new allowedOrigins if origin is set
+  if (self.origin) {
+    [[SandboxRegistry shared] registerSandbox:self.origin delegate:self allowedOrigins:self.allowedOrigins];
   }
 }
 
@@ -129,8 +129,8 @@ - (void)cleanupResources
 
 - (void)dealloc
 {
-  if (self.sandboxId) {
-    [[SandboxRegistry shared] unregister:self.sandboxId];
+  if (self.origin) {
+    [[SandboxRegistry shared] unregister:self.origin];
   } else {
     [self cleanupResources];
   }
@@ -199,7 +199,7 @@ - (void)postMessage:(NSString *)message
         self.eventEmitter->onError(errorEvent);
       }
     } catch (...) {
-      NSLog(@"[SandboxReactNativeDelegate] Runtime invalid during postMessage for sandbox %@", self.sandboxId);
+      NSLog(@"[SandboxReactNativeDelegate] Runtime invalid during postMessage for sandbox %@", self.origin);
     }
   }];
 }
@@ -212,11 +212,11 @@ - (BOOL)routeMessage:(NSString *)message toSandbox:(NSString *)targetId
   }
 
   // Check if the current sandbox is permitted to send messages to the target
-  if (![[SandboxRegistry shared] isPermittedFrom:self.sandboxId to:targetId]) {
+  if (![[SandboxRegistry shared] isPermittedFrom:self.origin to:targetId]) {
     if (self.eventEmitter && self.hasOnErrorHandler) {
       NSString *errorMessageNS =
           [NSString stringWithFormat:@"Access denied: Sandbox '%@' is not permitted to send messages to '%@'",
-                                     self.sandboxId,
+                                     self.origin,
                                      targetId];
       std::string errorMessage = [errorMessageNS UTF8String];
       SandboxReactNativeViewEventEmitter::OnError errorEvent = {
@@ -310,7 +310,7 @@ - (void)hostDidStart:(RCTHost *)host
           NSString *targetOriginNS = [NSString stringWithUTF8String:targetOrigin.c_str()];
 
           // Prevent self-targeting
-          if (self.sandboxId && [self.sandboxId isEqualToString:targetOriginNS]) {
+          if (self.origin && [self.origin isEqualToString:targetOriginNS]) {
             if (self.eventEmitter && self.hasOnErrorHandler) {
               NSString *errorMessageNS =
                   [NSString stringWithFormat:@"Cannot send message to self (sandbox '%@')", targetOriginNS];
diff --git a/packages/react-native-sandbox/ios/SandboxReactNativeViewComponentView.mm b/packages/react-native-sandbox/ios/SandboxReactNativeViewComponentView.mm
@@ -68,8 +68,8 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
   [super updateProps:props oldProps:oldProps];
 
   if (self.reactNativeDelegate) {
-    if (oldViewProps.id != newViewProps.id) {
-      self.reactNativeDelegate.sandboxId = RCTNSStringFromString(newViewProps.id);
+    if (oldViewProps.origin != newViewProps.origin) {
+      self.reactNativeDelegate.origin = RCTNSStringFromString(newViewProps.origin);
     }
 
     if (oldViewProps.jsBundleSource != newViewProps.jsBundleSource) {
diff --git a/packages/react-native-sandbox/package.json b/packages/react-native-sandbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@callstack/react-native-sandbox",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A component to run multiple React Native instances side-by-side.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
diff --git a/packages/react-native-sandbox/specs/NativeSandboxReactNativeView.ts b/packages/react-native-sandbox/specs/NativeSandboxReactNativeView.ts
@@ -38,8 +38,8 @@ export interface MessageEvent {
  * Extends ViewProps and defines all properties that can be passed to the native view.
  */
 export interface NativeProps extends ViewProps {
-  /** Optional unique identifier for the sandbox instance */
-  id?: string
+  /** Optional unique origin identifier for the sandbox instance */
+  origin?: string
 
   /**
    * The name of the React Native component to load in the sandbox.
@@ -59,7 +59,7 @@ export interface NativeProps extends ViewProps {
   /** Array of TurboModule names allowed in the sandbox */
   allowedTurboModules?: readonly string[]
 
-  /** Array of sandbox IDs that are allowed to send messages to this sandbox */
+  /** Array of sandbox origins that are allowed to send messages to this sandbox */
   allowedOrigins?: readonly string[]
 
   /** Internal flag indicating if onMessage handler is provided */
diff --git a/packages/react-native-sandbox/src/index.tsx b/packages/react-native-sandbox/src/index.tsx
@@ -59,9 +59,8 @@ const generateSandboxId = (): string => {
 }
 
 export interface SandboxReactNativeViewProps extends ViewProps {
-  /** Optional unique identifier for the sandbox instance */
-  // TODO rename to not colide with ViewProps.id
-  id?: string
+  /** Optional unique origin identifier for the sandbox instance */
+  origin?: string
 
   /**
    * The name of the React Native component to load in the sandbox.
@@ -101,7 +100,7 @@ export interface SandboxReactNativeViewProps extends ViewProps {
   allowedTurboModules?: string[]
 
   /**
-   * Array of sandbox IDs that are allowed to send messages to this sandbox.
+   * Array of sandbox origins that are allowed to send messages to this sandbox.
    * If not provided or empty, no other sandboxes will be allowed to send messages.
    * Re-registering with new allowedOrigins will override previous settings.
    */
@@ -211,7 +210,7 @@ const SandboxReactNativeView = forwardRef<
 >(
   (
     {
-      id,
+      origin,
       jsBundleSource,
       allowedTurboModules,
       style,
@@ -228,7 +227,8 @@ const SandboxReactNativeView = forwardRef<
         null
       )
 
-    const sandboxId = useMemo(() => id || generateSandboxId(), [id])
+    // Use provided origin or assign a unique ID
+    const sandboxOrigin = useMemo(() => origin || generateSandboxId(), [origin])
 
     const postMessage = useCallback((message: any) => {
       if (nativeRef.current) {
@@ -317,7 +317,7 @@ const SandboxReactNativeView = forwardRef<
       <View style={style}>
         <NativeSandboxReactNativeView
           ref={nativeRef} // @ts-ignore
-          id={sandboxId}
+          origin={sandboxOrigin}
           componentName={resolvedComponentName}
           jsBundleSource={_jsBundleSource}
           hasOnMessageHandler={!!onMessage}

Original file line number	Diff line number	Diff line change
`@@ -82,7 +82,7 @@ const ChatInstanceView: React.FC<ChatInstanceViewProps> = ({`
`82`	`82`	`delete sandboxRefs.current[chat.id]`
`83`	`83`	`}`
`84`	`84`	`}}`
`85`		`- id={chat.id}`
	`85`	`+ origin={chat.id}`
`86`	`86`	`componentName="ChatApp"`
`87`	`87`	`initialProperties={{`
`88`	`88`	`userId: chat.id,`