This chapter will cover installing the tools you'll be using throughout this book. They include:

• Expo
• Xcode (for iOS simulator, macOS only)
• Android Studio
• Node.js
• Watchman

The first step toward building our first React Native application is installing the dependencies in order to get started.

As mentioned in the introduction of this chapter, Expo provides us with a workflow in which we can avoid working in Xcode and Android Studio altogether, so we can develop solely in JavaScript. However, in order to run your app in the iOS simulator, you will need to have Xcode installed.

Xcode should be downloaded from the App Store. You can search the App Store for Xcode, or use the following link:
https://itunes.apple.com/app/xcode/id497799835.

Xcode is a sizable download, so expect this part to take a little while. Once you have installed Xcode via the App Store, you can run it via the Applications folder in the Finder:

1. This is the first screen you will see when launching Xcode. Note, if this is the first time you've installed Xcode, you will not see recent projects listed down the right-hand side:

2. From the menu bar, choose Xcode | Preferences... as follows:

3. Click the Components tab, and install a simulator from the list of provided simulators:

4. Once installed, you can open the simulator from the menu bar: Xcode | Open Developer Tool | Simulator:

Android Studio comes with the official Android emulator, which is the emulator that Expo recommends for use during development.

1. Download Android Studio from https://developer.android.com/studio/.
2. Open the downloaded file and drag the Android Studio.app icon to the Applications folder icon:

3. Once installed, we'll need to change the Android Studio preferences. Open Android Studio, and then open Preferences from the Android Studio menu in the system bar. In the Preferences submenus, select Appearance & Behavior | System Settings | Android SDK. Under the SDK Tools tab, ensure that you have some version of Android SDK Build-Tools installed, and install it if isn't installed already.
4. We'll also need to add the Android SDK location to the system PATH by editing ~/.bash_profile or ~/.bashrc. You can do this by adding the following line:

export PATH=$PATH:/Users/MY_USER_NAME/Library/Android/sdk

Be sure to replace MY_USER_NAME with your system username.

5. On macOS, you will also need to add platform-tools to your PATH in ~/.bash_profile or ~/.bashrc. You can do this by adding the following line:
   

 PATH=$PATH:/Users/MY_USER_NAME/Library/Android/platform-tools 

Be sure to replace MY_USER_NAME with your system username.

6. If the PATH was correctly updated, the adb command should work in the Terminal. You may have to restart your Terminal for the changes to take effect.

7. On a fresh install of Android Studio, you'll see a welcome screen. Start a new app to fully open the software. Then, select the AVD Manager from the buttons in the top -right corner of the window, as indicated in the following steps:

8. Press Create Virtual Device in the opened modal.
9. Select a device in the Select Hardware screen, and then press Next:

10. Download one of the system images under the Recommended tab of the System Image screen:

11. Press Finish on the final screen and Android Studio will create your new virtual device. The device can be run at any time by pressing the play button in the row of buttons in the top-right corner:

To run your app on an Android emulator during development, Expo used to recommend using the excellent third-party emulator Genymotion. As of Expo version 29, however, they now recommend using the official emulator that ships with Android Studio.

You can follow the step-by-step guide provided in the official Expo documentation to ensure that Android Studio is set up to work properly with your Expo development workflow. The guide can be found at https://docs.expo.io/versions/latest/workflow/android-studio-emulator.

This is all the setup you need to get started developing your first React Native app using Expo! There are, however, a few extra steps you'll need to perform for working with pure React Native applications (non-Expo applications). Pure React Native app development will be covered in depth in Chapter 10, App Workflow and Third-Party Plugins. Since this setup process is a little more involved and subject to change, I recommend referring to the official guide. You can find these instructions in the React Native: Getting Started guide, located at https://facebook.github.io/react-native/docs/getting-started.html under the Building Projects with Native Code tab section.

Once Simulator is open, select your desired iOS device via the menu bar: Hardware | Device | [IOS Version] | [ iOS Device ]. When running Expo applications in Simulator in the future, the same device should be used automatically.

