Skip to content

Running the app on your phone

Adam DuQuette edited this page Jul 24, 2019 · 5 revisions

In this article you will learn how to run the Rattle app on your phone in a development environment. Please make sure you have installed the Expo client on your mobile device:

Also, make sure you've setup the project.


Let us...BEGIN!

When this wiki fails you, go here for more info.

Once you have installed both the Expo client on your mobile device, and setup the project, open your terminal and navigate to your project. Now start the app with:

npm start

This step may take a while. Refer to the package.json to see what scripts are available to you. The start script will run expo start.

Expo start stdout

Once this step is complete you should have a new tab automatically open in your browser to a localhost address. This is the Metro Bundler provided by the expo-cli. This is a localhost HTTP server that compiles the react-native project using Babel. In the bottom-left corner you will see a QR code with the following options above it: tunnel, LAN, and local. Select tunnel.

Metro Bundler

Android Users

Open the Expo client app you downloaded from the Google Play Store. Select the option to scan a QR code and point your camera at the Metro Bundler QR code. As soon as Expo reads the QR code you will notice both the Metro Bundler and your phone giving you messages "building JavaScript bundle" or "downloading JavaScript bundle" - this is good!

Android building

iOS Users

Open your phone Camera app and point it at the Metro Bundler QR code. You should receive a push notification from Expo. When you press the notification you will notice both the Metro Bundler and your phone giving you messages "building JavaScript bundle" or "downloading JavaScript bundle" - this is good!

iOS QR scan iOS building

Both Users

Give it a moment and the app should appear on your phone! Because we selected tunnel the app will have hot reloading to your phone, so you are also setup for development!


Now celebrate!

And head over to What the heck does it do?

Clone this wiki locally