How to Integrate WalletConnect with React Native
A step-by-step guide to connecting your React Native apps to Ethereum wallets with WalletConnect
WalletConnect is a cross-platform protocol that allows users to connect their Ethereum wallets to dapps on mobile and desktop devices. It’s a secure and easy way to sign transactions and interact with decentralized applications.
In this blog post, we’ll show you how to integrate WalletConnect with your React Native dapp. We’ll cover the following topics:
- What is WalletConnect?
- How to install the WalletConnect React Native library
- How to create a WalletConnect connection
- How to sign transactions with WalletConnect

What is WalletConnect?
WalletConnect is a protocol that allows users to connect their Ethereum wallets to apps on mobile and desktop devices. It’s a secure and easy way to sign transactions and interact with decentralized applications.
WalletConnect works by generating a QR code that is scanned by the user’s wallet app. The wallet app then authenticates the user and establishes a secure connection with the app.
How to install the WalletConnect React Native library
The first step is to install the WalletConnect React Native library. You can do this by running the following command:
npm install @walletconnect/react-native-dapp
How to create a WalletConnect connection
Once you have installed the library, you can create a WalletConnect connection by calling the WalletConnectProvider
component. This component takes a few props, including the following:
clientMeta
: This is an object that contains information about your app, such as the name and description.onConnect
: This is a function that is called when the user connects their wallet to your app.onDisconnect
: This is a function that is called when the user disconnects their wallet from your app.
Example
Here is an example of how to use WalletConnect in a React Native app:
import React, { useState } from "react";
import WalletConnectProvider from "@walletconnect/react-native-dapp";
function App() {
const [connected, setConnected] = useState(false);
return (
<WalletConnectProvider
clientMeta={{
name: "My Dapp",
description: "A simple example of how to use WalletConnect with React Native",
}}
onConnect={() => setConnected(true)}
onDisconnect={() => setConnected(false)}
>
{connected ? (
<h1>You are connected!</h1>
) : (
<h1>You are not connected.</h1>
)}
</WalletConnectProvider>
);
}
export default App;
This code will create a WalletConnect connection and display a message depending on whether the user is connected or not.
How to sign transactions with WalletConnect
Once you have created a WalletConnect connection, you can use it to sign transactions. To do this, you can call the signTransaction
method on the WalletConnectProvider
component. This method takes a transaction object as a prop, and it returns the signed transaction.
Wallet connect supported by over 300 wallets.















