Installing Android Studio and SDK on Ubuntu and run first Expo application on iOS device

comments
Expo

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-studio to 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 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 $ANDROID_HOME/emulator/emulator instead.

  • Reload bash profile with source ~/.bashrc

  • 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 groups command. 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!


liberapay link If you like this post, consider supporting me on liberapay

Comments