feat(example): add webviews to the sample app (#1310)

* Adding WebViews to sample app

* Fixing Pods issue

* Fixing CI

Author: YoussefFouadd

examples/default/ios/Podfile.lock

@@ -1319,6 +1319,27 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-webview (13.12.3):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - React-nativeconfig (0.75.4)
   - React-NativeModulesApple (0.75.4):
     - glog
@@ -1786,6 +1807,7 @@ DEPENDENCIES:
   - react-native-maps (from `../node_modules/react-native-maps`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
+  - react-native-webview (from `../node_modules/react-native-webview`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -1915,6 +1937,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-slider:
     :path: "../node_modules/@react-native-community/slider"
+  react-native-webview:
+    :path: "../node_modules/react-native-webview"
   React-nativeconfig:
     :path: "../node_modules/react-native/ReactCommon"
   React-NativeModulesApple:
@@ -2031,6 +2055,7 @@ SPEC CHECKSUMS:
   react-native-maps: 72a8a903f8a1b53e2c777ba79102078ab502e0bf
   react-native-safe-area-context: 142fade490cbebbe428640b8cbdb09daf17e8191
   react-native-slider: 4a0f3386a38fc3d2d955efc515aef7096f7d1ee4
+  react-native-webview: 926d2665cf3196e39c4449a72d136d0a53b9df8a
   React-nativeconfig: 8c83d992b9cc7d75b5abe262069eaeea4349f794
   React-NativeModulesApple: 9f7920224a3b0c7d04d77990067ded14cee3c614
   React-perflogger: 59e1a3182dca2cee7b9f1f7aab204018d46d1914

examples/default/package.json

@@ -32,6 +32,7 @@
     "react-native-screens": "^3.35.0",
     "react-native-svg": "^15.8.0",
     "react-native-vector-icons": "^10.2.0",
+    "react-native-webview": "^13.12.3",
     "react-query": "^3.39.3"
   },
   "devDependencies": {

examples/default/src/navigation/HomeStack.tsx

@@ -28,6 +28,9 @@ import { FlowsScreen } from '../screens/apm/FlowsScreen';
 import { SessionReplayScreen } from '../screens/SessionReplayScreen';
 import { LegacyModeScreen } from '../screens/LegacyModeScreen';
 import { HttpScreen } from '../screens/apm/HttpScreen';
+import { WebViewsScreen } from '../screens/apm/webViews/WebViewsScreen';
+import { FullWebViewsScreen } from '../screens/apm/webViews/FullWebViewsScreen';
+import { PartialWebViewsScreen } from '../screens/apm/webViews/PartialWebViewsScreen';
 
 export type HomeStackParamList = {
   Home: undefined;
@@ -55,6 +58,9 @@ export type HomeStackParamList = {
   NetworkTraces: undefined;
   ExecutionTraces: undefined;
   AppFlows: undefined;
+  WebViews: undefined;
+  FullWebViews: undefined;
+  PartialWebViews: undefined;
 };
 
 const HomeStack = createNativeStackNavigator<HomeStackParamList>();
@@ -142,6 +148,21 @@ export const HomeStackNavigator: React.FC = () => {
         options={{ title: 'LegacyMode' }}
       />
       <HomeStack.Screen name="HttpScreen" component={HttpScreen} options={{ title: 'HTTP' }} />
+      <HomeStack.Screen
+        name="WebViews"
+        component={WebViewsScreen}
+        options={{ title: 'WebViews' }}
+      />
+      <HomeStack.Screen
+        name="FullWebViews"
+        component={FullWebViewsScreen}
+        options={{ title: 'FullWebViews' }}
+      />
+      <HomeStack.Screen
+        name="PartialWebViews"
+        component={PartialWebViewsScreen}
+        options={{ title: 'PartialWebViews' }}
+      />
     </HomeStack.Navigator>
   );
 };

examples/default/src/screens/apm/APMScreen.tsx

@@ -26,6 +26,7 @@ export const APMScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'APM
       <ListTile title="Network Screen" onPress={() => navigation.navigate('NetworkTraces')} />
       <ListTile title="Traces" onPress={() => navigation.navigate('ExecutionTraces')} />
       <ListTile title="Flows" onPress={() => navigation.navigate('AppFlows')} />
+      <ListTile title="WebViews" onPress={() => navigation.navigate('WebViews')} />
     </Screen>
   );
 };

examples/default/src/screens/apm/webViews/FullWebViewsScreen.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Screen } from '../../../components/Screen';
+import { WebView } from 'react-native-webview';
+
+export const FullWebViewsScreen: React.FC = () => {
+  return (
+    <Screen>
+      <WebView
+        source={{ uri: 'https://www.instabug.com' }}
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+      />
+    </Screen>
+  );
+};

examples/default/src/screens/apm/webViews/PartialWebViewsScreen.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Screen } from '../../../components/Screen';
+import { WebView } from 'react-native-webview';
+import { StyleSheet } from 'react-native';
+
+export const PartialWebViewsScreen: React.FC = () => {
+  return (
+    <Screen>
+      <WebView
+        style={styles.webView}
+        source={{ uri: 'https://www.instabug.com' }}
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+      />
+      <WebView
+        source={{ uri: 'https://www.google.com' }}
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+      />
+    </Screen>
+  );
+};
+const styles = StyleSheet.create({
+  webView: {
+    marginBottom: 20,
+  },
+});

examples/default/src/screens/apm/webViews/WebViewsScreen.tsx

@@ -0,0 +1,16 @@
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import type { HomeStackParamList } from '../../../navigation/HomeStack';
+import React from 'react';
+import { Screen } from '../../../components/Screen';
+import { ListTile } from '../../../components/ListTile';
+
+export const WebViewsScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'WebViews'>> = ({
+  navigation,
+}) => {
+  return (
+    <Screen>
+      <ListTile title="Full Web View" onPress={() => navigation.navigate('FullWebViews')} />
+      <ListTile title="Partial Web View" onPress={() => navigation.navigate('PartialWebViews')} />
+    </Screen>
+  );
+};

examples/default/yarn.lock

@@ -4427,7 +4427,7 @@ intl-messageformat@^10.1.0:
     "@formatjs/icu-messageformat-parser" "2.9.1"
     tslib "2"
 
-invariant@^2.2.4:
+invariant@2.2.4, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -6329,6 +6329,14 @@ react-native-vector-icons@^10.2.0:
     prop-types "^15.7.2"
     yargs "^16.1.1"
 
+react-native-webview@^13.12.3:
+  version "13.12.3"
+  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-13.12.3.tgz#3aa9d2fc982ba2681e56d3e96e22b63a0d929270"
+  integrity sha512-Y1I5YyDYyE7NC96RHLhd2nxh7ymLYOYLTefgx5ixxw2OToQK0ow3OJ+o77QcI1Tuevj5PCxwqC/14ceS/7yPJQ==
+  dependencies:
+    escape-string-regexp "^4.0.0"
+    invariant "2.2.4"
+
 [email protected]:
   version "0.75.4"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.75.4.tgz#40fc337b9c005521b5b7e039481bc4d444b009a9"