react-native-xenon 0.1.0

package/lib/typescript/module/src/ui/components/details/NetworkRequestDetails.d.ts

@@ -0,0 +1,7 @@
+import { type HttpRequest, type WebSocketRequest } from '../../../types';
+interface NetworkRequestDetailsProps {
+    item: HttpRequest | WebSocketRequest;
+}
+export default function NetworkRequestDetails({ item }: NetworkRequestDetailsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NetworkRequestDetails.d.ts.map

package/lib/typescript/module/src/ui/components/details/NetworkRequestDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkRequestDetails.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/details/NetworkRequestDetails.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,gBAAgB,EACtB,MAAM,gBAAgB,CAAC;AAKxB,UAAU,0BAA0B;IAClC,IAAI,EAAE,WAAW,GAAG,gBAAgB,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAAE,IAAI,EAAE,EAAE,0BAA0B,2CAsGjF"}

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

@@ -0,0 +1,2 @@
+export default function DebuggerHeader(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DebuggerHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DebuggerHeader.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/headers/DebuggerHeader.tsx"],"names":[],"mappings":"AAMA,MAAM,CAAC,OAAO,UAAU,cAAc,4CA2FrC"}

package/lib/typescript/module/src/ui/components/headers/NetworkPanelHeader.d.ts

@@ -0,0 +1,2 @@
+export default function NetworkPanelHeader(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NetworkPanelHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkPanelHeader.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/headers/NetworkPanelHeader.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,kBAAkB,4CA0BzC"}

package/lib/typescript/module/src/ui/components/headers/NetworkRequestDetailsHeader.d.ts

@@ -0,0 +1,13 @@
+import type { NetworkTab } from '../../../types';
+interface NetworkDetailsHeaderProps {
+    selectedTab: NetworkTab;
+    onChangeTab: (tab: NetworkTab) => void;
+    headersShown?: boolean;
+    queryStringParametersShown?: boolean;
+    bodyShown?: boolean;
+    responseShown?: boolean;
+    messagesShown?: boolean;
+}
+export default function NetworkDetailsHeader({ selectedTab, onChangeTab, headersShown, queryStringParametersShown, bodyShown, responseShown, messagesShown, }: NetworkDetailsHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NetworkRequestDetailsHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkRequestDetailsHeader.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/headers/NetworkRequestDetailsHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,UAAU,yBAAyB;IACjC,WAAW,EAAE,UAAU,CAAC;IACxB,WAAW,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAQD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,WAAW,EACX,WAAW,EACX,YAAmB,EACnB,0BAAiC,EACjC,SAAgB,EAChB,aAAoB,EACpB,aAAoB,GACrB,EAAE,yBAAyB,2CAmD3B"}

package/lib/typescript/module/src/ui/components/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Bubble } from './bubble/Bubble';
+export { default as DebuggerHeader } from './headers/DebuggerHeader';
+export { default as NetworkPanel } from './panels/NetworkPanel';
+export { default as ConsolePanel } from './panels/ConsolePanel';
+export { default as DetailsViewer } from './details/DetailsViewer';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,yBAAyB,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { LogMessage } from '../../../types';
+interface ConsolePanelItemProps extends LogMessage {
+    onPress: () => void;
+}
+export default function ConsolePanelItem({ type, values, onPress }: ConsolePanelItemProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ConsolePanelItem.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,10 @@
+import { type ImageRequireSource } from 'react-native';
+interface DebuggerHeaderItemProps {
+    content?: ImageRequireSource | string;
+    isLabel?: boolean;
+    isActive?: boolean;
+    onPress: () => void;
+}
+export default function DebuggerHeaderItem(props: 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

@@ -0,0 +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"}

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

@@ -0,0 +1,10 @@
+import type { HttpRequest, WebSocketRequest } from '../../../types';
+interface NetworkPanelItemProps {
+    name: HttpRequest['url'] | WebSocketRequest['uri'];
+    method?: HttpRequest['method'];
+    status?: HttpRequest['status'] | WebSocketRequest['status'];
+    onPress: () => void;
+}
+export default function NetworkPanelItem({ name, status, method, onPress }: NetworkPanelItemProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NetworkPanelItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkPanelItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/NetworkPanelItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGpE,UAAU,qBAAqB;IAC7B,IAAI,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC5D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,qBAAqB,2CAoChG"}

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

@@ -0,0 +1,11 @@
+import type { NetworkTab } from '../../../types';
+interface NetworkRequestDetailsHeaderItemProps {
+    visible: boolean;
+    isSelected: boolean;
+    name: NetworkTab;
+    label: string;
+    onPress: () => void;
+}
+export default function NetworkRequestDetailsHeaderItem({ visible, name, isSelected, label, onPress, }: NetworkRequestDetailsHeaderItemProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=NetworkRequestDetailsHeaderItem.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,8 @@
+interface NetworkRequestDetailsItemProps {
+    label?: string;
+    content?: string;
+    selectable?: boolean;
+}
+export default function NetworkRequestDetailsItem({ label, content, selectable, }: NetworkRequestDetailsItemProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NetworkRequestDetailsItem.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+export default function ConsolePanel(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConsolePanel.d.ts.map

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

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

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

@@ -0,0 +1,2 @@
+export default function NetworkPanel(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NetworkPanel.d.ts.map

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

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

package/lib/typescript/module/src/utils.d.ts

@@ -0,0 +1,9 @@
+import type { HttpRequest } from './types';
+export declare const limitChar: (value: any, limit?: number) => string;
+export declare const getHttpInterceptorId: () => string;
+export declare const keyValueToString: (key: string, value: any) => string;
+export declare const formatMethod: (method?: string) => string;
+export declare const formatStatusCode: (statusCode?: number) => string;
+export declare const formatLogMessage: (type: string, values: any[]) => string;
+export declare const convertToCurl: (method: HttpRequest["method"], url: HttpRequest["url"], headers: HttpRequest["requestHeaders"], body: HttpRequest["body"]) => string;
+//# sourceMappingURL=utils.d.ts.map

package/lib/typescript/module/src/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,SAAS,UAAW,GAAG,2BAMnC,CAAC;AAEF,eAAO,MAAM,oBAAoB,cAIhC,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAS,MAAM,SAAS,GAAG,KAAG,MAC1B,CAAC;AAElC,eAAO,MAAM,YAAY,YAAa,MAAM,WAAoB,CAAC;AAEjE,eAAO,MAAM,gBAAgB,gBAAiB,MAAM,WAAiC,CAAC;AAEtF,eAAO,MAAM,gBAAgB,SAAU,MAAM,UAAU,GAAG,EAAE,WAQ3D,CAAC;AAEF,eAAO,MAAM,aAAa,WAChB,WAAW,CAAC,QAAQ,CAAC,OACxB,WAAW,CAAC,KAAK,CAAC,WACd,WAAW,CAAC,gBAAgB,CAAC,QAChC,WAAW,CAAC,MAAM,CAAC,WAgB1B,CAAC"}

package/package.json

@@ -0,0 +1,219 @@
+{
+  "name": "react-native-xenon",
+  "version": "0.1.0",
+  "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",
+  "module": "./lib/module/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    }
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-xenon-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepack": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "android",
+    "ios",
+    "xenon",
+    "inspector",
+    "debugger",
+    "https",
+    "network",
+    "nsurlsession",
+    "okhttp",
+    "logger",
+    "console"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/purrseus/react-native-xenon.git"
+  },
+  "author": {
+    "name": "Purrseus",
+    "email": "contact@thiendo.dev",
+    "url": "https://github.com/purrseus"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/purrseus/react-native-xenon/issues"
+  },
+  "homepage": "https://github.com/purrseus/react-native-xenon#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.73.1",
+    "@release-it/conventional-changelog": "^9.0.2",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-builder-bob": "^0.33.3",
+    "release-it": "^17.10.0",
+    "typescript": "^5.2.2"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.5.3",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "conventionalcommits"
+        }
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "plugin:prettier/recommended"
+    ],
+    "rules": {
+      "curly": "off",
+      "react/react-in-jsx-scope": "off",
+      "no-alert": "error",
+      "no-console": "error",
+      "no-var": "error",
+      "no-duplicate-imports": "error",
+      "max-lines": [
+        "error",
+        {
+          "skipBlankLines": true,
+          "skipComments": true,
+          "max": 500
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "printWidth": 100,
+    "tabWidth": 2,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "quoteProps": "as-needed",
+    "jsxSingleQuote": false,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "bracketSameLine": false,
+    "arrowParens": "avoid",
+    "proseWrap": "preserve",
+    "endOfLine": "lf",
+    "singleAttributePerLine": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json",
+          "esm": true
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.44.3"
+  },
+  "dependencies": {
+    "immer": "^10.1.1",
+    "react-native-url-polyfill": "^2.0.0",
+    "use-immer": "^0.10.0"
+  }
+}

package/src/constants.ts

@@ -0,0 +1 @@
+export const NETWORK_REQUEST_HEADER = 'X-React-Native-Xenon';

package/src/contexts/MainContext.ts

@@ -0,0 +1,34 @@
+import { createContext, type MutableRefObject } from 'react';
+import type { useConsoleInterceptor, useNetworkInterceptor } from '../hooks';
+import type {
+  HttpRequest,
+  DebuggerPanel,
+  DebuggerPosition,
+  DebuggerVisibility,
+  LogMessage,
+  SetState,
+  WebSocketRequest,
+} from '../types';
+
+export interface MainContextValue {
+  debuggerVisibility: DebuggerVisibility;
+  setDebuggerVisibility: SetState<DebuggerVisibility>;
+  debuggerPosition: DebuggerPosition;
+  setDebuggerPosition: SetState<DebuggerPosition>;
+  panelSelected: DebuggerPanel | null;
+  setPanelSelected: SetState<DebuggerPanel | null>;
+  networkInterceptor: ReturnType<typeof useNetworkInterceptor>;
+  logInterceptor: ReturnType<typeof useConsoleInterceptor>;
+  detailsData: MutableRefObject<
+    | { [DebuggerPanel.Console]: LogMessage }
+    | { [DebuggerPanel.Network]: HttpRequest | WebSocketRequest }
+    | null
+  >;
+  screenWidth: number;
+  screenHeight: number;
+  verticalSafeMargin: number;
+}
+
+const MainContext = createContext<MainContextValue | null>(null);
+
+export default MainContext;

package/src/contexts/index.ts

@@ -0,0 +1 @@
+export { default as MainContext } from './MainContext';

package/src/global.d.ts

@@ -0,0 +1,29 @@
+interface XMLHttpRequest {
+  _interceptionId?: string;
+}
+
+declare module 'react-native/Libraries/WebSocket/NativeWebSocketModule' {
+  interface NativeWebSocketModule extends NativeModule {
+    connect(
+      uri: string,
+      protocols?: string | string[] | null,
+      options?: {
+        headers: { [headerName: string]: string };
+        [optionName: string]: any;
+      } | null,
+      socketId: number,
+    ): void;
+
+    send(data: string, socketId: number): void;
+
+    sendBinary(data: string, socketId: number): void;
+
+    close(code: number, reason: string, socketId: number): void;
+
+    addListener: (eventType: string) => void;
+    removeListeners: (count: number) => void;
+  }
+
+  const NativeWebSocketModule: NativeWebSocketModule;
+  export default NativeWebSocketModule;
+}

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { default as useConsoleInterceptor } from './useConsoleInterceptor';
+export { default as useNetworkInterceptor } from './useNetworkInterceptor';
+export { default as useScrollToBottom } from './useScrollToBottom';

package/src/hooks/useConsoleInterceptor.ts

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useImmer } from 'use-immer';
+import { ConsoleInterceptor } from '../interceptors';
+import type { LogMessage } from '../types';
+
+interface ConsoleInterceptorParams {
+  autoEnabled?: boolean;
+}
+
+export default function useConsoleInterceptor(params: ConsoleInterceptorParams) {
+  const { autoEnabled = false } = params || {};
+
+  const [isInterceptorEnabled, setIsInterceptorEnabled] = useState(autoEnabled);
+
+  const [logMessages, setLogMessages] = useImmer<LogMessage[]>([]);
+
+  const clearAllLogMessages = () => {
+    setLogMessages([]);
+  };
+
+  const _isInterceptorEnabled = () => ConsoleInterceptor.instance.isInterceptorEnabled;
+
+  const enableInterception = useCallback(() => {
+    if (_isInterceptorEnabled()) return;
+
+    ConsoleInterceptor.instance
+      .setCallback((type, args) => {
+        setLogMessages(draft => {
+          draft.push({ type, values: args });
+        });
+      })
+      .enableInterception();
+
+    setIsInterceptorEnabled(true);
+  }, [setLogMessages]);
+
+  const disableInterception = useCallback(() => {
+    if (!_isInterceptorEnabled()) return;
+
+    ConsoleInterceptor.instance.disableInterception();
+
+    setIsInterceptorEnabled(false);
+  }, []);
+
+  useEffect(() => {
+    if (autoEnabled) enableInterception();
+
+    if (autoEnabled) return disableInterception;
+  }, [autoEnabled, disableInterception, enableInterception]);
+
+  return {
+    isInterceptorEnabled,
+    enableInterception,
+    disableInterception,
+    clearAllLogMessages,
+    logMessages,
+  };
+}