Safely migrate from AsyncStorage

[Jalson1982]

Hello. I really want to replace in my app on all the place AsyncStorage and use MMKV. The problem I have is that I use async storage with redux persist and if I want to change to MMKV I will need to log out users as in redux persist I keep info if the user has a profile, authenticated, etc. Any idea maybe how safely do migration if it is possible?

[mrousavy]

Well yeah, you can just use something like this:

const hasMigrated = MMKV.getBoolean("hasMigratedFromAsyncStorage")
if (!hasMigrated) {
  const keys = await AsyncStorage.getAllKeys();
  const values = await AsyncStorage.multiGet(keys);

  values.forEach(([key, value]) => {
    MMKV.set(key, value)
  });

  MMKV.set("hasMigratedFromAsyncStorage", true)

  await AsyncStorage.clear(); // (optional)
}

See AsyncStorage's getAllKeys, multiGet and clear functions

[tothvoj-gl]

The migration script is working fine in most cases, but when the apollo-cache-persist item in AsyncStorage is more than 2MB in size, than AsyncStorage.multiGet(keys) will throw an exception. The stacktrace is native C++ pointing to MMKV which is weird and prolonged the investigation of the root cause for us. That's why I wanted to mention here. Below you can find our migration script which wont crash the app if this happens:

const keys = await AsyncStorage.getAllKeys();

 // eslint-disable-next-line no-restricted-syntax
 for (const key of keys) {
   try {
     // eslint-disable-next-line no-await-in-loop
     const value = await AsyncStorage.getItem(key);

     if (value !== null) {
       if (['true', 'false'].includes(value)) {
         MMKV.setBool(key, value === 'true');
       } else {
         MMKV.setString(key, value);
       }

       AsyncStorage.removeItem(key);
     }
   } catch (error) {
     
   }
 }

[mrousavy]

Might be an out of memory exception for the MMKV instance? Don't forget that MMKV is an in-memory database

[tothvoj-gl]

No, it was this exception: https://stackoverflow.com/questions/57014171/react-native-asyncstorage-row-too-big-to-fit-into-cursorwindow

[mrousavy]

Here's an up-to-date snippet to migrate from AsyncStorage to MMKV using the latest version of both:

storage.ts

import AsyncStorage from '@react-native-async-storage/async-storage'; import {MMKV} from 'react-native-mmkv'; export const storage = new MMKV(); // TODO: Remove `hasMigratedFromAsyncStorage` after a while (when everyone has migrated) export const hasMigratedFromAsyncStorage = storage.getBoolean( 'hasMigratedFromAsyncStorage', ); // TODO: Remove `hasMigratedFromAsyncStorage` after a while (when everyone has migrated) export async function migrateFromAsyncStorage(): Promise<void> { console.log('Migrating from AsyncStorage -> MMKV...'); const start = global.performance.now(); const keys = await AsyncStorage.getAllKeys(); for (const key of keys) { try { const value = await AsyncStorage.getItem(key); if (value != null) { if (['true', 'false'].includes(value)) { storage.set(key, value === 'true'); } else { storage.set(key, value); } AsyncStorage.removeItem(key); } } catch (error) { console.error( `Failed to migrate key "${key}" from AsyncStorage to MMKV!`, error, ); throw error; } } storage.set('hasMigratedFromAsyncStorage', true); const end = global.performance.now(); console.log(`Migrated from AsyncStorage -> MMKV in ${end - start}ms!`); }

App.tsx

... import { hasMigratedFromAsyncStorage, migrateFromAsyncStorage } from './storage'; ... export default function App() { // TODO: Remove `hasMigratedFromAsyncStorage` after a while (when everyone has migrated) const [hasMigrated, setHasMigrated] = useState(hasMigratedFromAsyncStorage); ... useEffect(() => { if (!hasMigratedFromAsyncStorage) { InteractionManager.runAfterInteractions(async () => { try { await migrateFromAsyncStorage() setHasMigrated(true) } catch (e) { // TODO: fall back to AsyncStorage? Wipe storage clean and use MMKV? Crash app? } }); } }, []); if (!hasMigrated) { // show loading indicator while app is migrating storage... return ( <View style={{ justifyContent: 'center', alignItems: 'center' }}> <ActivityIndicator color="black" /> </View> ); } return ( <YourAppsCode /> ); }

[mrousavy]

The migration script is now added to the Documentation here, so these comments might be outdated.

[mattijsf]

May I ask why this migration script is using runAfterInteractions?

[mrousavy]

No idea, you can remove it as well

@mrousavy instead of reading every item you can use multi get:

-const value = await AsyncStorage.getItem(key);

+const keys = await AsyncStorage.getAllKeys();
+const entries = await AsyncStorage.multiGet(keys);