Setup

Quick Start

To get started, it is easiest to just use our Truffle Box template at https://github.com/celo-org/celo-dappkit. This repository includes a "Hello World" example for getting started with DappKit.

Configuration

Read on for more details about how to set up and configure DappKit.

Installation

To create a new expo project, you'll want to use the expo-cli

npm install expo-cli --global
// or
yarn global add expo-cli
​
expo init $YOUR_APP_NAME

Read more about general Expo setup at https://expo.io/learn​

Typescript Support

We are big fans of Typescript, so if you used the tabs template, you can support typescript by just following these guidelines​

Setup

To add DAppKit, simply add @celo/dappkit@0.0.9 to your package.json or

npm install @celo/dappkit@0.0.9
// or
yarn add @celo/dappkit@0.0.9

DAppKit's dependencies require a bit of adjustment to a vanilla Expo. The first are a lot of the Node.js modules that are expected. You can get those mostly by using the following modules

npm install node-libs-react-native vm-browserify
// or
yarn add node-libs-react-native vm-browserify

You will need to add the following metro.config.js to your project root

const crypto = require.resolve('crypto-browserify')
const url = require.resolve('url/')
module.exports = {
resolver: {
extraNodeModules: {
crypto,
url,
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser.js'),
stream: require.resolve('readable-stream'),
vm: require.resolve('vm-browserify'),
},
},
}

This should allow you to build the project, however some dependencies might expect certain invariants on the global environment. For that you should create a file global.ts with the following contents and then add import './global' at the top of your App.js/tsx file:

export interface Global {
btoa: any
self: any
Buffer: any
process: any
location: any
}
​
declare var global: Global
if (typeof global.self === 'undefined') {
global.self = global
}
if (typeof btoa === 'undefined') {
global.btoa = function(str) {
return new Buffer(str, 'binary').toString('base64')
}
}
​
global.Buffer = require('buffer').Buffer
global.process = require('process')
global.location = {
protocol: 'https',
}

You'll also constantly get two warnings that can be ignored, you can suppress them in the yellow banner with the following in your App.js/tsx

import { YellowBox } from 'react-native'
​
YellowBox.ignoreWarnings([
"Warning: The provided value 'moz",
"Warning: The provided value 'ms-stream",
])