How to Set Up Reactotron to Debug AsyncStorage in React Native

Why You Need This

If you're building a React Native app with local storage, you've probably wondered: "Is my data actually being saved?" or "What does my AsyncStorage look like right now?"

Sure, you could console.log everything, but that gets messy fast. Enter Reactotron — a powerful desktop app that lets you inspect AsyncStorage, monitor network requests, and debug your React Native app like a pro.

In this guide, I'll show you how to set up Reactotron in an Expo React Native app and configure it to inspect AsyncStorage. Let's dive in! 🚀

---

Prerequisites

Before we start, make sure you have:

• A React Native/Expo project set up
• @react-native-async-storage/async-storage installed
• Node.js and npm installed
• Basic familiarity with React Native

---

Step 1: Install Reactotron Packages

First, install the necessary Reactotron packages as development dependencies:

npm install --save-dev reactotron-react-native reactotron-react-js

Why both packages?

• reactotron-react-native provides React Native-specific debugging features
• reactotron-react-js is required as a peer dependency

---

Step 2: Create Reactotron Configuration

Create a new file at config/reactotron.ts (or config/reactotron.js if you're not using TypeScript):

import AsyncStorage from '@react-native-async-storage/async-storage';
import Reactotron from 'reactotron-react-native';

// Only configure Reactotron in development
if (__DEV__) {
    Reactotron
        .setAsyncStorageHandler(AsyncStorage) // Enable AsyncStorage inspection
        .configure({
            name: 'YourAppName',
            host: 'localhost', // Change to your IP if using a physical device
        })
        .useReactNative({
            asyncStorage: true, // Track AsyncStorage changes
            networking: {
                ignoreUrls: /symbolicate/, // Ignore symbolication requests
            },
            editor: false,
            errors: { veto: () => false },
            overlay: false,
        })
        .connect();

    // Clear Reactotron on app load for a fresh start
    Reactotron.clear!();

    console.log('Reactotron Configured');
}

export default Reactotron;

Key Configuration Options:

• setAsyncStorageHandler(AsyncStorage): This is crucial! It tells Reactotron how to access your AsyncStorage.
• host: 'localhost': Works for simulators/emulators. For physical devices, replace with your computer's IP address (e.g., '192.168.1.100').
• asyncStorage: true: Enables AsyncStorage monitoring in the Reactotron UI.
• __DEV__: Ensures Reactotron only runs in development, not production.

---

Step 3: Import Reactotron in Your App Entry Point

Now, we need to import Reactotron before anything else in your app. In an Expo Router app, this is typically app/_layout.tsx (or App.tsx in standard React Native).

Important: Use conditional require() to ensure it only loads in development:

// app/_layout.tsx
import { MaterialIcons } from "@expo/vector-icons";
import { Tabs } from "expo-router";

// Load Reactotron only in development
if (__DEV__) {
    require("../config/reactotron");
}

import { HousesProvider } from "../contexts/HousesContext";
import "../global.css";

export default function RootLayout() {
    return (
        <HousesProvider>
            <Tabs>
                {/* Your tabs configuration */}
            </Tabs>
        </HousesProvider>
    );
}

Why conditional require?

• Using require() inside if (__DEV__) ensures the Reactotron code is completely excluded from production builds
• This keeps your production bundle size small
• It prevents any Reactotron code from running in production

---

Step 4: Add TypeScript Types (Optional)

If you're using TypeScript, create a type definition file to avoid errors:

Create reactotron-env.d.ts in your project root:

/// <reference types="reactotron-react-native" />

import Reactotron from 'reactotron-react-native';

declare global {
  interface Console {
    tron: typeof Reactotron;
  }

  var __DEV__: boolean;
}

export {};

Then update your tsconfig.json to include this file:

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
    ".expo/types/**/*.ts",
    "expo-env.d.ts",
    "reactotron-env.d.ts"
  ]
}

---

Step 5: Download Reactotron Desktop App

Download the Reactotron desktop application from the official releases:

👉 https://github.com/infinitered/reactotron/releases

Choose the latest version for your operating system:

• macOS: Download the .dmg file
• Windows: Download the .exe installer
• Linux: Download the .AppImage or .deb file

Install and launch the app.

---

Step 6: Run Your App and Connect

Now for the moment of truth! Start your React Native app:

npm start
# Then press 'i' for iOS or 'a' for Android

When your app launches, you should see:

1. "Reactotron Configured" in your Metro console
2. Your app name appearing in the Reactotron desktop app (usually in the top-left)

---

How to Inspect AsyncStorage

Once connected, inspecting AsyncStorage is easy:

Method 1: Timeline View

1. Open Reactotron desktop app
2. Look at the Timeline (left sidebar)
3. You'll see all AsyncStorage operations (get, set, remove) logged in real-time

Method 2: AsyncStorage Browser

1. Click the "AsyncStorage" button in the top toolbar
2. You'll see a list of all keys and their values
3. Click any key to expand and view its full content
4. You can even edit or delete values directly!

Method 3: Custom Logs

In your code, you can send custom data to Reactotron:

import Reactotron from 'reactotron-react-native';

// Simple log
Reactotron.log('Houses loaded successfully!');

// Display structured data
Reactotron.display({
    name: 'Houses Data',
    value: houses,
    preview: `${houses.length} houses in storage`
});