React Native Xenon

A powerful in-app debugging tool for React Native.

Features

• 📱 In-app debugging – No need to build a debug version; inspect your app in any environment.
• 🌐 Network & WebSocket Monitoring – Track HTTP(S) requests (XHR, Fetch) and WebSocket connections in real-time.
• 📃 Console Log Capture – Intercept log, info, warn, and error messages for better debugging insights.
• ⚡ Seamless Debugging – Debug without disrupting your workflow, with a draggable bubble for instant access.
• ✨ Cross-Platform Support – Works with both React Native and Expo projects.

Installation

React Native

Install the Xenon with yarn or npm. You will also need to install react-native-safe-area-context if you haven't already.

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

or

npm install react-native-xenon react-native-safe-area-context

Expo

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

Note

You can skip installing react-native-safe-area-context if you have created a project using the default template. This library is installed as peer dependency for Expo Router library.

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

By default, <Xenon.Component /> is visible in all environments. If you don’t want it to show in certain environments (like production) to prevent end users from accessing it, you can hide it with a simple condition. For example:

{!isProduction && <Xenon.Component />}

Alternatively, you can use any approach that restricts access to the component, ensuring only your development team 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.