An HTTP traffic monitor for React Native including in app interface

by React Native Example

react-native-network-logger

An alternative to Wormholy but for both iOS and Android and with zero native dependencies.

Features

  • Log networks requests on iOS and Android
  • View network requests made with in app viewer
  • Debug network requests on release builds
  • Individually view headers sent, received and body sent and received
  • Copy or share headers, body or full request
  • Share cURL representation of request
  • Zero native or JavaScript dependencies
  • Built in TypeScript definitions

Screenshots

iOS

Android

Setup

Install

yarn add react-native-network-logger

or

npm install --save react-native-network-logger

Start Logging

Call startNetworkLogging in your apps entry point to log every request, or call it on a button press to manually trigger it.

import { startNetworkLogging } from 'react-native-network-logger';

startNetworkLogging();
AppRegistry.registerComponent('App', () => App);

Display Requests and Responses

import NetworkLogger from 'react-native-network-logger';

const MyScreen = () => <NetworkLogger />;

Themes

You can change between the dark and light theme by passing the theme prop with "dark" or "light".

import NetworkLogger from 'react-native-network-logger';

const MyScreen = () => <NetworkLogger theme="dark" />;

Logging options

You can configure the max number of requests stored on the device using by calling startNetworkLogging with the maxRequests option. The default is 500.

startNetworkLogging({ maxRequests: 500 });

Example App

To test the example app, after cloning the repo, install the required dependencies by running:

yarn bootstrap

Then start the example app by running:

yarn example start

You should then be able to open the expo server at http://localhost:3000/ and launch the app on iOS or Android.

GitHub