react-native-xenon 0.2.0 → 0.2.1

package/lib/typescript/module/src/ui/components/items/ConsolePanelItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConsolePanelItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/ConsolePanelItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,UAAU,qBAAsB,SAAQ,UAAU;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,qBAAqB,2CAQxF"}
+{"version":3,"file":"ConsolePanelItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/ConsolePanelItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIjD,UAAU,qBAAsB,SAAQ,UAAU;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,qBAAqB,2CAQxF"}

package/lib/typescript/module/src/ui/components/items/DebuggerHeaderItem.d.ts

@@ -5,6 +5,6 @@ interface DebuggerHeaderItemProps {
     isActive?: boolean;
     onPress: () => void;
 }
-export default function DebuggerHeaderItem(props: DebuggerHeaderItemProps): import("react/jsx-runtime").JSX.Element;
+export default function DebuggerHeaderItem({ content, isLabel, isActive, onPress, }: DebuggerHeaderItemProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DebuggerHeaderItem.d.ts.map

package/lib/typescript/module/src/ui/components/items/DebuggerHeaderItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DebuggerHeaderItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/DebuggerHeaderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElG,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,kBAAkB,GAAG,MAAM,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAuBxE"}
+{"version":3,"file":"DebuggerHeaderItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/DebuggerHeaderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlG,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,kBAAkB,GAAG,MAAM,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,GACR,EAAE,uBAAuB,2CAuBzB"}

package/lib/typescript/module/src/ui/components/items/NetworkPanelItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkPanelItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/NetworkPanelItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAOlE,UAAU,qBAAqB;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE,qBAAqB,2CA0CvB"}
+{"version":3,"file":"NetworkPanelItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/NetworkPanelItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAQlE,UAAU,qBAAqB;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE,qBAAqB,2CA0CvB"}

package/lib/typescript/module/src/ui/components/items/NetworkRequestDetailsHeaderItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkRequestDetailsHeaderItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/NetworkRequestDetailsHeaderItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,UAAU,oCAAoC;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,+BAA+B,CAAC,EACtD,OAAO,EACP,IAAI,EACJ,UAAU,EACV,KAAK,EACL,OAAO,GACR,EAAE,oCAAoC,kDAatC"}
+{"version":3,"file":"NetworkRequestDetailsHeaderItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/NetworkRequestDetailsHeaderItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,UAAU,oCAAoC;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,+BAA+B,CAAC,EACtD,OAAO,EACP,IAAI,EACJ,UAAU,EACV,KAAK,EACL,OAAO,GACR,EAAE,oCAAoC,kDAatC"}

package/lib/typescript/module/src/ui/components/items/NetworkRequestDetailsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkRequestDetailsItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/NetworkRequestDetailsItem.tsx"],"names":[],"mappings":"AAEA,UAAU,8BAA8B;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,KAAK,EACL,OAAO,EACP,UAAU,GACX,EAAE,8BAA8B,2CAkBhC"}
+{"version":3,"file":"NetworkRequestDetailsItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/NetworkRequestDetailsItem.tsx"],"names":[],"mappings":"AAGA,UAAU,8BAA8B;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,KAAK,EACL,OAAO,EACP,UAAU,GACX,EAAE,8BAA8B,2CAkBhC"}

