React Native is making waves out in the world of cross-platform native application development. It’s being used at production level in various places — with Discord (for their iOS app), Uber Eats, Bloomberg, and Instagram being the main examples for commercial implementations.
Released back in 2015, React Native borrows the coding principles from React. Unlike React, which runs in the browser to manipulate the DOM via the virtual DOM, React Native runs in the background of the device and works with the native platform to interpret the JavaScript.
React Native may have HTML-like syntax in its code, but it doesn’t actually use HTML. Rather, it uses the interpreter to create and manipulate views based on the native requirements of the device.
In this guide, I’ll be going over how to set up a bare-bones React Native app from scratch for an Android machine. I don’t personally have an iPhone or iPad, but from what I’ve seen, the methodology is almost identical.
But First, What Exactly Is React Native?
This is the part many developers coming into React, in general, get confused about. We know that React Native uses React.js — but to what extent?
The thing about React.js is it’s a single stand-alone JavaScript library that’s used for building user interfaces. Under normal circumstances, many developers learn about React.js in a web-development context.
What many don’t realize is there’s another separate library called ReactDOM that adds web support to React.js. This is because React.js itself is platform-agnostic. It’s actually a library that builds component trees that are used by the bridging library for a particular platform, like web or mobile.
In the context of React Native, you have the React.js part and the Native part to make cross-platform native-app development possible.
So How Do You Set Up a React Native App?
When it comes to setting up React Native, you have two options: the Expo CLI Quickstart or React Native CLI Quickstart.
For this tutorial, we’ll be using Expo because it gives you a managed app development workflow, a sort of training wheels to let you focus on the act of developing an app rather than the ancillary things around it.
Expo is a free third-party service and takes away the complexity of React Native app development. However, when you’re using Expo, you’re limited to the Expo ecosystem of support. This is because Expo is like a wrapper around your React Native app.
Under the normal React Native CLI flow, you have the bare bones set up. This means you’ll need to manually install Android studio and XCode (which is impossible if you don’t have a Mac) in order to run the simulators.
Expo is a good place to start, especially if you’re starting up React Native for the first time and aren’t planning on creating fine-grain, platform-based device customizations.
It’s good to note you always have the option to switch out of Expo in the future, if needed. You’re not completely locked into Expo if you choose to start with it.
Enough sidetracking from me — here are the steps for how to set up React Native from scratch.
1. Download NodeJS
If you don’t already have NodeJS, you’re going to need it.
NodeJS is a run-time environment that lets you execute JavaScript on a particular system. React.js and React Native run on JavaScript, with React Native being the thing that generates the necessary native code for mobile apps.
Getting NodeJS is pretty simple. Just head over to the website, hit the download button, and run the installer.
2. Get the CLI
To have access to Expo, you’re going to need to run npm install on Expo.
This part is pretty straightforward. The command is simply:
npm install expo-cli --globalThere isn’t much to it, and you shouldn’t get any errors during this step.
3. Boot Up the Project
In this step, use the following command to set up Expo.
expo init new-project-name-hereIt’ll ask you about which template to use. You can start off with the blank template. If you choose the bare-minimum option, it’ll set up your React Native app without Expo.
When you hit enter, it may ask you for a name and slug for the app, which you can change the defaults now or later down the line.
Hit enter again, and it may ask you if you want to use Yarn to install the dependencies. But this will only happen if you have Yarn installed on your machine. If you choose no, it’ll use npm to install the dependencies.
Once that’s completed, cd into the folder generated and use the command expo start to run it.
cd new-project-name-here
expo startIn theory, this should start up your Expo app without any issues. However, if you do run into an issue, below are some common things that can happen and how to fix them.
Debugging common Expo issues:
Intput is required, but Expo CLI is in non-interactive modeWhen this message appears, it probably means you’re using Git Bash, which doesn’t like it when you try to run expo commands on it. Try using cmd instead.
This happens because Git Bash isn’t a TTY, which is a text-type only command-line interface, and Expo needs a TTY cmd to work.
There is a new version of expo-cli availableWhen this message appears, it just means you need to upgrade your expo-cli. This can happen if you’ve installed Expo before and haven’t played with it in a while. To update your Expo CLI, use npm install -g expo-cli to get the latest version.
4. Getting Things to Run
To preview your project directly on your mobile, run expo start.
It’ll give you a QR code on the screen for you to scan with your mobile phone using the iOS or Android app (downloadable from the Apple/Play store).
This QR code acts as a tunnel that’ll automatically compile any changes you make in your code, giving you instant and automated feedback.
Debugging common Expo issues:
Expo starts but crashes immediatelyThis is the problem I personally faced when I first started using Expo. It can be quite frustrating to debug. If this happens, try downgrading your NodeJS. Currently, I’m running v6.12.1 for NodeJS and expo-cli at 3.11.7.
To downgrade NodeJS on a Windows machine, you’ll need to uninstall it, go to https://nodejs.org/dist/, download the version you need, and install it again.
QR code not scanningYou’ve put your phone’s camera right up against your screen, and nothing is happening. Sometimes, the camera is a bit funky and needs a bit of movement for it to work.
Final Thoughts
And that’s basically it for setting up React Native from scratch.
There isn’t much to getting started.
The next step is figuring out how to actually code in React Native. If you’ve got a background in React, you’re already halfway there — but having React.js knowledge isn’t a major prerequisite.
You’re better off if you have a strong background in JavaScript — because that’s what React and React Native essentially is, just dressed up slightly different from the usual.
