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 add
sudoat 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
$ 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 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.
SDK Manager, select the
SDK Platformstab. Then, at the bottom of the window select the option
Show Package Details. Look for
Android 9 (Pie)and check the following items:
Android SDK Platform 28
Intel x86 Atom_64 System Image
SDK Toolstab, check the box
Show Package Detailsagain, find
Android SDK Build-Toolsand make sure to check
Click "Apply" to update the changes.
You will also need to configure the
ANDROID_HOMEenvironment variable, so go and find the file
$HOME/.bashrcand 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/Sdkas 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
- 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.
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 (6)
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!
In my case just change from:
Fix for install kvm on ubuntu
sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils