React Native

React Native Introduction

Module Still Under Development

# 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>;
{
  /* from React JSX becomes ReactNative JSX */
}
<View></View>;

1
2
3
4
5

<p></p>;
{
  /* from React JSX becomes ReactNative JSX */
}
<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. It does have a Native ReactNative application as the wrapper, but it will be filled with the compiled native UI components.

# What is Expo?

Like create-react-app or vite for React, 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. Before we go any further we need to set up our computers to build apps with ReactNative.

# 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

There used to be a global install of expo-cli that you would do and then use that to create projects. This is no longer the case. The recommended approach is to use:

npx create-expo-app@latest project-name [--template default | blank | blank-typescript | tabs | bare-minimum]

This will install a local version of expo-cli which you will you for installing Expo dependencies.

You will have some dependencies that you add to your project like this:

npm install some-dependency

These will be added to your package.json file and your node_modules folder.

Other dependencies need to be installed by Expo. These get added like this:

npx expo install some-expo-dependency

# Expo 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

Once you have Expo-cli installed on your computer via npm or yarn, you can create a new React Native project.

npx create-expo-app@latest rn-hello-world --template blank
# when that finishes
cd rn-hello-world

1
2
3

# 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

npm run start
npm start
expo start

1
2
3

Any of the three commands above should work.

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

You will scan the QR Code with the Expo client app on your device.

TIP

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

# Reference

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

# Expo Snack

If you register for an account on the Expo Website then you will have access to the Expo Snack tool 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 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 about setting up.

# Practice

Before next class, please do as much of the Expo Getting Started Tutorial as you can.

# What to do this week

TODO Things to do before next week.

Read all the content from Modules 1.2, and 2.1.
Spend some time with the Hybrid modules and assignments about Dart.
Start watching the React Native Playlist

← Dart Hybrid Exercises 2.1: Forms, Images, Lists →