Migrating from deprecated react-native API to this package doesn't see stored data

[coolsoftwaretyler]

What happened?

I'm on React Native version 0.69.7 and currently using their deprecated AsyncStorage.

I want to migrate over to this package since it's the recommended solution. But when I do, the new package doesn't seem to pick up on my storage on the iPhone simulator

Here's the diff, I'm running it in a few different files:

-import { AsyncStorage } from 'react-native'
+import AsyncStorage from '@react-native-async-storage/async-storage'

When I make that change, I lose persisted data on the simulator. When I run git stash, I can access my data again. This behavior (undoing the changes, seeing my persisted data) makes me think that @react-native-async-storage/async-storage is somehow talking to a different store than React Native's version.

Version

1.17.10

What platforms are you seeing this issue on?

• Android
• iOS
• macOS
• Windows
• web

System Information

System:
    OS: macOS 13.0
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Memory: 19.19 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.asdf/installs/nodejs/16.14.0/bin/node
    Yarn: 1.22.11 - ~/.asdf/shims/yarn
    npm: 8.3.1 - ~/.asdf/plugins/nodejs/shims/npm
    Watchman: 2022.10.31.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/tylerwilliams/.asdf/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.17 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0
    react-native: 0.69.7 => 0.69.7
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to Reproduce

So I made a reproduction repo and was not able to reproduce the bug. I totally understand if you close this issue, but I'm hoping by posting here, someone might know of something I did wrong.

So if you grab this repo: https://github.com/coolsoftwaretyler/AsyncStorageBugRepro

Then use the old AsyncStorage import from react-native and uncomment this line, then run the app, it'll set the value.

Then close the app, comment the line out, and swap to using @react-native-async-storage/async-storage. I expected not to get the value, but it does work in my reproduction app.

[coolsoftwaretyler]

Unfortunately I can't post my actual production code here, but I can say that I ran an experiment with getAllKeys. At the top level of my app, I added:

import { AsyncStorage } from 'react-native'
import NewAsyncStorage from '@react-native-async-storage/async-storage'
AsyncStorage.getAllKeys().then((keys) => {
  console.log('Old AsyncStorage keys:')
  console.log(keys)
})

NewAsyncStorage.getAllKeys().then((keys) => {
  console.log('New AsyncStorage keys:')
  console.log(keys)
})

This outputs:

 LOG  Old AsyncStorage keys:
 LOG  ["NflLeagueSettingsStore", "LeagueSyncStore", "BULLET_TRAIN_EVENT", "@REACTOTRON/clientId"]
 LOG  New AsyncStorage keys:
 LOG  ["tHW94ljWbAX6Ac3xbr1d9LnndWmz0G3t-userInfo", "tHW94ljWbAX6Ac3xbr1d9LnndWmz0G3t-events", "YeqBLMasPEuK4qamxQXiAz1FSHf0GfvM-context", "YeqBLMasPEuK4qamxQXiAz1FSHf0GfvM-userInfo", "tHW94ljWbAX6Ac3xbr1d9LnndWmz0G3t-context", "YeqBLMasPEuK4qamxQXiAz1FSHf0GfvM-events", "tHW94ljWbAX6Ac3xbr1d9LnndWmz0G3t-settings", "YeqBLMasPEuK4qamxQXiAz1FSHf0GfvM-settings"]

Again, I understand if this isn't something y'all are able to troubleshoot, but hopefully someone has seen this kind of behavior before and can give me some guidance? Thanks in advance for your attention.

[krizzu]

We have migration logic in place, to move from the deprecated AS storage location to a new one, recommended one. Code is here

We check the modification date of each directory and depending on which one was used more recently, we do different actions (for example, if you used this AsyncStorage, then switched back to DeprecatedAS, then again switched to AsyncStorage, your AsyncStorage data would be wiped out and rewritten with DeprecatedAS).

Using both at the same time would probably result in a condition race for which one to use. It's better to stop using deprecated one and replace it completely with AsyncStorage.

[coolsoftwaretyler]

Thanks @krizzu, I can see how having it at the same time would be a problem.

Would that race condition happen if we had installed this AsyncStorage but never used it?

When we did a recent expo upgrade, we installed the dependency, but never called in in any JS code (until my work now, which is failing). I haven't actually tried running it concurrently except to demo here. Would that still cause problems?

[coolsoftwaretyler]

So I was hoping I could get this to work by uninstalling the package, saving my data with the old AsyncStorage, then reinstalling. But I got stuck halfway through. Here's a set of steps I've tried:

Reproducing the issue on my app

