Installation
React Native Dev Inspector consists of several packages that work together:
| Package | Required | Description |
|---|---|---|
react-native-dev-inspector | yes | Main package - the Inspector component, plus the Metro plugin at /metro |
@rn-dev-inspector/babel-plugin | yes | Injects source locations into JSX at build time |
@rn-dev-inspector/core | (transitive) | Core Inspector component and utilities |
@rn-dev-inspector/metro-plugin | (transitive) | Server middleware for launching your editor |
@rn-dev-inspector/expo-plugin | no | Optional expo prebuild setup helper |
The babel plugin is required
React 19 removed the _source metadata that earlier versions attached to
elements, so on React 19 / React Native 0.78+ the babel plugin is the only
thing that can tell the inspector where a component comes from. Without it the
panel opens but shows "No source info available".
Choose Your Setup
- Expo
- Bare React Native
- Yarn
- pnpm
npx expo install react-native-dev-inspector
npm install --save-dev @rn-dev-inspector/babel-plugin
# optional prebuild setup helper
npm install --save-dev @rn-dev-inspector/expo-plugin
Then follow the Expo Setup guide.
npm install react-native-dev-inspector
npm install --save-dev @rn-dev-inspector/babel-plugin
Then follow the Bare React Native guide.
yarn add react-native-dev-inspector
yarn add --dev @rn-dev-inspector/babel-plugin
pnpm add react-native-dev-inspector
pnpm add -D @rn-dev-inspector/babel-plugin
Requirements
- React Native 0.68+
- React 17+
- Node.js 18+
TypeScript Support
All packages include TypeScript type definitions out of the box. No additional @types/* packages needed.