react-native-xenon 2.3.0 → 2.4.1

package/lib/typescript/src/ui/components/headers/DebuggerHeader.d.ts

@@ -1,10 +1,12 @@
+import { type Ref } from 'react';
 import type { ScrollView, StyleProp, ViewStyle } from 'react-native';
 import { PanelState } from '../../../core/refs';
 interface DebuggerHeaderProps {
     selectedPanel: PanelState;
     setSelectedPanel: React.Dispatch<React.SetStateAction<PanelState>>;
     style?: StyleProp<ViewStyle>;
+    ref?: Ref<ScrollView>;
 }
-declare const DebuggerHeader: import("react").ForwardRefExoticComponent<DebuggerHeaderProps & import("react").RefAttributes<ScrollView>>;
-export default DebuggerHeader;
+export default function DebuggerHeader({ selectedPanel, setSelectedPanel, style, ref, }: DebuggerHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=DebuggerHeader.d.ts.map

package/lib/typescript/src/ui/components/headers/DebuggerHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DebuggerHeader.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/headers/DebuggerHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,OAAa,EAAsB,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAO1E,UAAU,mBAAmB;IAC3B,aAAa,EAAE,UAAU,CAAC;IAC1B,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,cAAc,4GA8EnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DebuggerHeader.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/headers/DebuggerHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,OAAa,EAAsB,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAO1E,UAAU,mBAAmB;IAC3B,aAAa,EAAE,UAAU,CAAC;IAC1B,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,aAAa,EACb,gBAAgB,EAChB,KAAK,EACL,GAAG,GACJ,EAAE,mBAAmB,2CAyErB"}

package/lib/typescript/src/ui/components/headers/HeaderComponents.d.ts

@@ -1,6 +1,11 @@
+import { type PropsWithChildren, type Ref } from 'react';
 import { ScrollView, type StyleProp, type ViewStyle } from 'react-native';
 import { PanelState } from '../../../core/refs';
 import type { DetailTab } from '../../../types';
+declare function Wrapper({ children, style, ref, }: PropsWithChildren<{
+    style?: StyleProp<ViewStyle>;
+    ref?: Ref<ScrollView>;
+}>): import("react/jsx-runtime").JSX.Element;
 declare const HeaderComponents: {
     Back: ({ selectedPanel }: {
         selectedPanel: PanelState;
@@ -10,11 +15,7 @@ declare const HeaderComponents: {
         label: string;
     }) => import("react/jsx-runtime").JSX.Element;
     MainButtons: () => import("react/jsx-runtime").JSX.Element;
-    Wrapper: import("react").ForwardRefExoticComponent<{
-        style?: StyleProp<ViewStyle>;
-    } & {
-        children?: import("react").ReactNode | undefined;
-    } & import("react").RefAttributes<ScrollView>>;
+    Wrapper: typeof Wrapper;
 };
 export default HeaderComponents;
 //# sourceMappingURL=HeaderComponents.d.ts.map

package/lib/typescript/src/ui/components/headers/HeaderComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderComponents.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/headers/HeaderComponents.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEtF,OAAa,EAAmC,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGvF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA2FhD,QAAA,MAAM,gBAAgB;8BAxFW;QAAE,aAAa,EAAE,UAAU,CAAA;KAAE;oCAiBvB;QAAE,GAAG,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE;;;gBAyCL,SAAS,CAAC,SAAS,CAAC;;;;CA8BjB,CAAC;AAEvE,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"HeaderComponents.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/headers/HeaderComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,iBAAiB,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,UAAU,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEtF,OAAa,EAAmC,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGvF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA6DhD,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,KAAK,EACL,GAAG,GACJ,EAAE,iBAAiB,CAAC;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,CAAA;CAAE,CAAC,2CAY5E;AAgBD,QAAA,MAAM,gBAAgB;8BA1FW;QAAE,aAAa,EAAE,UAAU,CAAA;KAAE;oCAiBvB;QAAE,GAAG,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE;;;CAyEF,CAAC;AAEvE,eAAe,gBAAgB,CAAC"}

package/lib/typescript/src/ui/components/headers/NetworkHeader.d.ts

@@ -1,9 +1,11 @@
+import { type Ref } from 'react';
 import { type ScrollView, type StyleProp, type ViewStyle } from 'react-native';
 import { type PanelState } from '../../../core/refs';
 interface NetworkHeaderProps {
     selectedPanel: PanelState;
     style?: StyleProp<ViewStyle>;
+    ref?: Ref<ScrollView>;
 }
-declare const NetworkHeader: import("react").ForwardRefExoticComponent<NetworkHeaderProps & import("react").RefAttributes<ScrollView>>;
-export default NetworkHeader;
+export default function NetworkHeader({ selectedPanel, style, ref }: NetworkHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=NetworkHeader.d.ts.map

package/lib/typescript/src/ui/components/headers/NetworkHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkHeader.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/headers/NetworkHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/E,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AASrD,UAAU,kBAAkB;IAC1B,aAAa,EAAE,UAAU,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,2GAqDlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"NetworkHeader.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/headers/NetworkHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/E,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AASrD,UAAU,kBAAkB;IAC1B,aAAa,EAAE,UAAU,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,kBAAkB,2CAmDtF"}

package/lib/typescript/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":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIlE,UAAU,qBAAqB;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAsBD,QAAA,MAAM,gBAAgB,6DAqErB,CAAC;AAwCF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"NetworkPanelItem.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/items/NetworkPanelItem.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIlE,UAAU,qBAAqB;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAsBD,QAAA,MAAM,gBAAgB,6DAkErB,CAAC;AAwCF,eAAe,gBAAgB,CAAC"}

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

@@ -1,6 +1,9 @@
+import { type Ref } from 'react';
 import { FlatList, type StyleProp, type ViewStyle } from 'react-native';
-declare const ConsolePanel: import("react").ForwardRefExoticComponent<{
+interface ConsolePanelProps {
     style?: StyleProp<ViewStyle>;
-} & import("react").RefAttributes<FlatList<any>>>;
-export default ConsolePanel;
+    ref?: Ref<FlatList<any>>;
+}
+export default function ConsolePanel({ style, ref }: ConsolePanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=ConsolePanel.d.ts.map

package/lib/typescript/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":"AACA,OAAO,EACL,QAAQ,EAGR,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAQtB,QAAA,MAAM,YAAY;YAAkC,SAAS,CAAC,SAAS,CAAC;iDA8DtE,CAAC;AAWH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ConsolePanel.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/panels/ConsolePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EACL,QAAQ,EAGR,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAQtB,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,iBAAiB,2CA8DrE"}

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

@@ -1,6 +1,8 @@
-import { FlatList, type StyleProp, type ViewStyle } from 'react-native';
-declare const NetworkPanel: import("react").ForwardRefExoticComponent<{
-    style?: StyleProp<ViewStyle>;
-} & import("react").RefAttributes<FlatList<any>>>;
-export default NetworkPanel;
+import { type Ref } from 'react';
+import { FlatList, type ViewProps } from 'react-native';
+interface NetworkPanelProps extends ViewProps {
+    ref?: Ref<FlatList<any>>;
+}
+export default function NetworkPanel({ style, ref }: NetworkPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=NetworkPanel.d.ts.map

package/lib/typescript/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":"AACA,OAAO,EACL,QAAQ,EAGR,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAatB,QAAA,MAAM,YAAY;YAAkC,SAAS,CAAC,SAAS,CAAC;iDAoEtE,CAAC;AASH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"NetworkPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/panels/NetworkPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAmC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAazF,UAAU,iBAAkB,SAAQ,SAAS;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,iBAAiB,2CAoErE"}

package/lib/typescript/src/ui/components/panels/Panel.d.ts

@@ -1,6 +1,8 @@
 import { View, type ViewProps } from 'react-native';
-interface PanelProps extends ViewProps {
+import { type Ref } from 'react';
+interface PanelComponentProps extends ViewProps {
+    ref?: Ref<View>;
 }
-declare const Panel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<View>>;
-export default Panel;
+export default function Panel({ style, ...props }: PanelComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=Panel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/panels/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAgBpF,UAAU,UAAW,SAAQ,SAAS;CAAG;AAEzC,QAAA,MAAM,KAAK,6FA8CT,CAAC;AAgBH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/panels/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQpF,OAAO,EAAkC,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAQjE,UAAU,mBAAoB,SAAQ,SAAS;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CA8CrE"}

package/lib/typescript/src/ui/components/search-bar/SearchBar.d.ts

@@ -1,6 +1,8 @@
+import { type Ref } from 'react';
 import { View, type ViewProps } from 'react-native';
 interface SearchBarProps extends ViewProps {
+    ref?: Ref<View>;
 }
-declare const SearchBar: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<View>>;
-export default SearchBar;
+export default function SearchBar({ style, ...props }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=SearchBar.d.ts.map

package/lib/typescript/src/ui/components/search-bar/SearchBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/search-bar/SearchBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,IAAI,EAGJ,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,UAAU,cAAe,SAAQ,SAAS;CAAG;AAI7C,QAAA,MAAM,SAAS,iGAiEb,CAAC;AAmCH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/search-bar/SearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAKL,IAAI,EAGJ,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,UAAU,cAAe,SAAQ,SAAS;IACxC,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;CACjB;AAID,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAiEpE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-xenon",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "A powerful in-app debugging tool for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -36,6 +36,7 @@
     "test": "jest",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "format": "prettier --write \"**/*.{js,ts,tsx,json,md}\"",
     "clean": "del-cli lib",
     "prepare": "bob build",
     "release": "release-it --only-version"

package/src/core/utils.ts

@@ -92,7 +92,7 @@ export const getHttpInterceptorId = () => {
 //#region formatters
 export const showNewLine = (when: boolean) => (when ? '\n' : '');
 
-const limitChar = (value: any, limit = 5000) => {
+const limitChar = (value: any, limit = 100000) => {
   const stringValue = typeof value === 'string' ? value : JSON.stringify(value ?? '');
 
   return stringValue.length > limit

package/src/interceptors/ConsoleInterceptor.ts

@@ -20,69 +20,88 @@ export default class ConsoleInterceptor extends Interceptor<ConsoleHandlers> {
     callback: null,
   };
 
+  private isSyntheticEvent(event: any): boolean {
+    return (
+      event !== null &&
+      typeof event === 'object' &&
+      'nativeEvent' in event &&
+      'currentTarget' in event &&
+      'target' in event &&
+      typeof event.preventDefault === 'function'
+    );
+  }
+
+  private snapshotSyntheticEvent(event: any): Record<string, unknown> {
+    try {
+      return JSON.parse(JSON.stringify(event));
+    } catch {
+      return {
+        '[SyntheticEvent]':
+          'Could not snapshot event. Seem like this event has circular references. You can extract specific properties from the event object to see the details (e.g., event.target.value)',
+      };
+    }
+  }
+
+  private callback(type: string, args: any[]) {
+    const snapshotArgs = args.map(arg =>
+      this.isSyntheticEvent(arg) ? this.snapshotSyntheticEvent(arg) : arg,
+    );
+    this.handlers.callback?.(type, snapshotArgs);
+  }
+
   @frozen
   enableInterception(): void {
     if (this.isInterceptorEnabled) return;
 
-    const callback = this.handlers.callback;
+    const callback = this.callback.bind(this);
 
     console.error = function (...args) {
-      callback?.('error', args);
-
+      callback('error', args);
       originalConsoleError.call(this, ...args);
     };
 
     console.info = function (...args) {
-      callback?.('info', args);
-
+      callback('info', args);
       originalConsoleInfo.call(this, ...args);
     };
 
     console.log = function (...args) {
-      callback?.('log', args);
-
+      callback('log', args);
       originalConsoleLog.call(this, ...args);
     };
 
     console.warn = function (...args) {
-      callback?.('warn', args);
-
+      callback('warn', args);
       originalConsoleWarn.call(this, ...args);
     };
 
     console.trace = function (...args) {
-      callback?.('trace', args);
-
+      callback('trace', args);
       originalConsoleTrace.call(this, ...args);
     };
 
     console.debug = function (...args) {
-      callback?.('debug', args);
-
+      callback('debug', args);
       originalConsoleDebug.call(this, ...args);
     };
 
     console.table = function (...args: Parameters<typeof originalConsoleTable>) {
-      callback?.('table', args);
-
+      callback('table', args);
       originalConsoleTable.call(this, ...args);
     };
 
     console.groupCollapsed = function (...args) {
-      callback?.('groupCollapsed', args);
-
+      callback('groupCollapsed', args);
       originalConsoleGroupCollapsed.call(this, ...args);
     };
 
     console.groupEnd = function (...args) {
-      callback?.('groupEnd', args);
-
+      callback('groupEnd', args);
       originalConsoleGroupEnd.call(this, ...args);
     };
 
     console.group = function (...args) {
-      callback?.('group', args);
-
+      callback('group', args);
       originalConsoleGroup.call(this, ...args);
     };
 

package/src/ui/Xenon.tsx

@@ -10,13 +10,19 @@ import { type DebuggerState } from '../types';
 import { Bubble, IndexedStack, Panel, SearchBar } from './components';
 
 namespace Xenon {
-  interface Methods {
+  export interface Methods {
     isVisible(): boolean;
     show(): void;
     hide(): void;
   }
 
-  interface Props {
+  export interface Props {
+    children: ReactNode;
+    /**
+     * If true, completely disables the debugger by rendering only the children components without any debugging functionality.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Determines whether the network inspector is automatically enabled upon initialization.
      * @default true
@@ -45,15 +51,6 @@ namespace Xenon {
     includeDomains?: string[];
   }
 
-  interface WrapperProps extends Props {
-    /**
-     * If true, completely disables the debugger by rendering only the children components without any debugging functionality.
-     * @default false
-     */
-    disabled?: boolean;
-    children: ReactNode;
-  }
-
   enableMapSet();
   const ref = createRef<Methods>();
 
@@ -61,7 +58,7 @@ namespace Xenon {
    * Checks whether the debugger is currently visible.
    * @returns `true` if the debugger is currently visible, otherwise `false`.
    */
-  export const isVisible = () => ref.current?.isVisible() ?? false;
+  export const isVisible = (): boolean => ref.current?.isVisible() ?? false;
 
   /**
    * Makes the debugger visible. If it is already visible, this method has no additional effect.
@@ -75,14 +72,14 @@ namespace Xenon {
    */
   export const hide = (): void => ref.current?.hide();
 
-  const Debugger = memo(
+  const Debugger = memo<Omit<Props, 'children' | 'disabled'>>(
     ({
       autoInspectNetworkEnabled = true,
       autoInspectConsoleEnabled = true,
       bubbleSize = 40,
       idleBubbleOpacity = 0.5,
       includeDomains,
-    }: Props) => {
+    }) => {
       const dimensions = useWindowDimensions();
 
       const [debuggerState, setDebuggerState] = useImmer<DebuggerState>({
@@ -142,9 +139,15 @@ namespace Xenon {
         </MainContext.Provider>
       );
     },
+    (prevProps, nextProps) =>
+      prevProps.autoInspectNetworkEnabled === nextProps.autoInspectNetworkEnabled &&
+      prevProps.autoInspectConsoleEnabled === nextProps.autoInspectConsoleEnabled &&
+      prevProps.bubbleSize === nextProps.bubbleSize &&
+      prevProps.idleBubbleOpacity === nextProps.idleBubbleOpacity &&
+      JSON.stringify(prevProps.includeDomains) === JSON.stringify(nextProps.includeDomains),
   );
 
-  export function Wrapper({ disabled = false, children, ...props }: WrapperProps): JSX.Element {
+  export function Wrapper({ disabled = false, children, ...props }: Props): JSX.Element {
     if (disabled) return children as JSX.Element;
 
     return (

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

@@ -1,4 +1,4 @@
-import { forwardRef, useContext, useMemo, useRef, useState } from 'react';
+import { useContext, useMemo, useRef, useState, type Ref } from 'react';
 import {
   Animated,
   PanResponder,
@@ -17,106 +17,105 @@ import Icon from '../common/Icon';
 interface BubbleProps extends ViewProps {
   bubbleSize: number;
   idleBubbleOpacity: number;
+  ref?: Ref<View>;
 }
 
-const Bubble = forwardRef<View, BubbleProps>(
-  ({ bubbleSize, idleBubbleOpacity, style, ...props }, ref) => {
-    const {
-      dimensions: { width: screenWidth, height: screenHeight },
-    } = useContext(MainContext)!;
-    const [idleOpacity, setIdleOpacity] = useState(idleBubbleOpacity);
-    const pan = useRef(new Animated.ValueXY({ x: 0, y: getVerticalSafeMargin(screenHeight) }));
-    const opacityTimer = useRef<NodeJS.Timeout | null>(null);
-
-    const panResponder = useMemo(() => {
-      const clearTimer = () => {
-        if (opacityTimer.current) clearTimeout(opacityTimer.current);
-        opacityTimer.current = null;
-      };
-
-      const blur = () => {
-        opacityTimer.current = setTimeout(() => {
-          setIdleOpacity(idleBubbleOpacity);
-          clearTimer();
-        }, 1000);
-      };
-
-      return PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
-        onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: () => {
-          pan.current.setOffset({
-            // @ts-ignore
-            x: pan.current.x._value,
-            // @ts-ignore
-            y: pan.current.y._value,
-          });
-
-          pan.current.setValue({ x: 0, y: 0 });
-
-          clearTimer();
-          setIdleOpacity(1);
-        },
-        onPanResponderMove: Animated.event([null, { dx: pan.current.x, dy: pan.current.y }], {
+export default function Bubble({ bubbleSize, idleBubbleOpacity, style, ...props }: BubbleProps) {
+  const {
+    dimensions: { width: screenWidth, height: screenHeight },
+  } = useContext(MainContext)!;
+  const [idleOpacity, setIdleOpacity] = useState(idleBubbleOpacity);
+  const pan = useRef(new Animated.ValueXY({ x: 0, y: getVerticalSafeMargin(screenHeight) }));
+  const opacityTimer = useRef<NodeJS.Timeout | null>(null);
+
+  const panResponder = useMemo(() => {
+    const clearTimer = () => {
+      if (opacityTimer.current) clearTimeout(opacityTimer.current);
+      opacityTimer.current = null;
+    };
+
+    const blur = () => {
+      opacityTimer.current = setTimeout(() => {
+        setIdleOpacity(idleBubbleOpacity);
+        clearTimer();
+      }, 1000);
+    };
+
+    return PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        pan.current.setOffset({
+          // @ts-ignore
+          x: pan.current.x._value,
+          // @ts-ignore
+          y: pan.current.y._value,
+        });
+
+        pan.current.setValue({ x: 0, y: 0 });
+
+        clearTimer();
+        setIdleOpacity(1);
+      },
+      onPanResponderMove: Animated.event([null, { dx: pan.current.x, dy: pan.current.y }], {
+        useNativeDriver: false,
+      }),
+      onPanResponderRelease: (_, gesture: PanResponderGestureState) => {
+        pan.current.flattenOffset();
+
+        const isTapGesture =
+          gesture.dx > -10 && gesture.dx < 10 && gesture.dy > -10 && gesture.dy < 10;
+        if (isTapGesture) {
+          refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Panel);
+        }
+
+        if (gesture.moveX === 0 && gesture.moveY === 0) {
+          blur();
+          return;
+        }
+
+        const finalX =
+          gesture.moveX < (screenWidth - bubbleSize) / 2 ? 0 : screenWidth - bubbleSize;
+
+        const verticalSafeMargin = getVerticalSafeMargin(screenHeight);
+
+        const finalY = clamp(
+          verticalSafeMargin,
+          screenHeight - verticalSafeMargin - bubbleSize,
+          gesture.moveY,
+        );
+
+        Animated.spring(pan.current, {
+          toValue: { x: finalX, y: finalY },
           useNativeDriver: false,
-        }),
-        onPanResponderRelease: (_, gesture: PanResponderGestureState) => {
-          pan.current.flattenOffset();
-
-          const isTapGesture =
-            gesture.dx > -10 && gesture.dx < 10 && gesture.dy > -10 && gesture.dy < 10;
-          if (isTapGesture) {
-            refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Panel);
-          }
-
-          if (gesture.moveX === 0 && gesture.moveY === 0) {
-            blur();
-            return;
-          }
-
-          const finalX =
-            gesture.moveX < (screenWidth - bubbleSize) / 2 ? 0 : screenWidth - bubbleSize;
-
-          const verticalSafeMargin = getVerticalSafeMargin(screenHeight);
-
-          const finalY = clamp(
-            verticalSafeMargin,
-            screenHeight - verticalSafeMargin - bubbleSize,
-            gesture.moveY,
-          );
-
-          Animated.spring(pan.current, {
-            toValue: { x: finalX, y: finalY },
-            useNativeDriver: false,
-          }).start(({ finished }) => {
-            if (!finished) return;
-            blur();
-          });
-        },
-      });
-    }, [bubbleSize, idleBubbleOpacity, screenHeight, screenWidth]);
-
-    return (
-      <View ref={ref} style={[styles.bubbleBackdrop, style]} {...props}>
-        <Animated.View
-          {...panResponder.panHandlers}
-          style={[
-            styles.bubble,
-            {
-              width: bubbleSize,
-              height: bubbleSize,
-              borderRadius: bubbleSize / 2,
-              transform: pan.current.getTranslateTransform(),
-              opacity: idleOpacity,
-            },
-          ]}
-        >
-          <Icon source={icons.bug} size={bubbleSize * 0.65} />
-        </Animated.View>
-      </View>
-    );
-  },
-);
+        }).start(({ finished }) => {
+          if (!finished) return;
+          blur();
+        });
+      },
+    });
+  }, [bubbleSize, idleBubbleOpacity, screenHeight, screenWidth]);
+
+  return (
+    <View style={[styles.bubbleBackdrop, style]} {...props}>
+      <Animated.View
+        {...panResponder.panHandlers}
+        style={[
+          styles.bubble,
+          {
+            width: bubbleSize,
+            height: bubbleSize,
+            borderRadius: bubbleSize / 2,
+            transform: pan.current.getTranslateTransform(),
+            opacity: idleOpacity,
+          },
+        ]}
+      >
+        <Icon source={icons.bug} size={bubbleSize * 0.65} />
+      </Animated.View>
+    </View>
+  );
+}
 
 const styles = StyleSheet.create({
   bubbleBackdrop: {
@@ -131,5 +130,3 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
 });
-
-export default Bubble;

package/src/ui/components/common/IndexedStack.tsx

@@ -1,19 +1,11 @@
-import {
-  Children,
-  createElement,
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  type ForwardedRef,
-  type JSX,
-  type RefAttributes,
-} from 'react';
+import { Children, createElement, useImperativeHandle, useRef, type JSX, type Ref } from 'react';
 import { type NativeMethods } from 'react-native';
 
 interface IndexedStackProps<T extends number> {
   children: JSX.Element[];
   id: string;
   defaultIndex: T;
+  ref: Ref<IndexedStackMethods<T>>;
 }
 
 export type IndexedStackMethods<T extends number> = {
@@ -21,10 +13,12 @@ export type IndexedStackMethods<T extends number> = {
   setCurrentIndex: (index: T) => void;
 };
 
-function IndexedStackComponent<T extends number>(
-  { children, defaultIndex, id }: IndexedStackProps<T>,
-  ref: ForwardedRef<IndexedStackMethods<T>>,
-) {
+export default function IndexedStack<T extends number>({
+  children,
+  defaultIndex,
+  id,
+  ref,
+}: IndexedStackProps<T>) {
   const currentIndex = useRef<T>(defaultIndex as T);
   const childrenRefs = useRef<NativeMethods[]>([]);
 
@@ -54,9 +48,3 @@ function IndexedStackComponent<T extends number>(
     });
   });
 }
-
-const IndexedStack = forwardRef(IndexedStackComponent) as <T extends number>(
-  props: IndexedStackProps<T> & RefAttributes<IndexedStackMethods<T>>,
-) => JSX.Element;
-
-export default IndexedStack;