Async-storage: react-native-web implementation of AsyncStorage

[cohawk]

Should the react-native-web implementation of AsyncStorage also reside in this community library?

When changing to @react-native-community/async-storage the web version of my React Native app fails on multiMerge

I believe it would be a simple copy paste of the localStorage code here: https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/AsyncStorage/index.js

And it appears the react-native-web maintainers agree with the functionality residing in this library - https://github.com/necolas/react-native-web/issues/1260

Thank you.

[Krizzu]

Thanks @cohawk for pointing this out!

I'm moving discussion over there, if you think it'd be nice to continue here, let me know.

thanks.

[necolas]

Please continue the discussion here and lift any code from RNW that is necessary.

[necolas]

@krizzu Please reopen this issue

[necolas]

This is the last commit in React Native for Web that will include AsyncStorage - https://github.com/necolas/react-native-web/tree/33dc3cb01869cde556387e1cbc4e43323015b5b7/packages/react-native-web/src/exports/AsyncStorage

[Krizzu]

Reopening the issue to continue to talk about making Web support first-class citizen in this repo. Currently working on implementing core of AS v2, and soon going to start on adding Storages.

[brunolemos]

I see the coding work on v2 has started but apparently became stale. So how should one proceed to add web support to this repo? Master branch? Legacy?

[Krizzu]

@brunolemos Once #186 is done, I think it'd be a good start to add web support.

[JesseRWeigel]

@Krizzu if you would like help with adding web support, please let me know. I use RNW with AsyncStorage and am holding off on upgrading.

[Krizzu]

I know it took some time but - I'm open for help with Web storage. If you're interested, please respond to this issue.

I've prepared a basic scaffold that work can be best on. Checkout to master branch and see packages/storage-web package.

Some todo list:

• Follow instructions to create a storage backend
• Make it compatible with both localStorage and sessionStorage (add an option to select one to use, when creating an instance of this storage)
• Add unit tests
• Update Readme

I'm going to help whoever takes this one.
Thanks a lot in advance!

[JesseRWeigel]

I am interested. I will try and get started on it sometime this week.

[JesseRWeigel]

Hey @Krizzu ! I got localStorage and sessionStorage working. I wanted to let you take a look before I go any further. I didn't write any tests yet and I am not used to working with TypeScript, so I may not have done it correctly. Please let me know if I am on the right track when you get a chance! https://github.com/JesseRWeigel/async-storage/blob/web-storage/packages/storage-web/src/index.ts

[Krizzu]

@JesseRWeigel Great, please create PR so we can discuss it there

[jasonivers]

Is there any word on this moving forward? I'd really like to be able to keep updated on react-native-web, but I currently cannot because it no longer supports AsyncStorage. I'd love to be able to help, but unfortunately I don't have the time to give to this right now.

[Krizzu]

@jasonivers Hey,

Web supports already lives in v2 of AsyncStorage. This is not the final version, as I'm still working on some improvements.

[kopax]

Hi, I am not able to upgrade to react-native-web 0.12.0 because of AsyncStorage support removed. I use it for native, on the web I use the localStorage. How can I perform my upgrade without breaking native? Thanks!

[wong2]

For those upgrading to react-native-web 0.12.0 but blocked by this, here is my solution:

1. save the last version of AsyncStorage file to your project from https://unpkg.com/[email protected]/dist/exports/AsyncStorage/index.js
2. alias AsyncStorage import to your local file. I'm using webpack:

resolve: {
  alias: {
    'react-native$': 'react-native-web',
    '@react-native-community/async-storage': path.resolve(__dirname, './AsyncStorage.web.js'),
  },
  ...
}

[kopax]

Thanks @wong2 for sharing this configuration with us. I am afraid this won't work in my case, because expo is using metro not webpack (If I am correct), I only use AsyncStorage in native and I prefer localStorage driver for the web. Best!

[awinograd]

That's not correct. Expo uses web pack for web builds. See the
@expo/webpack-config npm package

On Sat, Feb 8, 2020, 10:15 AM Dimitri KOPRIWA [e-mail]
wrote:

I am afraid this won't work with expo because expo is using metro not
webpack (If I am correct).

I use AsyncStorage in native and localStorage on the web =/

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/react-native-community/async-storage/issues/52?email_source=notifications&email_token=AACKD6I7QYTBBR4DXIVZNR3RB3LDRA5CNFSM4HCOCTHKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOELFVLAA#issuecomment-583751040,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AACKD6KLCJGOHK2BB6ZUXMDRB3LDRANCNFSM4HCOCTHA
.

[wong2]

@kopax AsyncStorage from react-native-web is using localStorage underhood, it just wraps it with the same api as native AsyncStorage

[kopax]

That's not correct. Expo uses web pack for web builds. See the @expo/webpack-config npm package

I am not concerned about the web but the natives ios and android application. Do they also use webpack in development? Isn't it metro supposed to build the react native application?

@kopax AsyncStorage from react-native-web is using localStorage underhood, it just wraps it with the same api as native AsyncStorage

Glad to know and thanks, but I am concerned about the IOS/Android application within

{
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz"
}

And not the one within react-native-web@^0.12.0, since apparently, it can be fixed.

[kopax]

@wong2, I have tested to fix my issue using:

config.resolve.alias['react-native-web/dist/exports/AsyncStorage'] = resolve(__dirname, './AsyncStorage.web.js');

I stil have this error:

Module not found: Can't resolve 'react-native-web/dist/exports/AsyncStorage' in '/home/dka/workspace/test-native/node_modules/expo/build/Notifications'

This is within expo SDK so it won't help to upgrade for expo's users.

[wong2]

@kopax how do you import AsyncStorage in your code?

[kopax]

@wong2 it is not in my code, it is in expo source code:

https://github.com/expo/expo/blob/e65bceb325baf9a70ecea0cacfb117969134c89d/packages/expo/src/Notifications/Notifications.ts#L4

[wong2]

@kopax sorry I'm not sure how to do that with expo

[kopax]

Me neither, I guess I am stuck with react-native-web 0.11, too bad I was actively waiting for the useNativeDriver fix :(

[afilp]

I am using "react-native-web": "^0.13.3" and get the NativeModule: AsyncStorage is null error.

I am not sure from the discussion what I should do. Downgrade react-native-web? (not a nice solution as I will miss other fixes/features). Do something else?

Thanks for any help!

[SleeplessByte]

If you use expo, you _must_ use expo install react-native-web and that will set you to 0.11.7 on SDK 37 and 38.

[mrKorg]

What about not Expo projects? I have "NativeModule: AsyncStorage" error too.

"@react-native-community/async-storage": "^1.12.0",
"react-native-web": "^0.13.14"