RNES on RN Web

[Tobinho07]

I am using RNES for the first time. I know that secure storage is only available on Android and iOS but I am also testing with react native web. On executing on web I'm getting an error because of RNES.

My question : what is the best way to use it with web without to duplicate every screen with homescreen.web.js without importing RNES?

[emeraldsanto]

I suppose you could create two files with platform specific extensions since both Metro and Webpack support them:

// storage.native.js

export * from 'react-native-encrypted-storage';

and

// storage.web.js

export * from '@react-native-async-storage/async-storage';

And then in your code

// some-other-file.js
import Storage from 'path/to/storage'; // don't include `.native.js` or `.web.js` in the import

Storage.setItem('key', 'value');

The bundler will load the correct file based on the platform it is running on. This assumes the other solution you're using has a similar API to this package (i.e. a default export with setItem, getItem, etc.).

You could also set a path alias in your Webpack configuration to resolve 'react-native-encrypted-storage' to something like '@react-native-async-storage/async-storage' which would require no code change on your end but is a bit harder to discover/maintain.

// webpack.config.js
module.exports = {
  // ...the rest of your config

  resolve: {
    alias: {
      'react-native-encrypted-storage': '@react-native-async-storage/async-storage'
    }
  }
}