@hoanggbao00/expo-network-traffic

A lightweight, real-time network traffic monitor for React Native & Expo, built with the modern Expo Modules API.

[!IMPORTANT] Currently supports Android only. iOS support is not planned due OS Limitation.

Features

• 🚀 Built with Expo Modules API (Swift/Kotlin)
• 📊 Real-time download and upload speed tracking
• 📈 Total data usage (Rx/Tx bytes)
• 🎣 Easy-to-use React Hook
• 📏 Automatic formatting (B/s, KB/s, MB/s, etc.)

Installation

1. Install the package

Choose your preferred package manager:

# Using bun
bun add @hoanggbao00/expo-network-traffic

# Using npm
npm install @hoanggbao00/expo-network-traffic

# Using yarn
yarn add @hoanggbao00/expo-network-traffic

# Using pnpm
pnpm add @hoanggbao00/expo-network-traffic

2. Prebuild native files

Since this is a native module, you need to prebuild your project to generate the necessary native code:

npx expo prebuild

Usage

The simplest way to use this library is through the useNetworkTraffic hook.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useNetworkTraffic } from '@hoanggbao00/expo-network-traffic';

export default function App() {
  const { downStr, upStr, totalDown, totalUp } = useNetworkTraffic({
    interval: 1000, // Update every 1 second
    enabled: true,
    decimals: 2,
  });

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Download Speed: {downStr}</Text>
      <Text style={styles.label}>Upload Speed: {upStr}</Text>
      <View style={styles.divider} />
      <Text style={styles.info}>Total Downloaded: {(totalDown / 1024 / 1024).toFixed(2)} MB</Text>
      <Text style={styles.info}>Total Uploaded: {(totalUp / 1024 / 1024).toFixed(2)} MB</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  label: {
    fontSize: 18,
    fontWeight: 'bold',
    marginVertical: 5,
  },
  info: {
    fontSize: 14,
    color: '#666',
    marginTop: 5,
  },
  divider: {
    height: 1,
    backgroundColor: '#eee',
    width: '100%',
    marginVertical: 15,
  },
});

API Reference

useNetworkTraffic(options)

Options

| Property | Type | Default | Description | | :--- | :--- | :--- | :--- | | interval | number | 3000 | Update interval in milliseconds | | enabled | boolean | true | Whether the monitor is active | | decimals | number | 2 | Number of decimal places for formatted strings |

Returns (NetworkTrafficResult)

| Property | Type | Description | | :--- | :--- | :--- | | downSpeed | number | Current download speed in bytes/sec | | upSpeed | number | Current upload speed in bytes/sec | | totalDown | number | Total bytes received since device boot | | totalUp | number | Total bytes sent since device boot | | downStr | string | Formatted download speed (e.g., "1.2 MB/s") | | upStr | string | Formatted upload speed (e.g., "500 KB/s") |

Bare React Native Projects

If you are using a bare React Native project (not managed by Expo), you must first install the expo package to enable Expo Modules support:

1. Install expo: Follow the official guide to install and configure the expo package.
2. Install this package: bun add @hoanggbao00/expo-network-traffic
3. Prebuild: Run npx expo prebuild to configure the native projects.

License

MIT