VIX-Chevron-Up

Getting Started With React Native

By Kieran Brown

At VIX we love a challenge and none more so than looking into and using new software and broadening our skillsets. After winning an exciting new piece of work in late summer 2017, different options were explored for creating an application. After much pondering, we chose to develop with React Native (RN).

Getting Started With React Native

This pretty much sums up the initial learning curve for RN

So why the decision to go with RN? In today’s world there seems to be a dominance of two operating systems when referring to mobile app development, Android and IOS. Therefore, in an ideal world, it would be fantastic if there was a platform that could allow developers to create apps for both operating systems. This would the result in less time and money being spent in the long run due to the applied technology existing within a container, allowing it to run natively on a device. This is where RN comes in.

What Is React Native?

First of all, let's pay homage to the creators. It is brought to the table by none other than the guys and gals over at Facebook.

RN is a framework which comes with a lot of features from the get go in the form of libraries. It is a way in which a developer can easily set up a new project and create an app with little initial friction. It focuses on a methodology based around components. Components, once set up, can be reused throughout the app.

When you first come across the docs, you will notice straight away that it doesn’t behave in the same way as React.js. To simply render a piece of text on your application, RN does not use HTML but an alternate set of tags. In HTML you’d probably use a <div> with a <p> to output the typical “Hello World”, however RN uses <View> and <Text> to do the same thing. It may seem odd at first but you will soon get used to the markup.

Another consideration in RN is styling. React uses regular CSS but RN uses flexbox. We’ve linked a few good resources below to help with its quirks to make your app look splendid. The RN flexbox cheat sheet (listed below) is definitely a resource to bookmark, it was very useful.

What Is A Native App?

You may have heard the term native app banded around. the difference is that a native app is created with the intention to serve a specific operating system. React Native is a way in which developers can reuse the codebase across web and mobile applications.

How To Run

While we’re on the subject of singing RN’s praises, I thought I’d add a small section on how to create and run an app. The getting started docs are easy to follow but there are basically two options to be wary of, the quick start route or the native route.

Quick Start

The quick start is an easy way to build a RN project without any tools such as Xcode or Android emulator to do so. If you have node installed it’s just these steps:

npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start

This will then produce a QR code which you can then scan to run your project. So what do you use to scan and run the application? Enter Expo - a client app recommended by FB to load your application. Simply edit the app.js file and see your changes immediately.

NB: If you use this method you are limited to the libraries/modules provided by RN and Expo. Therefore custom libraries cannot be integrated and you will need to eject if these features are needed.

Native Code

If you know you will need custom modules, the section setup option is slightly more hands on. There’s a whole host of dependencies per operating system but for the purpose of this blog I’ll just quickly mention the IOS setup.

Dependencies: Node (version 4 or newer), Watchman and Xcode

Get started with node and watchman if you don’t already have them.

brew install node
brew install watchman

In a terminal run the following to install the RN command line interface.

npm install -g react-native-cli

Use the RN command line to then create your project.

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

You can either use the above command in your terminal or directly from Xcode with the play button.

There you have it, you’re on your way to creating a RN app. Below are a few useful resources we used to get going on our RN journey.

Useful Videos To Get You Started
<< Back to Insights