npm package: @hoanggbao00/expo-network-traffic
Description: A lightweight, real-time network traffic monitor for React Native & Expo, built with the modern Expo Modules API. (Android Only for now)
Author: hoanggbao00
Latest version: 0.1.2

# @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:

```bash
# 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:

```bash
npx expo prebuild
```

## Usage

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

```tsx
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](https://docs.expo.dev/bare/installing-expo-modules/) 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