Execute React Native micro-apps with confidence using react-native-sandbox

npm install @callstack/react-native-sandbox

react-native-sandbox is a library for running multiple, isolated React Native instances within a single application. This allows you to embed third-party or feature-specific "micro-apps" in a sandboxed environment, preventing uncontrolled interference with the main app by providing a clear API for communication (postMessage/onMessage).

💡 Project Overview

This project was born from the need to safely run third-party code within a react-native application. The core requirements are:

Isolation: Run external code in a secure, sandboxed environment.
Safety: Prevent direct access to the host application's code and data.
Communication: Provide a safe and explicit API for communication between the host and the sandboxed instances.

Note that postMessage only supports serializable data (similar to Window.postMessage in web browsers), meaning no functions, native state, or non-serializable objects can be passed.

react-native-sandbox provides the API to create these sandboxed React Native instances with a simple component-based API, requiring no native code to be written by the consumer.

This project is structured as a monorepo.

packages/react-native-sandbox: the core library
apps/*: examples

To run the examples:

Install dependencies:

bun install
cd apps/<specific-example>
bun install

Run the example application:
```
bun ios
```

📝 API Example

Here is a brief overview of how to use the library.

Host Application (`HostApp`)

"import React, { useRef } from 'react'; import { View, Button } from 'react-native'; import SandboxReactNativeView, { SandboxReactNativeViewRef } from 'react-native-sandbox'; function HostApp() { const sandboxRef = useRef (null); const handleMessage = (message) => console.log("Message received from sandbox:", message); const handleError = (error) => console.error("Error in sandbox:", error); const sendMessageToSandbox = () => sandboxRef.current?.postMessage({ data: "Hello from the host!" }); return (

💡 Project Overview

📝 API Example

Host Application (HostApp)

Host Application (`HostApp`)