This content originally appeared on DEV Community and was authored by Cathy Lai
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-storageinstalled - 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-nativeprovides React Native-specific debugging features -
reactotron-react-jsis 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()insideif (__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
.dmgfile -
Windows: Download the
.exeinstaller -
Linux: Download the
.AppImageor.debfile
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:
- "Reactotron Configured" in your Metro console
- 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
- Open Reactotron desktop app
- Look at the Timeline (left sidebar)
- You'll see all AsyncStorage operations (get, set, remove) logged in real-time
Method 2: AsyncStorage Browser
- Click the "AsyncStorage" button in the top toolbar
- You'll see a list of all keys and their values
- Click any key to expand and view its full content
- 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`
});
This content originally appeared on DEV Community and was authored by Cathy Lai
Cathy Lai | Sciencx (2025-10-12T23:00:02+00:00) How to Set Up Reactotron to Debug AsyncStorage in React Native. Retrieved from https://www.scien.cx/2025/10/12/how-to-set-up-reactotron-to-debug-asyncstorage-in-react-native/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.