Standalone React DevTools for integration with React Native
npm install react-native-devtools-standaloneStandalone react-devtools for integration with React Native
```
┌────────────────────┐ ┌─────────────────────┐
│ Dev Server │ │ React Native │
│┌──────────────────┐│ │ │
││ (Proxy) ││ ┌────► react-devtools-core │
││ WebSocket Server ◄─────┘ │ (WebSocket) │
││ ▲ ││ └─────────────────────┘
││ │ ││ ┌─────────────────────────┐
││ ▼ ││ │ React DevTools Frontend │
││ WebSocket Server ◄─────┐ │ │
│└──────────────────┘│ └────► WebSocket Client │
└────────────────────┘ └─────────────────────────┘
`bash`
npm install react-native-devtools-standaloneor
yarn add react-native-devtools-standalone
`ts
import * as http from 'node:http';
import { setupDevToolsProxy } from 'react-native-devtools-standalone/backend';
const server = http.createServer();
const config: DevToolsProxyConfig = / /;
setupDevToolsProxy(config);
server.listen(...);
`
`ts__REACT_DEVTOOLS_PORT__
interface DevToolsProxyConfig {
/**
* Configurations for client(React Native).
*/
client?: {
/**
* Dev server host.
*/
host?: string;
/**
* value in React Native runtime.8097
*
* @see https://github.com/facebook/react-native/blob/v0.73.5/packages/react-native/Libraries/Core/setUpReactDevTools.js#L50-L53
*
* Defaults to 8098
*/
port?: number;
/**
* WebSocket delegate
*/
delegate?: ProxyWebSocketDelegate;
};
/**
* Configurations for React DevTools.
*/
devtools?: {
/**
* Dev server host.
*/
host?: string;
/**
* Port for DevTools to connect.
*
* Defaults to `
*/
port?: number;
/**
* WebSocket delegate
*/
delegate?: ProxyWebSocketDelegate;
};
}
`ts
import { setupDevTools } from 'react-native-devtools-standalone/frontend';
const config: DevToolsConfigs = {
element: document.getElementById('container'),
/ /
};
setupDevTools(config);
`
`ts
import type {
Config as DevtoolsStoreConfig,
DevtoolsProps,
} from 'react-devtools-inline/frontend';
interface DevToolsConfigs {
/**
* Element to render DevTools.
*/
element: HTMLElement;
/**
* Proxy web socket server host.
*
* Defaults to 'localhost'8098
*/
host?: string;
/**
* Proxy web socket server port.
*
* Defaults to { showTabBar: true, hideViewSourceAction: true }
*/
port?: number;
/**
* React DevTools store config.
*/
devtoolsStoreConfig?: DevtoolsStoreConfig;
/**
* React DevTools props.
*
* Defaults to `
*/
devtoolsProps?: DevtoolsProps;
/**
* WebSocket delegate.
*/
delegate?: ProxyWebSocketDelegate;
}
`bash``start dev server (http://localhost:3000/index.html)
yarn start