Skip to content

Instantly share code, notes, and snippets.

@dougbacelar
Last active October 19, 2023 21:12
Star You must be signed in to star a gist
Save dougbacelar/29e60920d8fa1982535247563eb63766 to your computer and use it in GitHub Desktop.
How to set up web3.js (Ethereum JS API) with Create React Native App

How to set up web3.js with CRNA

This is a simple guide to get you started with using the Ethereum Javascript API (web3.js) with the Create React Native App project. This is not an in-depth guide.

TL;DR

If you are lazy and just want to get started, I have this project ready for you. It should work out-of-the-box.

Installation guide

  1. Make sure you have Node version 6 or later installed, if not, get it on the Node website

    node --version

  2. Install Create React Native App

    npm install -g create-react-native-app

  3. Use create-react-native-app to create the project boilerplate

    create-react-native-app my-app

  4. Install node-libs-browser

    npm install --save node-libs-browser

  5. Create a file called rn-cli.config.js on the root of the project and add the following code into it:

    const extraNodeModules = require('node-libs-browser');
    
    module.exports = {
      extraNodeModules,
    };
  6. Create a file called global.js on the root of the project and add the following code into it:

    // Inject node globals into React Native global scope.
    global.Buffer = require('buffer').Buffer;
    global.process = require('process');
    
    if (typeof btoa === 'undefined') {
      global.btoa = function (str) {
        return new Buffer(str, 'binary').toString('base64');
      };
    }
    
    if (typeof atob === 'undefined') {
      global.atob = function (b64Encoded) {
        return new Buffer(b64Encoded, 'base64').toString('binary');
      };
    }
  7. Import the global.js file into your App.js file

    import './global';
  8. Install babel-preset-es2015

    npm install --save-dev babel-cli babel-preset-es2015

  9. Now we can install the web3.js api

    npm install --save web3

  10. Require the API in your App.js file

    const Web3 = require('web3');
  11. Add the following code inside your React component in App.js to get started with consuming the API. The code will print information of the latest block on the console.

    componentWillMount() {
      const web3 = new Web3(
        new Web3.providers.HttpProvider('https://mainnet.infura.io/')
      );
    
      web3.eth.getBlock('latest').then(console.log)
    }
  12. Test it

    npm start

    or

    npm run ios

    or

    npm run android

For more examples on the API usage, visit the web3.js documentation.

For a project with all this setup ready, check out my repo.

@ravi0the0sun
Copy link

hi @Hiti3 if you are creating your project using react-native cli then you may wanna follow this way
web3/web3.js#1022 (comment)
and also remember to remove the duplicate symbols for architecture x86_64 where you probably have to remove the CocoaAsync files from TcpSockets and react-native-udb pods as because of v0.62.0 auto linking
see the below link for more information.
tradle/rn-nodeify#94

@cawfree
Copy link

cawfree commented Dec 28, 2020

Hey all, I've made a dedicated script npx create-react-native-dapp to help bootstrap React Native applications with web3. It'll create an example app which will connect to ganache.

Hope this helps you.

https://github.com/cawfree/create-react-native-dapp

@devdomsos
Copy link

devdomsos commented Jul 20, 2021

I am trying to run the RN app without nodify with Web3. Does anybody have that working without nodify?

About secure randomNumber in RN :
In order to supply a secure randomNumber I used a different lib called ethers.js. You can follow a discussion on the subject here:
ethers-io/ethers.js#1070

Here is what will get you started:
https://docs.ethers.io/v5/cookbook/react-native/

Then you could create crypto global variable (I know not the best practice) and create a randomNumber:

export default function createCrypto(): Crypto {
  return {
    randomBytes(length: number = 32) {
      return Buffer.from(ethers.utils.randomBytes(length));
    };
  }
}    

I had to ejected from expo.

In the metro.config I specified also this:

resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg', 'tsx', 'ts'],
      extraNodeModules: {
        stream: require.resolve('stream-browserify'),
        crypto: require.resolve('crypto-browserify'),
      },
    },

It is not a complete solution, but might be helpful for some of you.

@devdomsos
Copy link

I am trying to run the RN app without nodify with Web3. Does anybody have that working without nodify?

About secure randomNumber in RN :
In order to supply a secure randomNumber I used a different lib called ethers.js. You can follow a discussion on the subject here:
ethers-io/ethers.js#1070

Here is what will get you started:
https://docs.ethers.io/v5/cookbook/react-native/

Then you could create crypto global variable (I know not the best practice) and create a randomNumber:

export default function createCrypto(): Crypto {
  return {
    randomBytes(length: number = 32) {
      return Buffer.from(ethers.utils.randomBytes(length));
    };
  }
}    

I had to ejected from expo.

In the metro.config I specified also this:

resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg', 'tsx', 'ts'],
      extraNodeModules: {
        stream: require.resolve('stream-browserify'),
        crypto: require.resolve('crypto-browserify'),
      },
    },

It is not a complete solution, but might be helpful for some of you.

@sakshambhatt
Copy link

Thank you!

@dhruvsbhatt
Copy link

node-libs-browser is deprecated now, any alternatives please.

@itsnyx
Copy link

itsnyx commented Feb 2, 2023

node-libs-browser is deprecated now, any alternatives please.

hey did u find any proper solution to use web3 in react native ?

@the-unknown
Copy link

node-libs-browser is deprecated now, any alternatives please.

hey did u find any proper solution to use web3 in react native ?

There is a fork, especially made for react native:

https://www.npmjs.com/package/node-libs-react-native

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment