feat(example): add apm screen (#1141)

Author: abdelhamid-f-nasser

CHANGELOG.md

@@ -1,32 +1,5 @@
 # Changelog
 
-## [Unreleased](https://github.com/Instabug/Instabug-React-Native/compare/v13.3.0...dev)
-
-### Added
-
-- Add support for Expo Router navigation tracking ([#1270](https://github.com/Instabug/Instabug-React-Native/pull/1270)).
-
-## [13.3.0](https://github.com/Instabug/Instabug-React-Native/compare/v13.2.0...v13.3.0) (August 4, 2024)
-
-### Added
-
-- Add support for Feature Flags APIs `Instabug.addFeatureFlags`, `Instabug.removeFeatureFlags` and `Instabug.clearAllFeatureFlags` ([#1230](https://github.com/Instabug/Instabug-React-Native/pull/1230)).
-- Export `uploadSourcemaps` and `uploadSoFiles` utilities in the `instabug-reactnative/upload` sub-package for usage in custom Node.js upload scripts ([#1252](https://github.com/Instabug/Instabug-React-Native/pull/1252)).
-
-### Changed
-
-- Bump Instabug Android SDK to v13.3.0 ([#1261](https://github.com/Instabug/Instabug-React-Native/pull/1261)). [See release notes](https://github.com/Instabug/Instabug-Android/releases/tag/v13.3.0).
-- Bump Instabug iOS SDK to v13.3.0 ([#1262](https://github.com/Instabug/Instabug-React-Native/pull/1262)). [See release notes](https://github.com/Instabug/Instabug-iOS/releases/tag/13.3.0).
-
-### Deprecated
-
-- Deprecate Experiments APIs `Instabug.addExperiments`, `Instabug.removeExperiments` and `Instabug.clearAllExperiments` in favor of the new Feature Flags APIs ([#1230](https://github.com/Instabug/Instabug-React-Native/pull/1230)).
-
-### Fixed
-
-- Fix APM network logging on Android ([#1253](https://github.com/Instabug/Instabug-React-Native/pull/1253)).
-- Fix an OOM (out-of-memory) crash while saving network logs on Android ([#1244](https://github.com/Instabug/Instabug-React-Native/pull/1244)).
-
 ## [13.2.0](https://github.com/Instabug/Instabug-React-Native/compare/v13.1.1...v13.2.0) (July 7, 2024)
 
 ### Changed
@@ -79,20 +52,8 @@
 - Bump Instabug iOS SDK to v13.0.0 ([#1189](https://github.com/Instabug/Instabug-React-Native/pull/1189)). [See release notes](https://github.com/instabug/instabug-ios/releases/tag/13.0.0).
 - Bump Instabug Android SDK to v13.0.0 ([#1188](https://github.com/Instabug/Instabug-React-Native/pull/1188)). [See release notes](https://github.com/Instabug/android/releases/tag/v13.0.0).
 
-<<<<<<< HEAD
-
-## [12.9.0](https://github.com/Instabug/Instabug-React-Native/compare/v12.8.0...v12.9.0) (April 2, 2024)
-
-=======
-
-### Deprecated
-
-- Deprecate Execution Traces APIs `APM.startExecutionTrace`, `Trace.end` and `Trace.setAttribute` in favor of the new App Flows APIs ([#1138](https://github.com/Instabug/Instabug-React-Native/pull/1138)).
-
 ## [12.9.0](https://github.com/Instabug/Instabug-React-Native/compare/v12.8.0...12.9.0)(April 2, 2024)
 
-> > > > > > > origin/dev
-
 ### Added
 
 - Adds symbol files upload script ([#1137](https://github.com/Instabug/Instabug-React-Native/pull/1137))
@@ -103,6 +64,10 @@
 
 - Deprecate execution traces APIs `APM.startExecutionTrace`, `Trace.end` and `Trace.setFlowAttribute` in favor of the new app flow APIs ([#1138](https://github.com/Instabug/Instabug-React-Native/pull/1138)).
 
+### Deprecated
+
+- Deprecate Execution Traces APIs `APM.startExecutionTrace`, `Trace.end` and `Trace.setAttribute` in favor of the new App Flows APIs ([#1138](https://github.com/Instabug/Instabug-React-Native/pull/1138)).
+
 ### Changed
 
 - Bump Instabug Android SDK to v12.9.0 ([#1168](https://github.com/Instabug/Instabug-React-Native/pull/1168)). [See release notes](https://github.com/Instabug/android/releases/tag/v12.9.0).

examples/default/package.json

@@ -17,7 +17,6 @@
     "@react-navigation/native-stack": "^6.9.12",
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
-    "axios": "^1.7.2",
     "instabug-reactnative": "link:../..",
     "instabug-reactnative-ndk": "github:https://github.com/Instabug/Instabug-React-Native-NDK",
     "native-base": "^3.4.28",

examples/default/src/App.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { StyleSheet } from 'react-native';
 
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import Instabug, {
   CrashReporting,
   InvocationEvent,
@@ -20,7 +20,6 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 const queryClient = new QueryClient();
 
 export const App: React.FC = () => {
-  const navigationRef = useNavigationContainerRef();
   useEffect(() => {
     Instabug.init({
       token: 'deb1910a7342814af4e4c9210c786f35',
@@ -34,17 +33,11 @@ export const App: React.FC = () => {
     });
   }, []);
 
-  useEffect(() => {
-    const unregisterListener = Instabug.setNavigationListener(navigationRef);
-
-    return unregisterListener;
-  }, [navigationRef]);
-
   return (
     <GestureHandlerRootView style={styles.root}>
       <NativeBaseProvider theme={nativeBaseTheme}>
         <QueryClientProvider client={queryClient}>
-          <NavigationContainer theme={navigationTheme} ref={navigationRef}>
+          <NavigationContainer onStateChange={Instabug.onStateChange} theme={navigationTheme}>
             <RootTabNavigator />
           </NavigationContainer>
         </QueryClientProvider>

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

@@ -1,35 +1,14 @@
-import React from 'react';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
-import axios from 'axios';
-
 import type { HomeStackParamList } from '../../navigation/HomeStack';
+import React from 'react';
 import { ListTile } from '../../components/ListTile';
 import { Screen } from '../../components/Screen';
-import { NativeAPM } from '../../../../../src/native/NativeAPM';
 
 export const APMScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'APM'>> = ({
   navigation,
 }) => {
-  const simulateNetworkRequest = () => {
-    axios.get('https://httpbin.org/anything', {
-      headers: { traceparent: 'Caught Header Example' },
-    });
-  };
-  const simulateNetworkRequestWithoutHeader = () => {
-    axios.get('https://httpbin.org/anything');
-  };
   return (
     <Screen>
-      <ListTile title="Enable APM" onPress={() => NativeAPM.setEnabled(true)} />
-      <ListTile title="Disable APM" onPress={() => NativeAPM.setEnabled(false)} />
-      <ListTile
-        title="Simulate Network Request With Header"
-        onPress={() => simulateNetworkRequest()}
-      />
-      <ListTile
-        title="Simulate Network Request"
-        onPress={() => simulateNetworkRequestWithoutHeader()}
-      />
       <ListTile title="Network Screen" onPress={() => navigation.navigate('NetworkTraces')} />
       <ListTile title="Traces" onPress={() => navigation.navigate('ExecutionTraces')} />
       <ListTile title="Flows" onPress={() => navigation.navigate('AppFlows')} />