Magic Link

The @magic-sdk has a few dependencies you need to add to your app before using the SDK in React Native. For convenience you can run:

npm i react-native-safe-area-context@4.5.3 react-native-webview react-native-device-info

which will install the following dependencies:

• react-native-safe-area-context
  • Note: The magic wallet requires the app to be wrapped in a SafeAreaProvider. This is something we handle in the SDK so please, if your app already has a SafeAreaProvider you can remove it and just wrap your app in our ThirdwebProvider, this will take care of the safe area context for you.
• react-native-webview
• react-native-device-info

You also need a Magic api-key to pass it as part of the wallet config.

NOTE: magicWallet has been deprecated starting in version @thirdweb-dev/react-native@0.2.49 in favor of magicLink for consistency with our React SDK.

We suggest you add magicLink as the first wallet in your supportedWallets list since the UI for it is a TextInput field:

import { Goerli } from "@thirdweb-dev/chains";
import {
  ThirdwebProvider,
  magicLink,
  metamaskWallet,
} from "@thirdweb-dev/react-native";
 
function AppWithProviders() {
  return (
    <ThirdwebProvider
      clientId="your-client-id"
      activeChain={Goerli}
      supportedWallets={[
        magicLink({
          apiKey: "magic_api_key",
        }),
        metamaskWallet(),
      ]}
    >
      <App />
    </ThirdwebProvider>
  );
}