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.

Installation

Install Xenon and its dependencies.

React Native

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>/.

Add the highlighted code to the body of MainActivity class:

+ 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 ..

Expo

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

Usage

Add Xenon.Component in your app root component.

import Xenon from 'react-native-xenon';

function App() {
  return (
    <>
      {/* Your other components here */}
      <Xenon.Component />
    </>
  );
}

Present the debugger by calling the show method.

Xenon.show();

And hide it by calling the hide method.

Xenon.hide();

Warning

<Xenon.Component /> is enabled by default in all environments, including production. This could expose sensitive debugging tools to end users, creating potential security risks. To avoid this, make sure to conditionally render the component only in non-production environments. For example:

{isProduction ? null : <Xenon.Component />}

Additionally, consider other approaches such as environment-based feature flags or access control to ensure only authorized users (e.g., developers) can interact with it.

Props

Prop	Type	Description
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.

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.