11.1 React Native with Expo

# What is React Native?

React Native (opens new window) is a JavaScript UI library that lets you leverage what you already know about building web apps with JavaScript and React, but target your deployment to native UI components on either/both iOS and Android.

React Native builds on React and uses the same component architecture including hooks, like useState or useEffect. It uses JSX for the render markup – but – it uses native UI components, not web/html components. For example ...

<div></div>;
{
  /* becomes */
}
<View></View>;

1
2
3
4
5

<p></p>;
{
  /* becomes */
}
<Text></Text>;

1
2
3
4
5

# Native v.s. Hybrid

Unlike other JavaScript app solutions like Cordova or Ionic, React Native does not simply embed a WebView component in a native platform wrapper. React Native compiles down to real native platform UI code with a parallel thread for your JavaScript application control logic.

# What is Expo?

Like create-react-app Expo provides a batteries included way to scaffold out a React Native project. It takes care of setting up the dev server and bundlers (metro for iOS and Android, webpack for web). It also provides a library of core native UI components plus components to access native platform features like <Location /> or <Camera />.

# Setup Summary

Here is a short summary of the set up steps

# Hello World Demo

Let's dive in and create your first React Native app.

# Install Expo

For testing we need two tools. The CLI tool to create new projects and a client app for your iOS or Android device.

# CLI

npm install --global expo-cli
npm i --global expo-cli
npm i -g expo-cli

1
2
3

All three lines above will do the EXACT same thing. Pick your favourite.

# Client App

If the link doesn't work, search for "Expo Go" in the App Store.

Not for production

The client app is only used for hot reload-testing during development. It is not used for production. Your app will go through a build process and be submitted to the app store(s) when it is ready for production distribution.

# Initialize a new project

expo init rn-hello-world
# when that finishes
cd rn-hello-world

1
2
3

# Experiment

# Open in VS Code

code .

Example App.js component

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Start the dev server

expo start

Once installed and started you can either scan the QR Code shown in your terminal when you ran the expo start command, or enter the ip address shown. Eg: exp://192.168.10.10:19000

TIP

Note the commands listed in the Terminal for controlling and restarting the app.

# Reference

React Native Official Docs (opens new window)
React Environment Setup (opens new window)
React Native Core components and APIs (opens new window)
React Native Styling Cheat Sheet (opens new window)
Expo Official Docs (opens new window)
You can use this XCRUN SIMCTL reference 1 (opens new window) or this other XCRUN SIMCTL reference 1 (opens new window) for iOS simulator from the CLI.

# Expo Snack

If you register for an account on the Expo Website (opens new window) then you will have access to the Expo Snack tool (opens new window) which is an online playground for experimenting with Sample React Native projects and getting a live rendering of how it would look on Android, iOS, or even on your connected device.

# React Native without Expo

It is possible to do a bare bones set up of a React Native project using react-native-cli. This page (opens new window) from the React Native documentation walks you through the process of setting up your app with or without expo. Just select which approach you want, then your OS and the phone that you are developing for and it provides the instructions.

Luckily for you, you will have already set up all the iOS XCode and Android Studio environment requirements. You might still need to install cocoapods - gem install cocoapods.

To create the project:

npx react-native init MyNativeApp

That will create the MyNativeApp folder and put your starter files there.

To start the JavaScript bundler that will build your project (Metro) run this command inside your project:

npx react-native start

This will start the Metro Bundler. Then, once your project has been built you can run it. You should have your AVD running if this is an Android project, or iOS Simulator if it is an iOS project.

npx react-native run-android
npx react-native run-ios

1
2

If you look inside your project folder you will find an iOS and an Android folder. This is where you will find the native project that can be opened and launched directly from XCode or Android Studio, if you want.

React Native also supports building for Android TV and tvOS. See here for more details (opens new window) about setting up.

# Practice

Before next class, please complete the Expo Getting Started Tutorial (opens new window).

← 10.2 NextJS Serverside 11.2 What's Different →