package/lib/typescript/module/src/ui/components/panels/ConsolePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConsolePanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/ConsolePanel.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAkCnC"}
+{"version":3,"file":"ConsolePanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/ConsolePanel.tsx"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAkCnC"}

package/lib/typescript/module/src/ui/components/panels/NetworkPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/NetworkPanel.tsx"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,YAAY,4CA2CnC"}
+{"version":3,"file":"NetworkPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/NetworkPanel.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,OAAO,UAAU,YAAY,4CA2CnC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-xenon",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A comprehensive tool for analyzing HTTP(S) requests and logs in React Native apps. Designed for use across all environments, it offers an intuitive interface for efficient debugging and issue resolution.",
   "source": "./src/index.ts",
   "main": "./lib/commonjs/index.js",

package/src/colors.ts

@@ -0,0 +1,8 @@
+const colors = Object.freeze({
+  black: '#000000',
+  red: '#ef4444',
+  gray: '#888888',
+  lightGray: '#AAAAAA',
+});
+
+export default colors;

package/src/hooks/useConsoleInterceptor.ts

@@ -16,10 +16,10 @@ export default function useConsoleInterceptor({ autoEnabled }: ConsoleIntercepto
     setLogMessages([]);
   };
 
-  const _isInterceptorEnabled = () => ConsoleInterceptor.instance.isInterceptorEnabled;
+  const isEnabled = () => ConsoleInterceptor.instance.isInterceptorEnabled;
 
   const enableInterception = useCallback(() => {
-    if (_isInterceptorEnabled()) return;
+    if (isEnabled()) return;
 
     ConsoleInterceptor.instance
       .setCallback((type, args) => {
@@ -33,7 +33,7 @@ export default function useConsoleInterceptor({ autoEnabled }: ConsoleIntercepto
   }, [setLogMessages]);
 
   const disableInterception = useCallback(() => {
-    if (!_isInterceptorEnabled()) return;
+    if (!isEnabled()) return;
 
     ConsoleInterceptor.instance.disableInterception();
 

package/src/hooks/useNetworkInterceptor.ts

@@ -35,7 +35,7 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
 
   const [networkRequests, setNetworkRequests] = useImmer(initRequests);
 
-  const _isInterceptorEnabled = () =>
+  const isEnabled = () =>
     XHRInterceptor.instance.isInterceptorEnabled &&
     FetchInterceptor.instance.isInterceptorEnabled &&
     WebSocketInterceptor.instance.isInterceptorEnabled;
@@ -237,7 +237,7 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
   }, [setNetworkRequests]);
 
   const enableInterception = useCallback(() => {
-    if (_isInterceptorEnabled()) return;
+    if (isEnabled()) return;
 
     enableHttpInterceptions();
     enableWebSocketInterception();
@@ -245,7 +245,7 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
   }, [enableHttpInterceptions, enableWebSocketInterception]);
 
   const disableInterception = useCallback(() => {
-    if (!_isInterceptorEnabled()) return;
+    if (!isEnabled()) return;
 
     XHRInterceptor.instance.disableInterception();
     FetchInterceptor.instance.disableInterception();

package/src/icons.ts

@@ -0,0 +1,9 @@
+const icons = Object.freeze({
+  code: require('./assets/icons/code.png'),
+  delete: require('./assets/icons/delete.png'),
+  hide: require('./assets/icons/hide.png'),
+  move: require('./assets/icons/move.png'),
+  record: require('./assets/icons/record.png'),
+});
+
+export default icons;

package/src/interceptors/ConsoleInterceptor.ts

@@ -13,7 +13,7 @@ const originalConsoleGroupEnd = console.groupEnd;
 const originalConsoleGroup = console.group;
 
 export default class ConsoleInterceptor extends Interceptor {
-  static instance = new ConsoleInterceptor();
+  static readonly instance = new ConsoleInterceptor();
 
   private constructor() {
     super();
@@ -67,10 +67,10 @@ export default class ConsoleInterceptor extends Interceptor {
       originalConsoleDebug.call(this, ...args);
     };
 
-    console.table = function (...args) {
+    console.table = function (...args: Parameters<typeof originalConsoleTable>) {
       callback?.('table', args);
 
-      originalConsoleTable.call(this, ...(args as Parameters<typeof originalConsoleTable>));
+      originalConsoleTable.call(this, ...args);
     };
 
     console.groupCollapsed = function (...args) {

package/src/interceptors/FetchInterceptor.ts

@@ -6,7 +6,7 @@ import HttpInterceptor from './HttpInterceptor';
 const originalFetch = global.fetch;
 
 export default class FetchInterceptor extends HttpInterceptor {
-  static instance = new FetchInterceptor();
+  static readonly instance = new FetchInterceptor();
 
   private constructor() {
     super();

package/src/interceptors/Interceptor.ts

@@ -1,5 +1,13 @@
 export default abstract class Interceptor {
-  isInterceptorEnabled = false;
+  #isInterceptorEnabled = false;
+
+  get isInterceptorEnabled() {
+    return this.#isInterceptorEnabled;
+  }
+
+  protected set isInterceptorEnabled(value: boolean) {
+    this.#isInterceptorEnabled = value;
+  }
 
   abstract enableInterception(): void;
   abstract disableInterception(): void;

package/src/interceptors/WebSocketInterceptor.ts

@@ -17,7 +17,7 @@ const originalWebSocketSendBinary = NativeWebSocketModule.sendBinary;
 const originalWebSocketClose = NativeWebSocketModule.close;
 
 export default class WebSocketInterceptor extends NetworkInterceptor {
-  static instance = new WebSocketInterceptor();
+  static readonly instance = new WebSocketInterceptor();
 
   private constructor() {
     super();
@@ -92,7 +92,7 @@ export default class WebSocketInterceptor extends NetworkInterceptor {
 
   private eventEmitter: NativeEventEmitter | null = null;
   private subscriptions: EmitterSubscription[] = [];
-  private timeStart: Map<number, number> = new Map();
+  private readonly timeStart: Map<number, number> = new Map();
 
   private arrayBufferToString(data?: string) {
     try {

package/src/interceptors/XHRInterceptor.ts

@@ -7,7 +7,7 @@ const originalXHRSend = XMLHttpRequest.prototype.send;
 const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
 
 export default class XHRInterceptor extends HttpInterceptor {
-  static instance = new XHRInterceptor();
+  static readonly instance = new XHRInterceptor();
 
   private constructor() {
     super();

package/src/ui/Xenon.tsx

@@ -1,6 +1,14 @@
 import { enableMapSet } from 'immer';
-import { createRef, useImperativeHandle, useRef, useState, type JSX } from 'react';
+import {
+  createRef,
+  memo,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type NamedExoticComponent,
+} from 'react';
 import { Animated, SafeAreaView, StyleSheet, useWindowDimensions, View } from 'react-native';
+import colors from '../colors';
 import MainContext, { type MainContextValue } from '../contexts/MainContext';
 import { useConsoleInterceptor, useNetworkInterceptor } from '../hooks';
 import { DebuggerPanel, type DebuggerPosition, type DebuggerVisibility } from '../types';
@@ -18,107 +26,106 @@ interface XenonComponentProps {
 }
 
 interface ReactNativeXenon extends XenonComponentMethods {
-  Component(props: XenonComponentProps): JSX.Element;
+  Component: NamedExoticComponent<XenonComponentProps>;
 }
 
 enableMapSet();
+
 const rootRef = createRef<XenonComponentMethods>();
 
-function XenonComponent({
-  autoInspectNetworkEnabled = true,
-  autoInspectConsoleEnabled = true,
-  bubbleSize = 40,
-}: XenonComponentProps) {
-  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
-  const verticalSafeMargin = screenHeight / 8;
-
-  const pan = useRef(new Animated.ValueXY({ x: 0, y: verticalSafeMargin }));
-
-  const detailsData: MainContextValue['detailsData'] = useRef(null);
-
-  const [debuggerVisibility, setDebuggerVisibility] = useState<DebuggerVisibility>('hidden');
-
-  const [debuggerPosition, setDebuggerPosition] = useState<DebuggerPosition>('bottom');
-
-  const [panelSelected, setPanelSelected] = useState<DebuggerPanel | null>(DebuggerPanel.Network);
-
-  const networkInterceptor = useNetworkInterceptor({
-    autoEnabled: autoInspectNetworkEnabled,
-  });
-
-  const logInterceptor = useConsoleInterceptor({
-    autoEnabled: autoInspectConsoleEnabled,
-  });
-
-  useImperativeHandle(
-    rootRef,
-    () => ({
-      show() {
-        setDebuggerVisibility('bubble');
-      },
-      hide() {
-        setDebuggerVisibility('hidden');
-      },
-    }),
-    [],
-  );
-
-  let content;
-
-  switch (debuggerVisibility) {
-    case 'bubble':
-      content = (
-        <View style={styles.bubbleBackdrop}>
-          <Bubble bubbleSize={bubbleSize} pan={pan} />
-        </View>
-      );
-      break;
-    case 'panel':
-      content = (
-        <SafeAreaView
-          style={[
-            styles.container,
-            // eslint-disable-next-line react-native/no-inline-styles
-            {
-              [debuggerPosition]: 0,
-              height: Math.min(screenWidth, screenHeight) * 0.75,
-            },
-          ]}
-        >
-          <DebuggerHeader />
-
-          {panelSelected === DebuggerPanel.Network && <NetworkPanel />}
-          {panelSelected === DebuggerPanel.Console && <ConsolePanel />}
-
-          {!panelSelected && !!detailsData.current && <DetailsViewer />}
-        </SafeAreaView>
-      );
-      break;
-    default:
-      content = null;
-  }
-
-  return (
-    <MainContext.Provider
-      value={{
-        debuggerVisibility,
-        setDebuggerVisibility,
-        debuggerPosition,
-        setDebuggerPosition,
-        panelSelected,
-        setPanelSelected,
-        networkInterceptor,
-        logInterceptor,
-        detailsData,
-        screenWidth,
-        screenHeight,
-        verticalSafeMargin,
-      }}
-    >
-      {content}
-    </MainContext.Provider>
-  );
-}
+const XenonComponent = memo<XenonComponentProps>(
+  ({ autoInspectNetworkEnabled = true, autoInspectConsoleEnabled = true, bubbleSize = 40 }) => {
+    const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+    const verticalSafeMargin = screenHeight / 8;
+
+    const pan = useRef(new Animated.ValueXY({ x: 0, y: verticalSafeMargin }));
+
+    const detailsData: MainContextValue['detailsData'] = useRef(null);
+
+    const [debuggerVisibility, setDebuggerVisibility] = useState<DebuggerVisibility>('hidden');
+
+    const [debuggerPosition, setDebuggerPosition] = useState<DebuggerPosition>('bottom');
+
+    const [panelSelected, setPanelSelected] = useState<DebuggerPanel | null>(DebuggerPanel.Network);
+
+    const networkInterceptor = useNetworkInterceptor({
+      autoEnabled: autoInspectNetworkEnabled,
+    });
+
+    const logInterceptor = useConsoleInterceptor({
+      autoEnabled: autoInspectConsoleEnabled,
+    });
+
+    useImperativeHandle(
+      rootRef,
+      () => ({
+        show() {
+          setDebuggerVisibility('bubble');
+        },
+        hide() {
+          setDebuggerVisibility('hidden');
+        },
+      }),
+      [],
+    );
+
+    let content;
+
+    switch (debuggerVisibility) {
+      case 'bubble':
+        content = (
+          <View style={styles.bubbleBackdrop}>
+            <Bubble bubbleSize={bubbleSize} pan={pan} />
+          </View>
+        );
+        break;
+      case 'panel':
+        content = (
+          <SafeAreaView
+            style={[
+              styles.container,
+              // eslint-disable-next-line react-native/no-inline-styles
+              {
+                [debuggerPosition]: 0,
+                height: Math.min(screenWidth, screenHeight) * 0.75,
+              },
+            ]}
+          >
+            <DebuggerHeader />
+
+            {panelSelected === DebuggerPanel.Network && <NetworkPanel />}
+            {panelSelected === DebuggerPanel.Console && <ConsolePanel />}
+
+            {!panelSelected && !!detailsData.current && <DetailsViewer />}
+          </SafeAreaView>
+        );
+        break;
+      default:
+        content = null;
+    }
+
+    return (
+      <MainContext.Provider
+        value={{
+          debuggerVisibility,
+          setDebuggerVisibility,
+          debuggerPosition,
+          setDebuggerPosition,
+          panelSelected,
+          setPanelSelected,
+          networkInterceptor,
+          logInterceptor,
+          detailsData,
+          screenWidth,
+          screenHeight,
+          verticalSafeMargin,
+        }}
+      >
+        {content}
+      </MainContext.Provider>
+    );
+  },
+);
 
 const styles = StyleSheet.create({
   container: {
@@ -127,7 +134,7 @@ const styles = StyleSheet.create({
     top: undefined,
     bottom: undefined,
     zIndex: 9999,
-    backgroundColor: '#AAAAAA',
+    backgroundColor: colors.lightGray,
   },
   bubbleBackdrop: {
     flex: 1,

package/src/ui/components/bubble/Bubble.tsx

@@ -7,6 +7,8 @@ import {
   type PanResponderGestureState,
 } from 'react-native';
 import { MainContext } from '../../../contexts';
+import icons from '../../../icons';
+import colors from '../../../colors';
 
 interface BubbleProps {
   bubbleSize: number;
@@ -73,7 +75,7 @@ export default function Bubble({ bubbleSize, pan }: BubbleProps) {
       ]}
     >
       <Image
-        source={require('../../../assets/code.png')}
+        source={icons.code}
         style={{
           width: bubbleSize * 0.75,
           height: bubbleSize * 0.75,
@@ -85,7 +87,7 @@ export default function Bubble({ bubbleSize, pan }: BubbleProps) {
 
 const styles = StyleSheet.create({
   bubble: {
-    backgroundColor: '#AAAAAA',
+    backgroundColor: colors.lightGray,
     position: 'absolute',
     justifyContent: 'center',
     alignItems: 'center',

package/src/ui/components/details/LogMessageDetails.tsx

@@ -1,6 +1,7 @@
 import { ScrollView, StyleSheet, Text } from 'react-native';
 import type { LogMessage } from '../../../types';
 import { formatLogMessage } from '../../../utils';
+import colors from '../../../colors';
 
 interface LogMessageDetailsProps {
   item: LogMessage;
@@ -21,6 +22,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
 });

package/src/ui/components/details/NetworkRequestDetails.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, type JSX } from 'react';
+import { useRef, useState, type JSX, type ReactNode } from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
 import { URL } from 'react-native-url-polyfill';
 import {
@@ -16,6 +16,7 @@ import {
 } from '../../../utils';
 import NetworkDetailsHeader from '../headers/NetworkRequestDetailsHeader';
 import NetworkRequestDetailsItem from '../items/NetworkRequestDetailsItem';
+import colors from '../../../colors';
 
 interface NetworkRequestDetailsProps {
   item: HttpRequest | WebSocketRequest;
@@ -87,19 +88,15 @@ export default function NetworkRequestDetails({ item }: NetworkRequestDetailsPro
   }
 
   if (queryStringParametersShown && !content.current.queryStringParameters) {
-    const queryStringParameters: Record<'name' | 'value', string>[] = [];
+    const queryStringParameters: ReactNode[] = [];
 
     requestUrl.searchParams.forEach((value, name) => {
-      queryStringParameters.push({ name, value });
+      queryStringParameters.push(
+        <NetworkRequestDetailsItem key={name} label={name} content={value} />,
+      );
     });
 
-    content.current.queryStringParameters = (
-      <>
-        {queryStringParameters.map(({ name, value }, index) => (
-          <NetworkRequestDetailsItem key={index} label={name} content={value} />
-        ))}
-      </>
-    );
+    content.current.queryStringParameters = <>{queryStringParameters}</>;
   }
 
   if (bodyShown && !content.current.body) {
@@ -137,15 +134,15 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
   text: {
     fontSize: 14,
-    color: '#000000',
+    color: colors.black,
   },
   label: {
     fontSize: 14,
     fontWeight: 'bold',
-    color: '#000000',
+    color: colors.black,
   },
 });

package/src/ui/components/headers/DebuggerHeader.tsx

@@ -3,6 +3,8 @@ import { ScrollView, StyleSheet, View } from 'react-native';
 import { MainContext } from '../../../contexts';
 import { DebuggerPanel } from '../../../types';
 import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
+import icons from '../../../icons';
+import colors from '../../../colors';
 
 export default function DebuggerHeader() {
   const {
@@ -49,12 +51,9 @@ export default function DebuggerHeader() {
       contentContainerStyle={styles.contentContainer}
       showsHorizontalScrollIndicator={false}
     >
-      <DebuggerHeaderItem onPress={hideDebugger} content={require('../../../assets/hide.png')} />
+      <DebuggerHeaderItem onPress={hideDebugger} content={icons.hide} />
 
-      <DebuggerHeaderItem
-        onPress={toggleDebuggerPosition}
-        content={require('../../../assets/move.png')}
-      />
+      <DebuggerHeaderItem onPress={toggleDebuggerPosition} content={icons.move} />
 
       <DebuggerHeaderItem
         isLabel
@@ -66,12 +65,12 @@ export default function DebuggerHeader() {
       <DebuggerHeaderItem
         onPress={toggleNetworkInterception}
         isActive={networkInterceptor.isInterceptorEnabled}
-        content={require('../../../assets/record.png')}
+        content={icons.record}
       />
 
       <DebuggerHeaderItem
         onPress={networkInterceptor.clearAllNetworkRequests}
-        content={require('../../../assets/delete.png')}
+        content={icons.delete}
       />
 
       <View style={styles.divider} />
@@ -86,13 +85,10 @@ export default function DebuggerHeader() {
       <DebuggerHeaderItem
         onPress={toggleLogInterception}
         isActive={logInterceptor.isInterceptorEnabled}
-        content={require('../../../assets/record.png')}
+        content={icons.record}
       />
 
-      <DebuggerHeaderItem
-        onPress={logInterceptor.clearAllLogMessages}
-        content={require('../../../assets/delete.png')}
-      />
+      <DebuggerHeaderItem onPress={logInterceptor.clearAllLogMessages} content={icons.delete} />
     </ScrollView>
   );
 }
@@ -107,6 +103,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     width: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
 });