[MOB-19693] Update sample app/core

examples/default/src/components/VerticalListTile.tsx

@@ -17,6 +17,7 @@ export const VerticalListTile: React.FC<ListTileProps> = ({ title, onPress, chil
       borderBottomWidth="1"
       borderColor="coolGray.300"
       bg="coolGray.100"
+      accessible={false}
       _pressed={{ bg: 'coolGray.200' }}>
       <VStack justifyContent="stretch">
         <Text>{title}</Text>

examples/default/src/screens/CallbackHandlersScreen.tsx

@@ -1,46 +1,45 @@
-import React from 'react';
-import { View, Text, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
-import { useCallbackHandlers } from '../contexts/callbackContext';
-import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import React from "react";
+import {
+  View,
+  Text,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+import { useCallbackHandlers } from "../contexts/callbackContext";
+import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
 
 type CallBackScreenProps = { title: string };
 
+const TAB_TITLES = [
+  "Invoke Handler",
+  "onSDKDismissedHandler",
+  "onReportSubmitHandler",
+  "Network Obfuscated",
+  "sync callback",
+  "session replay link",
+  "on crash report",
+];
+
 const CallbackScreen: React.FC = () => {
-  const { callbackHandlers } = useCallbackHandlers();
-  const titles = Object.keys(callbackHandlers);
   const Tab = createMaterialTopTabNavigator();
 
   return (
     <Tab.Navigator
       screenOptions={{
         tabBarScrollEnabled: true,
-        tabBarActiveTintColor: 'black',
-        tabBarInactiveTintColor: 'gray',
-        tabBarLabelStyle: { fontWeight: 'bold', fontSize: 14 },
-        tabBarStyle: { backgroundColor: 'white' },
-        tabBarIndicatorStyle: { backgroundColor: 'black', height: 3 },
-      }}>
-      {titles.length > 0 ? (
-        titles.map((title) => (
-          <Tab.Screen key={title} name={title}>
-            {() => <CallBackTabScreen title={title} />}
-          </Tab.Screen>
-        ))
-      ) : (
-        <Tab.Screen
-          name="No Data"
-          options={{
-            tabBarLabel: () => (
-              <Text style={{ color: 'black', fontWeight: 'bold', fontSize: 14 }}>No Data</Text>
-            ),
-          }}>
-          {() => (
-            <View style={styles.emptyContainer}>
-              <Text style={styles.emptyText}>No callback handlers yet</Text>
-            </View>
-          )}
+        tabBarActiveTintColor: "black",
+        tabBarInactiveTintColor: "gray",
+        tabBarLabelStyle: { fontWeight: "bold", fontSize: 14 },
+        tabBarStyle: { backgroundColor: "white" },
+        tabBarIndicatorStyle: { backgroundColor: "black", height: 3 },
+      }}
+    >
+      {TAB_TITLES.map((title) => (
+        <Tab.Screen key={title} name={title}>
+          {() => <CallBackTabScreen title={title} />}
         </Tab.Screen>
-      )}
+      ))}
     </Tab.Navigator>
   );
 };
@@ -53,9 +52,14 @@ const CallBackTabScreen: React.FC<CallBackScreenProps> = ({ title }) => {
     <View style={styles.container}>
       <View style={styles.header}>
         <Text style={styles.countText}>Items: {items.length}</Text>
-        <TouchableOpacity style={styles.clearButton} onPress={() => clearList(title)}>
-          <Text style={styles.clearText}>Clear Data</Text>
-        </TouchableOpacity>
+        {items.length > 0 && (
+          <TouchableOpacity
+            style={styles.clearButton}
+            onPress={() => clearList(title)}
+          >
+            <Text style={styles.clearText}>Clear Data</Text>
+          </TouchableOpacity>
+        )}
       </View>
 
       <FlatList
@@ -66,7 +70,7 @@ const CallBackTabScreen: React.FC<CallBackScreenProps> = ({ title }) => {
             {item.fields.map((field, idx) => (
               <View key={idx} style={styles.fieldRow}>
                 <Text style={styles.keyText}>{field.key}:</Text>
-                <Text style={styles.valueText}>{field.value}</Text>
+                <Text style={styles.valueText} testID={`field_value_${field.key}`}  >{field.value}</Text>
               </View>
             ))}
           </View>
@@ -80,30 +84,30 @@ const CallBackTabScreen: React.FC<CallBackScreenProps> = ({ title }) => {
 export default CallbackScreen;
 
 const styles = StyleSheet.create({
-  container: { flex: 1, padding: 16, backgroundColor: '#fff' },
+  container: { flex: 1, padding: 16, backgroundColor: "#fff" },
   header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
     marginBottom: 10,
   },
-  countText: { fontSize: 16, fontWeight: 'bold' },
-  clearButton: { backgroundColor: '#ff5555', padding: 8, borderRadius: 8 },
-  clearText: { color: '#fff', fontWeight: 'bold' },
+  countText: { fontSize: 16, fontWeight: "bold" },
+  clearButton: { backgroundColor: "#ff5555", padding: 8, borderRadius: 8 },
+  clearText: { color: "#fff", fontWeight: "bold" },
   item: {
     padding: 12,
-    backgroundColor: '#f0f0f0',
+    backgroundColor: "#f0f0f0",
     borderRadius: 6,
     marginBottom: 8,
   },
   fieldRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+    flexDirection: "row",
+    justifyContent: "space-between",
     marginBottom: 4,
   },
-  keyText: { fontWeight: 'bold', color: '#333' },
-  valueText: { color: '#555', marginLeft: 8 },
-  empty: { textAlign: 'center', color: '#888', marginTop: 20 },
-  emptyContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
-  emptyText: { fontSize: 16, color: '#888' },
+  keyText: { fontWeight: "bold", color: "#333" },
+  valueText: { color: "#555", marginLeft: 8 },
+  empty: { textAlign: "center", color: "#888", marginTop: 20 },
+  emptyContainer: { flex: 1, justifyContent: "center", alignItems: "center" },
+  emptyText: { fontSize: 16, color: "#888" },
 });

examples/default/src/screens/HomeScreen.tsx

@@ -20,7 +20,6 @@ export const HomeScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'Ho
       <ListTile title="APM" onPress={() => navigation.navigate('APM')} />
       <ListTile title="Session Replay" onPress={() => navigation.navigate('SessionReplay')} />
       <ListTile title="Legacy Mode" onPress={() => navigation.navigate('LegacyMode')} />
-      <ListTile title="Callback Handler" onPress={() => navigation.navigate('CallbackScreen')} />
     </Screen>
   );
 };

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

@@ -29,6 +29,31 @@ export const HttpScreen: React.FC = () => {
       showNotification('Error', 'Failed');
     }
   };
