React Native Xenon

A comprehensive tool for analyzing HTTP(S) requests and logs in React Native apps. 🔬

Features

• HTTP/HTTPS request monitoring with support for XHR and Fetch API
• WebSocket connection tracking
• Console logging interception (log, info, warn, error, etc.)
• Draggable bubble interface for quick access
• Request/response inspection with detailed information
• Real-time monitoring capabilities
• 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();

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.