React Native Xenon

A powerful in-app debugging tool for React Native.

Features

• :iphone: In-app debugging – Debug apps in any environment without the need for debug builds.
• :globe_with_meridians: Network Inspection – Monitor HTTP(S) requests (XHR, Fetch) and WebSocket connections.
• :page_with_curl: Log Capture – Intercept console messages like log, info, warn, and error for enhanced debugging.
• :zap: Draggable Bubble UI – Seamlessly debug without disrupting your workflow.
• :sparkles: React Native & Expo Support – Built for compatibility across both platforms.

Screenshots

Supported react-native versions

| react-native-xenon version | react-native version | | ------------------------------ | ------------------------ | | 2.1.0+ | 0.80.0+ | | 1.0.0+ | 0.73.0+ |

Installation

Expo

If you are using Expo, just run this command and you're done. No additional configuration required.

npx expo install react-native-xenon react-native-safe-area-context react-native-screens

React Native

For bare React Native projects, install the packages and follow the additional peer dependency installation steps below.

yarn add react-native-xenon react-native-safe-area-context react-native-screens

[!NOTE] React Native Screens needs extra steps to finalize its installation, please follow their installation instructions.

iOS

Don't forget to install pods when you are developing for iOS.

cd ios && pod install; cd ..

Usage

Wrap your top-level component with <Xenon.Wrapper />.

import Xenon from 'react-native-xenon';

function AppContainer() {
  return (
    <Xenon.Wrapper>
      <App />
    </Xenon.Wrapper>
  );
}

Present the debugger by calling the show method.

Xenon.show();

And hide it by calling the hide method.

Xenon.hide();

Props

| Prop | Type | Description | | --------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | disabled | boolean | If true, completely disables the debugger by rendering only the children components without any debugging functionality. Defaults to false. | | autoInspectNetworkEnabled | boolean | Determines whether the network inspector is automatically enabled upon initialization. Defaults to true. | | autoInspectConsoleEnabled | boolean | Determines whether the console inspector is automatically enabled upon initialization. Defaults to true. | | bubbleSize | number | Defines the size of the interactive bubble used in the UI. Defaults to 40. | | idleBubbleOpacity | number | Defines the opacity level of the bubble when it is idle. Defaults to 0.5. | | includeDomains | string[] | Domains to include in network interception. Defaults to all domains. |

[!IMPORTANT] 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}).

Methods

| Method | Return Type | Description | | ------------- | --------------- | ------------------------------------------------------------------------------------------- | | isVisible() | boolean | Checks whether the debugger is currently visible. | | show() | void | Makes the debugger visible. If it is already visible, this method has no additional effect. | | hide() | void | Hides the debugger. If it is already hidden, this method has no additional effect. |

Examples

To try out Xenon, you can run the example project:

# Clone the repo
git clone https://github.com/purrseus/react-native-xenon.git
cd react-native-xenon

# Install dependencies
yarn install

# Start the Expo development server
yarn example start

See the example directory for more information.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

This project is MIT licensed.