react-native-async-storage-viewer

View, search, edit, and delete React Native AsyncStorage from your browser — in real time.

Zero native dependencies. Works with any React Native version. No linking, pods, or Gradle changes.

Features

• Real-time sync — changes appear in the browser within ~1 second
• Web dashboard at http://localhost:9090
• Search and filter by key or value
• Pagination (20, 50, 100, or all)
• Edit and delete entries from the browser
• Storage stats (entry count and total size)
• JSON auto-formatting and syntax highlighting
• Bidirectional sync between app and dashboard
• SSE connection with auto-reconnect
• Dev-only — disabled in production (__DEV__ guard)
• iOS and Android (emulator and physical devices)
• Custom storage support via createAsyncStorage
• Compatible with AsyncStorage v1.x, v2.x, and v3.x

How it works

┌─────────────────┐         fetch (push/poll)         ┌──────────────────┐
│  React Native   │  ──────────────────────────────▶  │  CLI Server      │
│  App            │  ◀──────────────────────────────  │  (Node.js)       │
└─────────────────┘         commands (poll)          └────────┬─────────┘
                                                                │ SSE
                                                                ▼
                                                       ┌──────────────────┐
                                                       │  Web Dashboard   │
                                                       └──────────────────┘

1. A Node.js CLI server runs on your machine and serves the dashboard.
2. The app pushes AsyncStorage snapshots to the server every second via fetch().
3. The server broadcasts updates to the browser over Server-Sent Events.
4. Edits from the browser are queued and applied on the app’s next poll.

Installation

npm install react-native-async-storage-viewer
# or
yarn add react-native-async-storage-viewer

Peer dependency:

npm install @react-native-async-storage/async-storage

Quick start

1. Add to your app

import React from 'react';
import { View } from 'react-native';
import { StorageViewer } from 'react-native-async-storage-viewer';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      {/* Your app content */}
      {__DEV__ && <StorageViewer />}
    </View>
  );
}

2. Start the server

npx storage-viewer-server
# custom port:
npx storage-viewer-server --port 9090

3. Open the dashboard

Go to http://localhost:9090 in your browser.

Custom storage (v3.x)

If you use createAsyncStorage with a named database, pass the same instance to the viewer:

import { createAsyncStorage } from '@react-native-async-storage/async-storage';
import { StorageViewer } from 'react-native-async-storage-viewer';

const myStorage = createAsyncStorage('myAppDB');

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      {__DEV__ && <StorageViewer storage={myStorage} />}
    </View>
  );
}

Imperative API

import { startStorageViewer } from 'react-native-async-storage-viewer';
import { createAsyncStorage } from '@react-native-async-storage/async-storage';

const myStorage = createAsyncStorage('myAppDB');

if (__DEV__) {
  startStorageViewer({ port: 9090, storage: myStorage });
}

Configuration

| Option | Type | Default | Description | |--------|------|---------|-------------| | port | number | 9090 | CLI server port | | host | string | 'localhost' | CLI server host | | pollInterval | number | 1000 | Sync interval (ms) | | storage | object | Default AsyncStorage | Custom storage instance |

Device setup

Android emulator

The package maps localhost to 10.0.2.2 automatically. Also run:

adb reverse tcp:9090 tcp:9090

Physical device

Use your computer’s local IP as the host:

{__DEV__ && <StorageViewer host="192.168.1.100" />}

Troubleshooting

| Issue | Fix | |-------|-----| | Dashboard shows “Waiting for app to connect” | Start the CLI server, run the app in dev mode, and confirm the port matches | | Empty dashboard with custom storage | Pass the same storage instance to <StorageViewer /> | | Slow updates | Lower pollInterval (e.g. 500) | | Android emulator can’t connect | Run adb reverse tcp:9090 tcp:9090 | | Physical device can’t connect | Set host to your machine’s local IP |

Compatibility

• React Native 0.60+ (0.72+, 0.73+, 0.74+, 0.76+)
• @react-native-async-storage/async-storage v1.x, v2.x, v3.x
• Expo (managed and bare)
• Hermes and JSC
• No native modules

License

MIT