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.
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 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
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.
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
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:
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.
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.