"No available storage method found" React Native

[jack828]

✅ Prerequisites

• [x] Did you perform a cursory search of open issues? Is this bug already reported elsewhere?
• [x] Are you running the latest SDK version?
• [x] Are you reporting to the correct repository (magic-sdk)?

🐛 Description

I cannot use any methods provided by the Magic SDK due to this error.

🧩 Steps to Reproduce

1. Install the SDK
2. Initialise the SDK and attempt to use a method on it
3. Failure.

🤔 Expected behavior

It should work.

😮 Actual behavior

All methods reject with the error: Error: No available storage method found. and a vague minified stack trace.

I've googled as much as I can and found this relevant but useless issue: https://github.com/magiclabs/magic-js/issues/204

My google-fu leads me to believe it is a localforage error, which this package interfaces with AsyncStorage: https://www.npmjs.com/package/@aveq-research/localforage-asyncstorage-driver

💻 Code Sample

I cannot share the code for the project. However, a representation of the structure is provided below:

app-navigator.tsx

import { Magic } from '@magic-sdk/react-native'
const magic = new Magic('pk_live_CAFEBABE')

...
    <ApolloProvider client={apolloClient}>
      <magic.Relayer />
      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
          <AppNavigator
            initialState={initialNavigationState}
            onStateChange={onNavigationStateChange}
          />
      </SafeAreaProvider>
    </ApolloProvider>

And in one of my screens:

import { Magic } from '@magic-sdk/react-native'
const magic = new Magic('pk_live_CAFEBABE')

const Screen = () => {
  const sendLink = () => {
    await magic.auth.loginWithMagicLink({ email: '[email protected]' })
      .then(res => console.log('success', res))
      .catch(error => console.log('failure', error))
  }
  const sendLink = () => {
    await magic.user.isLoggedIn()
      .then(res => console.log('success', res))
      .catch(error => console.log('failure', error))
  }
  return (
    <View>
      <Button onPress={sendLink}>send login link</Button>
      <Button onPress={loginCheck}>login check</Button>
    </View>
  )
}

Note in the above code samples magic is initialised twice. There are no (documented or otherwise) methods for sharing the same magic instance throughout an app. I have tried to create some sort of provider/hook mechanism or even just export ing from one file and importing in the other and there is no difference.

I tried to setup a demo repo: https://github.com/jack828/TestApp-MagicSDKIssue and couldn't sucessfully use any of the SDK. I just get the error: TypeError: undefined is not an object (evaluating 'punycode.ucs2.decode') after importing the module.

🌎 Environment

Software	Version(s)
@magic-sdk/react-native	8.2.0
Browser	n/a
yarn	1.12.3
Operating System	Android
React native	0.66.3

[SergeyYuhimovich]

After upgrading React Native 0.68.6 -> 0.71.11 we faced same issue.