React Native
Introduction
AppKit has support for Wagmi and Ethers. Choose one of these Ethereum libraries to get started.
Don't have a project ID?
Head over to Reown Cloud and create a new project now!
Installation
- React Native CLI
- Expo
- Wagmi
- Ethers
- Ethers v5
yarn add @reown/appkit-wagmi-react-native wagmi viem @tanstack/react-query
Additionally add these extra packages to help with async storage, polyfills, and SVG's.
yarn add @react-native-async-storage/async-storage react-native-get-random-values react-native-svg react-native-modal @react-native-community/netinfo @walletconnect/react-native-compat
On iOS, use CocoaPods to add the native modules to your project:
npx pod-install
yarn add @reown/appkit-ethers-react-native ethers
Additionally add these extra packages to help with async storage, polyfills, and SVG's.
yarn add @react-native-async-storage/async-storage react-native-get-random-values react-native-svg react-native-modal @react-native-community/netinfo @walletconnect/react-native-compat
On iOS, use CocoaPods to add the native modules to your project:
npx pod-install
yarn add @reown/appkit-ethers5-react-native ethers@5.7.2
Additionally add these extra packages to help with async storage, polyfills, and SVG's.
yarn add @ethersproject/shims@5.7.0 @react-native-async-storage/async-storage react-native-get-random-values react-native-svg react-native-modal @react-native-community/netinfo @walletconnect/react-native-compat
On iOS, use CocoaPods to add the native modules to your project:
npx pod-install
- Wagmi
- Ethers
- Ethers v5
npx expo install @reown/appkit-wagmi-react-native wagmi viem @tanstack/react-query
Additionally add these extra packages to help with async storage, polyfills, and SVG's.
npx expo install @react-native-async-storage/async-storage react-native-get-random-values react-native-svg react-native-modal @react-native-community/netinfo @walletconnect/react-native-compat expo-application
Additional setup for Expo SDK 48 only
If you are using Expo SDK 48, you also need to polyfill crypto
with expo-crypto library.
- Add
expo-crypto
npx expo install expo-crypto
- Create a file named
crypto-polyfill.js
// src/crypto-polyfill.js
// Apply only with Expo SDK 48
import { getRandomValues as expoCryptoGetRandomValues } from 'expo-crypto'
class Crypto {
getRandomValues = expoCryptoGetRandomValues
}
// eslint-disable-next-line no-undef
const webCrypto = typeof crypto !== 'undefined' ? crypto : new Crypto()
;(() => {
if (typeof crypto === 'undefined') {
Object.defineProperty(window, 'crypto', {
configurable: true,
enumerable: true,
get: () => webCrypto
})
}
})()
- Import
crypto-polyfill.js
in your App root file
// src/App.js
import './crypto-polyfill.js'
import '@walletconnect/react-native-compat';
...
import { createAppKit } from '@reown/appkit-...'
npx expo install @reown/appkit-ethers-react-native ethers
Additionally add these extra packages to help with async storage, polyfills, and SVG's.
npx expo install @react-native-async-storage/async-storage react-native-get-random-values react-native-svg react-native-modal @react-native-community/netinfo @walletconnect/react-native-compat expo-application
Additional setup for Expo SDK 48 only
If you are using Expo SDK 48, you also need to polyfill crypto
with expo-crypto library.
- Add
expo-crypto
npx expo install expo-crypto
- Create a file named
crypto-polyfill.js
// src/crypto-polyfill.js
// Apply only with Expo SDK 48
import { getRandomValues as expoCryptoGetRandomValues } from 'expo-crypto'
class Crypto {
getRandomValues = expoCryptoGetRandomValues
}
// eslint-disable-next-line no-undef
const webCrypto = typeof crypto !== 'undefined' ? crypto : new Crypto()
;(() => {
if (typeof crypto === 'undefined') {
Object.defineProperty(window, 'crypto', {
configurable: true,
enumerable: true,
get: () => webCrypto
})
}
})()
- Import
crypto-polyfill.js
in your App root file
// src/App.js
import './crypto-polyfill.js'
import '@walletconnect/react-native-compat';
...
import { createAppKit } from '@reown/appkit-...'
npx expo install @reown/appkit-ethers5-react-native ethers@5.7.2
Additionally add these extra packages to help with async storage, polyfills, and SVG's.
npx expo install @ethersproject/shims@5.7.0 @react-native-async-storage/async-storage react-native-get-random-values react-native-svg react-native-modal @react-native-community/netinfo @walletconnect/react-native-compat expo-application
Additional setup for Expo SDK 48 only
If you are using Expo SDK 48, you also need to polyfill crypto
with expo-crypto library.
- Add
expo-crypto
npx expo install expo-crypto
- Create a file named
crypto-polyfill.js
// src/crypto-polyfill.js
// Apply only with Expo SDK 48
import { getRandomValues as expoCryptoGetRandomValues } from 'expo-crypto'
class Crypto {
getRandomValues = expoCryptoGetRandomValues
}
// eslint-disable-next-line no-undef
const webCrypto = typeof crypto !== 'undefined' ? crypto : new Crypto()
;(() => {
if (typeof crypto === 'undefined') {
Object.defineProperty(window, 'crypto', {
configurable: true,
enumerable: true,
get: () => webCrypto
})
}
})()
- Import
crypto-polyfill.js
in your App root file
// src/App.js
import './crypto-polyfill.js'
import '@walletconnect/react-native-compat';
...
import { createAppKit } from '@reown/appkit-...'
Implementation
- Wagmi
- Ethers
- Ethers v5
Start by importing createAppKit
, and wagmi packages, then create your configs as shown below.
Finally, pass your configuration to createAppKit
.
Make sure you import @walletconnect/react-native-compat
before wagmi
to avoid any issues.
import '@walletconnect/react-native-compat'
import { WagmiProvider } from 'wagmi'
import { mainnet, polygon, arbitrum } from '@wagmi/core/chains'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { createAppKit, defaultWagmiConfig, AppKit } from '@reown/appkit-wagmi-react-native'
// 0. Setup queryClient
const queryClient = new QueryClient()
// 1. Get projectId at https://cloud.reown.com
const projectId = 'YOUR_PROJECT_ID'
// 2. Create config
const metadata = {
name: 'AppKit RN',
description: 'AppKit RN Example',
url: 'https://reown.com/appkit',
icons: ['https://avatars.githubusercontent.com/u/179229932'],
redirect: {
native: 'YOUR_APP_SCHEME://',
universal: 'YOUR_APP_UNIVERSAL_LINK.com'
}
}
const chains = [mainnet, polygon, arbitrum] as const
const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })
// 3. Create modal
createAppKit({
projectId,
wagmiConfig,
defaultChain: mainnet, // Optional
enableAnalytics: true // Optional - defaults to your Cloud configuration
})
export default function App() {
return (
<WagmiProvider config={wagmiConfig}>
<QueryClientProvider client={queryClient}>
// Rest of your app...
<AppKit />
</QueryClientProvider>
</WagmiProvider>
)
}
Trigger the modal
To open AppKit modal you can use our default button component or build your own logic using our hooks.
- Components
- Hooks
You can use our components to open the modal
import { AppKitButton } from '@reown/appkit-wagmi-react-native'
export default function ConnectView() {
return (
<>
...rest of your view
<AppKitButton />
</>
)
}
Learn more about the AppKit components here
You can trigger the modal by calling the open
function from useAppKit
hook.
import { Pressable, Text } from 'react-native'
import { useAppKit } from '@reown/appkit-wagmi-react-native'
export default function ConnectView() {
const { open } = useAppKit()
return (
<>
<Pressable onClick={() => open()}>
<Text>Open Connect Modal</Text>
</Pressable>
</>
)
}
Learn more about the AppKit hooks here
Start by importing createAppKit
and create your configs as shown below.
Finally, pass your configuration to createAppKit
.
Make sure you import @walletconnect/react-native-compat
before using our package to avoid any issues.
import '@walletconnect/react-native-compat'
import { createAppKit, defaultConfig, AppKit } from '@reown/appkit-ethers-react-native'
// 1. Get projectId from https://cloud.reown.com
const projectId = 'YOUR_PROJECT_ID'
// 2. Create config
const metadata = {
name: 'AppKit RN',
description: 'AppKit RN Example',
url: 'https://reown.com/appkit',
icons: ['https://avatars.githubusercontent.com/u/179229932'],
redirect: {
native: 'YOUR_APP_SCHEME://'
}
}
const config = defaultConfig({ metadata })
// 3. Define your chains
const mainnet = {
chainId: 1,
name: 'Ethereum',
currency: 'ETH',
explorerUrl: 'https://etherscan.io',
rpcUrl: 'https://cloudflare-eth.com'
}
const polygon = {
chainId: 137,
name: 'Polygon',
currency: 'MATIC',
explorerUrl: 'https://polygonscan.com',
rpcUrl: 'https://polygon-rpc.com'
}
const chains = [mainnet, polygon]
// 4. Create modal
createAppKit({
projectId,
chains,
config,
enableAnalytics: true // Optional - defaults to your Cloud configuration
})
export default function App() {
return (
<>
// Rest of your app...
<AppKit />
</>
)
}
Trigger the modal
To open AppKit modal you can use our default button component or build your own logic using our hooks.
- Components
- Hooks
You can use our components to open the modal
import { AppKitButton } from '@reown/appkit-ethers-react-native'
export default function ConnectView() {
return (
<>
...rest of your view
<AppKitButton />
</>
)
}
Learn more about the AppKit components here
You can trigger the modal by calling the open
function from useAppKit
hook.
import { Pressable, Text } from 'react-native'
import { useAppKit } from '@reown/appkit-ethers-react-native'
export default function ConnectView() {
const { open } = useAppKit()
return (
<>
<Pressable onClick={() => open()}>
<Text>Open Connect Modal</Text>
</Pressable>
</>
)
}
Learn more about the AppKit hooks here
Start by importing createAppKit
and create your configs as shown below.
Finally, pass your configuration to createAppKit
.
Make sure you import @walletconnect/react-native-compat
and @ethersproject/shims
before using our package to avoid any issues.
import '@walletconnect/react-native-compat'
import '@ethersproject/shims'
import { createAppKit, defaultConfig, AppKit } from '@reown/appkit-ethers5-react-native'
// 1. Get projectId from https://cloud.reown.com
const projectId = 'YOUR_PROJECT_ID'
// 2. Create config
const metadata = {
name: 'AppKit RN',
description: 'AppKit RN Example',
url: 'https://reown.com/appkit',
icons: ['https://avatars.githubusercontent.com/u/179229932'],
redirect: {
native: 'YOUR_APP_SCHEME://'
}
}
const config = defaultConfig({ metadata })
// 3. Define your chains
const mainnet = {
chainId: 1,
name: 'Ethereum',
currency: 'ETH',
explorerUrl: 'https://etherscan.io',
rpcUrl: 'https://cloudflare-eth.com'
}
const polygon = {
chainId: 137,
name: 'Polygon',
currency: 'MATIC',
explorerUrl: 'https://polygonscan.com',
rpcUrl: 'https://polygon-rpc.com'
}
const chains = [mainnet, polygon]
// 4. Create modal
createAppKit({
projectId,
chains,
config,
enableAnalytics: true // Optional - defaults to your Cloud configuration
})
export default function App() {
return (
<>
// Rest of your app...
<AppKit />
</>
)
}
Trigger the modal
To open AppKit modal you can use our default button component or build your own logic using our hooks.
- Components
- Hooks
You can use our components to open the modal
import { AppKitButton } from '@reown/appkit-ethers5-react-native'
export default function ConnectView() {
return (
<>
...rest of your view
<AppKitButton />
</>
)
}
Learn more about the AppKit components here
You can trigger the modal by calling the open
function from useAppKit
hook.
import { Pressable, Text } from 'react-native'
import { useAppKit } from '@reown/appkit-ethers5-react-native'
export default function ConnectView() {
const { open } = useAppKit()
return (
<>
<Pressable onClick={() => open()}>
<Text>Open Connect Modal</Text>
</Pressable>
</>
)
}
Learn more about the AppKit hooks here
Enable Wallet Detection
Make sure your have @walletconnect/react-native-compat@2.10.5
or higher.
To enable AppKit to detect wallets installed on the device, you need to make specific changes to the native code of your project.
- React Native CLI
- Expo
- iOS
- Android
- Open your
Info.plist
file. - Locate the
<key>LSApplicationQueriesSchemes</key>
section. - Add the desired wallet schemes as string entries within the
<array>
. These schemes represent the wallets you want to detect. - Refer to our Info.plist example file for a detailed illustration.
Example:
<key>LSApplicationQueriesSchemes</key>
<array>
<string>metamask</string>
<string>trust</string>
<string>safe</string>
<string>rainbow</string>
<string>uniswap</string>
<!-- Add other wallet schemes names here -->
</array>
- Open your
AndroidManifest.xml
file. - Locate the
<queries>
section. - Add the desired wallet package names as
<package>
entries within the<queries>
. These package names correspond to the wallets you want to detect. - Refer to our AndroidManifest.xml example file for detailed guidance.
Example:
<queries>
<package android:name="io.metamask"/>
<package android:name="com.wallet.crypto.trustapp"/>
<package android:name="io.gnosis.safe"/>
<package android:name="me.rainbow"/>
<!-- Add other wallet package names here -->
</queries>
- iOS
- Android
To enable AppKit to detect wallets installed on the device in your Expo project for iOS, follow these steps:
- Open your
app.json
(orapp.config.js
) file. - Locate the ios section within the configuration.
- Add the
infoPlist
object if it doesn't exist, and within it, include theLSApplicationQueriesSchemes
array. This array will contain the desired wallet schemes you want to detect. - Add the wallet schemes to the
LSApplicationQueriesSchemes
array.
Your configuration should look like this:
{
"expo": {
"ios": {
"infoPlist": {
"LSApplicationQueriesSchemes": [
"metamask",
"trust",
"safe",
"rainbow",
"uniswap"
// Add other wallet schemes names here
]
}
}
}
}
To enable AppKit to detect wallets installed on the device in your Expo project for Android, follow these steps:
- Open your
app.json
(orapp.config.js
) file. - Locate the plugins section within the configuration.
- Add
queries.js
in the plugins array:
{
"plugins": [
// other plugins,
"./queries.js"
],
}
- Create the file
queries.js
:
// based on https://github.com/expo/config-plugins/issues/123#issuecomment-1746757954
const {
AndroidConfig,
withAndroidManifest,
createRunOncePlugin,
} = require("expo/config-plugins");
const queries = {
package: [
{ $: { "android:name": "com.wallet.crypto.trustapp" } },
{ $: { "android:name": "io.metamask" } },
{ $: { "android:name": "me.rainbow" } },
{ $: { "android:name": "io.zerion.android" } },
{ $: { "android:name": "io.gnosis.safe" } },
{ $: { "android:name": "com.uniswap.mobile" } },
// Add other wallet package names here
]
};
/**
* @param {import('@expo/config-plugins').ExportedConfig} config
*/
const withAndroidManifestService = (config) => {
return withAndroidManifest(config, (config) => {
config.modResults.manifest = {
...config.modResults.manifest,
queries,
};
return config;
});
};
module.exports = createRunOncePlugin(
withAndroidManifestService,
"withAndroidManifestService",
"1.0.0"
);
- Add the wallet package names you want to be detected by your app.
Enable Coinbase Wallet
- React Native CLI
- Expo
Follow these steps to install Coinbase SDK in your project along with our Coinbase package. Check here for more detailed information.
- Note: Coinbase SDK is not compatible with Expo Go
- Enable Expo Modules in your project running:
npx install-expo-modules@latest
- Install Coinbase SDK
yarn add @coinbase/wallet-mobile-sdk react-native-mmkv
- Install our custom connector
- Wagmi
- Ethers
- Ethers v5
yarn add @reown/appkit-coinbase-wagmi-react-native
yarn add @reown/appkit-coinbase-ethers-react-native
yarn add @reown/appkit-coinbase-ethers-react-native
- Run pod-install
npx pod-install
-
Enable Deeplink handling in your project following React Native docs
-
Add Coinbase package in your AndroidManifest.xml and Info.Plist
// AndroidManifest.xml
<queries>
<!-- other queries -->
<package android:name="org.toshi" />
</queries>
// Info.plist
<key>LSApplicationQueriesSchemes</key>
<array>
<!-- other schemes -->
<string>cbwallet</string>
</array>
- Add Coinbase reponse handler in your app. More info here
import { handleResponse } from '@coinbase/wallet-mobile-sdk'
// Your app's deeplink handling code
useEffect(() => {
const sub = Linking.addEventListener('url', ({ url }) => {
const handledBySdk = handleResponse(new URL(url))
if (!handledBySdk) {
// Handle other deeplinks
}
})
return () => sub.remove()
}, [])
- Wagmi
- Ethers
- Ethers v5
- Initialize
coinbaseConnector
and add it inextraConnectors
import { coinbaseConnector } from '@reown/appkit-coinbase-wagmi-react-native'
const coinbase = coinbaseConnector({
redirect: 'YOUR_APP_SCHEME://'
})
const wagmiConfig = defaultWagmiConfig({
chains,
projectId,
metadata,
extraConnectors: [coinbase]
})
- Initialize
CoinbaseProvider
and add it in the default config
import { CoinbaseProvider } from '@reown/appkit-coinbase-ethers-react-native'
const coinbaseProvider = new CoinbaseProvider({
redirect: 'YOUR_APP_SCHEME://',
rpcUrl: mainnet.rpcUrl
})
const config = defaultConfig({
metadata,
coinbase: coinbaseProvider
})
- Initialize
CoinbaseProvider
and add it in the default config
import { CoinbaseProvider } from '@reown/appkit-coinbase-ethers-react-native'
const coinbaseProvider = new CoinbaseProvider({
redirect: 'YOUR_APP_SCHEME://',
rpcUrl: mainnet.rpcUrl
})
const config = defaultConfig({
metadata,
coinbase: coinbaseProvider
})
Check Coinbase docs for more detailed information.
Coinbase SDK doesn't support Expo Projects. More info here