10.1 React Native with Expo

What is React Native?

React Native 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>

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

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 />.

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

sudo npm install --global expo-cli

Client App

• Android Play Store
• iOS App Store

If the link doesn't work, search for "Expo Client" 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

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',
  },
});

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
• React Native Core components and APIs
• React Native Styling Cheat Sheet
• Expo Official Docs

Practice

Before next class, please complete the Expo Getting Started Tutorial.