React Native environment installation

readme.md

Install React Native dependencies

To follow the workshop exercises is mandatory to install all the dependencies necessary to run a React Native project.

You can follow the official documentation in this Link under the React Native CLI Quickstart section, or follow the next listed steps.

In this guide I assume that you are working with a windows machine, if you have another OS please follow the official documentation.

Prelude: Differences between EXPO and React Native CLI

Expo is a set of tools built around React Native. While it has many features, it also has many limitations.

I think that for us is more interesting to work with react-native-cli and I will like to use this tool in the workshop but if you don't want to install all the required dependencies you can also follow the steps under the Expo CLI Quickstart section and start working.

If you choose to use the Expo CLI, you will also have to prepare a new project because the workshop repository is prepared to work with react-native-cli.

To create a new expo project you can run the following command in your terminal:

expo init AwesomeProject

Install node and java

Install Node via Chocolatey, a popular package manager for Windows.

Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following command:

choco install -y nodejs.install openjdk8

Android development environment

Download and install Android Studio. While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:

• Android Studio
• Android Virtual Device

If you are using Hyper-V, an error will be thrown in the installation of Intel HAXM, but you can ignore this.

Add environment variables

The React Native tools require some environment variables. If the SDK is installed by default, you can add this variables to your system environment variables:

ANDROID_HOME

%LOCALAPPDATA%\Android\Sdk

Path (add this path to yout Path env variable)

%LOCALAPPDATA%\Android\Sdk\platform-tools

Install the Android SDK

Android SDK can be installed via Android Studio or via SDK manager. If you don't want to sail between apps menus please download the sdk manager and execute this command in the bin folder

sdkmanager --sdk_root="%LOCALAPPDATA%\Android\Sdk" "platforms;android-29" "build-tools;29.0.2" "system-images;android-29;default;x86_64" "sources;android-29" "system-images;android-29;google_apis;x86"

Otherwise, you can open Android Studio SDK Manager and install the following packages:

Create an AVD (Android Virtual Device)

Open Android Studio and open AVD Manager option in the gear option.

If you have already an avd created you can start it by clicking over the play button.

Otherwise, create a new device following the wizard.

Test your environment

Create a new React Native project with the next command

npx react-native init AwesomeTSProject --template react-native-template-typescript

Try to start the created app with

cd AwesomeTSProject && npx react-native run-android

The process in your console should look something like this

If the app is opened in the Android Emulator the process has finished and you can start the workshop without problems.

android_studio_install.png

app.png

avd_list.png

HAXM_error.png

new_avd.PNG

sdk_manager.png

sdk_platform_tools.png

sdk_tools.png

starting_process.png

system_image.png