DEV Community

Caio Barroso
Caio Barroso

Posted on

How to Inspect AsyncStorage, MMKV, and SQLite in React Native

#reactnative #mobile #devtools #sqlite

A surprising number of React Native bugs come from persisted state.

An old token, a stale cache, a feature flag that was never cleared, or a SQLite row with an unexpected value can make the app behave incorrectly.

The problem is that storage is usually invisible.

You add console.log, reload the app, clear some data, try again, and repeat.

NativeScope gives you a local way to inspect what your app is actually storing.

Get started

Install NativeScope as a development dependency:

npm install --save-dev react-native-nativescope
Enter fullscreen mode Exit fullscreen mode

Then start your project through NativeScope:

npx nativescope
Enter fullscreen mode Exit fullscreen mode

Once your app connects, open the local Studio and go to Storage.

There is no provider to add, no root component wrapper, and no need to rewrite your storage code.

NativeScope can inspect:

• AsyncStorage

• MMKV

• expo-sqlite

• op-sqlite

See it in action

Inspect and edit live storage

You can browse keys, search values, inspect MMKV instances, and explore SQLite tables while the app is running.

This is useful for debugging:

• Authentication state

• Cached API responses

• Feature flags

• Onboarding progress

• Offline queues

• User preferences

• SQLite migrations

You can also edit values directly from the Studio and see how the running app reacts.

When the app changes storage, the Studio shows the update. When you edit a value from the Studio, the app receives the change.

Understand what changed

Sometimes the important question is not what is stored now.

It is what changed after a specific action.

NativeScope lets you create snapshots, compare storage states, and restore previous values. This makes it easier to understand what happened after login, logout, a network response, or a database migration.

Connect storage with the rest of the story

Storage is often only part of the problem.

A request may return 401, the app may save a new token, and a log may explain why the next request failed.

NativeScope Timeline puts Logs, Network, and Storage around the same moment, so the request, the log, and the state change remain connected.

You can also enable Logs and Network with the same configuration:

import { defineNativeScopeConfig } from "react-native-nativescope/app";

export default defineNativeScopeConfig({
  modules: {
    logs: true,
    network: true,
  },
});
Enter fullscreen mode Exit fullscreen mode

Local by design

NativeScope is made for development. It runs locally, requires no account, and does not send your development data to a hosted dashboard.

It is not a production monitoring tool. It is a faster way to understand the app while you are building it.

If your current workflow is adding console.log, clearing storage, and restarting the app, NativeScope gives you a much clearer view of what is really happening.

Learn more at nativescope.dev.

Suggested tags:

reactnative, debugging, javascript, sqlite, devtools

Top comments (0)