diff --git a/apps/expo/App.js b/apps/expo/App.js
new file mode 100644
index 0000000..767a6d7
--- /dev/null
+++ b/apps/expo/App.js
@@ -0,0 +1,444 @@
+import SandboxReactNativeView from '@callstack/react-native-sandbox'
+import React, {useCallback, useState} from 'react'
+import {
+ SafeAreaView,
+ StatusBar,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ View,
+} from 'react-native'
+
+const CounterApp = () => {
+ const [count, setCount] = useState(0)
+
+ const handleMessage = useCallback(message => {
+ console.log('Counter app received message:', message)
+ if (message.type === 'INCREMENT') {
+ setCount(prev => prev + 1)
+ } else if (message.type === 'DECREMENT') {
+ setCount(prev => prev - 1)
+ }
+ }, [])
+
+ const sendMessage = useCallback(type => {
+ // This would send a message to other sandboxes
+ console.log('Sending message:', type)
+ }, [])
+
+ return (
+
+ Counter App
+ Count: {count}
+
+ setCount(prev => prev + 1)}>
+ +
+
+ setCount(prev => prev - 1)}>
+ -
+
+
+
+ sendMessage('INCREMENT')}>
+ Send Increment
+
+ sendMessage('DECREMENT')}>
+ Send Decrement
+
+
+
+ )
+}
+
+const CalculatorApp = () => {
+ const [display, setDisplay] = useState('0')
+ const [operation, setOperation] = useState(null)
+ const [firstNumber, setFirstNumber] = useState(null)
+
+ const handleNumber = useCallback(
+ num => {
+ if (display === '0') {
+ setDisplay(num)
+ } else {
+ setDisplay(display + num)
+ }
+ },
+ [display]
+ )
+
+ const handleOperation = useCallback(
+ op => {
+ setFirstNumber(parseFloat(display))
+ setOperation(op)
+ setDisplay('0')
+ },
+ [display]
+ )
+
+ const calculate = useCallback(() => {
+ if (operation && firstNumber !== null) {
+ const secondNumber = parseFloat(display)
+ let result
+ switch (operation) {
+ case '+':
+ result = firstNumber + secondNumber
+ break
+ case '-':
+ result = firstNumber - secondNumber
+ break
+ case '*':
+ result = firstNumber * secondNumber
+ break
+ case '/':
+ result = firstNumber / secondNumber
+ break
+ default:
+ return
+ }
+ setDisplay(result.toString())
+ setOperation(null)
+ setFirstNumber(null)
+ }
+ }, [operation, firstNumber, display])
+
+ const clear = useCallback(() => {
+ setDisplay('0')
+ setOperation(null)
+ setFirstNumber(null)
+ }, [])
+
+ return (
+
+ Calculator
+ {display}
+
+ handleNumber('7')}>
+ 7
+
+ handleNumber('8')}>
+ 8
+
+ handleNumber('9')}>
+ 9
+
+ handleOperation('+')}>
+ +
+
+
+ handleNumber('4')}>
+ 4
+
+ handleNumber('5')}>
+ 5
+
+ handleNumber('6')}>
+ 6
+
+ handleOperation('-')}>
+ -
+
+
+ handleNumber('1')}>
+ 1
+
+ handleNumber('2')}>
+ 2
+
+ handleNumber('3')}>
+ 3
+
+ handleOperation('*')}>
+ ×
+
+
+ handleNumber('0')}>
+ 0
+
+ handleNumber('.')}>
+ .
+
+
+ =
+
+ handleOperation('/')}>
+ ÷
+
+
+
+ Clear
+
+
+ )
+}
+
+export default function App() {
+ const [activeSandbox, setActiveSandbox] = useState('counter')
+
+ return (
+
+
+
+ Expo Sandbox Demo
+
+ setActiveSandbox('counter')}>
+
+ Counter
+
+
+ setActiveSandbox('calculator')}>
+
+ Calculator
+
+
+
+
+
+
+ {activeSandbox === 'counter' ? (
+
+ ) : (
+
+ )}
+
+
+ )
+}
+
+const styles = StyleSheet.create({
+ safeArea: {
+ flex: 1,
+ backgroundColor: '#f0f0f0',
+ },
+ header: {
+ backgroundColor: '#ffffff',
+ paddingHorizontal: 20,
+ paddingTop: 10,
+ paddingBottom: 20,
+ borderBottomWidth: 1,
+ borderBottomColor: '#e0e0e0',
+ },
+ headerTitle: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ textAlign: 'center',
+ marginBottom: 20,
+ color: '#333',
+ },
+ tabContainer: {
+ flexDirection: 'row',
+ backgroundColor: '#f0f0f0',
+ borderRadius: 8,
+ padding: 4,
+ },
+ tab: {
+ flex: 1,
+ paddingVertical: 12,
+ paddingHorizontal: 16,
+ borderRadius: 6,
+ alignItems: 'center',
+ },
+ activeTab: {
+ backgroundColor: '#ffffff',
+ shadowColor: '#000',
+ shadowOffset: {width: 0, height: 1},
+ shadowOpacity: 0.1,
+ shadowRadius: 2,
+ elevation: 2,
+ },
+ tabText: {
+ fontSize: 16,
+ fontWeight: '500',
+ color: '#666',
+ },
+ activeTabText: {
+ color: '#007AFF',
+ },
+ content: {
+ flex: 1,
+ padding: 20,
+ },
+ sandbox: {
+ flex: 1,
+ backgroundColor: '#ffffff',
+ borderRadius: 12,
+ overflow: 'hidden',
+ shadowColor: '#000',
+ shadowOffset: {width: 0, height: 2},
+ shadowOpacity: 0.1,
+ shadowRadius: 4,
+ elevation: 3,
+ },
+ // Counter App Styles
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ padding: 20,
+ backgroundColor: '#ffffff',
+ },
+ title: {
+ fontSize: 28,
+ fontWeight: 'bold',
+ marginBottom: 30,
+ color: '#333',
+ },
+ count: {
+ fontSize: 48,
+ fontWeight: 'bold',
+ marginBottom: 30,
+ color: '#007AFF',
+ },
+ buttonContainer: {
+ flexDirection: 'row',
+ marginBottom: 30,
+ },
+ button: {
+ width: 60,
+ height: 60,
+ borderRadius: 30,
+ backgroundColor: '#007AFF',
+ justifyContent: 'center',
+ alignItems: 'center',
+ marginHorizontal: 10,
+ },
+ buttonText: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ color: '#ffffff',
+ },
+ messageContainer: {
+ width: '100%',
+ },
+ messageButton: {
+ backgroundColor: '#34C759',
+ paddingVertical: 12,
+ paddingHorizontal: 20,
+ borderRadius: 8,
+ marginVertical: 5,
+ alignItems: 'center',
+ },
+ messageButtonText: {
+ color: '#ffffff',
+ fontSize: 16,
+ fontWeight: '600',
+ },
+ // Calculator Styles
+ display: {
+ fontSize: 36,
+ fontWeight: 'bold',
+ textAlign: 'right',
+ marginBottom: 20,
+ paddingHorizontal: 20,
+ color: '#333',
+ },
+ calculatorGrid: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ justifyContent: 'center',
+ marginBottom: 20,
+ },
+ calcButton: {
+ width: 70,
+ height: 70,
+ backgroundColor: '#f0f0f0',
+ justifyContent: 'center',
+ alignItems: 'center',
+ margin: 5,
+ borderRadius: 35,
+ },
+ calcButtonText: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ color: '#333',
+ },
+ clearButton: {
+ backgroundColor: '#FF3B30',
+ paddingVertical: 12,
+ paddingHorizontal: 30,
+ borderRadius: 8,
+ alignItems: 'center',
+ },
+ clearButtonText: {
+ color: '#ffffff',
+ fontSize: 16,
+ fontWeight: '600',
+ },
+})
diff --git a/apps/expo/README.md b/apps/expo/README.md
new file mode 100644
index 0000000..b174f9d
--- /dev/null
+++ b/apps/expo/README.md
@@ -0,0 +1,13 @@
+# Expo Sandbox Demo
+
+
+
+This example demonstrates the `react-native-sandbox` package working with Expo SDK 53, React Native 0.79, and React 19. It showcases how to run multiple isolated React Native instances side-by-side in an Expo environment, featuring a counter app and calculator app running in separate sandboxes with controlled communication capabilities.
+
+The demo validates that the sandbox functionality works seamlessly with Expo's managed workflow, demonstrating the library's compatibility with the latest Expo and React Native versions while maintaining complete isolation between sandbox environments.
+
+## Screenshot
+
+
+
+
-
+
+
+
\ No newline at end of file
diff --git a/apps/expo/android/app/src/main/res/drawable/rn_edit_text_material.xml b/apps/expo/android/app/src/main/res/drawable/rn_edit_text_material.xml
new file mode 100644
index 0000000..5c25e72
--- /dev/null
+++ b/apps/expo/android/app/src/main/res/drawable/rn_edit_text_material.xml
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+