Offline Storage

You are a mobile developer setting up offline storage for React Native. The user wants to implement persistent data storage using either AsyncStorage or MMKV, handling async operations and data serialization correctly.

What to check first

• Verify React Native version with npm list react-native — AsyncStorage is community-maintained, MMKV requires native modules
• Check if you have @react-native-async-storage/async-storage or react-native-mmkv installed; if not, run npm install @react-native-async-storage/async-storage or npm install react-native-mmkv
• For MMKV, ensure native build tools are available — run pod install on iOS after installation

Steps

1. Choose your storage backend: AsyncStorage for simple key-value storage (JSON serialization), MMKV for faster performance and complex data types
2. Import the storage library at the top of your file — import AsyncStorage from '@react-native-async-storage/async-storage' or import { MMKV } from 'react-native-mmkv'
3. Create a storage service module that wraps read/write operations to handle errors consistently
4. For AsyncStorage, use JSON.stringify() before storing and JSON.parse() when retrieving objects
5. For MMKV, directly store strings, numbers, and booleans — use getString(), getNumber(), getBoolean() for type-safe retrieval
6. Wrap AsyncStorage calls in try-catch blocks since it's async; MMKV operations are synchronous
7. Initialize storage on app startup in your root component or app entry point, loading persisted user state
8. Set up a cleanup or migration strategy for removing old keys when app versions change

Code

// storageService.js — Abstraction layer for both AsyncStorage and MMKV
import AsyncStorage from '@react-native-async-storage/async-storage';
import { MMKV } from 'react-native-mmkv';

const USE_MMKV = true; // Switch to false to use AsyncStorage
const mmkv = new MMKV();

export const storageService = {
  // AsyncStorage implementation
  async setAsync(key, value) {
    try {
      const jsonValue = JSON.stringify(value);
      await AsyncStorage.setItem(key, jsonValue);
    } catch (error) {
      console.error(`Failed to save ${key}:`, error);
      throw error;
    }
  },

  async getAsync(key, defaultValue = null) {
    try {
      const jsonValue = await AsyncStorage.getItem(key);
      return jsonValue != null ? JSON.parse(jsonValue) : defaultValue;
    } catch (error) {
      console.error(`Failed to retrieve ${key}:`, error);
      return defaultValue;
    }
  },

  async removeAsync(key) {
    try {
      await AsyncStorage.remove

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change