The app can be started with the Expo CLI in your Terminal if you run the following command:

 expo start

The command will build your app and open the Expo Developer Tools in your web browser. In the Expo Developer Tools, select Run on iOS Simulator.

Once you have launched an app in the simulator, you'll be able to press the Run on iOS Simulator button without opening Simulator from Xcode. It should also remember your device choice. Opening Simulator from Xcode provides an easy way to choose your preferred iOS device to simulate.

If you followed the steps in the Expo guide, which can be found in the Installing Android Studio section, you would have also seen that it covered installing a virtual device that we can run as our emulator. To start your app on the emulator, just open the Android Virtual Device you installed in Android Studio, run the expo start command in your Terminal, and select Run on Android device/emulator.

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine, and is designed to build scalable network applications. Node allows JavaScript to be executed in a Terminal, and is an indispensable tool for any web developer. For more information on what Node.js is, you can read the project's About Node.js page at https://nodejs.org/en/about/.

According to the Expo installation documentation, Node.js is not technically required, but as soon as you start actually building something, you'll want to have it. Node.js itself is outside the scope of this book, but you can check out the Further reading section at the end of this chapter for more resources on working with Node.js.

There are numerous methods to install Node.js, and it is therefore difficult to recommend a particular installation method. On macOS, you can install Node.js in one of the following ways:

• Downloading and installing Node.js from the project's site at https://nodejs.org/en/download/.
• Installing via Homebrew. If you are familiar with Homebrew, this process is explained succinctly at https://medium.com/@katopz/how-to-install-specific-nodejs-version-c6e1cec8aa11.
• Installing via Node Version Manager (NVM; https://github.com/creationix/nvm). NVM allows you to install multiple versions of Node.js and easily switch between them. Use the instructions provided in the repository's README to install NVM. This is the recommended method, due to its flexibility, as long as you're comfortable working in the Terminal.

The Expo project used to have a GUI-based development environment called the Expo XDE, which has been replaced with a browser-based GUI called the Expo Developer Tools. Since the Expo XDE has been deprecated, creating new Expo apps is now always done using the Expo CLI. This can be installed using npm (Node Package Manager, which comes as part of Node.js) via the Terminal with the following command:

 npm install expo-cli -g

We'll be using Expo quite a bit throughout this book to create and build out React Native applications, particularly those apps that do not need access to native iOS or Android code. Applications built with Expo have some very nice advantages for development, helping obfuscate native code, streamlining app publishing and push notifications, and providing a lot of useful functionality built into the Expo SDK. For more information on how Expo works, and how it fits into the bigger picture of React Native development, see Chapter 10, App Workflow and Third-Party Plugins.

Watchman is a tool used internally by React Native. Its purpose is to watch files for updates, and trigger responses (such as live reloading) when changes occur. The Expo documentation recommends installing Watchman, since it has been reported that some macOS users have run into issues without it. The recommended method for installing Watchman is via Homebrew. The missing package manager for macOS, Homebrew allows you to install a wide array of useful programs straight from your Terminal. It's an indispensable tool that should be in every developer's tool bag:

1. If you don't have Homebrew installed already, run the following command in the Terminal to install it (you can read more about it and view the official documentation at https://brew.sh/):

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Once Homebrew has been installed, run the following two commands in Terminal to install watchman:

brew update
brew install watchman

This is all the setup you need in order to get started developing your first React Native app using Expo! There are however a few extra steps you'll need to perform for working with pure React Native apps (non-Expo apps). Pure React Native app development will be covered in depth in Chapter 10, App Workflow and Third-Party Plugins. Since this setup process is a little more involved and subject to change, I recommend referring to the official guide. You can find these instructions in the React Native | Getting Started guide located at
https://facebook.github.io/react-native/docs/getting-started.html under the Building Projects with Native Code tab. From here on out, we can use the magic provided by Expo to easily create new apps for development.

We'll create our first app using Expo via the Expo CLI. Making a new application is as simple as running the following:

expo init project-name

Running this command will first prompt you which type of app you'd like to create: either a blank app, which has no functionality added, or a tabs app, which will create a new app with minimal tab navigation. For the recipes in this book, we'll be using the blank app option.

Once you've selected your preferred application type, a new, empty Expo-powered React Native app in a new project-name directory is created, along with all of the dependencies needed to start developing right away. All you need to do is begin editing the App.js file in the new project directory to get to work.

To run our new app, we can cd into the directory, then use the expo start command. This will automatically build and serve the app, and open a new browser window with the Expo Developer Tools for your in-development React Native app.

For a list of all of the available commands for the Expo CLI, check out the documentation at https://docs.expo.io/versions/latest/guides/expo-cli.html.

With our first application created, let's move on to running the application in an iOS simulator and/or Android emulator.

You have created a new project, and started running that project with Expo in the last step. Once we start making changes to our React Native code, wouldn't it be nice to see the results of those changes? Thanks to Expo, running your project in the installed iOS simulator or Android emulator has also been streamlined.

Running your app in the Xcode simulator only takes a few clicks.

1. Open Xcode.
2. Open the Simulator from the menu bar: Xcode | Open Developer Tool | Simulator:

3. The app can be started with the Expo CLI in your Terminal if you run the following command:

expo start

The command will build your app and open the Expo Developer Tools in your web browser. In the Expo Developer Tools, select Run on iOS Simulator.

4. The first time you run a React Native app on the iOS simulator via Run on iOS Simulator, the Expo app will be installed on the simulator, and your app will automatically be opened within the Expo app. The simulated iOS will ask if you want to Open in "Expo"?. Choose Open:

5. Upon loading, you will see the Expo Developer menu. You can toggle between this menu and your React Native app by pressing command key + D on your keyboard:

Once you have launched an app in the simulator, you'll be able to press the Run on iOS Simulator button without opening Simulator from Xcode. It should also remember your device choice. Opening Simulator from Xcode provides an easy way to choose your preferred iOS device to simulate.

You can toggle between your React Native app and the Expo Developer menu, a list of helpful features for development, by pressing command key + M on your keyboard. The Expo Developer menu should look something like this:

Running your development app on a real device as easy as running your app on a simulator. With the clever combination of the native Expo app and a QR code, running on a real device is only a few clicks and taps away!

You can get the in-development app running on your phone in three simple steps:

1. Open the App Store on your iPhone, or the Google Play Store on your Android device.
2. Search for and download the Expo Client app.
3. While your app is running on your development machine, you should also have the Expo Developer Tools open in a browser. You should see a QR code at the bottom of the left-hand side menu of the Expo Developer Tools. Use the iPhone's native Camera app, or the Scan QR Code button in the Expo Client app on Android, to scan the QR code. This will open your in-development app on the device within the Expo Client app.

Your React Native app should now be running on your real device, fully equipped with live reload! You can also shake the device to toggle between your React Native app and the Expo Developer menu.

In this chapter, we've gone through all the steps required for getting started with developing React Native apps, including initializing a new project, emulating running your new project on your computer, and running your development app on real-world devices. Thanks to the power of Expo, it's easier to jump in and start working than ever before.

Now that you've got everything set up, it's time to start building!

Here's a list of other resources covering similar topics:

• The Expo installation documentation at https://docs.expo.io/versions/latest/introduction/installation.html.
• Node.js Web Development at https://www.packtpub.com/mapt/book/web_development/9781785881503
• Introducing Hot Reloading - React Native at https://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html. This blog post from the React Native team describes how Hot Reloading works in depth.
• Publishing with Expo at https://docs.expo.io/versions/latest/guides/publishing.html. Expo has a publish feature that allows you to share your in-development React Native application with fellow developers by creating a persistent URL.
• Expo Snack at https://snack.expo.io. Similar to codepen.io or jsfiddle.net, Snack lets you live edit a React Native app in the browser!