A simple mobile dApp development using React Native, Metamask wallet and Ethersjs

If you are frustrated with looking on the Internet how to develop mobile dApp using React Native then you have come to the right place. In this post, I will show you how you can create a mobile dApp using React Native along with Metamask wallet and Ethersjs in the Ethereum Sepolia test network. The Walletconnect SDK is mainly functional for the web version of dApp. It also has support for the mobile version but is not working as expected at the time of writing this post. Further, it has poor documentation as well. Regarding the Metamask SDK, it does not have support for the Expo-managed app, it supports only the bare react native managed projects.

To develop a mobile dApp you must know how to write smart contracts. Because the main logic of the dApp will be written inside the smart contract. Through the mobile dApp, we will just make an interface through which we will interact with the smart contract. So this post will not focus on the development of a smart contract but on how you can build the mobile dApp to interact with the smart contract.

There are two types of operation with the smart contract. They are mainly

• Read Operation
  • It is free of cost. It does not require you to pay any gas fee associated with it. You should know the smart contract address, smart contract ABI, and the provider to do the read operation.
• Write Operation
  • It is a paid operation. You have to pay a certain amount of gas fee to write inside your smart contract. In addition to what is there in the read operation, it will also require the address and private key of your account to do the write operation as it is required to sign the transaction.

Based on the mobile dApp that we will be developing, you will require at least to have two Metamask wallet accounts. For the smooth development process copy the account address and its corresponding private keys and save it inside a file. So that later on you can directly use it. Instead of opening the Metamask wallet account time and again.

We will use Ethersjs. To be specific we will use the Ethersjs version 5.x. Since version 6.x is having some issues at the time of writing this post. It makes it easy to interact with the smart contract. More about the Ethersjs library can be found on its official website.

We will use the Expo-managed workflow for developing the mobile dApp. Our simple mobile dApp will be the certificate issue system. Only the authorized issuer will be able to issue the certificate, the other will be able to view the certificates issued in their name and verify the authenticity of the certificate issued.

The source code for the mobile dApp created using React Native, Metamask wallet, and Ethersjs can be accessed from the GitHub repository link https://github.com/sumukus/gcitCert. You will also get more information about this dApp in the GitHub repository as well.

I assume that you know how to develop the React Native app using the Expo. In this post, the main focus is how to interact with the smart contract using the Ethersjs and Metamask wallet. In case you are new to it then you might be interested to read my blog post on How to create the hybrid mobile application with React Native.

The only place where we have performed a write operation is inside the AddCertificate.js file. You can directly view this file inside the repository to know how to do it. In simple, you need to define the provider, then create an instance of a signer using a wallet and private key for signing the transaction. Then you can access the contract methods using the smart contract address, ABI, and the signer.

I hope with this you may have got an idea of how to develop the mobile dApp using React Native. I know the way that I have used to interact with the Metamask wallet is not so safe. But at this point when we don’t have much support for the mobile application version. It is a good point to start working on with this approach. Later on when the Walletconnect and Metamask SDK are working then I would recommend you all integrate it instead of exposing the private key of your wallets.