Drizzle React Native Box¶

This box will get you up and running with building a dapp on React Native (Android and iOS).

Installation¶

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.

Connecting your app to your Ganache testnet¶

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.

Running the app¶

Start React Native Metro bundler: react-native start
Start your emulator/plug in your device

Android (Emulator/Physical Device)¶

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.

Start ganache-cli: ganache-cli -b 3
Compile and migrate contracts: truffle compile && truffle migrate
Reverse ports: adb reverse tcp:8545 tcp:8545
Install app: react-native run-android

iOS¶

Simulator¶

The iOS simulator will see servers on localhost just fine.

Start ganache-cli: ganache-cli -b 3
Compile and migrate contracts: truffle compile && truffle migrate
Install app: react-native run-ios (you can also do this through Xcode)

Physical device¶

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.

Find your LOCAL_MACHINE_IP by checking your network settings on your Mac where Ganache is running
Start ganache-cli: ganache-cli -b 3 -h LOCAL_MACHINE_IP
In truffle.js for development, point Truffle to LOCAL_MACHINE_IP
Compile and migrate contracts: truffle compile && truffle migrate

In index.js, point Drizzle to LOCAL_MACHINE_IP

const options = {
  ...
  web3: {
    fallback: {
      type: "ws",
      url: "ws://LOCAL_MACHINE_IP:8545"
    }
  }
};

Install: Do it through Xcode