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. 🚀
Why you need this?
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.
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>npm install @callstack/inspectornpm install --dev @react-native/metro-config@YOUR_RN_VERSIONAdd this to the top level of index.js:
+import '@callstack/inspector';
import { AppRegistry } from 'react-native';Extra Steps For Expo
- Create an
entry.tsxfile, 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/inspectoras the first module
- Update
package.jsonto 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.configusingnpx expo customize metro.config.jsor 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);Start the inspector in a terminal:
npx inspector startNote: 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. 🚀
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.
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 -hinspector 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 hello@callstack.com if you need any help with these or just want to say hi!
Made with create-react-native-library
MIT