1. Switch back to main where we're using old AsyncStorage from react-native, but we have @react-native-async-storage/async-storage as a dependency (not used anywhere, just in our package.json and installed)
2. rm -rf node_modules/
3. cd ios && rm -rf Pods/
4. Clean xcode workspace
5. Erase all content and settings on iPhone Simulator
6. cd .. && yarn install
7. cd ios && bundle exec pod install
8. Build app to simulator (which was recently erased)
9. Do something that should be persisted to storage. Here is a screenshot of my saved league (data for which we set in AsyncStorage with setItem and retrieve with getItem calls - we use JSON.stringify/JSON.parse on that data, respectively):

10. Close simulator and metro
11. Clean build folder
12. Change every instance of import { AsyncStorage } from 'react-native' to import AsyncStorage from '@react-native-async-storage/async-storage'
13. Build app to same simulator
14. Expected to see the same data from the first screenshot, but it's empty:

Trying to resolve possible race condition caused by having both AsyncStorages called on the same simulator/app over time

1. Directly after all of those steps:
2. Erase all content and settings on simulator
3. Clean xcode
4. Undo all the import changes, revert back to the old AsyncStorage imports
5. yarn remove @react-native-async-storage/async-storage
6. rm -rf node_modules/
7. cd ios && rm -rf Pods/
8. cd .. && yarn install
9. cd ios && bundle exec pod install
10. Build app to simulator (which was recently erased)
11. Got [@RNC/AsyncStorage]: nativeModule: AsyncStorage is null error. I'm guessing there's some other dependency on the new package in my app:

[krizzu]

Thanks @krizzu, I can see how having it at the same time would be a problem.

Would that race condition happen if we had installed this AsyncStorage but never used it?

When we did a recent expo upgrade, we installed the dependency, but never called in in any JS code (until my work now, which is failing). I haven't actually tried running it concurrently except to demo here. Would that still cause problems?

The migration is being done on every app launch (https://github.com/react-native-async-storage/async-storage/blob/master/ios/RNCAsyncStorage.m#L430).

[krizzu]

Yeah, the first case would be probably falling into a migration problem, where AsyncStorage checks when the last time the old location vs new is used, while Deprecated one might create the storage location again if was previously used. This is our condition race scenario.

The second scenario is weird - you should not have that error, since you removed AsyncStorage. Is there a dependency that relies on it? Can you see which module is using it from stack trace?

The only reliable approach to do the migration would be:

1. Have no AsyncStorage package installed in the app
2. Do some saves to DeprecatedAsyncStorage
3. Remove all traces of Deprecated AsyncStorage, don't start the app yet
4. Install AsyncStorage and run the app

Now your data would be copied over and used by AsyncStorage. If you use Deprecated AsyncStorage at this time, next time you open the app you'll see the condition race between removing and creating storage file

[coolsoftwaretyler]

Thanks, @krizzu! That is really helpful to know.

I think there must be some other dependency that relies on the new AsyncStorage. What I'll probably do here is:

1. If possible, remove the new AsyncStorage and other dependency (s) that use it
2. Ship that and get people using and saving with it (we do it automatically during particular lifecycle events)
3. Re-do the update so we can migrate data correctly

If I can't remove the dependency for whatever reason, I'll probably write a custom migration to merge the two.

You've been very helpful and hopefully this issue will help inform other people in the future. I'll close it out.

[krizzu]

Good luck!

[coolsoftwaretyler]

I got a really great suggestion in the Infinite Red slack channel that I'll probably explore. Leaving it here for others to benefit from:

@tyler Williams wouldn't it be easier to use patch-package and modify the migration logic to always migrate the old and remove it if it exists and ignore the modification date to avoid the race condition? https://github.com/react-native-async-storage/async-storage/blob/master/ios/RNCAsyncStorage.m#L378-L388

[tombaumg]

I don't know if it helps someone but on when trying to upgrade from 0.69.7 to 0.71.0 the migration code does't work.
Most Github files shared here doesn't even exist anymore.

I currently was able to solve it for iOS only.
Viewing RNCAsyncStorage.m file I was able to see the AsyncStorage directory name which is: RCTAsyncLocalStorage_V1.
When looking at the migration code on this file i found out the deprecated path and the new path for this file:
Source: "Documents/.../RCTAsyncLocalStorage_V1"
Target: "Library/Application Support/[bundleID]/RCTAsyncLocalStorage_V1"

(bundle id could be received with the react-native-device-info package)

We used RNFS to create the logic of copying all of the files from the source directory to the target and ran this logic first thing when app launches and everything worked.

As i mentioned. Not yet solved for Android..