Getting to writing React Native and testing it on your phone can be really quick if you go the expo-cli
route. You just need to download the Expo app on your phone and type the following on your terminal:
$ npm install expo-cli
$ expo init ProjectName
$ cd ProjectName
$ npm start
Then you scan the QR code and you can see the app running on your phone.
However, if you need to touch native code at all, this isn't going to be enough. You'll have to install Java Development Kit, Android Studio and all that jazz. And even though React Native's documentation is reasonably okay, some of the steps took me a while to figure out. So here's how I did it.
This tutorial assumes that you've got a Linux Mint and node already installed on your system.
Step 1: Get JDK
The first thing is to make sure that you've got version 8 of Java Development Kit. I used OpenJDK to get it. It's as easy as typing this on your terminal:
$ sudo apt install openjdk-8-jdk
Note: Make sure that you are using JDK 8 when running your apps, otherwise the build process will fail. So if you update it or have another version alongside it, remember to switch back.
If you want to keep JDK from updating by any means, you can type this in your terminal:
$ sudo apt-mark hold openjdk-8-jdk
Step 2: Install Android Studio
This is a bit more complicated. We'll need Android Studio to run a virtual machine to test our app.
Go ahead and download the latest version for Linux from their website.
-
Unpack the file wherever you want to install it. A lot of people do it in
/opt
. Depending on where you want to put it, you might need to addsudo
at the beginning of the command lines.
$ mv android-studio-ide-*.*-linux.tar.gz /your/directory $ cd /your/directory $ tar -xzf android-studio-ide-*.*-linux.tar.gz
-
If you're using a 64-bit machine, you'll need some additional libraries. Type this in your terminal:
$ sudo apt install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386
-
Launch Android Studio by navigating to
/android-studio/bin
and executingstudio.sh
:
$ cd /android-studio/bin $ ./studio.sh
-
The Setup Wizard will guide you through the rest of the installation process. You'll just need to make sure that a couple of options are marked.
When the Wizard asks you to choose and installation type, choose "Custom". Then make sure to check all these for installation:Android SDK
Android SDK Platform
Android Virtual Device
-
If you want, you can create a soft link to more easily access it:
$ cd /usr/local/bin $ ln -s /your/directory/android-studio/bin/studio.sh android-studio
Step 3: Configure Android Studio
Android Studio will install the latest Android SDK by default. But React Native requires Android 9 (Pie). So we'll have to manually install it.
Launch Android Studio
On the welcome screen, click on "Configure", which is at the bottom-right corner.
-
Within the
SDK Manager
, select theSDK Platforms
tab. Then, at the bottom of the window select the optionShow Package Details
. Look forAndroid 9 (Pie)
and check the following items:Android SDK Platform 28
Intel x86 Atom_64 System Image
Select the
SDK Tools
tab, check the boxShow Package Details
again, findAndroid SDK Build-Tools
and make sure to check28.0.3
.Click "Apply" to update the changes.
-
You will also need to configure the
ANDROID_HOME
environment variable, so go and find the file$HOME/.bashrc
and add the following lines at the end:
export ANDROID_HOME=$HOME/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
Note: The official documentation has you add
export ANDROID_HOME=$HOME/Android/Sdk
as the first line, but it didn't work for me. All that stuff was in$HOME/Android
, so that's what I went with. -
Now you'll need to load the new configuration in your current shell. Just type:
$ source $HOME/.bashrc
Step 4: Configure your virtual android device
You'll need to tell your virtual device to use Android 9 (Pie) if you want it to run React Native. So go to Android Studio or launch it again if you closed it.
- Open the AVD Manager, which can be done by clicking at the smartphone icon on the top-right corner of the window.
- If you don't have any devices listed, you'll have to create a new one. Otherwise, you can edit any existing one by clicking at the pencil icon next to it.
- There you just need to check
Android 9 (Pie)
as its system image.
Step 5: Install KVM
For your virtual device to work, you will need KVM, which allows you to run virtual machines.
-
Download it by typing the following in your terminal:
$ sudo apt install qemu-kvm libvirt-bin ubuntu-vm-builder bridge-utils wget unzip
-
Make sure your user has access to it by typing:
$ sudo adduser $USER kvm
To check if it worked, you should see your username after typing grep kvm /etc/group
. You'll probably need to log out and in again for the new configuration to take effect.
Start your first project!
Now you're all ready to start writing your React Native code. To quickly get started, you can just do a react-native init
.
- First, get your virtual phone running. Go to Android Studio, open the AVD Manager and launch the device by clicking on the green play button.
- Now go to the terminal and navigate to the folder where you want to keep your project.
- Type
npx react-native init MyProject
. This will create the files for a basic project. You might want to update the lint settings once it's created. - Start React Native by typing
npx react-native start
. - Open another tab on your terminal, make sure that you're in your project's folder and type
npx react-native run-android
.
You should see your app working on your virtual phone's screen now. Happy coding!
Top comments (5)
seem easy than window
When I did it at first it seemed a mess, because I had to check this documentation and that documentation and then that other documentation that assumed you wanted to do something different, and ran into some issues to which official documentations didn't offer solutions. But once I managed to pull it all together, I thought it was pretty straightforward.
This is super awesome!
Sweet!
In my case just change from:
export ANDROID_HOME=$HOME/Android
to
export ANDROID_HOME=$HOME/Android/Sdk
Fix for install kvm on ubuntu
sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils