Setup & First Steps— React Native Mobile App Development Part 1

Published in

enpit-developer-blog

8 min readJan 11, 2019

This is part 1 in a series of articles about mobile app development with React Native.

In this article, you will learn how to bootstrap your first React Native project. We will cover the options you have and walk through the first steps together.

In case you are wondering why you would want to use React Native in the first place, check out the 0th part of this series, where some alternative technologies for mobile app development are discussed.

Setup. Your Options

There are two ways to go about setting up your first React Native project. The two bootstrapping tools you might want to use are create-react-native-app (CRNA)/Expo CLI and the react-native CLI. We will look at both here.

So what’s the difference? Well, CRNA and the Expo CLI used to be two different things, but have been merged into one tool by now. They bootstrap a React Native project with a couple of enticing bells and whistles: A more flexible development tooling and a set of useful native components. react-native init will also setup a project for you but keeps it slightly simpler: Apart from your JavaScript source you end up with pre-configured projects for Xcode and Android Studio, which you will need to compile in order to run your app.

CRNA / Expo

The team at Expo tries to streamline the React Native development process by providing a set of really convenient tools. If you want to take advantage of what they offer, you can start by bootstrapping a new React Native project with the Expo CLI. Expo abstracts away all of the native code that is part of a React Native project. This has some significant implications:

Your project folder will not contain any native code and any app configuration is done through an expo-specific config file.
You can run your code inside the Expo Client app that is available for Android and iOS and loads the JavaScript bundle that your app consists of. This allows you e.g. to run on iOS without also having a macOS device (which otherwise would be needed to compile the iOS project).
Expo provides you with a set of APIs that expose native device capabilities like the camera to your JavaScript code. These are useful and well-maintained modules that make it easy to take advantage of native capabilities. Sadly, not every native API is already supported by Expo. As of this writing, Expo e.g. does not provide APIs for Bluetooth, WebRTC, background code execution among other things.
Since you don’t manage your app’s native code yourself, you can’t link native modules that you wrote yourself or that the community provides. This means that as soon as you want to do something, that Expo does not support, you are pretty much out of luck.
Expo provides a service to build application binaries in the cloud and to push updates of the JavaScript bundle to apps without going through an appstore update process. This can be really neat if you want to regularly push out updates to your users quickly.

You have to decide for yourself, whether you want to take advantage of the Expo ecosystem or not. If you did set up your project using the Expo CLI and change your mind later on, you can easily opt out using expo eject, which generates iOS and Android projects for you.

Getting Started

Install the Expo CLI with npm i -g expo-cli and bootstrap your app using the following command:

> expo init -t blank myrnapp-expo
[14:48:41] Extracting project files...
[14:48:49] Customizing project...Your project is ready at /Users/peter/myrnapp-expo
To get started, you can type:  cd myrnapp-expo
  expo start

Let’s take a look at what that command leaves us with:

> ls
App.js    app.json    assets    node_modules    package.json

Expo-specific is the app.json file, which contains configuration that is usually contained in the native project files and that Expo passes along. Other than that there is not much to say: App.js contains your apps’s entry point and from there you can start writing your components (which we will get to in a bit).

To run the project you just bootstrapped, you need to install the Expo app (iOS, Android) on your mobile device. On your computer use expo start to start the development server and then open the project in the Expo app. Under Android you can conveniently scan a QR code that the Expo CLI presents to you, while iOS users have to manually navigate to exp://X.X.X.X:19000 where X.X.X.X is the local IP address of your development machine.

When you see this, it means your setup works.

The first time, the JavaScript bundle gets create, it takes a few moments, but when it is ready, you will be greeted with a Hello-World-Screen.

Neat. We will look at the code in more detail in just a bit, but first, let us talk about the alternative setup method.

“Native” with `react-native init`

When you want nothing to do with Expo, their tooling and their SDK, you can initialize a traditional-style project that contains all the necessary sources that you need, in order to run an app on Android and iOS. This also means that you need the respective technology stacks available to run an app and test it out. To run on Android you need Android Studio (available for Windows, macOS and Linux) and either and Android device or an Intel CPU to run an emulator (without Intel’s HAXM software the emulator will be unbearingly slow). To test your app on iOS you need a machine with macOS and Xcode installed, and then you run the app either inside a simulator or your iOS device.

