React Native setup from scratch for Linux

Check the official React Native Documentation if in doubt.What you will get at the end of this guideline, a running android app on a virtual deviceNote: I won’t be using Expo because in my project I need to use some specific and advanced node packages that Expo doesn’t wraps at the time (17–12–2018).Start downloading the required filesDownload Android Studio and place it in ~/DownloadsDownload Java Development Kit and place it in ~/DownloadsOptional: Add all the paths to ~/.profile at oncenano ~/.profileexport PATH="$(yarn global bin):$PATH"export JAVA_HOME=/usr/local/java/jdk1.8.0_191export ANDROID_HOME=$HOME/Android/Sdkexport PATH=$PATH:$ANDROID_HOME/emulatorexport PATH=$PATH:$ANDROID_HOME/toolsexport PATH=$PATH:$ANDROID_HOME/tools/binexport PATH=$PATH:$ANDROID_HOME/platform-toolssource ~/.profileStep 1: Install nvm, yarn, react-native-cliLets install nvm in order to manage different versions of node:curl -o- | bashThen, install the latest node stable version (you might need to open a new console for the nvm path to be loaded):nvm install stableWe’ll use yarn over npm (the command is for Arch Linux, search the command for other Linux distros):pacman -S yarnNow we can use yarn to install react-native-cliyarn global add react-native-cliYou won’t be able to use the command react-native on the terminal if you don’t add the path to yarn global packages:Open the .profile filenano ~/.profileAdd this line at the bottom:export PATH="$(yarn global bin):$PATH"Finally, reload the .profile file so that you can use react-native command:source ~/.profileStep 2: Install Java SE Development KitLocate the previously downloaded tar file (Java SE Development Kit) to the desired installation folder..I decided to store it in /usr/local/javasudo mkdir /usr/local/javasudo mv ~/Downloads/jdk-8u191-linux-x64.tar.gz /usr/local/java/Then extract the compressed files, and remove the tar file:cd /usr/local/java/sudo tar -xvzf jdk-8u191-linux-x64.tar.gzsudo rm jdk-8u191-linux-x64.tar.gzWe need to add the path to the installation folder in the .profile file:export JAVA_HOME=/usr/local/java/jdk1.8.0_191Finally, reload the .profile file (see Step 1)Step 3: Install Android Studio and SDK’sLocate the previously downloaded zip file (Android Studio) on the desired install folder..I decided to store it in /usr/local/android-studioInside the zip there is a folder named android-studio, so we just need to move the zip to /usr/local, unzip it and then delete the compressed file.sudo mv ~/Downloads/ /usr/local/cd /usr/localsudo unzip android-studio-ide-181.5056338-linux.zipsudo rm android-studio-ide-181.5056338-linux.zipThen, we need to initiate the installation:cd /usr/local/android-studio/bin./studio.shChoose the custom install, and be sure to mark the Android Virtual Device box and then wait for it to download all the components.Once it finishes, click on configure and open the SDK Manager..Then follow this steps (from the official React Native Documentation):Select the “SDK Platforms” tab from within the SDK Manager, then check the box next to “Show Package Details” in the bottom right corner..Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are checked:Android SDK Platform 27Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System ImageNext, select the “SDK Tools” tab and check the box next to “Show Package Details” here as well..Look for and expand the “Android SDK Build-Tools” entry, then make sure that 27.0.3 is selected.Finally, click “Apply” to download and install the Android SDK and related build tools.Now, you need to add some path’s to your .profile file (see Step 1):export ANDROID_HOME=$HOME/Android/Sdkexport PATH=$PATH:$ANDROID_HOME/emulatorexport PATH=$PATH:$ANDROID_HOME/toolsexport PATH=$PATH:$ANDROID_HOME/tools/binexport PATH=$PATH:$ANDROID_HOME/platform-toolsStep 4: Build your React Native app ( and create Android Studio Launcher )First move to the folder where you want to create the project folder..I decided to make a Projects folder just under root that will store all my projects.mkdir ~/Projectscd ~/Projectsreact-native init FirstProjectNow, open android studio (repeated from Step 3):cd /usr/local/android-studio/bin./studio.shChoose “Open an existing Android Studio project” and select the folder of you recently created project.Before we continue, let’s create a launcher for Android Studio, so you don’t have to execute every time.Android Studio -> Tools -> Create Desktop EntryNow, from the upper right corner, select the AVD Manager in order to create a virtual device to run our app.Create a new device, like the Nexus 6p, and then select the Oreo API Level 27 image (download it if needed).Note: This last step may fail if your OS /tmp folder has insufficient space, displaying an error saying “No space left on device”..In this scenario, just increase it’s size to 8gb with the following command:sudo mount -o remount,size=8G,noatime /tmp;SourceThen press the play button of the virtual device to start it.Finally, run you app (assuming you’ve chosen an android virtual device)cd ~/Projects/FirstProjectreact-native run-androidYour app should be running on your virtual device, congratulations!. More details

Leave a Reply