AsyncStorage Manager

A lightweight, dev-only package for managing AsyncStorage in React Native apps. Simple floating button UI to view, add, edit, delete, and manage all AsyncStorage items during development.

Features

- ✅ View all AsyncStorage items
- ✅ Add new key-value pairs
- ✅ Edit existing values
- ✅ Delete individual items
- ✅ Clear all AsyncStorage
- ✅ Copy values to clipboard (optional)
- ✅ Simple floating button
- ✅ Dev mode only (automatically disabled in production)
- ✅ No TurboModuleRegistry errors - safe lazy loading

Installation

$3

``bash
npm install react-native-async-storage-manager


or


yarn add react-native-async-storage-manager
`

$3

`bash
npm install @react-native-async-storage/async-storage @react-native-clipboard/clipboard


or


yarn add @react-native-async-storage/async-storage @react-native-clipboard/clipboard
`

Note: @react-native-clipboard/clipboard is optional. The package works without it, but copy functionality won't be available.

$3

`bash
cd ios && pod install && cd ..
`

Usage

Simply import and add the component to your root component (e.g., App.tsx). The package is safe to import at the top level without causing TurboModuleRegistry errors:

`tsx
import React from 'react';
import AsyncStorageManager from 'react-native-async-storage-manager';

export default function App() {
return (
<>
{/ Your app components /}


{/ Add AsyncStorageManager - only shows in dev mode /}


);
}
`

That's it! A floating button (⚙️) will appear in the bottom-right corner in dev mode.

How It Works

1. Floating Button: A simple button appears in the bottom-right corner (only in dev mode)
2. Modal: Tap the button to open a modal showing all AsyncStorage items
3. Manage Storage:
- View all key-value pairs
- Add new items
- Edit existing values
- Delete items
- Clear all storage
- Copy values to clipboard (if clipboard package is installed)

Requirements

- React Native 0.60+
- React 16.8+ (hooks support)
- Dev mode only (__DEV__) - automatically disabled in production builds

Peer Dependencies

- react - React library
- react-native - React Native framework
- @react-native-async-storage/async-storage - Required - AsyncStorage implementation
- @react-native-clipboard/clipboard - Optional - For copy to clipboard functionality

Why This Package?

- Lightweight: Only 2 peer dependencies (1 required, 1 optional)
- Simple: Uses React Native's built-in Modal - no heavy UI libraries
- Safe: Lazy loads all modules to prevent TurboModuleRegistry errors
- Zero Config: Works out of the box when imported in App.tsx

Troubleshooting

$3

This package is designed to prevent TurboModuleRegistry errors by:
- Lazy loading all React Native modules (not importing at the top level)
- Delaying module initialization until after the native bridge is ready (100ms delay)
- Using safe error handling to prevent crashes

If you still see this error:

1. Clear Metro cache:
`bash
npm start -- --reset-cache
`

2. Rebuild the app:
`bash
# iOS
cd ios && pod install && cd .. && npx react-native run-ios

# Android
npx react-native run-android
`

The package uses a 100ms delay before loading modules to ensure the native bridge is fully initialized, which prevents TurboModuleRegistry errors when imported in App.tsx`.