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
Getting Support 🙋
Reown is committed to delivering the best developer experience.
If you have any questions, feature requests, or bug reports, feel free to open an issue on GitHub!
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