Previously on Learn React from Scratch Series: Learn React: Your First React Component ExplainedPreviously on
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.
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?
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.
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 --global
There 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-here
It’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 start
In 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 mode
When 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 available
When 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
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 immediately
This 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 scanning
You’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.
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.