add new scenarios

Author: ahmedAlaaInstabug

examples/default/package.json

@@ -14,6 +14,7 @@
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native-community/slider": "^4.5.5",
     "@react-navigation/bottom-tabs": "^6.5.7",
+    "@react-navigation/material-top-tabs": "6.5.3",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
     "axios": "^1.7.4",
@@ -28,10 +29,12 @@
     "react-native-config": "^1.5.3",
     "react-native-gesture-handler": "^2.13.4",
     "react-native-maps": "1.10.3",
+    "react-native-pager-view": "^6.9.1",
     "react-native-reanimated": "^3.16.1",
     "react-native-safe-area-context": "^4.12.0",
     "react-native-screens": "^3.35.0",
     "react-native-svg": "^15.8.0",
+    "react-native-tab-view": "^3.5.2",
     "react-native-vector-icons": "^10.2.0",
     "react-native-webview": "^13.13.2",
     "react-query": "^3.39.3"

examples/default/src/App.tsx

@@ -21,6 +21,7 @@ import { nativeBaseTheme } from './theme/nativeBaseTheme';
 import { navigationTheme } from './theme/navigationTheme';
 
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { CallbackHandlersProvider } from './contexts/callbackContext';
 
 const queryClient = new QueryClient();
 
@@ -89,7 +90,9 @@ export const App: React.FC = () => {
       <NativeBaseProvider theme={nativeBaseTheme}>
         <QueryClientProvider client={queryClient}>
           <NavigationContainer onStateChange={Instabug.onStateChange} theme={navigationTheme}>
-            <RootTabNavigator />
+            <CallbackHandlersProvider>
+              <RootTabNavigator />
+            </CallbackHandlersProvider>
           </NavigationContainer>
         </QueryClientProvider>
       </NativeBaseProvider>

examples/default/src/contexts/callbackContext.tsx

@@ -0,0 +1,56 @@
+import React, { createContext, useContext, useState } from 'react';
+
+// A single key/value pair
+export type KeyValuePair = { key: string; value: string };
+
+// An item that contains multiple key/value pairs
+export type Item = {
+  id: string;
+  fields: KeyValuePair[]; // list of key/value pairs
+};
+
+// CallbackHandlersType = { [title: string]: Item[] }
+export type CallbackHandlersType = Record<string, Item[]>;
+
+type CallbackHandlersContextType = {
+  callbackHandlers: CallbackHandlersType;
+  clearList: (title: string) => void;
+  addItem: (title: string, item: Item) => void;
+};
+
+const CallbackHandlersContext = createContext<CallbackHandlersContextType | undefined>(undefined);
+
+export const CallbackHandlersProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [callbackHandlers, setCallbackHandlers] = useState<CallbackHandlersType>({});
+
+  // Clears all items under a specific title
+  const clearList = (title: string) => {
+    setCallbackHandlers((prev) => ({ ...prev, [title]: [] }));
+  };
+
+  // Adds an item (with multiple key/value pairs) to a specific title list
+  const addItem = (title: string, item: Item) => {
+    setCallbackHandlers((prev) => {
+      const existingList = prev[title] || [];
+      return {
+        ...prev,
+        [title]: [...existingList, item],
+      };
+    });
+  };
+
+  return (
+    <CallbackHandlersContext.Provider value={{ callbackHandlers, clearList, addItem }}>
+      {children}
+    </CallbackHandlersContext.Provider>
+  );
+};
+
+// Hook to use the context
+export const useCallbackHandlers = () => {
+  const ctx = useContext(CallbackHandlersContext);
+  if (!ctx) {
+    throw new Error('useCallbackHandlers must be used within CallbackHandlersProvider');
+  }
+  return ctx;
+};

examples/default/src/navigation/HomeStack.tsx

@@ -56,7 +56,7 @@ import { GoogleMapsScreen } from '../screens/user-steps/GoogleMapsScreen';
 import { LargeImageListScreen } from '../screens/user-steps/LargeImageListScreen';
 import { APMScreen } from '../screens/apm/APMScreen';
 import { TracesScreen } from '../screens/apm/TracesScreen';
-import { NetworkScreen } from '../screens/apm/NetworkScreen';
+import { NetworkScreen } from '../screens/apm/network/NetworkScreen';
 import { FlowsScreen } from '../screens/apm/FlowsScreen';
 import { SessionReplayScreen } from '../screens/SessionReplayScreen';
 import { LegacyModeScreen } from '../screens/LegacyModeScreen';
@@ -78,6 +78,15 @@ import {
 } from '../screens/crash-reporting/NDKCrashesStateScreen';
 import { NonFatalCrashesScreen } from '../screens/crash-reporting/NonFatalCrashesScreen';
 import { FatalCrashesScreen } from '../screens/crash-reporting/FatalCrashesScreen';
+import CallbackScreen from '../screens/CallbackHandlersScreen';
+import {
+  NetworkStateScreen,
+  type NetworkStateScreenProp,
+} from '../screens/apm/network/NetworkStateScreen';
+import {
+  UserStepsStateScreen,
+  type UserStepsStateScreenProp,
+} from '../screens/settings/UserStepsStateScreen';
 
 export type HomeStackParamList = {
   Home: undefined;
@@ -127,6 +136,10 @@ export type HomeStackParamList = {
   WebViews: undefined;
   FullWebViews: undefined;
   PartialWebViews: undefined;
+  NetworkState: NetworkStateScreenProp;
+  UserStepsState: UserStepsStateScreenProp;
+
+  CallbackScreen: undefined;
 };
 
 const HomeStack = createNativeStackNavigator<HomeStackParamList>();
@@ -304,6 +317,22 @@ export const HomeStackNavigator: React.FC = () => {
         component={PartialWebViewsScreen}
         options={{ title: 'PartialWebViews' }}
       />
+      <HomeStack.Screen
+        name="CallbackScreen"
+        component={CallbackScreen}
+        options={{ title: 'callbackHandler' }}
+      />
+
+      <HomeStack.Screen
+        name="NetworkState"
+        component={NetworkStateScreen}
+        options={{ title: 'Network State' }}
+      />
+      <HomeStack.Screen
+        name="UserStepsState"
+        component={UserStepsStateScreen}
+        options={{ title: 'User Steps State' }}
+      />
     </HomeStack.Navigator>
   );
 };

examples/default/src/navigation/RootTab.tsx

@@ -6,7 +6,7 @@ import {
 } from '@react-navigation/bottom-tabs';
 import Icon from 'react-native-vector-icons/Ionicons';
 
-import { SettingsScreen } from '../screens/SettingsScreen';
+import { SettingsScreen } from '../screens/settings/SettingsScreen';
 import { HomeStackNavigator } from './HomeStack';
 import { Platform } from 'react-native';