chore: add ComplexViews to APM screen

AndrewAminInstabug · AndrewAminInstabug · commit 6f64b0fb4823 · 2025-02-25T18:08:54.000+02:00
diff --git a/examples/default/src/components/CustomGap.tsx b/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;
diff --git a/examples/default/src/screens/apm/APMScreen.tsx b/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 { Switch, Text } 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,
@@ -21,12 +22,15 @@ export const APMScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'APM
   return (
     <Screen>
       <Text>Enable APM:</Text>
+      {CustomGap.smallV}
       <Switch onValueChange={toggleSwitch} value={isEnabled} />
+      {CustomGap.largeV}
       <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>
   );
 };
