Skip to content

Commit a09a722

Browse files
authored
docs: expo support (#7)
* docs: add Expo support * docs: update * docs: update * docs: update * docs: update * docs: update
1 parent f37218b commit a09a722

1 file changed

Lines changed: 60 additions & 0 deletions

File tree

README.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,12 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime
4646
npm install @callstack/react-native-release-inspector
4747
```
4848

49+
#### Additional For Expo:
50+
51+
```sh
52+
npm install --dev @react-native/metro-config@YOUR_RN_VERSION
53+
```
54+
4955
## Usage
5056

5157
#### Step 1:
@@ -57,6 +63,55 @@ import { AppRegistry } from 'react-native';
5763
```
5864

5965
#### Step 2:
66+
67+
<details>
68+
<summary>Extra Steps For Expo</summary>
69+
70+
- Create an `entry.tsx` file, if you don't have it already:
71+
```tsx
72+
import "@callstack/react-native-release-inspector";
73+
import { ExpoRoot } from "expo-router";
74+
import { AppRegistry } from "react-native";
75+
76+
function App() {
77+
const ctx = require.context("./src/app");
78+
return <ExpoRoot context={ctx} />;
79+
}
80+
81+
AppRegistry.registerComponent("main", () => App);
82+
```
83+
> This is required to allow importing `@callstack/react-native-release-inspector` as the first module
84+
85+
86+
- Update `package.json` to reflect this entry file:
87+
```diff
88+
diff --git a/package.json b/package.json
89+
index 9678783..9025fa6 100644
90+
--- a/package.json
91+
+++ b/package.json
92+
@@ -1,16 +1,19 @@
93+
{
94+
"name": "my-expo-app",
95+
- "main": "expo-router/entry",
96+
+ "main": "./entry.tsx",
97+
"version": "1.0.0",
98+
```
99+
100+
- Create a `metro.config` using `npx expo customize metro.config.js` or manually:
101+
```js
102+
const { getDefaultConfig } = require("expo/metro-config");
103+
104+
/** @type {import('expo/metro-config').MetroConfig} */
105+
const config = getDefaultConfig(__dirname);
106+
107+
module.exports = config;
108+
```
109+
</details>
110+
111+
> If you're on Expo, complete the above steps in the toggle before proceeding below.
112+
113+
<hr/>
114+
60115
Update your `metro.config` with `withReactNativeReleaseInspector`:
61116

62117
```diff
@@ -82,6 +137,11 @@ npx inspector start
82137
```
83138

84139
<br/>
140+
141+
> Note: For Expo, you will need to run the release build using the prebuild command. Expo Go does not support release builds.
142+
143+
<br/>
144+
85145
Now build and run your app in release mode, you should see the react devtools connected to your Application. 🚀
86146

87147
<hr/>

0 commit comments

Comments
 (0)