Merge pull request #1351 from Instabug/chore/enhance-apm-screen-sample-app

chore: add ComplexViews to APM screen

Author: AndrewAminInstabug

examples/default/src/components/CustomGap.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { type DimensionValue, View } from 'react-native';
+
+// Define the component type with static properties
+interface CustomGapComponent extends React.FC<{ height?: DimensionValue; width?: DimensionValue }> {
+  small: JSX.Element;
+  smallV: JSX.Element;
+  smallH: JSX.Element;
+  large: JSX.Element;
+  largeV: JSX.Element;
+  largeH: JSX.Element;
+}
+
+const defaultDimensionValue = 16;
+
+// Define the CustomGap component
+const CustomGap: CustomGapComponent = ({ height, width }) => {
+  return (
+    <View
+      style={{ width: width ?? defaultDimensionValue, height: height ?? defaultDimensionValue }}
+    />
+  );
+};
+
+// Assign static properties for predefined gaps
+CustomGap.small = <CustomGap height={8} width={8} />;
+CustomGap.large = <CustomGap height={32} width={32} />;
+CustomGap.smallV = <CustomGap height={8} />;
+CustomGap.largeV = <CustomGap height={32} />;
+CustomGap.smallH = <CustomGap width={8} />;
+CustomGap.largeH = <CustomGap width={32} />;
+
+export default CustomGap;

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

@@ -3,9 +3,10 @@ import type { HomeStackParamList } from '../../navigation/HomeStack';
 import React, { useState } from 'react';
 import { ListTile } from '../../components/ListTile';
 import { Screen } from '../../components/Screen';
-import { Text, Switch } from 'react-native';
+import { StyleSheet, Switch, Text, View } from 'react-native';
 import { APM } from 'instabug-reactnative';
 import { showNotification } from '../../utils/showNotification';
+import CustomGap from '../../components/CustomGap';
 
 export const APMScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'APM'>> = ({
   navigation,
@@ -17,16 +18,26 @@ export const APMScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'APM
     APM.setEnabled(value);
     showNotification('APM status', 'APM enabled set to ' + value);
   };
+  const styles = StyleSheet.create({
+    switch: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+  });
 
   return (
     <Screen>
-      <Text>Enable APM:</Text>
-      <Switch onValueChange={toggleSwitch} value={isEnabled} />
+      <View style={styles.switch}>
+        <Text>Enable APM:</Text>
+        <Switch onValueChange={toggleSwitch} value={isEnabled} />
+      </View>
+      {CustomGap.smallV}
       <ListTile title="End App launch" onPress={() => APM.endAppLaunch()} />
       <ListTile title="Network Screen" onPress={() => navigation.navigate('NetworkTraces')} />
       <ListTile title="Traces" onPress={() => navigation.navigate('ExecutionTraces')} />
       <ListTile title="Flows" onPress={() => navigation.navigate('AppFlows')} />
       <ListTile title="WebViews" onPress={() => navigation.navigate('WebViews')} />
+      <ListTile title="Complex Views" onPress={() => navigation.navigate('ComplexViews')} />
     </Screen>
   );
 };