@callstack/inspector

inspector

The React on Web allows the users to run profilable builds to get near to production experience. This is the sweetest spot to having more confident profiling. However, on React Native this wasn't possible until now.

This package fixes this gap following the same analogy from React on Web, by allowing React Native to load Profiling shim for Release builds. 🚀

Demo

Applications

Why you need this?

Profiling React Components in Release builds

Most teams leverage React DevTools to profile their components in Debug Builds. If you are looking to profile React Components in Release builds, then this package is for you.

Inspecting React.Profiler callbacks in Release builds

Teams can have a use case where they leverage React.Profiler and perform their calculations from the values of the onRender callback. In debug builds, this works very well. If you are also interested in running these calculations in release builds, then this package is for you.

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // Aggregate or log render timings...
}

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

Installation

npm install @callstack/inspector

Additional For Expo:

npm install --dev @react-native/metro-config@YOUR_RN_VERSION

Usage

Step 1:

Add this to the top level of index.js:

+import '@callstack/inspector';
import { AppRegistry } from 'react-native';

Step 2:

Extra Steps For Expo

• Create an entry.tsx file, if you don't have it already:

import "@callstack/inspector";
import { ExpoRoot } from "expo-router";
import { AppRegistry } from "react-native";

function App() {
  const ctx = require.context("./src/app");
  return <ExpoRoot context={ctx} />;
}

AppRegistry.registerComponent("main", () => App);

This is required to allow importing @callstack/inspector as the first module

• Update package.json to reflect this entry file:

diff --git a/package.json b/package.json
index 9678783..9025fa6 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,19 @@
 {
   "name": "my-expo-app",
-  "main": "expo-router/entry",
+  "main": "./entry.tsx",
   "version": "1.0.0",

• Create a metro.config using npx expo customize metro.config.js or manually:

const { getDefaultConfig } = require("expo/metro-config");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

module.exports = config;

If you're on Expo, complete the above steps in the toggle before proceeding below.

Update your metro.config with withInspector:

+const { withInspector } = require('@callstack/inspector/metro');

const root = path.resolve(__dirname, '../..');

const config = withMetroConfig(getDefaultConfig(__dirname), {
  root,
  dirname: __dirname,
});

+module.exports = withInspector(config, true);

Step 3:

Start the inspector in a terminal:

npx inspector start

Note: For Expo, you will need to run the release build using the prebuild command. Expo Go does not support release builds.

Now build and run your app in release mode, you should see the react devtools connected to your Application. 🚀

Configurations

API

The @callstack/inspector requires the user to configure their metro.config as shown above. This withInspector receives the following arguments:

• withInspector(config, enabled)
  • config: MetroConfig
    • User only need to pass the config instance from Metro
  • enabled: Boolean
    • Default value is false.
    • If true, enables profiling to work in release builds.

CLI

The @callstack/inspector exposes a CLI inspector to start the instance of React DevTools.

It supports the following options:

Option	Purpose
start	kicks off the instance of React DevTools
help or -h	prints how to use the CLI

Sample Usages:

npx inspector start
npx inspector help
npx inspector -h

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

Made with ❤️ at Callstack

inspector is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.

Callstack is a group of React and React Native geeks, contact us at [e-mail] if you need any help with these or just want to say hi!

Made with create-react-native-library

License

MIT