React-native-xenon NPM

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.

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

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