chore: refactor example app, add new screen for custom traces, update native dependencies

Author: andrewdanieldev

android/native.gradle

@@ -1,5 +1,5 @@
 project.ext.instabug = [
-    version: '15.0.1.6985154-SNAPSHOT'
+    version: '15.0.2.7020723-SNAPSHOT'
 ]
 
 dependencies {

examples/default/ios/Podfile

@@ -15,7 +15,7 @@ target 'InstabugExample' do
   config = use_native_modules!
   rn_maps_path = '../node_modules/react-native-maps'
   pod 'react-native-google-maps', :path => rn_maps_path
-  pod 'Instabug', :podspec => 'https://ios-releases.instabug.com/custom/faeture-screen_rendering-release/15.1.15/Instabug.podspec'
+  pod 'Instabug', :podspec => 'https://ios-releases.instabug.com/custom/faeture-screen_rendering-release/15.1.16/Instabug.podspec'
   # Flags change depending on the env values.
   flags = get_default_flags()
 

examples/default/src/navigation/HomeStack.tsx

@@ -22,6 +22,7 @@ import {
 import { GoogleMapsScreen } from '../screens/user-steps/GoogleMapsScreen';
 import { LargeImageListScreen } from '../screens/user-steps/LargeImageListScreen';
 import { APMScreen } from '../screens/apm/APMScreen';
+import { CustomUITraceScreen } from '../screens/apm/CustomUITraceScreen';
 import { NetworkScreen } from '../screens/apm/NetworkScreen';
 import { FlowsScreen } from '../screens/apm/FlowsScreen';
 import { SessionReplayScreen } from '../screens/SessionReplayScreen';
@@ -43,7 +44,7 @@ export type HomeStackParamList = {
   BasicComponents: undefined;
   ScrollView: undefined;
   FlatList: undefined;
-  ComplexViews: undefined;
+  ComplexViews: { initialDepth?: number; initialBreadth?: number } | undefined;
   SectionList: undefined;
   Gestures: undefined;
   GoogleMapsScreen: undefined;
@@ -56,7 +57,7 @@ export type HomeStackParamList = {
   // APM //
   APM: undefined;
   NetworkTraces: undefined;
-  ExecutionTraces: undefined;
+  CustomUITraces: undefined;
   AppFlows: undefined;
   WebViews: undefined;
   FullWebViews: undefined;
@@ -141,6 +142,7 @@ export const HomeStackNavigator: React.FC = () => {
       <HomeStack.Screen name="Gestures" component={GesturesScreen} />
       <HomeStack.Screen name="APM" component={APMScreen} />
       <HomeStack.Screen name="NetworkTraces" component={NetworkScreen} />
+      <HomeStack.Screen name="CustomUITraces" component={CustomUITraceScreen} />
       <HomeStack.Screen name="AppFlows" component={FlowsScreen} />
       <HomeStack.Screen
         name="LegacyMode"

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

@@ -34,6 +34,7 @@ export const APMScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'APM
       {CustomGap.smallV}
       <ListTile title="End App launch" onPress={() => APM.endAppLaunch()} />
       <ListTile title="Network Screen" onPress={() => navigation.navigate('NetworkTraces')} />
+      <ListTile title="Custom UI Traces" onPress={() => navigation.navigate('CustomUITraces')} />
       <ListTile title="Flows" onPress={() => navigation.navigate('AppFlows')} />
       <ListTile title="WebViews" onPress={() => navigation.navigate('WebViews')} />
       <ListTile title="Complex Views" onPress={() => navigation.navigate('ComplexViews')} />

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

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { APM } from 'instabug-reactnative';
+import { ScrollView } from 'react-native';
+import { Section } from '../../components/Section';
+import { Screen } from '../../components/Screen';
+import { VStack } from 'native-base';
+import { InputField } from '../../components/InputField';
+import { CustomButton } from '../../components/CustomButton';
+import BackgroundTimer from 'react-native-background-timer';
+
+export const CustomUITraceScreen: React.FC = () => {
+  const [traceName, setTraceName] = useState<string>('');
+
+  function startUITrace() {
+    if (!traceName.trim()) {
+      console.log('Please enter a trace name before starting.');
+      return;
+    }
+    APM.startUITrace(traceName);
+
+    console.log(`UI trace "${traceName}" started.`);
+  }
+
+  function startDelayedUITrace() {
+    if (!traceName.trim()) {
+      console.log('Please enter a trace name before starting.');
+      return;
+    }
+    return BackgroundTimer.setTimeout(() => {
+      APM.startUITrace(traceName);
+      console.log(`Delayed UI trace "${traceName}" started.`);
+    }, 5000);
+  }
+
+  function endUITrace() {
+    APM.endUITrace();
+    console.log('UI trace ended.');
+  }
+
+  return (
+    <ScrollView>
+      <Screen>
+        <Section title="Custom UI Traces">
+          <VStack space={2}>
+            <InputField
+              placeholder="UI Trace Name"
+              onChangeText={(text) => setTraceName(text)}
+              value={traceName}
+            />
+            <CustomButton title="Start UI Trace" onPress={startUITrace} />
+            <CustomButton title="Start 5s Delayed UI Trace" onPress={startDelayedUITrace} />
+            <CustomButton title="End UI Trace" onPress={endUITrace} />
+          </VStack>
+        </Section>
+      </Screen>
+    </ScrollView>
+  );
+};

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

@@ -248,7 +248,7 @@ const ScreenRenderPage: React.FC<NativeStackScreenProps<HomeStackParamList, 'Scr
   };
 
   const navigateToComplexPage = (): void => {
-    navigation.navigate('ComplexViews');
+    navigation.navigate('ComplexViews', { initialDepth: 10, initialBreadth: 2 });
   };
 
   // Cleanup timeout on unmount
@@ -273,7 +273,7 @@ const ScreenRenderPage: React.FC<NativeStackScreenProps<HomeStackParamList, 'Scr
 
         <View style={styles.buttonContainer}>
           <InstabugButton
-            text={isBlocking ? 'Frames are Delayed! (Wait...)' : 'Trigger Frozen Frames (5s)'}
+            text={isBlocking ? 'Frames are Delayed! (Wait...)' : 'Trigger Delayed Frames (5s)'}
             onPress={triggerFrozenFrames}
             disabled={isBlocking}
           />

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

@@ -1,4 +1,6 @@
 import React, { useRef, useState } from 'react';
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import type { HomeStackParamList } from '../../navigation/HomeStack';
 
 import { Screen } from '../../components/Screen';
 import { Section } from '../../components/Section';
@@ -7,10 +9,11 @@ import { Button } from 'react-native';
 import { ScrollView, VStack } from 'native-base';
 import { InputField } from '../../components/InputField';
 
-export const ComplexViewsScreen: React.FC = () => {
-  const initialDepth = 10;
-  const initialBreadth = 2;
-
+export const ComplexViewsScreen: React.FC<
+  NativeStackScreenProps<HomeStackParamList, 'ComplexViews'>
+> = ({ route }) => {
+  const initialDepth = route.params?.initialDepth ?? 10;
+  const initialBreadth = route.params?.initialBreadth ?? 2;
   const depthRef = useRef(initialDepth);
   const breadthRef = useRef(initialBreadth);
 

examples/default/src/screens/user-steps/ComplexViewsScreen.tsx

@@ -1,4 +1,4 @@
-$instabug = { :version => '15.1.15' }
+$instabug = { :version => '15.1.16' }
 
 def use_instabug! (spec = nil)
   version = $instabug[:version]