NativeScope / Network

Network quickstart

Enable Network in one config line and verify that requests reach the Studio.

Install and run

NativeScope uses one package for every module.

npm install --save-dev react-native-nativescope
yarn add --dev react-native-nativescope
pnpm add -D react-native-nativescope
bun add --dev react-native-nativescope

Create nativescope.config.ts in the app root:

import { defineNativeScopeConfig } from "react-native-nativescope/app";
 
export default defineNativeScopeConfig({
  modules: {
    network: true,
  },
});

Then start the project through NativeScope:

npx nativescope
yarn nativescope
pnpm nativescope
bunx nativescope

Open the app normally. Network → Requests appears in the Studio as soon as the module connects.

Use Network and Storage together

Modules live in the same object. There is still one dependency, one command and one Studio.

export default defineNativeScopeConfig({
  modules: {
    storage: {
      indicator: true,
      reactQuery: true,
    },
    network: true,
  },
});

Storage discovery itself remains automatic. The storage block above enables Storage and tunes its app-side behavior; network: true enables Network capture.

Verify capture

Trigger any screen that calls fetch or XMLHttpRequest. The newest request appears first with:

  • method and endpoint;
  • status;
  • elapsed time;
  • captured size;
  • a replay tag when the request came from the replay editor.

Select it to inspect the complete exchange.

Continue with Inspecting requests, or open the dedicated GraphQL guide.

If nothing appears

  1. Confirm the app was restarted after adding network: true.
  2. Confirm Metro is running through nativescope.
  3. Check that the request uses global fetch or XMLHttpRequest.
  4. Check ignoreUrls if you configured custom exclusions.

The Network module does not currently capture WebSocket frames.