React Native Xenon

A powerful in-app debugging tool for React Native.

Features

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

Screenshots

Installation

Expo

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

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

React Native

For React Native projects, install the packages and follow the platform-specific setup instructions below.

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

Android

react-native-screens package requires one additional configuration step to properly work on Android devices. Edit MainActivity.kt file which is located under android/app/src/main/java/<your package name>/.

+ import android.os.Bundle
// ...

class MainActivity: ReactActivity() {
  // ...
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(null)
+  }
  // ...
}

This change is required to avoid crashes related to View state being not persisted consistently across Activity restarts.

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.