Tutorial: Setting up a Web3 react native Dapp

Introduction

Web Dapps are all the rage and there hasn't been as much focus on mobile as it should be. This is with good reason though, since the libraries and cryptographic primitives required for creating a Dapp are not directly compatible with mobile, it can be difficult setting up a mobile app that is Web3 ready. The purpose of this tutorial is to walk you through setting up a react native app that is web3 compatible.

The short version

If you are lazy (like me), you can just grab a ready made app from here and call it a day. But if you wish to learn how to setup yourself you can continue reading.

The long version

Setup a react native app

To start the process we need a react native app that has native abilities. You can use either use the expo bare workflow for this or the CRNA (create react native app).

For the CRNA option:

• npx create-react-native-app my-app

For the expo option:

• npx expo init
• Select the last template option (bare minimal)

Installing dependencies

To make our app web3 compatible, the first dependency we need is

yarn add node-libs-react-native

OR

npm i node-libs-react-native

The purpose of this dependency is to get some of the nodejs modules we need to interact with the blockchain into react native. Some of these dependencies are cryptography libraries that will normally not work in react native, but using this package we can make them work in RN.

Setup App for web3 compatibility

Once its installed, the next thing we need to do is use the library in our metro bundler config. We need to add this module under the extraNodeModules key, basically what that would be telling metro is that if I request a module and you can't find it in my primary node_modules, check the modules I included in the extraNodeModules. This will help metro find the Nodejs modules we need from the package. The new metro config will look something like this

For expo

const { getDefaultConfig } = require('expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.extraNodeModules = require('node-libs-react-native');

module.exports = defaultConfig;

If you prefer you can also use a rn-cli.config.js file (You can create one if it isn't present)

const extraNodeModules = require('node-libs-react-native');

module.exports = {
  extraNodeModules,
};

The final step is to import a file from node-libs-react-native into the entry point of your app. We need to import

import 'node-libs-react-native/globals.js';

In expo, this will be the index.js file. This needs to be the very first line in the file. The import brings in all the required modules like the crypto module into our app.

Web3 Client

Our app is almost ready, but its not completely web3 ready without a web3 client. Two of the most popular ones are Web3.js and ethers.js. For this tutorial we will be going with ethers.

We need two dependencies

yarn add ethers @ethersproject/shims

Once installed we need to import the shims package in thesame file where we placed node-libs-react-native/globals.js. With that, our app is now fully web3 compatible.

To test out if it works, we can try generating a wallet using ethersjs. In our App.jsx or App.js

...
import { ethers } from 'ethers';

export default function App() {
  useEffect(() => {
    const w = ethers.Wallet.createRandom();
    console.log({ walletObject: w, mnemonic: w.mnemonic });
  }, []);

  ...
}

If all went well, in your console you should see a wallet object and a mnemonic. Just like that you have a web3 compatible react native app.

---

At weedle labs, we are working on a mobile first web3 infrastructure. The aim is to simplify developing web3 Dapps on mobile and help you reach a much wider audience than what the web can offer. We are open source and are actively looking for contributors to join us in active development. Give us a shout on twitter @weedle_app or [e-mail].

If you also wish to know when we launch and get more details, you can check https://joinweedle.com

Comments

[Wilmela]

Thanks for this helpful tutorial. However, why did you use expo-crypto-polyfills in your github repo code and node-libs-react-native in your code example here? expo-crypto-polyfills at the moment conflicts with expo sdk49. Thanks