<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Caio Barroso</title>
    <description>The latest articles on DEV Community by Caio Barroso (@caiobarroso).</description>
    <link>https://dev.to/caiobarroso</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4059824%2F2da6bd73-de1c-4ec2-8158-6dee05fc5c00.png</url>
      <title>DEV Community: Caio Barroso</title>
      <link>https://dev.to/caiobarroso</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/caiobarroso"/>
    <language>en</language>
    <item>
      <title>How to Inspect AsyncStorage, MMKV, and SQLite in React Native</title>
      <dc:creator>Caio Barroso</dc:creator>
      <pubDate>Mon, 03 Aug 2026 04:16:33 +0000</pubDate>
      <link>https://dev.to/caiobarroso/how-to-inspect-asyncstorage-mmkv-and-sqlite-in-react-native-2fo</link>
      <guid>https://dev.to/caiobarroso/how-to-inspect-asyncstorage-mmkv-and-sqlite-in-react-native-2fo</guid>
      <description>&lt;p&gt;A surprising number of React Native bugs come from persisted state.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;The problem is that storage is usually invisible.&lt;/p&gt;

&lt;p&gt;You add &lt;code&gt;console.log&lt;/code&gt;, reload the app, clear some data, try again, and repeat.&lt;/p&gt;

&lt;p&gt;NativeScope gives you a local way to inspect what your app is actually storing.&lt;/p&gt;

&lt;h2&gt;
  
  
  Get started
&lt;/h2&gt;

&lt;p&gt;Install NativeScope as a development dependency:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--save-dev&lt;/span&gt; react-native-nativescope
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then start your project through NativeScope:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx nativescope
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Once your app connects, open the local Studio and go to Storage.&lt;/p&gt;

&lt;p&gt;There is no provider to add, no root component wrapper, and no need to rewrite your storage code.&lt;/p&gt;

&lt;p&gt;NativeScope can inspect:&lt;/p&gt;

&lt;p&gt;• AsyncStorage&lt;br&gt;&lt;br&gt;
• MMKV&lt;br&gt;&lt;br&gt;
• expo-sqlite&lt;br&gt;&lt;br&gt;
• op-sqlite  &lt;/p&gt;
&lt;h2&gt;
  
  
  See it in action
&lt;/h2&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/YtwUsWQtMqA"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Inspect and edit live storage
&lt;/h2&gt;

&lt;p&gt;You can browse keys, search values, inspect MMKV instances, and explore SQLite tables while the app is running.&lt;/p&gt;

&lt;p&gt;This is useful for debugging:&lt;/p&gt;

&lt;p&gt;• Authentication state&lt;br&gt;&lt;br&gt;
• Cached API responses&lt;br&gt;&lt;br&gt;
• Feature flags&lt;br&gt;&lt;br&gt;
• Onboarding progress&lt;br&gt;&lt;br&gt;
• Offline queues&lt;br&gt;&lt;br&gt;
• User preferences&lt;br&gt;&lt;br&gt;
• SQLite migrations  &lt;/p&gt;

&lt;p&gt;You can also edit values directly from the Studio and see how the running app reacts.&lt;/p&gt;

&lt;p&gt;When the app changes storage, the Studio shows the update. When you edit a value from the Studio, the app receives the change.&lt;/p&gt;
&lt;h2&gt;
  
  
  Understand what changed
&lt;/h2&gt;

&lt;p&gt;Sometimes the important question is not what is stored now.&lt;/p&gt;

&lt;p&gt;It is what changed after a specific action.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;
&lt;h2&gt;
  
  
  Connect storage with the rest of the story
&lt;/h2&gt;

&lt;p&gt;Storage is often only part of the problem.&lt;/p&gt;

&lt;p&gt;A request may return &lt;code&gt;401&lt;/code&gt;, the app may save a new token, and a log may explain why the next request failed.&lt;/p&gt;

&lt;p&gt;NativeScope Timeline puts Logs, Network, and Storage around the same moment, so the request, the log, and the state change remain connected.&lt;/p&gt;

&lt;p&gt;You can also enable Logs and Network with the same configuration:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;defineNativeScopeConfig&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react-native-nativescope/app&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nf"&gt;defineNativeScopeConfig&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;modules&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;logs&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;network&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Local by design
&lt;/h2&gt;

&lt;p&gt;NativeScope is made for development. It runs locally, requires no account, and does not send your development data to a hosted dashboard.&lt;/p&gt;

&lt;p&gt;It is not a production monitoring tool. It is a faster way to understand the app while you are building it.&lt;/p&gt;

&lt;p&gt;If your current workflow is adding &lt;code&gt;console.log&lt;/code&gt;, clearing storage, and restarting the app, NativeScope gives you a much clearer view of what is really happening.&lt;/p&gt;

&lt;p&gt;Learn more at &lt;a href="https://nativescope.dev" rel="noopener noreferrer"&gt;nativescope.dev&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Suggested tags:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;reactnative&lt;/code&gt;, &lt;code&gt;debugging&lt;/code&gt;, &lt;code&gt;javascript&lt;/code&gt;, &lt;code&gt;sqlite&lt;/code&gt;, &lt;code&gt;devtools&lt;/code&gt;&lt;/p&gt;

</description>
      <category>reactnative</category>
      <category>mobile</category>
      <category>devtools</category>
      <category>sqlite</category>
    </item>
  </channel>
</rss>
