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

Author: abdelhamid-f-nasser

CHANGELOG.md

@@ -58,6 +58,11 @@
 
 - Adds symbol files upload script ([#1137](https://github.com/Instabug/Instabug-React-Native/pull/1137))
 - Support enabling NDK crash capturing on Android ([#1132](https://github.com/Instabug/Instabug-React-Native/pull/1132)).
+- Add support for App Flows APIs `APM.startFlow`, `APM.setFlowAttribute` and `APM.endFlow` ([#1138](https://github.com/Instabug/Instabug-React-Native/pull/1138)).
+
+### Deprecated
+
+- 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
 
@@ -84,6 +89,10 @@
 
 - Bump Instabug Android SDK to v12.8.0 ([#1149](https://github.com/Instabug/Instabug-React-Native/pull/1149)). [See release notes](https://github.com/Instabug/android/releases/tag/v12.8.0).
 
+### 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.7.1](https://github.com/Instabug/Instabug-React-Native/compare/v12.7.0...v12.7.1) (February 15, 2024)
 
 ### Changed

examples/default/ios/Podfile.lock

@@ -404,6 +404,8 @@ PODS:
   - React-jsinspector (0.72.3)
   - React-logger (0.72.3):
     - glog
+  - react-native-background-timer (2.4.1):
+    - React-Core
   - react-native-config (1.5.1):
     - react-native-config/App (= 1.5.1)
   - react-native-config/App (1.5.1):
@@ -528,6 +530,8 @@ PODS:
     - React-jsi (= 0.72.3)
     - React-logger (= 0.72.3)
     - React-perflogger (= 0.72.3)
+  - RNCClipboard (1.5.1):
+    - React-Core
   - RNGestureHandler (2.13.4):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
@@ -623,6 +627,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
+  - react-native-background-timer (from `../node_modules/react-native-background-timer`)
   - react-native-config (from `../node_modules/react-native-config`)
   - react-native-google-maps (from `../node_modules/react-native-maps`)
   - react-native-maps (from `../node_modules/react-native-maps`)
@@ -645,6 +650,7 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNInstabug (from `../node_modules/instabug-reactnative`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
@@ -720,6 +726,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../node_modules/react-native/ReactCommon/logger"
+  react-native-background-timer:
+    :path: "../node_modules/react-native-background-timer"
   react-native-config:
     :path: "../node_modules/react-native-config"
   react-native-google-maps:
@@ -764,6 +772,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCClipboard:
+    :path: "../node_modules/@react-native-community/clipboard"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNInstabug:
@@ -818,6 +828,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 59d1eb03af7d30b7d66589c410f13151271e8006
   React-jsinspector: b511447170f561157547bc0bef3f169663860be7
   React-logger: c5b527272d5f22eaa09bb3c3a690fee8f237ae95
+  react-native-background-timer: 17ea5e06803401a379ebf1f20505b793ac44d0fe
   react-native-config: 86038147314e2e6d10ea9972022aa171e6b1d4d8
   react-native-google-maps: 1bcc1f9f13f798fcf230db7fe476f3566d0bc0a3
   react-native-maps: 72a8a903f8a1b53e2c777ba79102078ab502e0bf
@@ -840,6 +851,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 837c1bebd2f84572db17698cd702ceaf585b0d9a
   React-utils: bcb57da67eec2711f8b353f6e3d33bd8e4b2efa3
   ReactCommon: 3ccb8fb14e6b3277e38c73b0ff5e4a1b8db017a9
+  RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495
   RNGestureHandler: 6e46dde1f87e5f018a54fe5d40cd0e0b942b49ee
   RNInstabug: 6fa68cd181533f83154df2ebba000d0c47ca7ba3
   RNReanimated: ab2e96c6d5591c3dfbb38a464f54c8d17fb34a87

examples/default/package.json

@@ -10,14 +10,19 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
+    "@react-native-community/clipboard": "^1.5.1",
     "@react-native-community/slider": "^4.4.3",
     "@react-navigation/bottom-tabs": "^6.5.7",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
+    "graphql": "^16.8.1",
+    "graphql-request": "^6.1.0",
     "instabug-reactnative": "link:../..",
+    "instabug-reactnative-ndk": "github:https://github.com/Instabug/Instabug-React-Native-NDK",
     "native-base": "^3.4.28",
     "react": "18.2.0",
     "react-native": "0.72.3",
+    "react-native-background-timer": "^2.4.1",
     "react-native-config": "^1.5.1",
     "react-native-gesture-handler": "^2.13.4",
     "react-native-maps": "^1.10.3",
@@ -26,7 +31,7 @@
     "react-native-screens": "^3.20.0",
     "react-native-svg": "^13.9.0",
     "react-native-vector-icons": "^10.0.0",
-    "instabug-reactnative-ndk": "github:https://github.com/Instabug/Instabug-React-Native-NDK"
+    "react-query": "^3.39.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -35,6 +40,7 @@
     "@react-native/metro-config": "^0.73.1",
     "@types/jest": "^29.2.1",
     "@types/react": "^18.0.24",
+    "@types/react-native-background-timer": "^2.0.2",
     "@types/react-native-vector-icons": "^6.4.13",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.2.1",

examples/default/src/App.tsx

@@ -15,6 +15,10 @@ import { RootTabNavigator } from './navigation/RootTab';
 import { nativeBaseTheme } from './theme/nativeBaseTheme';
 import { navigationTheme } from './theme/navigationTheme';
 
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+const queryClient = new QueryClient();
+
 export const App: React.FC = () => {
   useEffect(() => {
     Instabug.init({
@@ -32,9 +36,11 @@ export const App: React.FC = () => {
   return (
     <GestureHandlerRootView style={styles.root}>
       <NativeBaseProvider theme={nativeBaseTheme}>
-        <NavigationContainer onStateChange={Instabug.onStateChange} theme={navigationTheme}>
-          <RootTabNavigator />
-        </NavigationContainer>
+        <QueryClientProvider client={queryClient}>
+          <NavigationContainer onStateChange={Instabug.onStateChange} theme={navigationTheme}>
+            <RootTabNavigator />
+          </NavigationContainer>
+        </QueryClientProvider>
       </NativeBaseProvider>
     </GestureHandlerRootView>
   );

examples/default/src/components/ClipboardTextInput.tsx

@@ -0,0 +1,36 @@
+import React, { PropsWithChildren } from 'react';
+import { StyleProp, StyleSheet, TextStyle } from 'react-native';
+import PasteFromClipboardButton from './PasteFromClipboardButton';
+import { HStack } from 'native-base';
+import { InputField } from './InputField';
+
+interface ClipboardTextInputProps extends PropsWithChildren {
+  placeholder?: string;
+  onChangeText?: (text: string) => void;
+  value?: string;
+  selectTextOnFocus?: boolean;
+  style?: StyleProp<TextStyle>;
+}
+
+export const ClipboardTextInput: React.FC<ClipboardTextInputProps> = ({
+  onChangeText,
+  style,
+  ...restProps
+}) => {
+  return (
+    <HStack alignItems="center" space="xs">
+      <InputField onChangeText={onChangeText} style={[styles.inputField, style]} {...restProps} />
+      <PasteFromClipboardButton onPress={handleClipboardPress} />
+    </HStack>
+  );
+
+  function handleClipboardPress(text: string) {
+    onChangeText?.call(undefined, text);
+  }
+};
+
+export const styles = StyleSheet.create({
+  inputField: {
+    flex: 1,
+  },
+});

examples/default/src/components/CustomButton.tsx

@@ -0,0 +1,31 @@
+import React, { PropsWithChildren } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+import { Button } from 'native-base';
+import { CustomText } from './CustomText';
+import { StyleSheet } from 'react-native';
+
+interface CustomButtonProps extends PropsWithChildren {
+  title?: string;
+  onPress?: () => void;
+  style?: StyleProp<TextStyle>;
+}
+
+export const CustomButton: React.FC<CustomButtonProps> = ({
+  style,
+  title,
+  children,
+  ...restProps
+}) => {
+  return (
+    <Button style={style} {...restProps}>
+      <CustomText style={styles.text}>{title}</CustomText>
+      {children}
+    </Button>
+  );
+};
+
+export const styles = StyleSheet.create({
+  text: {
+    color: '#fff',
+  },
+});

examples/default/src/components/CustomImage.tsx

@@ -0,0 +1,17 @@
+import React, { PropsWithChildren } from 'react';
+import { StyleProp, StyleSheet, TextStyle, Text } from 'react-native';
+
+interface CustomTextProps extends PropsWithChildren {
+  style?: StyleProp<TextStyle>;
+}
+
+export const CustomImage: React.FC<CustomTextProps> = ({ style, children }) => {
+  return <Text style={[styles.text, style]}>{children}</Text>;
+};
+
+export const styles = StyleSheet.create({
+  text: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+});

examples/default/src/components/CustomText.tsx

@@ -0,0 +1,17 @@
+import React, { PropsWithChildren } from 'react';
+import { StyleProp, StyleSheet, TextStyle, Text } from 'react-native';
+
+interface CustomTextProps extends PropsWithChildren {
+  style?: StyleProp<TextStyle>;
+}
+
+export const CustomText: React.FC<CustomTextProps> = ({ style, children }) => {
+  return <Text style={[styles.text, style]}>{children}</Text>;
+};
+
+export const styles = StyleSheet.create({
+  text: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+});

examples/default/src/components/InputField.tsx

@@ -1,13 +1,22 @@
 import React, { forwardRef } from 'react';
 
-import { KeyboardTypeOptions, StyleSheet, TextInput, View } from 'react-native';
+import {
+  KeyboardTypeOptions,
+  StyleProp,
+  StyleSheet,
+  TextInput,
+  ViewStyle,
+  View,
+} from 'react-native';
 import { Text } from 'native-base';
 
 interface InputFieldProps {
   placeholder?: string;
   value?: string;
+  style?: StyleProp<ViewStyle>;
   onChangeText?: (text: string) => void;
   keyboardType?: KeyboardTypeOptions;
+  selectTextOnFocus?: boolean | undefined;
   errorText?: string;
   maxLength?: number;
   accessibilityLabel?: string;
@@ -19,6 +28,7 @@ export const InputField = forwardRef<TextInput, InputFieldProps>(
     {
       placeholder,
       value,
+      style,
       onChangeText,
       accessibilityLabel,
       maxLength,
@@ -33,7 +43,7 @@ export const InputField = forwardRef<TextInput, InputFieldProps>(
         <TextInput
           ref={ref}
           placeholder={placeholder}
-          style={styles.textInput}
+          style={[styles.textInput, style]}
           maxLength={maxLength}
           accessibilityLabel={accessibilityLabel}
           keyboardType={keyboardType}
@@ -52,7 +62,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     borderWidth: 1,
     borderColor: '#ccc',
-    paddingVertical: 16,
+    paddingVertical: 10,
     paddingHorizontal: 24,
     fontSize: 16,
     borderRadius: 5,

examples/default/src/components/PasteFromClipboardButton.tsx

@@ -0,0 +1,24 @@
+import Clipboard from '@react-native-community/clipboard';
+import { StyleProp, TextStyle, TouchableHighlight } from 'react-native';
+import React, { PropsWithChildren } from 'react';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+interface PasteFromClipboardButtonProps extends PropsWithChildren {
+  onPress?: (text: string) => void;
+  style?: StyleProp<TextStyle>;
+}
+
+const PasteFromClipboardButton: React.FC<PasteFromClipboardButtonProps> = ({ onPress, style }) => {
+  const handlePress = async () => {
+    const text = await Clipboard.getString();
+    onPress?.call(undefined, text); // Using call to pass the text to the callback
+  };
+
+  return (
+    <TouchableHighlight onPress={handlePress} style={style}>
+      <Icon name="copy-outline" />
+    </TouchableHighlight>
+  );
+};
+
+export default PasteFromClipboardButton;

examples/default/src/navigation/HomeStack.tsx

@@ -21,6 +21,10 @@ import {
 } from '../screens/user-steps/BackAndForthScreen';
 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 { FlowsScreen } from '../screens/apm/FlowsScreen';
 import { SessionReplayScreen } from '../screens/SessionReplayScreen';
 
 export type HomeStackParamList = {
@@ -41,6 +45,12 @@ export type HomeStackParamList = {
   LargeImageList: undefined;
   SessionReplay: undefined;
   BackAndForthScreen: BackAndForthScreenProp;
+
+  // APM //
+  APM: undefined;
+  NetworkTraces: undefined;
+  ExecutionTraces: undefined;
+  AppFlows: undefined;
 };
 
 const HomeStack = createNativeStackNavigator<HomeStackParamList>();
@@ -65,7 +75,6 @@ export const HomeStackNavigator: React.FC = () => {
         options={{ title: 'Feature Requests' }}
       />
       <HomeStack.Screen name="Replies" component={RepliesScreen} />
-
       <HomeStack.Screen name="Surveys" component={SurveysScreen} />
       <HomeStack.Screen
         name="SessionReplay"
@@ -119,6 +128,10 @@ export const HomeStackNavigator: React.FC = () => {
         options={{ title: 'Large Image List' }}
       />
       <HomeStack.Screen name="Gestures" component={GesturesScreen} />
+      <HomeStack.Screen name="APM" component={APMScreen} />
+      <HomeStack.Screen name="NetworkTraces" component={NetworkScreen} />
+      <HomeStack.Screen name="ExecutionTraces" component={TracesScreen} />
+      <HomeStack.Screen name="AppFlows" component={FlowsScreen} />
     </HomeStack.Navigator>
   );
 };

examples/default/src/screens/HomeScreen.tsx

@@ -17,6 +17,7 @@ export const HomeScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'Ho
       <ListTile title="Replies" onPress={() => navigation.navigate('Replies')} />
       <ListTile title="Surveys" onPress={() => navigation.navigate('Surveys')} />
       <ListTile title="User Steps" onPress={() => navigation.navigate('UserSteps')} />
+      <ListTile title="APM" onPress={() => navigation.navigate('APM')} />
       <ListTile title="Session Replay" onPress={() => navigation.navigate('SessionReplay')} />
     </Screen>
   );