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

Step 1: Install the package

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

Step 2: Install peer dependencies

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.

Step 3: iOS Setup (if using CocoaPods)

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:

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

export default function App() {
  return (
    <>
      {/* Your app components */}
      <YourAppContent />
      
      {/* Add AsyncStorageManager - only shows in dev mode */}
      <AsyncStorageManager />
    </>
  );
}

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

TurboModuleRegistry Error

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:

   npm start -- --reset-cache

2. Rebuild the app:

   # 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.