Architecture

``
┌────────────────────┐ ┌─────────────────────┐
│ Dev Server │ │ React Native │
│┌──────────────────┐│ │ │
││ (Proxy) ││ ┌────► react-devtools-core │
││ WebSocket Server ◄─────┘ │ (WebSocket) │
││ ▲ ││ └─────────────────────┘
││ │ ││ ┌─────────────────────────┐
││ ▼ ││ │ React DevTools Frontend │
││ WebSocket Server ◄─────┐ │ │
│└──────────────────┘│ └────► WebSocket Client │
└────────────────────┘ └─────────────────────────┘
`

Installation

`bash
npm install react-native-devtools-standalone


or


yarn add react-native-devtools-standalone
`

Usage

$3

`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
interface DevToolsProxyConfig {
/**
* Configurations for client(React Native).
*/
client?: {
/**
* Dev server host.
*/
host?: string;
/**
* __REACT_DEVTOOLS_PORT__ value in React Native runtime.
*
* @see https://github.com/facebook/react-native/blob/v0.73.5/packages/react-native/Libraries/Core/setUpReactDevTools.js#L50-L53
*
* Defaults to 8097
*/
port?: number;
/**
* WebSocket delegate
*/
delegate?: ProxyWebSocketDelegate;
};
/**
* Configurations for React DevTools.
*/
devtools?: {
/**
* Dev server host.
*/
host?: string;
/**
* Port for DevTools to connect.
*
* Defaults to 8098
*/
port?: number;
/**
* WebSocket delegate
*/
delegate?: ProxyWebSocketDelegate;
};
}
`

$3

`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'
*/
host?: string;
/**
* Proxy web socket server port.
*
* Defaults to 8098
*/
port?: number;
/**
* React DevTools store config.
*/
devtoolsStoreConfig?: DevtoolsStoreConfig;
/**
* React DevTools props.
*
* Defaults to { showTabBar: true, hideViewSourceAction: true }
*/
devtoolsProps?: DevtoolsProps;
/**
* WebSocket delegate.
*/
delegate?: ProxyWebSocketDelegate;
}
`

Development

`bash


start dev server (http://localhost:3000/index.html)


yarn start
``

License

MIT