• Set Up your Environment?
• Npm Installed?
• Set Your .env FRONT_END_ENDPOINT to the remote enpoint?
• Or, if you have your local api set up, set your .env FRONT_END_ENDPOINT to the local endpoint?

1. Open terminal in your text editor or project folder.
2. Run expo start

--> Expo will generate a QR code for the project in your terminal

--> Expo will automatically open its Metro Bundler, also known as DevTools. If it doesn't automatically open you can press the key d in your terminal and it should open the dev tools.

--> The information in the terminal and Metro Bundler are virtually the same

Note: when you start your project, Expo may ask you to sign into your Expo account via terminal.

3. Load the project on the Expo-Client App: on iOS, open camera and it will recognize the QR code and a notification will appear to open Walkertreker; on Android, open your Expo-Client app and select the option to scan for a QR code.

Take note of the options Expo makes available to you

• Blue Box: This area logs the same information that your terminal logs. It tells you that the tunnel created to host on Expo is available, it shows you progress on the Javascript bundling.
• Yellow Box: This gives you connection options for the QR code. Try to use LAN, if you can. Learn more about that here. This is also where you would select to load project on an emulator/simulator.
• Pink Box: When Expo finishes building the JavaScript bundle, your device appears in the left hand column.

• Yellow Box: This is the output of the device you have loaded the project onto. It shows the same information that is output in the Walkertreker project terminal.
• Red Box: These are console.logs written in the project code.
• Pink Box: What a warning looks like: written in yellow and doesn't break the project. Errors are written in red and break the project.

This is what your project should look like as it is loading up. Arriving to the New Player Sign Up page means you've successfully booted the project.

--->--->

There are many errors that happen because of connection time-outs when you the app is loading. This is not because your project is broken! This could happen when:

• building the initial JavaScript bundle, or when you close your connection
• starting/shutting down the debugger
• starting/shutting down the toggle inspector

If there are errors with imports, or something is not loading or something that's missing, this is:

• either due to actual errors in the code base (and you should hunt down that bug!)
• or possibly some error in your in your package-lock or node_modules.

Regardless, it's always a good measure to delete + reinstall node_modules and/or package-lock.json.

Shake it, shake it, shake it, shake it, shake it, shake it, shake it, shake it, shake it, shake it like a Polaroid picture!

When you are inside walkertreker on your phone, you can access the development mode menu by... you guessed it, shaking your phone! Not quite like a polaroid in Andre 3000's "Hey Ya", but pretty close! Sometimes it takes a second, but it does show up.

See the photos below for all the options:

• Reload JS Bundle: when you need a refresh
• Show Perf Monitor: not sure what this does
• Disable Live Reload: stops a reload every time you save in the project
• Debug Remote JS: toggles either Expo's remote debugger, or React-Native-Debugger if you've installed and configured it. Checkout out the section on debugging for more information
• Toggle Element Inspector: a very cool tool that makes remote debugging even more powerful by allowing you to target elements on the screen and learn about their properties

First photo: the dev menu

Second & Third photos: view of Toggle Element Inspector on, showing its menu options:

• Inspect: Select an element on the screen to learn about it.
• Perf: This turns on interactions with the screen. As in, you're button touch won't select it as an element, but click it as the button it is.
• Network: List of network activity.
• Touchables: Shows areas of screen that respond to touch. Note: You can have multiple menu options selected at once.

• Learn about creating a player here

• Learn about helpful tips to work with local state (Redux + Sagas), such as loading a specific game or clearing local state, by checking out Managing Local state

• Learn about working with ESLint & PropTypes by navigating to ESLint, Husky & PropTypes

• For more info on errors and warnings, see Something Not Working? Common Errors

• Set up the coolest debugger out there: React-Native-Debugger