+  const makeGetCallWithTrace = async () => {
+    setLoading(true);
+    const url = 'https://httpbin.org/anything';
+    try {
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'traceparent': 'non-ibg-trace-value',
+          'tracestate': 'non-ibg=value',
+        },
+      });
+
+      const responseBody = await response.json();
+      console.log('Response with trace headers:', responseBody);
+
+      setLoading(false);
+      showNotification('Success', 'Succeeded with trace');
+    } catch (error) {
+      console.error('Error with trace call:', error);
+      setLoading(false);
+      showNotification('Error', 'Failed with trace');
+    }
+  };
+
 
   const makePostCall = async () => {
     setLoading(true);
@@ -157,6 +182,7 @@ export const HttpScreen: React.FC = () => {
     <Screen>
       {loading && <ActivityIndicator size="large" color="#0000ff" />}
       <ListTile title="GET" onPress={makeGetCall} testID="http_get_request" />
+      <ListTile title="GET with trace" onPress={makeGetCallWithTrace} testID="http_get_with_trace_request" />
       <ListTile title="POST" onPress={makePostCall} testID="http_post_request" />
       <ListTile title="DELETE" onPress={makeDeleteCall} testID="http_delete_request" />
       <ListTile title="PUT" onPress={makePutCall} testID="http_put_request" />

examples/default/src/screens/bug-reporting/BugReportingScreen.tsx

@@ -280,7 +280,8 @@ export const BugReportingScreen: React.FC<
 
                 addItem('Invoke Handler', {
                   id: `event-${Math.random()}`,
-                  fields: [{ key: 'Date', value: new Date().toLocaleString() }],
+                  fields: [{ key: 'Date', value: new Date().toLocaleString() }, { key: 'status value', value: 'triggered' },
+                  ],
                 });
               })
             }
@@ -309,13 +310,18 @@ export const BugReportingScreen: React.FC<
             testID="enable_on_dismiss_handler"
             title="Enable on Did-Dismiss Callback Handler"
             onPress={() =>
-              BugReporting.onSDKDismissedHandler(function () {
+              BugReporting.onSDKDismissedHandler(function (dismissType, reportType) {
                 toast.show({
                   description: 'onSDKDismissedHandler Callback Handler',
                 });
                 addItem('onSDKDismissedHandler', {
                   id: `event-${Math.random()}`,
-                  fields: [{ key: 'Date', value: new Date().toLocaleString() }],
+                  fields: [{ key: 'Date', value: new Date().toLocaleString() },
+                    { key: 'issue type', value: dismissType.toString()},
+                    { key: 'report type', value: reportType.toString()},
+                    { key: 'status value', value: 'triggered'},
+
+                  ],
                 });
               })
             }
@@ -341,6 +347,7 @@ export const BugReportingScreen: React.FC<
               })
             }
           />
+          <ListTile title="Callback Handler" onPress={() => navigation.navigate('CallbackScreen')} />
         </Section>
       </Screen>
     </ScrollView>