Skip to content

Instantly share code, notes, and snippets.

@ismanapa
Last active February 25, 2021 17:45
Show Gist options
  • Save ismanapa/52ccd39516a47d9136e882f2becfef6d to your computer and use it in GitHub Desktop.
Save ismanapa/52ccd39516a47d9136e882f2becfef6d to your computer and use it in GitHub Desktop.
React Native environment installation

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

Android Studio install

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

Intel HAXM instalation error

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:

Android Studio Sdk Manager Android Studio Sdk platforms tools selection Android Studio Sdk tools selection

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.

AVD list

Otherwise, create a new device following the wizard.

New AVD

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

Starting process

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

App on emulator

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment