Setting up React Native development on Linux without installing Android Studio
I was primarily a web developer where I was very much into React. I only started to look at mobile development when React Native was available for Android.
I installed Android Studio as the prerequisite for React Native development for Android, and was surprised of how heavy and sluggish it felt. I found out later that you don’t need to launch Android Studio for React Native development, so I tried to find a way to not install it at all.
I just installed Fedora 29 on my laptop. I was using Ubuntu 18.04 before and it was giving me all sort of problems. As I’m setting my Fedora for React Native development, I figure I’ll share the steps. I hope you find it useful.
For Ubuntu and other Debian-based, the steps should be the same, you need to change thing up a bit though, like using apt-get instead of dnf for package installation.
First thing first
Update Fedora
You’ll always want to update existing packages before proceeding.
sudo dnf -y update
Git
Install git
You don’t have to install git to start developing with React Native. But I supposed you’ll want to use some for of version control for your codes eventually.
sudo dnf -y install git
Git Version
Once installed, you can check the git version.
git --version
Set up git user
Then set up the user for git.
You’ll want to change sampleuser and sampleuser@example.com to your actual user name and email address.
git config --global user.name "sampleuser"
git config --global user.email "sampleuser@example.com"
Node.js
Node.js or Node will be the underlying engine React Native development.
Node also comes with npm, which lets you install the React Native command line interface, and other npm packages that you will need later when you are developing with React Native.
Install development tools
To build native add-ons
sudo dnf install -y gcc-c++ make
Download Node.js
As of writing, the stable release for Node.js is version 10.15.0
Official Node.js binary distributions are provided by NodeSource.
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
Install Node.js
sudo dnf install nodejs
Node.js Version
Once installed, you can check the Node.js and npm version
node -v
npm -v
React Native
Install React Native CLI
This will be used to initiate a React Native development project
npm install -g react-native-cli
Java Development Kit (JDK)
React Native requires a recent version of the Java SE Development Kit (JDK).
Download and install Oracle JDK 8 if needed.
Create a directory for JDK
sudo mkdir -p /usr/local/java
Download JDK
Go to Oracle JDK 8 website. Download the latest JDK for your OS.
As of writing, the latest is Java SE Development Kit 8u202:
- jdk-8u202-linux-x64.tar.gz for Linux x64
You have to check the Accept License Agreement radio button first before you can download.
Copy and Extract JDK files
Go to the directory where you downloaded the file, for example ~/Downloads
cd ~/Downloads
Copy to the new directory that you have created previously and the change directory.
sudo cp -r jdk-8u202-linux-x64.tar.gz /usr/local/java
cd usr/local/java
Extract the files.
sudo tar xvzf jdk-8u202-linux-x64.tar.gz
There is now a jdk1.8.0_202 folder.
Update PATH file for JDK
You can use any text editor like nano to edit /etc/profile.
sudo nano /etc/profile
In the text editor, paste the text below; exit and save.
JAVA_HOME=/usr/local/java/jdk1.8.0_202
PATH=$PATH:$HOME/bin:$JAVA_HOME/bin
export JAVA_HOME
export PATH
Tell the system about the new Oracle Java version
sudo update-alternatives --install "/usr/bin/java" "java" "/usr/local/java/jdk1.8.0_202/bin/java" 1
sudo update-alternatives --install "/usr/bin/javac" "javac" "/usr/local/java/jdk1.8.0_202/bin/javac" 1
sudo update-alternatives --install "/usr/bin/javaws.itweb" "javaws.itweb" "/usr/local/java/jdk1.8.0_202/bin/javaws.itweb" 1
Make Oracle Java JDK as default
sudo update-alternatives --set java /usr/local/java/jdk1.8.0_202/bin/java
sudo update-alternatives --set javac /usr/local/java/jdk1.8.0_202/bin/javac
sudo update-alternatives --set javaws.itweb /usr/local/java/jdk1.8.0_202/bin/javaws.itweb
Reload system wide PATH
source /etc/profile
Restart your Machine
Restart for the installation to take effect
Check Java JDK version
java -version
Android SDK instead Android Studio
We are not installing Android Studio. Fortunately there’s a way of doing it just by downloading the Android SDK.
Download Android SDK
Go to Android Studio website. Scroll down to Command line tools only near the bottom of the page. Download the SDK tools package for your platform. As of writing, the current file is:
- sdk-tools-linux-4333796.zip for Linux
Unzip the Android SDK files
Go to the directory where you downloaded the file, for example: ~/Downloads
cd ~/Downloads
Unzip the files to /opt/android, that will eventually be your ANDROID_HOME
unzip sdk-tools-linux-4333796.zip -d /opt/android
Configure the ANDROID_HOME environment variable
Change to your home directory.
Open .bash_profile with a text editor. Again, you can use nano.
cd ~
nano .bash_profile
Add the following lines to your .bash_profile
export ANDROID_HOME=/opt/android 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
Load the config above into the current shell
source .bash_profile
Use sdkmanager to list Android SDK packages
First, list available packages
sudo /opt/android/tools/bin/sdkmanager --list
As of today, these are the latest packages that need to be installed. You might need to change this to the latest version available:
- platform-tools
- platforms;android-28
- build-tools;28.0.3
- add-ons;addon-google_apis-google-24
Use sdkmanager to install Android SDK packages
sudo /opt/android/tools/bin/sdkmanager "platform-tools" "platforms;android-28" "build-tools;28.0.3" "add-ons;addon-google_apis-google-24"
You will be asked for confirmation, type “y” then enter
Setting up physical Android Device (your phone)
Enable debugging over USB
- Go to Settings > About phone
- Tap Build number row seven (7) times
- Go to Settings > Developer options
- Enable USB debugging
Plug in your device via USB
Plug in your device via USB to your development machine.
Check the manufacturer code by using lsusb
lsbub
The output lines represent the USB devices currently connected to your machine. Find teh line wich has your phone model. For example:
Bus 001 Device 003: ID 22b8:2e76 Motorola PCS
Get the first four digits from the device ID. From the example above, the number is:
22b8
Input the number into your udev rules
Make sure that you replace 22b8 with the identifier you get in the command below:
echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules
Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running adb devices
adb devices
Initiate a React Native Project
Now you are ready.
Use react-native-cli that you have installed earlier.
react-native init yourproject
Change directory and start the development server
cd yourproject
react-native start
Run your app
react-native run-android
Your app should be running on your phone now.
You can also install simulator like Genymotion, which is much lighter than Android Studio’s emulator
I hope everything turns out well. Post a comment if you need any help.