How to install Node.js + Npm/Yarn + Expo and build you react native application on Windows, macOS or Linux/Ubuntu

Photo: Google

You get a $1 billion idea on a cold night about an application that would change the world and you hear react native can bring that idea to life using a single code-base for both Android and iOS. Now let’s realize this dream!

For this article I’ll be working with Ubuntu Gnome 16.04.

What’s React Native?

React native is a JavaScript framework built by the Facebook team for building cross platform (Android and iOS) mobile applications, user interfaces are built using JSX (JavaScript and XML). This framework reduces the burden of coding with Objective C for iOS and on Android Studio for Android.

Node.js

Node.js is an open source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser, Node.js is a JavaScript run time built on Chrome’s V8 JavaScript engine.

Installation

We go to the node.js site to install the Long Term Support (LTS) which currently is in Version 10.15.1, on-click on other downloads, click on installing Node.Js via package manager and install for your specific operating system using your terminal, for Linux users you can install whatever version from here using your terminal too, (you can access your terminal using ctrl+alt+t).

Note: it’s best to install Node.js V8.x, which would update when you run:

sudo apt update

on your terminal.

For Node.js V8.x run:

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

To confirm installation and version installed, run:

nodejs -v

If properly installed, we install Npm next else Google the error.

Npm
Node Package Manager. It’s an online database of public and private packages stored in the npm registry, these packages provide functionalities in your application.

Installation

sudo apt install npm

To confirm installation and version installed, run:

npm -v

If properly installed, then install Yarn else Google the error.

Yarn
Yarn is an alternative package manager to Npm, personally I recommend this because upon installation of some packages like ‘native-base’ from the library using npm, the metro-bundler freezes on some computers (especially on Linux distros from my experience and comments on GitHub and Stack Overflow) which would cause you to start reading documentations to fix the problem(s).
Note: this might or might not affect, so your luck matters.

Installation

Go to https://yarnpkg.com/en/docs/install and select your operating syetem then follow the instructions using the 1.13.0 stable version.

For Debian/Ubutu run:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

To confirm installation and version installed, run:

yarn –-version

Ps - if npm works properly then this option is unnecessary until when needed.

If Yarn properly installed then lets install Expo else Google the error.

EXPO

This is an open source tool used for building cross platform applications or projects. Expo is a replacement for XCode (macOS) and/or Android Studio installation.

Installation of the Expo Command Line (CLI) utility

npm install -g expo-cli

the above command might return errors, to fix them run :

sudo npm install -g expo -cli

as a super/root user.

Creating your first react native project:

Run:

expo init projectname
cd projectname
npm start

If you installed Yarn, run:

yarn start

The last command using npm or yarn will run a development server on your terminal and open the Expo client on your browser to track your development. Now head to the Android/Apple play/App store and download Expo, set it up, scan the QR code with your camera on your terminal and the JavaScript bundle would load until 100% and you’ll see the functioning interface of your app (this is for people not using an emulator, if you are using an emulator follow the instructions when the metro bundler loads on your terminal), after that install/open your favorite code editor or IDE (I’ll recommend VSCode) and open App.js to start building your dream. Voila!

To install packages:

Using npm:

npm install packagename

Using yarn:

yarn add packagename

To uninstall packages:

Using npm:

npm uninstall packagename

Using yarn:

yarn remove packagename

Uninstalling package manager:

Npm:

sudo npm uninstall npm -g

Yarn:

npm uninstall -g yarn

Happy react’n!

Now, I’ll appreciate that clap!