From 02f393ba56d1560d86dd1a4c7e1dfa7a9bbba706 Mon Sep 17 00:00:00 2001
From: lucas <lucas-zimerman1@hotmail.com>
Date: Thu, 5 Mar 2026 16:35:57 +0000
Subject: [PATCH 1/2] add existing bundled playgroundscreen into sample app

---
 samples/react-native/src/App.tsx                 | 12 +++++++++---
 .../src/Screens/BundledPlaygroundScreen.tsx      | 16 ++++++++++++++++
 samples/react-native/src/tabs/PlaygroundTab.tsx  |  9 ++++++++-
 3 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 samples/react-native/src/Screens/BundledPlaygroundScreen.tsx

diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index 814c675965..1a7b478246 100644
--- a/samples/react-native/src/App.tsx
+++ b/samples/react-native/src/App.tsx
@@ -15,6 +15,7 @@ import { LogBox, Platform } from 'react-native';
 import * as ImagePicker from 'react-native-image-picker';
 
 import RunningIndicator from './components/RunningIndicator';
+import BundledPlaygroundScreen from './Screens/BundledPlaygroundScreen';
 import WebviewScreen from './Screens/WebviewScreen';
 import getErrorsTab from './tabs/ErrorsTab';
 import getPerformanceTab from './tabs/PerformanceTab';
@@ -69,7 +70,7 @@ Sentry.init({
   },
   logsOrigin: 'all',
   enableLogs: true,
-  beforeSendLog: (log) => {
+  beforeSendLog: log => {
     return log;
   },
   enableUserInteractionTracing: true,
@@ -105,7 +106,7 @@ Sentry.init({
           Platform.OS === 'ios' && isTurboModuleEnabled()
             ? // The global patch doesn't work on iOS with the New Architecture in this Sample app
               // In
-            false
+              false
             : true,
       }),
       Sentry.feedbackIntegration({
@@ -211,7 +212,7 @@ function BottomTabsNavigator() {
       />
       <BottomTabNavigator.Screen
         name="PlaygroundTab"
-        component={getPlaygroundTab()}
+        component={getPlaygroundTab(StackNavigator)}
         options={{
           tabBarLabel: 'Playground',
           // eslint-disable-next-line react/no-unstable-nested-components
@@ -251,6 +252,11 @@ function RootNavigationContainer() {
           component={WebviewScreen}
           options={{ headerShown: true }}
         />
+        <StackNavigator.Screen
+          name="BundledPlayground"
+          component={BundledPlaygroundScreen}
+          options={{ headerShown: true }}
+        />
       </StackNavigator.Navigator>
     </NavigationContainer>
   );
diff --git a/samples/react-native/src/Screens/BundledPlaygroundScreen.tsx b/samples/react-native/src/Screens/BundledPlaygroundScreen.tsx
new file mode 100644
index 0000000000..db08f94cb8
--- /dev/null
+++ b/samples/react-native/src/Screens/BundledPlaygroundScreen.tsx
@@ -0,0 +1,16 @@
+import { StackNavigationProp } from '@react-navigation/stack';
+import * as Sentry from '@sentry/react-native';
+import { withSentryPlayground } from '@sentry/react-native/playground';
+import { SafeAreaView } from 'react-native';
+
+interface Props {
+  navigation: StackNavigationProp<any, 'SDKPlaygroundScreen'>;
+}
+
+const BundledPlaygroundScreen = withSentryPlayground(
+  Sentry.withProfiler((_: Props) => {
+    return <SafeAreaView />;
+  }),
+);
+
+export default BundledPlaygroundScreen;
diff --git a/samples/react-native/src/tabs/PlaygroundTab.tsx b/samples/react-native/src/tabs/PlaygroundTab.tsx
index e52def83df..c45e80059a 100644
--- a/samples/react-native/src/tabs/PlaygroundTab.tsx
+++ b/samples/react-native/src/tabs/PlaygroundTab.tsx
@@ -56,7 +56,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export default function getPlaygroundTab() {
+export default function getPlaygroundTab(_Navigator: any) {
   return Sentry.withProfiler(
     (props: Props) => {
       return (
@@ -72,6 +72,13 @@ export default function getPlaygroundTab() {
                       props.navigation.navigate('Webview');
                     }}
                   />
+                  <View style={{ height: 10 }} />
+                  <Button
+                    title="Playground Integration"
+                    onPress={() => {
+                      props.navigation.navigate('BundledPlayground');
+                    }}
+                  />
                   <Text>Custom Mask:</Text>
                   <View>
                     <Sentry.Unmask>

From 99bb822ce04e2937d1714a3f7399e555f92abaab Mon Sep 17 00:00:00 2001
From: lucas <lucas-zimerman1@hotmail.com>
Date: Thu, 5 Mar 2026 16:50:54 +0000
Subject: [PATCH 2/2] nits layout

---
 samples/react-native/src/tabs/PlaygroundTab.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/samples/react-native/src/tabs/PlaygroundTab.tsx b/samples/react-native/src/tabs/PlaygroundTab.tsx
index c45e80059a..fdc1f1ad17 100644
--- a/samples/react-native/src/tabs/PlaygroundTab.tsx
+++ b/samples/react-native/src/tabs/PlaygroundTab.tsx
@@ -41,6 +41,9 @@ const styles = StyleSheet.create({
     padding: 5,
     flex: 1,
   },
+  separator: {
+    marginVertical: 8,
+  },
   image: {
     width: 200,
     height: 200,
@@ -56,7 +59,9 @@ const styles = StyleSheet.create({
   },
 });
 
-export default function getPlaygroundTab(_Navigator: any) {
+const Separator = () => <View style={styles.separator} />;
+
+export default function getPlaygroundTab() {
   return Sentry.withProfiler(
     (props: Props) => {
       return (
@@ -72,13 +77,14 @@ export default function getPlaygroundTab(_Navigator: any) {
                       props.navigation.navigate('Webview');
                     }}
                   />
-                  <View style={{ height: 10 }} />
+                  <Separator />
                   <Button
                     title="Playground Integration"
                     onPress={() => {
                       props.navigation.navigate('BundledPlayground');
                     }}
                   />
+                  <Separator />
                   <Text>Custom Mask:</Text>
                   <View>
                     <Sentry.Unmask>