Popularity
3.2
Growing
Activity
6.5
Declining
171
6
11

Description

An HTTP traffic monitor for React Native including in app interface.

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

Programming language: TypeScript
License: MIT License
Tags: iOS     Android     Networking     Debugging    
Latest version: v1.8.1

react-native-network-logger alternatives and similar libraries

Based on the "Debugging" category.
Alternatively, view react-native-network-logger alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-native-network-logger or a related project?

Add another 'Debugging' Library

README

react-native-network-logger GitHub stars

CI Dependencies npm npm bundle size npm downloads [License](./LICENSE)

An HTTP traffic monitor for React Native including in app interface.

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 request/response headers and body
  • 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

Max Requests

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 });

Sorting

Set the sort order of requests. Options are asc or desc, default is desc (most recent at the top).

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

const MyScreen = () => <NetworkLogger sort="asc" />;

Integrate with existing navigation

Use your existing back button (e.g. in your navigation header) to navigate within the network logger.

import NetworkLogger, { getBackHandler } from 'react-native-network-logger';

const navigation = useNavigation();
const onBack = getBackHandler(navigation.goBack);

const MyScreen = () => (
  <Screen onBackPressed={onBack}>
    <NetworkLogger />
  </Screen>
);

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.

For more setup and development details, see Contributing.

Contributing

Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.


*Note that all licence references and agreements mentioned in the react-native-network-logger README section above are relevant to that project's source code only.