My name is Stefan Ashwell and when I'm not coding personal projects or painting miniatures, I'm a Web Developer at CWA in Leicester.

This blog is a place for me to write about things that require that little bit extra to solve. We all have gaps in our knowledge and every now and then I need to reach out on search engines or blogs to find an answer. Often, these answers come from multiple sources. This blog serves as a personal resource, but if it's helpful for me I'm sure it'll help others too!

Getting Started with React Native Tutorial

Posted on 13 May 2019

Recently I’ve been playing around a lot with mobile app development. I’ve looked at a number of frameworks out there and tried some of them. Finally I settled on React Native and thought I’d put together a React Native tutorial series.

I have an upcoming project at work which requires both a web app and native mobile app, plus I’ve wanted to build a native mobile app for Tiebreak for a long time now – so this seems like a great opportunity to learn and blog through the process.

Enough waffle – let’s crack on…

What is React Native?

React Native is a mobile development framework using React – the Javascript framework created by Facebook. It allows you to build one app using their framework in a familiar language to me – Javascript. Then package up for both iOS and Android.

As I learn myself, I’ll be putting together a number of tutorials on here on how to do various things. There are a lot of resources out there but I’m already finding it a bit of a minefield, so if I document my findings it’ll serve as my own reference and hopefully help you guys out too!

Where do I start?

The first confusing this I came across was that there a number of different ways to start a project, and all generate slightly different project structures. Unfortunately what this means is that you’ll find articles and videos out there that have different project structures and in some cases different code.

It took me a while to get used to and realise to focus on the important parts of the example code I’m looking at rather than worrying about the fact my directory structure is different.

In this guide I’ll be concentrating on using Expo, which provides a set of tools for React Native that will help your development and build processes.

Installation

For starters, you’ll need Node 10+ on your system.

Next we’ll install the Expo CLI

npm install -g expo-cli

And finally, let’s start a new project so we can get coding

expo init NewApp

Previewing your app

At this stage you can preview the boilerplate app that Expo has installed. Do this by running the following command

expo start

Expo will start up and launch a browser window for you. In the opened screen you’ll see a number of options and a console. From here you can launch a simulator (you’ll need Xcode or Android Studio installed) or, if you download the Expo app on your smart device you can scan the QR code displayed to launch the app preview directly on your device.

Having this preview available through Expo is huge. As you code your project the preview will live reload so you can see your changes immediately. Coming from a web development background this functionality will be a massive help as I start coding.

Let’s get coding…

We’ve got the basics down, so now let’s get coding. Next time we’ll start going through the basics of coding our first app.

Want more React Native tutorial action?

This tutorial is the first in a series of React Native tutorials I’m putting together as I learn myself. If you’d like to follow along you can find the rest here.