This box will get you up and running with building a dapp on React Native (Android and iOS).
Install Truffle and Ganache CLI globally
npm install -g truffle
npm install -g ganache-cli
Download the box. This also takes care of installing the necessary dependencies.
truffle unbox drizzle-react-native
Go through the React Native tutorial. Make sure to select Building Projects with Native Code
since we will be leveraging some native code.
When we're Working with React Native and mobile apps, accessing the Ganache server that's running on your machine takes a bit more work than when we are building web apps. The sections below detail how to connect to the Ganache testnet with your mobile device/emulator.
react-native start
The main thing for Android devices is that we have to reverse the ports so that we can point to localhost
on the Android device to the Ganache server.
Make sure you've setup the Android Debug Bridge (adb) before doing these steps.
ganache-cli
: ganache-cli -b 3
truffle compile && truffle migrate
adb reverse tcp:8545 tcp:8545
react-native run-android
The iOS simulator will see servers on localhost
just fine.
ganache-cli
: ganache-cli -b 3
truffle compile && truffle migrate
react-native run-ios
(you can also do this through Xcode)iOS physical devices involve the most manual work relative to other devices. You have to look up the local IP address of your machine and manually handle it every time it changes.
LOCAL_MACHINE_IP
by checking your network settings on your Mac where Ganache is runningganache-cli
: ganache-cli -b 3 -h LOCAL_MACHINE_IP
truffle.js
for development
, point Truffle to LOCAL_MACHINE_IP
truffle compile && truffle migrate
index.js
, point Drizzle to LOCAL_MACHINE_IP
const options = {
...
web3: {
fallback: {
type: "ws",
url: "ws://LOCAL_MACHINE_IP:8545"
}
}
};