@hoanggbao00/expo-network-traffic 0.1.0 → 0.1.1

package/README.md

@@ -1,35 +1,131 @@
 # @hoanggbao00/expo-network-traffic
 
-A lightweight, real-time network traffic monitor for React Native & Expo, built with the modern Expo Modules API. (Android Only for now)
+A lightweight, real-time network traffic monitor for React Native & Expo, built with the modern Expo Modules API.
 
-# API documentation
+> [!IMPORTANT]
+> Currently supports **Android only**. iOS support is not planned due OS Limitation.
 
-- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/network-traffic/)
-- [Documentation for the main branch](https://docs.expo.dev/versions/unversioned/sdk/network-traffic/)
+## Features
 
-# Installation in managed Expo projects
+- 🚀 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.)
 
-For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.
+## Installation
 
-# Installation in bare React Native projects
+### 1. Install the package
 
-For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.
+Choose your preferred package manager:
 
-### Add the package to your npm dependencies
+```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
 ```
-npm install expo-network-traffic
+
+## 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,
+  },
+});
 ```
 
-### Configure for Android
+## 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
 
-### Configure for iOS
+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:
 
-Run `npx pod-install` after installing the npm package.
+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.
 
-# Contributing
+## License
 
-Contributions are very welcome! Please refer to guidelines described in the [contributing guide]( https://github.com/expo/expo#contributing).
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoanggbao00/expo-network-traffic",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A lightweight, real-time network traffic monitor for React Native & Expo, built with the modern Expo Modules API. (Android Only for now)",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -59,4 +59,4 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   }
-}
+}