The overhead of having to compile the app yourself inside of Xcode or Android Studio and the platform limitations for testing (e.g. if you have an iPhone available but no Mac, you can not run the app on your device) might seem tedious. But at the same time you have the power of native at your fingertips: If your team includes native developers, they can make changes to the native part of the app in order to maybe solve some problems that you can not solve in JavaScript. This includes access to native capabilities: The React Native community provides a rich pool of packages that expose some native API to JavaScript and you can (more or less) easily include them in your project. On the one hand, this offers incredible flexibility in terms of the features that you can build, but on the other hand it might require some fiddling with the native projects. Assuming that your lack of native expertise brought you to React Native, this might be a turn-off.

Getting Started

Let’s create an app using the React Native CLI. Install the CLI using npm i -g react-native-cli and then use it to initialize a new project.

> react-native init myrnapp
This will walk you through creating a new React Native project in /Users/peter/myrnapp
Using yarn v1.9.4
Installing react-native…
yarn add v1.9.4
info No lockfile found.
[1/4] Resolving packages…
[2/4] Fetching packages…
.
.
.├─ xml-name-validator@3.0.0
└─ yargs-parser@9.0.2
Done in 22.46s.
To run your app on iOS:
 cd /Users/peter/myrnapp
 react-native run-ios
 — or -
 Open ios\myrnapp.xcodeproj in Xcode
 Hit the Run button
To run your app on Android:
 cd /Users/peter/myrnapp
 Have an Android emulator running (quickest way to get started), or a device connected
 react-native run-android

You will end up with dedicated folders containing the Xcode- and Android Studio projects respectively as well as a JavaScript file containing a Hello-World component just like in the Expo setup.

> ls
App.js    android    app.json    index.js    ios    node_modules    package.json    yarn.lock

To get this running on your device requires slightly more work compared to the Expo variant: Open the project on Xcode or Android Studio (depending on your target device). You can launch the app in an emulator, but running it on a device is much more exciting and useful. For iOS you need to set up code signing with Xcode first — if you have not done that before, you may want to consult Apple’s documentation.

Code. At last

Let’s finally look at the actual code that we start out with after having our project bootstrap by one of the two tools.

The `App.js` file defines a very simple component that prints some text.

For those of you who are familiar with React, the code will already make sense. If you have never seen React code, this might look a bit weird, but you will quickly get used to this syntax and structure.

The code above imports some basics from the react and react-native libraries, and defines a component that it then exports. This component is written as a JavaScript class that inherits from React.Component and contains a render method. As in React.js, every component needs to have a render method — you can even define you component as just that function, but we will be using classes per default.

The render method returns the UI component that is shown to the user. The return value of the render method is a JSX definition. JSX is similar to HTML, but is written right into a JavaScript file and can include JavaScript expressions. Expressions inside JSX are written in curly braces like the value of the style attribute in the <View> component above.

Components are composed of other components. In the example above the structure is simple: A <View> (more or less corresponding to a <div> in the world of the web) is wrapped around a <Text> node — only <Text> components can directly include text in React Native.

Try and change the text, the component shows, and reload the app — if livereload is not already enabled you can fix that in the app’s debug menu that you open up by shaking the device or pressing CMD+R in the emulator.

The App.js file also includes some style definitions that are applied to the <View>. Just as in HTML, elements/components can be customized using the style attribute. React Native tries to emulate a bunch of CSS properties, but not all of them. You also have to use camel-case (compared to kebab-case in CSS) to achieve valid JavaScript syntax.

Try rendering a different text by adding a color property to the stylesheet and give it either a hex-value or a color name like 'pink'.

React Native uses the Yoga layout engine to position components on the screen, which works similar to the CSS flexbox model. You will quickly pick up how this works in the related React Native layout documentation.

But I am getting ahead of myself. We work with the code in the coming parts of this series.

Summing up

In this post you have seen how to bootstrap your first React Native project and run it on your device. You can start writing native apps now, or you can stick around for the next article in which we will build a simple master-detail kind of application.