Skip to main content


Quick Start#

To get started, it is easiest to just use our Truffle Box template at This repository includes a "Hello World" example for getting started with DappKit.


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


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

npm install expo-cli --global// oryarn global add expo-cli
expo init $YOUR_APP_NAME

Read more about general Expo setup at

Typescript Support#

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


To add DAppKit, run

npm install @celo/dappkit// oryarn add @celo/dappkit

You will need node version 8.13.0 or higher.

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// oryarn add node-libs-react-native vm-browserify

You will need to add the following metro.config.js to your project root and make sure that the associated npm packages are installed.

const crypto = require.resolve('crypto-browserify')const url = require.resolve('url/')module.exports = {  resolver: {    extraNodeModules: {      crypto,      url,      fs: require.resolve('expo-file-system'),      http: require.resolve('stream-http'),      https: require.resolve('https-browserify'),      net: require.resolve('react-native-tcp'),      os: require.resolve('os-browserify/browser.js'),      path: require.resolve('path-browserify'),      stream: require.resolve('readable-stream'),    }  }}

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: Globalif (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').Bufferglobal.process = require('process')global.location = {  protocol: 'https',}

You may also 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",])