#Buidl a wallet in React-native (Part I)

Nowadays we just can’t live without certain node libraries. Furthermore, I would say we just don’t make difference between javascript itself and some libraries. This could lead to some misunderstanding if you just landed on react-native. You just can’t do this out of the box:

require('crypto')

Why?

Compiling tools like Webpack adds some functionality not available by default on browsers. But sometimes we forget that, and we expect it will work when we #buidl on other platforms.

In react-native you will be working on JavaScriptCore. A javascript engine that is used by RN where you will enjoy last version of ES and some others extras.

With that in mind, let’s start building…

After this short introduction in why we are doing this, lets talk about the things we need to do. This is all configuration and its a bit… not funny, but sometimes we need to get our hands dirty, if you want to check a working example on our github, here it is.

We are going to install three things:

react-native-randombytes

React-native-randombytes is a library that adds support to the randomBytes function in each platform. This library is basically a bridge to the native code that you can check in Android (using the java module: java.security.SecureRandom) and in iOS (using the kSecRandomDefault).

Intallation:is

yarn add react-native-randombytes
react-native link

This two commands are installing the module and linking the native bridge to react-native. Link will do that this automatically. If you are more interested in how linking libraries works on react-native you can check here.

react-native-crypto

React-native-crypto adds the crypto module to react-native using react-native-random-bytes that we just installed.

yarn add react-native-crypto

And last but not least: rn-nodeify

rn-nodeify is a library that imports core modules of node into a react-native app. In order to import that this uses a shim, it will also modify your package.json so do not get afraid about. You can just run it once with:

yarn add rn-nodeify --dev
./node_modules/.bin/rn-nodeify --install --hack

I usually like to add only the packages that I need and not others, so the ones you need are:

./node_modules/.bin/rn-nodeify --install crypto,stream,events,string_decoder,vm --hack

This command has created in your project the file: shim.js. Do not touch it for now, we will import it later. This command we have run manually is fine but we are going to move that to a postinstall script as explained in its documentation. So add this to your package.json inside the scripts:

"postinstall": "./node_modules/.bin/rn-nodeify --install --hack"

Now, every time a developer adds a new package or something is changed this will get updated and the shim will be autogenerated.

You could probably feel like:

But we are done with the configuration, so let’s start with the fun…

Ready to go:

If you did not created a project yet run in your console:

react-native init rncryptotest

This will create your react-native project. Since I assume if you are still here, you already have this, after adding the commands already explained, open the main view App.js:

import './shim.js'
import crypto from 'crypto'
console.log(crypto.randomBytes(32));

This is generating a cryptographically strong random data with a length of 32 bytes. This will be used in the future to generate the ethereum private key.

Here is the full example ready to work: https://github.com/IoBuilders/rncryptotest

We added in this repository a small seed to start building a wallet over it. We would love to hear feedback from you about the article and the repository.

At io.Builders we are building our technology trying to do our best, we are decided to help the community as much as the community helped us, so this is why we are writing this article. And the idea is to write another part talking about the Ethereum private and public key generation, sign transactions with your private key and interact with smart contract from your react-native app.

Would you like to read it?