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.
Actually, Expo applications are react-native based, they can be written on JavaScript, TypeScript also supported. Expo is a framework and a toolset to start development faster.
Let's start!
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
~/.bashrc: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 gotPANIC: 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$ANDROID_HOME/emulator/emulatorinstead.Reload bash profile with
source ~/.bashrcList 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 --forceCheck if hardware acceleration is available with commands:
emulator-check cpu-info emulator-check accelAndroid 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 accelNOTE: 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:
expo init
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!
Happy coding!
Comments