Setting Up the Development Environment

Before you start coding your first React Native application, you must first set up your development environment. While the process might seem a bit overwhelming at first, don't worry–we'll guide you through it in a step-by-step manner. By the end of this chapter, you'll have everything you need to start developing awesome mobile applications using React Native.

The technology stack required for React Native app development includes Node.js, Watchman, the React Native command-line interface (CLI), Java Development Kit (JDK), and Android Studio. If you want to develop iOS apps, you'll also need a Mac and Xcode. Without further ado, let's get started on setting up your React Native development environment.

Installing Node.js and Watchman

React Native is built on JavaScript, and Node.js is required to get up and running with your React Native app. Install Node.js using Homebrew by running the following command in your terminal:

brew install node

Watchman, a tool by Facebook, is recommended for triggering actions in response to file changes. For installation of Watchman, use the following homebrew command on your terminal:

brew install watchman

Installing the Java Development Kit

Android apps are majorly written in Java. Thus, to work with Android devices and applications, you need to install the Java Development Kit (JDK). The command to install JDK using Homebrew is:

brew cask install adoptopenjdk/openjdk/adoptopenjdk8

Installing Android Studio

Android Studio is the official IDE for Android and contains everything you need to build an Android app. Android Studio will let you run emulators and is a critical tool in your React Native developer toolset. To install it, go to the Android Studio website, download the appropriate file for your system, and then follow the prompts to install.

Once installed, there will be a couple of steps to follow:

1. On the Welcome to Android Studio Configuration wizard, select 'Custom' as installation type.
2. In the SDK Components Setup step, make sure the boxes next to "Show Package Details," "Android SDK Platform 29," and "Intel x86 Atom System Image" are checked.

Environment Variables

After installing the necessary tools, you need to add some environment variables.

To do that, open your Bash profile (.bash_profile, .bashrc, .zshrc, etc., depending on your system) on the home directory and add the following:

# add Android SDK
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

After that, apply the changes to the current session using the source command:

source $HOME/.bash_profile

Installing the React Native command-line interface

With all the above installations complete, it's now time to install the React Native command-line interface. The CLI is a tool that lets you initialize, build, and manage your React Native projects. Install it using npm:

npm install -g react-native-cli

Setting Up an Android Emulator

To see your React Native application live, you'll need an emulator. Let's set up an Android emulator using Android Studio:

1. Open your Android Studio.
2. Click on 'Configure' and select 'AVD Manager'.
3. Click on 'Create new Virtual Device'.
4. Select a phone of your choice from the 'Phone' tab.
5. Select a system image (Recommend 'Pie - API Level 28').
6. Click next, then 'Finish'.

To confirm successful setup, start your emulator, and you should see an Android phone similar to a real one.

Creating Your First 'MovieApp'

Now, it's time to create your first React Native application. Let's create an app named 'MovieApp'. To do this, run the following command in your terminal:

npx react-native init MovieApp

To run the app on your Android emulator, navigate to your project directory and run the following command:

cd MovieApp
npx react-native run-android

If everything worked correctly, you should see the default welcome screen of your 'MovieApp' on your Android emulator.

In this chapter, we successfully set up the development environment required for developing a React Native application. By following these steps, you can setup all the necessary tools and create your first React Native application. However, note that setup can often involve troubleshooting based on your system's specifics. In the next chapters, we will delve into developing more complex elements of a React Native application. Happy coding!