Some days ago I've decided to experiment with react-native on my Ubuntu notebook. I've got spare time and found this article with information how to install Android Studio. Unfortunately, some tips were outdated. In this post I'll tell my story to workaround some missing pieces. As a bonus, I'll create hello-world Expo application and run on the real iOS device.
Installing Android Studio and Android SDK
Here steps to start development for android under Ubuntu 18.10:
- Install Java:
sudo apt install openjdk-8-jre openjdk-8-jdk
- Install Android Studio:
sudo snap install android-studio --classic
- Start Android Studio with
android-studioto complete installation and install Android SDK
Configure build path in
export ANDROID_HOME=$HOME/Android/Sdk export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools export PATH=$PATH:$ANDROID_HOME/emulator # Set alias to shorten command to run emulator alias run-emu="$ANDROID_HOME/emulator/emulator @nexus"
NOTE: When I've used
alias run-emu="$ANDROID_HOME/tools/emulator"from article above, I've got
PANIC: Missing emulator engine program for 'x86' CPU.error. After some investigation I've found that this emulator path is deprecated and we need to use
Reload bash profile with
List available SDKs, virtual devices, and then create device named
nexus(here device=9 is identifier for nexus 5 virtual device):
sdkmanager --list avdmanager list avd avdmanager list device avdmanager create avd -n nexus -k "system-images;android-28;google_apis;x86" --device 9 --force
Check if hardware acceleration is available with commands:
emulator-check cpu-info emulator-check accel
Android emulator requires KVM to run properly, here is KVM installation instructions:
sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils # virt-viewer and virt-manager are optional: sudo apt-get install virt-viewer virt-manager sudo adduser `id -un` libvirt sudo adduser `id -un` kvm kvm-ok emulator-check accel
NOTE: You can view available groups for your current user with
groupscommand. I didn't saw kvm and libvirt groups for my account until reboot.
That's all. Now I have installed Android Studio, Android SDK, and I can run emulator with
run-emu alias. Right time to start writing the code!
Expo getting started
I've decided to experiment with react-native development under Ubuntu. I've found that Expo is very convenient to start react-native development:
- it is simple to start and use
- it has many native well-working APIs out of the box like BarCodeScanner
- it allows to run Expo applications on iOS devices without building and linking project for iOS with XCode (no need for MacBook, actually)
Here is getting started guide for Expo.
So, recommended way to install expo is:
sudo npm install -g react-native-cli sudo npm install expo-cli --global
But on my ubuntu 18.10 I've got access permission errors for expo-cli like:
> [email protected] install /usr/lib/node_modules/expo-cli/node_modules/iltorb > node ./scripts/install.js || node-gyp rebuild info looking for cached prebuild @ /home/hal/.npm/_prebuilds/54245c-iltorb-v2.4.3-node-v64-linux-x64.tar.gz info found cached prebuild info unpacking @ /home/hal/.npm/_prebuilds/54245c-iltorb-v2.4.3-node-v64-linux-x64.tar.gz WARN install EACCES: permission denied, mkdir '/usr/lib/node_modules/expo-cli/node_modules/iltorb/build' gyp WARN EACCES user "root" does not have permission to access the dev dir "/home/hal/.node-gyp/10.16.0" gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/lib/node_modules/expo-cli/node_modules/iltorb/.node-gyp" gyp WARN install got an error, rolling back install gyp ERR! configure error gyp ERR! stack Error: EACCES: permission denied, mkdir '/usr/lib/node_modules/expo-cli/node_modules/iltorb/.node-gyp' gyp ERR! System Linux 4.15.0-47-generic gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" ... > [email protected] install /usr/lib/node_modules/expo-cli/node_modules/sharp > (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy) info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.7.4/libvips-8.7.4-linux-x64.tar.gz ERR! sharp EACCES: permission denied, open '/usr/lib/node_modules/expo-cli/node_modules/sharp/7533-libvips-8.7.4-linux-x64.tar.gz' info sharp Attempting to build from source via node-gyp but this may fail due to the above error info sharp Please see https://sharp.pixelplumbing.com/page/install for required dependencies gyp WARN EACCES user "root" does not have permission to access the dev dir "/home/hal/.node-gyp/10.16.0" gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/lib/node_modules/expo-cli/node_modules/sharp/.node-gyp" gyp WARN install got an error, rolling back install gyp ERR! configure error gyp ERR! stack Error: EACCES: permission denied, mkdir '/usr/lib/node_modules/expo-cli/node_modules/sharp/.node-gyp' gyp ERR! System Linux 4.15.0-47-generic gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" ...
I've found solution here and just run npm with additional flags:
sudo npm install -g expo-cli --unsafe-perm=true --allow-root
Now I can use
expo CLI utility to create my first Expo project:
After several wizard questions, I have created blank project, which I can start with
npm start. This command executes
expo start, runs Metro bundler and opens developer tools UI in browser. In the browser I can scan QR Code with my iPhone SE (I use Kaspersky QR Scanner actually), then open decoded link with Expo Client iOS application and test my new react-native application right on the device! Works smoothly, like a charm!