Skip to content

Commit ac5486b

Browse files
alexbabrykovichalexbabrykovich
committed
chore: improve apps/recursive
1 parent 78d4024 commit ac5486b

File tree

8 files changed

+81
-115
lines changed

8 files changed

+81
-115
lines changed

‎apps/recursive/App.tsx‎

Lines changed: 74 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,160 +1,127 @@
1+
/**
2+
* Sample React Native App
3+
* https://github.com/facebook/react-native
4+
*
5+
* Generated with the TypeScript template
6+
* https://github.com/react-native-community/react-native-template-typescript
7+
*
8+
* @format
9+
*/
10+
111
import SandboxReactNativeView from '@callstack/react-native-sandbox'
12+
import {NewAppScreen} from '@react-native/new-app-screen'
213
import React from 'react'
3-
import {
4-
SafeAreaView,
5-
ScrollView,
6-
StatusBar,
7-
StyleSheet,
8-
Text,
9-
useColorScheme,
10-
View,
11-
} from 'react-native'
12-
13-
const Colors = {
14-
light: '#ffffff',
15-
lighter: '#f0f0f0',
16-
dark: '#000000',
17-
darker: '#1a1a1a',
18-
}
19-
20-
const Header = ({children}: {children: React.ReactNode}) => (
21-
<Text style={{fontSize: 24, fontWeight: 'bold', margin: 20}}>{children}</Text>
22-
)
14+
import {ScrollView, StyleSheet, Text, useColorScheme, View} from 'react-native'
2315

2416
const MAX_DEPTH = 5
2517

26-
type SectionProps = {
27-
children: React.ReactNode
28-
title: string
29-
depth: number
30-
}
31-
32-
function Section({children, title, depth}: SectionProps): React.JSX.Element {
33-
const isDarkMode = useColorScheme() === 'dark'
34-
return (
35-
<View style={styles.sectionContainer}>
36-
<Text
37-
style={[
38-
styles.sectionTitle,
39-
{
40-
color: isDarkMode ? Colors.light : Colors.dark,
41-
fontSize: 26 - depth * 3,
42-
},
43-
]}>
44-
{title}
45-
</Text>
46-
<Text
47-
style={[
48-
styles.sectionDescription,
49-
{
50-
color: isDarkMode ? Colors.light : Colors.dark,
51-
fontSize: 20 - depth * 3,
52-
},
53-
]}>
54-
{children}
55-
</Text>
56-
</View>
57-
)
58-
}
59-
6018
interface AppProps {
6119
depth?: number
6220
}
6321

64-
function App({depth = 1}: AppProps): React.JSX.Element {
22+
const App = ({depth = 1}: AppProps) => {
6523
const isDarkMode = useColorScheme() === 'dark'
6624

6725
const backgroundStyle = {
68-
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
26+
backgroundColor: isDarkMode ? '#000000' : '#ffffff',
6927
}
7028

71-
const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF']
72-
const borderColor = colors[depth - 1] || 'gray'
73-
7429
return (
75-
<SafeAreaView style={backgroundStyle}>
76-
<StatusBar
77-
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
78-
backgroundColor={backgroundStyle.backgroundColor}
79-
/>
30+
<View style={backgroundStyle}>
8031
<ScrollView
8132
contentInsetAdjustmentBehavior="automatic"
8233
style={backgroundStyle}>
83-
<Header>React Native Multi-Instance</Header>
84-
<View
85-
style={[
86-
{
87-
backgroundColor: isDarkMode ? Colors.dark : Colors.light,
88-
borderColor: borderColor,
89-
},
90-
depth > 1 && styles.nestedContainer,
91-
]}>
92-
<Section title={`Recursive Sandbox (Depth: ${depth})`} depth={depth}>
93-
This is a nested React Native instance.
94-
</Section>
34+
<Text style={styles.scrollHint}>👇👇 Scroll to the bottom 👇👇</Text>
35+
36+
<NewAppScreen templateFileName="App.tsx" />
37+
38+
<View style={styles.recursiveSection}>
9539
{depth < MAX_DEPTH ? (
9640
<View style={styles.recursiveSandboxContainer}>
9741
<Text style={styles.recursiveSandboxTitle}>
9842
Next Level (Depth: {depth + 1})
9943
</Text>
10044
<SandboxReactNativeView
10145
style={styles.recursiveSandbox}
102-
jsBundleSource="index" // bundle name for query from metro
103-
componentName="App" // Recursively load App component from index.js
46+
jsBundleSource="index"
47+
componentName="App"
10448
initialProperties={{depth: depth + 1}}
105-
onMessage={msg => console.log('message', msg)}
106-
onError={e => console.error('error', e)}
49+
onMessage={(msg: any) => console.log('message', msg)}
50+
onError={(e: any) => console.error('error', e)}
10751
/>
10852
</View>
10953
) : (
110-
<Section title="Max Depth Reached!" depth={depth}>
111-
No more nested instances will be created.
112-
</Section>
54+
<View style={styles.maxDepthContainer}>
55+
<Text
56+
style={[
57+
styles.maxDepthTitle,
58+
{color: isDarkMode ? '#ffffff' : '#000000'},
59+
]}>
60+
Max Depth Reached!
61+
</Text>
62+
<Text
63+
style={[
64+
styles.maxDepthDescription,
65+
{color: isDarkMode ? '#cccccc' : '#666666'},
66+
]}>
67+
No more nested instances will be created. This demonstrates the
68+
full capability of nested React Native instances.
69+
</Text>
70+
</View>
11371
)}
11472
</View>
11573
</ScrollView>
116-
</SafeAreaView>
74+
</View>
11775
)
11876
}
11977

12078
const styles = StyleSheet.create({
121-
sectionContainer: {
122-
marginTop: 32,
123-
paddingHorizontal: 24,
124-
},
125-
sectionTitle: {
126-
fontWeight: '600',
127-
},
128-
sectionDescription: {
129-
marginTop: 8,
130-
fontWeight: '400',
131-
},
132-
highlight: {
133-
fontWeight: '700',
79+
scrollHint: {
80+
padding: 20,
81+
textAlign: 'center',
82+
fontSize: 22,
83+
backgroundColor: '#f3f3f3',
13484
},
135-
nestedContainer: {
136-
borderWidth: 2,
137-
margin: 5,
138-
padding: 5,
85+
recursiveSection: {
86+
paddingHorizontal: 24,
87+
backgroundColor: '#f3f3f3',
88+
paddingBottom: 24,
89+
marginTop: -34,
13990
},
14091
recursiveSandboxContainer: {
141-
marginTop: 20,
14292
height: 500,
14393
borderWidth: 1,
144-
borderColor: 'gray',
145-
marginHorizontal: 24,
146-
marginBottom: 20,
94+
borderColor: '#cccccc',
95+
borderRadius: 8,
96+
overflow: 'hidden',
14797
},
14898
recursiveSandboxTitle: {
14999
fontSize: 16,
150100
fontWeight: 'bold',
151101
textAlign: 'center',
152-
padding: 10,
153-
color: 'black',
102+
padding: 12,
103+
backgroundColor: '#f8f9fa',
104+
color: '#000000',
154105
},
155106
recursiveSandbox: {
156107
flex: 1,
157108
},
109+
maxDepthContainer: {
110+
padding: 20,
111+
backgroundColor: '#f8f9fa',
112+
borderRadius: 8,
113+
borderWidth: 1,
114+
borderColor: '#e9ecef',
115+
},
116+
maxDepthTitle: {
117+
fontSize: 20,
118+
fontWeight: 'bold',
119+
marginBottom: 8,
120+
},
121+
maxDepthDescription: {
122+
fontSize: 14,
123+
lineHeight: 20,
124+
},
158125
})
159126

160127
export default App

‎apps/recursive/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@
55
This example demonstrates the capability of `react-native-sandbox` to create and manage nested React Native instances. The application recursively renders `SandboxReactNativeView` components, each encapsulating another instance of the same application, up to a predefined maximum depth.
66

77
<div align="center">
8-
<img src="./docs/screenshot.png" width="240" />
8+
<img src="./docs/screenshot_1.png" width="240" />
9+
<img src="./docs/screenshot_2.png" width="240" />
910
</div>

‎apps/recursive/docs/screenshot.png‎

-385 KB
Binary file not shown.

‎apps/recursive/docs/screenshot_1.png‎

249 KB
Loading

‎apps/recursive/docs/screenshot_2.png‎

239 KB
Loading

‎apps/recursive/ios/Podfile.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2019,7 +2019,7 @@ PODS:
20192019
- React-timing
20202020
- React-utils
20212021
- SocketRocket
2022-
- React-Sandbox (0.2.0):
2022+
- React-Sandbox (0.4.0):
20232023
- boost
20242024
- DoubleConversion
20252025
- fast_float
@@ -2451,7 +2451,7 @@ SPEC CHECKSUMS:
24512451
React-runtimeexecutor: 17c70842d5e611130cb66f91e247bc4a609c3508
24522452
React-RuntimeHermes: 3c88e6e1ea7ea0899dcffc77c10d61ea46688cfd
24532453
React-runtimescheduler: 024500621c7c93d65371498abb4ee26d34f5d47d
2454-
React-Sandbox: 789583cf1f6db8c2bf95e54125aef4314fe9d8ca
2454+
React-Sandbox: e3cf3c955559ed9f0bf014b29dce1e94600cd790
24552455
React-timing: c3c923df2b86194e1682e01167717481232f1dc7
24562456
React-utils: 9154a037543147e1c24098f1a48fc8472602c092
24572457
ReactAppDependencyProvider: afd905e84ee36e1678016ae04d7370c75ed539be

‎apps/recursive/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@
1010
"jest": "echo 'No tests'"
1111
},
1212
"dependencies": {
13+
"@callstack/react-native-sandbox": "workspace:*",
14+
"@react-native/new-app-screen": "^0.80.2",
1315
"react": "19.1.0",
14-
"react-native": "0.80.1",
15-
"@callstack/react-native-sandbox": "workspace:*"
16+
"react-native": "0.80.1"
1617
},
1718
"devDependencies": {
1819
"@babel/core": "^7.25.2",

‎bun.lock‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,6 @@
140140
"@react-native/new-app-screen": "^0.80.2",
141141
"react": "19.1.0",
142142
"react-native": "0.80.1",
143-
"react-native-linear-gradient": "^2.8.3",
144143
},
145144
"devDependencies": {
146145
"@babel/core": "^7.25.2",
@@ -2223,8 +2222,6 @@
22232222

22242223
"react-native-is-edge-to-edge": ["react-native-is-edge-to-edge@1.1.7", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-EH6i7E8epJGIcu7KpfXYXiV2JFIYITtq+rVS8uEb+92naMRBdxhTuS8Wn2Q7j9sqyO0B+Xbaaf9VdipIAmGW4w=="],
22252224

2226-
"react-native-linear-gradient": ["react-native-linear-gradient@2.8.3", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA=="],
2227-
22282225
"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=="],
22292226

22302227
"react-native-toast-message": ["react-native-toast-message@2.3.3", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-4IIUHwUPvKHu4gjD0Vj2aGQzqPATiblL1ey8tOqsxOWRPGGu52iIbL8M/mCz4uyqecvPdIcMY38AfwRuUADfQQ=="],

0 commit comments

Comments
 (0)