feat: make moduleName deprecated, componentName to replace it

README.md

@@ -92,8 +92,8 @@ function HostApp() {
     <View>
       <Button onPress={sendMessageToSandbox} title="Send to Sandbox" />
       <SandboxReactNativeView ref={sandboxRef}
-        moduleName={"ModuleName"} // The name of your JS module
         jsBundleSource={"sandbox"} // The JS bundle: file name or URL
+        componentName={"SandboxApp"} // The name of your JS component from jsBundleSource
         onMessage={handleMessage}
         onError={handleError}
       />
@@ -108,7 +108,7 @@ function HostApp() {
 import React, { useState, useEffect, useCallback } from 'react';
 import { View, Button, Text } from 'react-native';
 
-// No import required API available through global
+// No import required, API available through global
 declare global {
   var postMessage: (message: object) => void;
   var setOnMessage: (handler: (payload: object) => void) => void;

apps/demo/App.tsx

@@ -17,8 +17,8 @@ const SideBySideDemo: React.FC = () => {
           <Text style={styles.header}>Sandboxed</Text>
           <SandboxReactNativeView
             style={styles.sandboxView}
-            jsBundleSource={'sandbox'}
-            moduleName={'CrashIfYouCanDemo'}
+            jsBundleSource={'sandbox'} // bundle name for query from metro
+            componentName={'SandboxedDemo'} // componentName from sandbox.js
             onError={error => {
               const message = `Got ${error.isFatal ? 'fatal' : 'non-fatal'} error from sandbox`
               console.warn(message, error)

apps/demo/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
-    "start": "react-native start"
+    "start": "react-native start",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "react": "19.1.0",

apps/demo/sandbox.js

@@ -4,4 +4,4 @@ import CrashIfYouCanDemo from './CrashIfYouCanDemo'
 
 LogBox.uninstall()
 
-AppRegistry.registerComponent('CrashIfYouCanDemo', () => CrashIfYouCanDemo)
+AppRegistry.registerComponent('SandboxedDemo', () => CrashIfYouCanDemo)

apps/fs-experiment/App.tsx

@@ -177,8 +177,8 @@ function App(): React.JSX.Element {
                 styles.sandbox,
                 {backgroundColor: theme.background, borderColor: theme.border},
               ]}
-              moduleName={'AppFS'}
-              jsBundleSource="sandbox-fs"
+              componentName={'AppFS'} // componentName from sandbox-fs.js
+              jsBundleSource="sandbox-fs" // bundle name for query from metro
               allowedTurboModules={['RNFSManager', 'FileReaderModule']}
               onMessage={message => {
                 console.log('Host received message from sandbox:', message)
@@ -207,9 +207,9 @@ function App(): React.JSX.Element {
                 styles.sandbox,
                 {backgroundColor: theme.background, borderColor: theme.border},
               ]}
-              moduleName={'AppFileAccess'}
+              componentName={'AppFileAccess'} // componentName from sandbox-file-access.js
               allowedTurboModules={['FileAccess']}
-              jsBundleSource="sandbox-file-access"
+              jsBundleSource="sandbox-file-access" // bundle name for query from metro
               onMessage={message => {
                 console.log('Host received message from sandbox:', message)
               }}

apps/fs-experiment/package.json

@@ -8,7 +8,8 @@
     "start": "react-native start",
     "bundle:sandbox": "bun run bundle:sandbox-fs && bun run bundle:sandbox-file-access",
     "bundle:sandbox-fs": "npx react-native bundle --platform ios --dev false --entry-file sandbox-fs.js --bundle-output ios/sandbox-fs.jsbundle --assets-dest ios/",
-    "bundle:sandbox-file-access": "npx react-native bundle --platform ios --dev false --entry-file sandbox-file-access.js --bundle-output ios/sandbox-file-access.jsbundle --assets-dest ios/"
+    "bundle:sandbox-file-access": "npx react-native bundle --platform ios --dev false --entry-file sandbox-file-access.js --bundle-output ios/sandbox-file-access.jsbundle --assets-dest ios/",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "react": "19.1.0",

apps/recursive/App.tsx

@@ -99,8 +99,8 @@ function App({depth = 1}: AppProps): React.JSX.Element {
               </Text>
               <SandboxReactNativeView
                 style={styles.recursiveSandbox}
-                jsBundleSource="index"
-                moduleName="App" // Recursively load App itself
+                jsBundleSource="index" // bundle name for query from metro
+                componentName="App" // Recursively load App component from index.js
                 initialProperties={{depth: depth + 1}}
                 onMessage={msg => console.log('message', msg)}
                 onError={e => console.error('error', e)}

apps/recursive/RecursiveDisplay.tsx

@@ -19,7 +19,7 @@ const RecursiveDisplay = ({depth}: Props) => {
       {depth < MAX_DEPTH ? (
         <SandboxReactNativeView
           style={styles.flex}
-          moduleName="RecursiveDisplay"
+          componentName="RecursiveDisplay"
           initialProperties={{depth: depth + 1}}
         />
       ) : (

apps/recursive/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
-    "start": "react-native start"
+    "start": "react-native start",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "react": "19.1.0",

apps/side-by-side/App.tsx

@@ -44,8 +44,8 @@ function SandboxDemoView({initialProperties}: {initialProperties: any}) {
         {isVisible ? (
           <SandboxReactNativeView
             ref={sandboxRef}
-            jsBundleSource={'sandbox'}
-            moduleName={'SandboxApp'}
+            jsBundleSource={'sandbox'} // bundle name for query from metro
+            componentName={'SandboxApp'} // componentName registered in sandbox.js
             style={styles.sandboxView}
             initialProperties={initialProperties}
             onMessage={msg => {

apps/side-by-side/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
-    "start": "react-native start"
+    "start": "react-native start",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "react": "19.1.0",

bun.lock

@@ -121,7 +121,7 @@
     },
     "packages/react-native-sandbox": {
       "name": "@callstack/react-native-sandbox",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "devDependencies": {
         "react": "19.1.0",
         "react-native": "0.80.1",

docs/article.md

@@ -60,7 +60,7 @@ On API level you will deal with `SandboxReactNativeView` component in your JSX:
 <SandboxReactNativeView
   style={styles.sandboxContainer}
   jsBundleSource={'my-plugin'}
-  moduleName={'PluginComponent'}
+  componentName={'PluginComponent'}
   onMessage={(message) => {
     console.log(`Message: ${message} received through safe API`)
   }}
@@ -105,7 +105,7 @@ On the left, you'll see the "Main App" column running a component directly in th
     <SandboxReactNativeView
       style={styles.sandboxView}
       jsBundleSource={'sandbox'}
-      moduleName={'CrashIfYouCanDemo'}
+      componentName={'CrashIfYouCanDemo'}
       onError={error => {
         Toast.show({...})
         return false

docs/presentation.md

@@ -74,7 +74,7 @@ function App() {
       ...
       <SandboxReactNativeView ref={sandbox1Ref}
         jsBundleSource={"sandbox"}
-        moduleName={"SandboxApp"}
+        componentName={"SandboxApp"}
         onMessage={onMessage}
         onError={onError}
         initialProperties={...} launchOptions={...} />
@@ -179,7 +179,7 @@ function App() {
       ...
       <SandboxReactNativeView ref={sandbox1Ref}
         jsBundleSource={"sandbox"}
-        moduleName={"SandboxApp"}
+        componentName={"SandboxApp"}
         onMessage={onMessage}
         onError={onError}
         initialProperties={...} launchOptions={...} />

package.json

@@ -10,6 +10,7 @@
     "android": "bun run android --filter=@apps/side-by-side",
     "lint": "eslint . && bun --filter=@callstack/react-native-sandbox lint",
     "format": "eslint . --fix && bun --filter=@callstack/react-native-sandbox format",
+    "typecheck": "bun --filter=@callstack/react-native-sandbox typecheck",
     "test": "jest"
   },
   "devDependencies": {

packages/react-native-sandbox/README.md

@@ -33,7 +33,7 @@ The package uses **autolinking** and supports the **React Native New Architectur
 import SandboxReactNativeView from '@callstack/react-native-sandbox';
 
 <SandboxReactNativeView
-  moduleName="YourSandboxModule"
+  componentName="YourSandboxComponent"
   jsBundleSource="sandbox" // bundle file name
   onMessage={(data) => console.log('From sandbox:', data)}
   onError={(error) => console.error('Sandbox error:', error)}
@@ -46,7 +46,8 @@ import SandboxReactNativeView from '@callstack/react-native-sandbox';
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `moduleName` | `string` | :ballot_box_with_check: | - | Name of the registered component to load from bundle specified in `jsBundleSource` |
+| `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 |
 | `initialProperties` | `object` | :white_large_square: | `{}` | Initial props for the sandboxed app |
 | `launchOptions` | `object` | :white_large_square: | `{}` | Launch configuration options |
@@ -157,7 +158,7 @@ useEffect(() => {
 
 return (
   <SandboxReactNativeView
-    moduleName="DynamicApp"
+    componentName="DynamicApp"
     jsBundleSource={bundleUrl}
     initialProperties={{ 
       userId: currentUser.id,
@@ -262,7 +263,7 @@ Enable additional logging:
 const isDebug = __DEV__;
 
 <SandboxReactNativeView
-  moduleName="DebugApp"
+  componentName="DebugApp"
   launchOptions={{ debug: isDebug }}
   onError={(error) => {
     if (isDebug) {

packages/react-native-sandbox/ios/SandboxReactNativeViewComponentView.mm

@@ -47,7 +47,7 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
 
   bool shouldReload = false;
 
-  if (oldViewProps.moduleName != newViewProps.moduleName ||
+  if (oldViewProps.componentName != newViewProps.componentName ||
       oldViewProps.jsBundleSource != newViewProps.jsBundleSource ||
       oldViewProps.initialProperties != newViewProps.initialProperties ||
       oldViewProps.launchOptions != newViewProps.launchOptions ||
@@ -93,10 +93,10 @@ - (void)loadReactNativeView
 {
   const auto &props = *std::static_pointer_cast<const SandboxReactNativeViewProps>(_props);
 
-  NSString *moduleName = RCTNSStringFromString(props.moduleName);
+  NSString *componentName = RCTNSStringFromString(props.componentName);
   NSString *jsBundleSource = RCTNSStringFromString(props.jsBundleSource);
 
-  if (moduleName.length == 0 || jsBundleSource.length == 0) {
+  if (componentName.length == 0 || jsBundleSource.length == 0) {
     return;
   }
 
@@ -131,7 +131,7 @@ - (void)loadReactNativeView
   delegate.hasOnErrorHandler = props.hasOnErrorHandler;
 
   RCTReactNativeFactory *factory = [[RCTReactNativeFactory alloc] initWithDelegate:delegate];
-  UIView *rnView = [factory.rootViewFactory viewWithModuleName:moduleName
+  UIView *rnView = [factory.rootViewFactory viewWithModuleName:componentName
                                              initialProperties:initialProperties
                                                  launchOptions:launchOptions];
 

packages/react-native-sandbox/specs/NativeSandboxReactNativeView.ts

@@ -39,10 +39,10 @@ export interface MessageEvent {
  */
 export interface NativeProps extends ViewProps {
   /**
-   * The name of the React Native module to load in the sandbox.
+   * The name of the React Native component to load in the sandbox.
    * Must match with the registered component name from the JavaScript bundle
    */
-  moduleName: string
+  componentName: string
 
   /** Name on file storage or URL to the JavaScript bundle to load */
   jsBundleSource: string