{"id":26738332,"url":"https://github.com/purrseus/react-native-xenon","last_synced_at":"2026-04-02T21:52:56.913Z","repository":{"id":266484289,"uuid":"898019603","full_name":"purrseus/react-native-xenon","owner":"purrseus","description":"A powerful in-app debugging tool for React Native.","archived":false,"fork":false,"pushed_at":"2025-06-01T15:59:21.000Z","size":13489,"stargazers_count":52,"open_issues_count":1,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-02T00:22:25.084Z","etag":null,"topics":["android","console","debugger","https","inspector","ios","logger","network","nsurlsession","okhttp","react-native","xenon"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/purrseus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"thiendo261","thanks_dev":null,"custom":["https://www.paypal.me/PurrseusDev"]}},"created_at":"2024-12-03T16:38:44.000Z","updated_at":"2025-06-01T15:58:43.000Z","dependencies_parsed_at":"2024-12-09T17:46:26.444Z","dependency_job_id":"4901447a-07aa-4eca-91ab-6688ab95323e","html_url":"https://github.com/purrseus/react-native-xenon","commit_stats":null,"previous_names":["purrseus/react-native-xenon-inspector","purrseus/react-native-xenon"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purrseus%2Freact-native-xenon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purrseus%2Freact-native-xenon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purrseus%2Freact-native-xenon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purrseus%2Freact-native-xenon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/purrseus","download_url":"https://codeload.github.com/purrseus/react-native-xenon/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purrseus%2Freact-native-xenon/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259098454,"owners_count":22804783,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","console","debugger","https","inspector","ios","logger","network","nsurlsession","okhttp","react-native","xenon"],"created_at":"2025-03-28T03:29:07.658Z","updated_at":"2026-04-02T21:52:56.908Z","avatar_url":"https://github.com/purrseus.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/thiendo261","https://www.paypal.me/PurrseusDev","https://www.buymeacoffee.com/thiendo261"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"./images/logo.svg\" alt=\"React Native Xenon Logo\" width=\"128px\" height=\"128px\" /\u003e\n\n# React Native Xenon\n\n### A powerful in-app debugging tool for React Native.\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![GitHub Actions Workflow Status][github-actions-status-badge]][github-actions-status-link]\n[![NPM Version][npm-version-badge]][npm-version-link]\n[![React Native][react-native-badge]][react-native-link]\n[![Runs With Expo][expo-badge]][expo-link]\n[![Types Included][typescript-badge]][typescript-link]\n\u003cbr /\u003e\n[![GitHub License][github-license-badge]][github-license-link]\n[![NPM Downloads Per Month][npm-downloads-per-month-badge]][npm-downloads-per-month-link]\n[![Buy Me A Coffee][buy-me-a-coffee-badge]][buy-me-a-coffee-link]\n\n\u003c/div\u003e\n\n## Features\n\n- :iphone: **In-app debugging** – Debug apps in any environment without the need for debug builds.\n- :globe_with_meridians: **Network Inspection** – Monitor HTTP(S) requests (XHR, Fetch) and WebSocket connections.\n- :page_with_curl: **Log Capture** – Intercept console messages like log, info, warn, and error for enhanced debugging.\n- :zap: **Draggable Bubble UI** – Seamlessly debug without disrupting your workflow.\n- :sparkles: **React Native \u0026 Expo Support** – Built for compatibility across both platforms.\n\n## Screenshots\n\n![preview](./images/screenshots/preview.png)\n\n## Supported react-native versions\n\n| **react-native-xenon version** | **react-native version** |\n| ------------------------------ | ------------------------ |\n| 2.1.0+                         | 0.80.0+                  |\n| 1.0.0+                         | 0.73.0+                  |\n\n## Installation\n\n### Expo\n\nIf you are using Expo, just run this command and you're done. No additional configuration required.\n\n```sh\nnpx expo install react-native-xenon react-native-safe-area-context react-native-screens\n```\n\n### React Native\n\nFor bare React Native projects, install the packages and follow the additional peer dependency installation steps below.\n\n```sh\nyarn add react-native-xenon react-native-safe-area-context react-native-screens\n```\n\n\u003e [!NOTE]\n\u003e **React Native Screens** needs extra steps to finalize its installation, please follow their [installation instructions](https://github.com/software-mansion/react-native-screens?tab=readme-ov-file#installation).\n\n#### iOS\n\nDon't forget to install pods when you are developing for iOS.\n\n```sh\ncd ios \u0026\u0026 pod install; cd ..\n```\n\n## Usage\n\nWrap your top-level component with `\u003cXenon.Wrapper /\u003e`.\n\n```tsx\nimport Xenon from 'react-native-xenon';\n\nfunction AppContainer() {\n  return (\n    \u003cXenon.Wrapper\u003e\n      \u003cApp /\u003e\n    \u003c/Xenon.Wrapper\u003e\n  );\n}\n```\n\nPresent the debugger by calling the `show` method.\n\n```tsx\nXenon.show();\n```\n\nAnd hide it by calling the `hide` method.\n\n```tsx\nXenon.hide();\n```\n\n## Props\n\n| **Prop**                    | **Type**   | **Description**                                                                                                                               |\n| --------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------- |\n| `disabled`                  | `boolean`  | If true, completely disables the debugger by rendering only the children components without any debugging functionality. Defaults to `false`. |\n| `autoInspectNetworkEnabled` | `boolean`  | Determines whether the network inspector is automatically enabled upon initialization. Defaults to `true`.                                    |\n| `autoInspectConsoleEnabled` | `boolean`  | Determines whether the console inspector is automatically enabled upon initialization. Defaults to `true`.                                    |\n| `bubbleSize`                | `number`   | Defines the size of the interactive bubble used in the UI. Defaults to `40`.                                                                  |\n| `idleBubbleOpacity`         | `number`   | Defines the opacity level of the bubble when it is idle. Defaults to `0.5`.                                                                   |\n| `includeDomains`            | `string[]` | Domains to include in network interception. Defaults to all domains.                                                                          |\n\n\u003cbr /\u003e\n\n\u003e [!IMPORTANT]\n\u003e The debugger is enabled by default in all environments including production. To prevent exposing sensitive developer tools to end users, always set disabled={true} in production builds (e.g., disabled={isProduction}).\n\n## Methods\n\n| **Method**    | **Return Type** | **Description**                                                                             |\n| ------------- | --------------- | ------------------------------------------------------------------------------------------- |\n| `isVisible()` | `boolean`       | Checks whether the debugger is currently visible.                                           |\n| `show()`      | `void`          | Makes the debugger visible. If it is already visible, this method has no additional effect. |\n| `hide()\t`      | `void`          | Hides the debugger. If it is already hidden, this method has no additional effect.          |\n\n## Examples\n\nTo try out Xenon, you can run the example project:\n\n```sh\n# Clone the repo\ngit clone https://github.com/purrseus/react-native-xenon.git\ncd react-native-xenon\n\n# Install dependencies\nyarn install\n\n# Start the Expo development server\nyarn example start\n```\n\nSee the [example](./example) directory for more information.\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nThis project is [MIT](./LICENSE) licensed.\n\n\u003c!-- badges --\u003e\n\n[github-actions-status-badge]: https://img.shields.io/github/actions/workflow/status/purrseus/react-native-xenon/ci.yml?style=for-the-badge\u0026logo=github\u0026label=%20\u0026labelColor=1B1B1D\n[github-actions-status-link]: ./.github/workflows/ci.yml\n[npm-version-badge]: https://img.shields.io/npm/v/react-native-xenon?style=for-the-badge\u0026color=CC3F3E\u0026labelColor=1B1B1D\u0026logo=npm\u0026label=%20\u0026logoColor=CC3F3E\n[npm-version-link]: https://www.npmjs.com/package/react-native-xenon\n[react-native-badge]: https://img.shields.io/badge/%20React%20Native-67DAFB?style=for-the-badge\u0026logo=react\u0026logoColor=67DAFB\u0026labelColor=1B1B1D\n[react-native-link]: https://reactnative.dev\n[expo-badge]: https://img.shields.io/badge/Expo-FFFFFF?style=for-the-badge\u0026logo=expo\u0026labelColor=1B1B1D\u0026logoColor=FFFFFF\n[expo-link]: https://expo.dev\n[typescript-badge]: https://img.shields.io/badge/TypeScript-3077C6?style=for-the-badge\u0026logo=typescript\u0026logoColor=3077C6\u0026labelColor=1B1B1D\n[typescript-link]: https://www.typescriptlang.org\n[github-license-badge]: https://img.shields.io/badge/License-MIT-44CD11?style=for-the-badge\u0026labelColor=1B1B1D\n[github-license-link]: ./LICENSE\n[npm-downloads-per-month-badge]: https://img.shields.io/npm/dm/react-native-xenon?style=for-the-badge\u0026labelColor=1B1B1D\n[npm-downloads-per-month-link]: https://www.npmjs.com/package/react-native-xenon\n[buy-me-a-coffee-badge]: https://img.shields.io/badge/%20-Buy%20me%20a%20coffee-FEDD03?style=for-the-badge\u0026logo=buymeacoffee\u0026labelColor=1B1B1D\n[buy-me-a-coffee-link]: https://www.buymeacoffee.com/thiendo261\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpurrseus%2Freact-native-xenon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpurrseus%2Freact-native-xenon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpurrseus%2Freact-native-xenon/lists"}