In part 1, we set up the the truffle box and got started with setting up the react native project , and now we are include the truffle box in the react-native project.

Create the React Native Project (If you haven’t)

Run the command (it might vary during on how you start up your react native installation), do check out the official documentation for react native installation

npx react-native init KoCoinDrizzleReactNativeTutorial

React_Native_Project_Kola_Olulana

Next, we will be adding the truffle box code from part 1 into the react-native project.

Adding Truffle Box And Required Libraries To react Native Project

There are a few libraries that are required to get react-native ready for web3js and other blockchain-like capabilities like node-libs-react-native( provides React Native compatible implementations of Node core modules like stream and http ), vm-browserify(emulate node’s vm module for the browser), Base64(polyfill for browsers which don’t provide window.btoa and window.atob), react-native-randombytes (random bytes generators).

Run the following cmd within the react-native project, some of them might need later configuration for build the app(check their npmjs pages for further instructions), for now, they will be sufficient. I am using node v12.11.1

  1.  yarn add node-libs-react-native vm-browserify Base64 react-native-randombytes
  2. react-native link react-native-randombytes
  3. Create a shim.js file in the root of the react native project as shown below
Copy to Clipboard

4.        Create a new file rn-cli.config.js in the root folder with the following code:

Copy to Clipboard

5.      Finally let’s import our shims in index.js. The very first line should be the following:

6.      Then all the files in truffle-temp into the root folder of your React Native project. Your folder should look like this in the end:

truffle-box-react-native-kola-olulana

Importing the Smart Contract

This will be done in Part 3

Exclusive Content

Be Part Of Our Exclusive Community

Become a Patron

STORE

Exclusive Content

Be Part Of Our Exclusive Community

Sed finibus, sem elementum tincidunt tempor, ipsum nisi ullamcorper magna, vel dignissim eros sapien at sem. Aliquam interdum, ante eget sagittis fermentum, mauris metus luctus sem, at molestie.

Become a Patron

STORE

merch

Sed finibus, sem elementum tincidunt tempor, ipsum nisi ullamcorper magna, vel dignissim eros sapien.

20% Off All Merch