feat(sample): Add react-native-webview

getsentry · Oct 29, 2024 · d537071 · d537071
1 parent 4297324
commit d537071
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 19 deletions.
diff --git a/samples/react-native/package.json b/samples/react-native/package.json
@@ -35,6 +35,7 @@
     "react-native-screens": "3.34.0",
     "react-native-svg": "^15.6.0",
     "react-native-vector-icons": "^10.0.3",
+    "react-native-webview": "^13.12.3",
     "react-redux": "^8.1.3",
     "redux": "^4.2.1"
   },

diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
@@ -34,6 +34,7 @@ import PlaygroundScreen from './Screens/PlaygroundScreen';
 import { logWithoutTracing } from './utils';
 import { ErrorEvent } from '@sentry/types';
 import HeavyNavigationScreen from './Screens/HeavyNavigationScreen';
+import WebviewScreen from './Screens/WebviewScreen';
 
 LogBox.ignoreAllLogs();
 const isMobileOs = Platform.OS === 'android' || Platform.OS === 'ios';
@@ -85,7 +86,7 @@ Sentry.init({
       Sentry.mobileReplayIntegration({
         maskAllImages: true,
         maskAllVectors: true,
-        // maskAllText: false,
+        maskAllText: true,
       }),
       Sentry.appStartIntegration({
         standalone: false,
@@ -113,7 +114,7 @@ Sentry.init({
   // dist: `1`,
   profilesSampleRate: 1.0,
   _experiments: {
-    // replaysSessionSampleRate: 1.0,
+    replaysSessionSampleRate: 1.0,
     replaysOnErrorSampleRate: 1.0,
   },
   spotlight: true,
@@ -127,7 +128,7 @@ const Stack = isMobileOs
   : createStackNavigator();
 const Tab = createBottomTabNavigator();
 
-const TabOneStack = Sentry.withProfiler(
+const ErrorsTabNavigator = Sentry.withProfiler(
   () => {
     return (
       <GestureHandlerRootView style={styles.wrapper}>
@@ -146,7 +147,7 @@ const TabOneStack = Sentry.withProfiler(
   { name: 'ErrorsTab' },
 );
 
-const TabTwoStack = Sentry.withProfiler(
+const PerformanceTabNavigator = Sentry.withProfiler(
   () => {
     return (
       <GestureHandlerRootView style={styles.wrapper}>
@@ -180,15 +181,8 @@ const TabTwoStack = Sentry.withProfiler(
   { name: 'PerformanceTab' },
 );
 
-function BottomTabs() {
-  const navigation = React.useRef<NavigationContainerRef<{}>>(null);
-
+function BottomTabsNavigator() {
   return (
-    <NavigationContainer
-      ref={navigation}
-      onReady={() => {
-        reactNavigationIntegration.registerNavigationContainer(navigation);
-      }}>
       <Tab.Navigator
         screenOptions={{
           headerShown: false,
@@ -197,9 +191,10 @@ function BottomTabs() {
       >
         <Tab.Screen
           name="ErrorsTab"
-          component={TabOneStack}
+          component={ErrorsTabNavigator}
           options={{
             tabBarLabel: 'Errors',
+            // eslint-disable-next-line react/no-unstable-nested-components
             tabBarIcon: ({ focused, color, size }) => (
               <Ionicons
                 name={focused ? 'bug' : 'bug-outline'}
@@ -211,9 +206,10 @@ function BottomTabs() {
         />
         <Tab.Screen
           name="PerformanceTab"
-          component={TabTwoStack}
+          component={PerformanceTabNavigator}
           options={{
             tabBarLabel: 'Performance',
+            // eslint-disable-next-line react/no-unstable-nested-components
             tabBarIcon: ({ focused, color, size }) => (
               <Ionicons
                 name={focused ? 'speedometer' : 'speedometer-outline'}
@@ -228,6 +224,7 @@ function BottomTabs() {
           component={PlaygroundScreen}
           options={{
             tabBarLabel: 'Playground',
+            // eslint-disable-next-line react/no-unstable-nested-components
             tabBarIcon: ({ focused, color, size }) => (
               <Ionicons
                 name={
@@ -240,11 +237,38 @@ function BottomTabs() {
           }}
         />
       </Tab.Navigator>
-      <RunningIndicator />
+  );
+}
+
+function RootNavigationContainer() {
+  const navigation = React.useRef<NavigationContainerRef<{}>>(null);
+
+  return (
+    <NavigationContainer
+      ref={navigation}
+      onReady={() => {
+        reactNavigationIntegration.registerNavigationContainer(navigation);
+      }}>
+      <Stack.Navigator
+        screenOptions={{
+          headerShown: false,
+        }}>
+        <Stack.Screen name="BottomTabs" component={BottomTabsNavigator} />
+        <Stack.Screen name="Webview" component={WebviewScreen} options={{ headerShown: true }} />
+      </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
+function App() {
+  return (
+    <>
+      <RootNavigationContainer />
+      <RunningIndicator />
+    </>
+  );
+}
+
 function RunningIndicator() {
   if (Platform.OS !== 'android' && Platform.OS !== 'ios') {
     return null;
@@ -295,4 +319,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Sentry.wrap(BottomTabs);
+export default Sentry.wrap(App);
diff --git a/samples/react-native/src/Screens/PlaygroundScreen.tsx b/samples/react-native/src/Screens/PlaygroundScreen.tsx
@@ -12,8 +12,10 @@ import {
   ScrollView,
   SafeAreaView,
   Pressable,
+  Button,
 } from 'react-native';
 import SvgGraphic from '../components/SvgGraphic';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 const multilineText = `This
 is
@@ -23,13 +25,23 @@ input
 text
 `;
 
-const PlaygroundScreen = () => {
+interface Props {
+  navigation: StackNavigationProp<any, 'PlaygroundScreen'>;
+}
+
+const PlaygroundScreen = (props: Props) => {
   return (
     <SafeAreaView style={styles.container}>
       <KeyboardAvoidingView behavior={'padding'} style={styles.container}>
         <ScrollView>
           <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
             <View style={styles.container}>
+              <Button
+                title="Webview Example"
+                onPress={() => {
+                  props.navigation.navigate('Webview');
+                }}
+              />
               <Text>Text:</Text>
               <Text>{'This is <Text>'}</Text>
               <View style={styles.space} />
@@ -80,7 +92,7 @@ export default PlaygroundScreen;
 
 const styles = StyleSheet.create({
   space: {
-    marginBottom: 50,
+    paddingBottom: 50,
   },
   container: {
     padding: 5,

diff --git a/samples/react-native/src/Screens/WebviewScreen.tsx b/samples/react-native/src/Screens/WebviewScreen.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { WebView } from 'react-native-webview';
+
+const WebviewScreen = () => {
+  return (
+    <WebView
+      source={{ uri: 'https://sentry.io' }}
+      style={styles.webview}
+    />
+  );
+};
+
+export default WebviewScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  webview: {
+    flex: 1,
+  },
+});
diff --git a/yarn.lock b/yarn.lock
@@ -15049,7 +15049,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"invariant@npm:^2.2.2, invariant@npm:^2.2.4":
+"invariant@npm:2.2.4, invariant@npm:^2.2.2, invariant@npm:^2.2.4":
   version: 2.2.4
   resolution: "invariant@npm:2.2.4"
   dependencies:
@@ -21386,6 +21386,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-webview@npm:^13.12.3":
+  version: 13.12.3
+  resolution: "react-native-webview@npm:13.12.3"
+  dependencies:
+    escape-string-regexp: ^4.0.0
+    invariant: 2.2.4
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 94d824fedc6b5c0402926b99a96f71f4752416e4f038be827552015c0bf6d595d71ba656079618402662aec5e2c539018b0bff2906b6f95261f70893e5dd5d80
+  languageName: node
+  linkType: hard
+
 "react-native@npm:0.70.6":
   version: 0.70.6
   resolution: "react-native@npm:0.70.6"
@@ -22812,6 +22825,7 @@ __metadata:
     react-native-screens: 3.34.0
     react-native-svg: ^15.6.0
     react-native-vector-icons: ^10.0.3
+    react-native-webview: ^13.12.3
     react-redux: ^8.1.3
     react-test-renderer: 18.3.1
     redux: ^4.2.1