Contents

Book Revision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Bug Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Be notified of updates via Twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
We’d love to hear from you! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
About This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Running Code Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Code Blocks and Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Emailing Us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Getting Started with React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Weather App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Starting the project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Expo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Custom components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

React Fundamentals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Breaking the app into components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
7 step process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Step 2: Build a static version of the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Step 3: Determine what should be stateful . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Step 4: Determine in which component each piece of state should live . . . . . . . . . . . . 93
Step 5: Hardcode initial states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Step 6: Add inverse data flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Updating timers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Deleting timers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Adding timing functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Add start and stop functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Methodology review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

Core Components, Part 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

CONTENTS

What are components? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

Building an Instagram clone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
StyleSheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
TouchableOpacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
ActivityIndicator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
FlatList . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

Core Components, Part 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

TextInput . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
ScrollView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Modal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

Core APIs, Part 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

Building a messaging app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Initializing the project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
The app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Network connectivity indicator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
The message list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Toolbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Geolocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Input Method Editor (IME) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Core APIs, Part 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

The keyboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
We’re Done! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Navigation in React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Contact List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Starting the project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Container and Presentational components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Contacts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Profile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
React Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
Stack navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
Tab navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Drawer navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Sharing state between screens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Deep Linking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
CONTENTS

Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
Animation challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
Building a puzzle game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Building the Start screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Building the Game screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429

Gestures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430
Building the board . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430
Gesture Responder System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442
PanResponder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446
Draggable component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447
Finishing the game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461
We’re Done! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466

Native Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467

What are native modules? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
Building a native module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
Development environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Initializing the project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487
JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496

Building and publishing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504

How to read this chapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504
Building . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504
Building with Expo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505
iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525
Handling Updates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533

Appendix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534
JavaScript Versions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534
ES2015 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534
ReactElement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540
Handling Events in React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541
Publishing with Expo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545

Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546
CONTENTS 1

Book Revision
Revision 5 - Native modules chapter added to book

Bug Reports
If you’d like to report any bugs, typos, or suggestions just email us at: [email protected] .

Be notified of updates via Twitter

If you’d like to be notified of updates to the book on Twitter, follow @fullstackreact2

We’d love to hear from you!

Did you like the book? Did you find it helpful? We’d love to add your face to our list of testimonials
on the website! Email us at: [email protected] .

1 mailto:[email protected]?Subject=Fullstack%20React%20Native%20book%20feedback
2 https://twitter.com/fullstackreact
3 mailto:[email protected]?Subject=React%20Native%20testimonial
Introduction
One of the major problems that teams face when writing native mobile applications is becoming
familiar with all the different technologies. iOS and Android - the two dominant mobile platforms
- support different languages. For iOS, Apple supports the languages Swift4 and Objective-C5 . For
Android, Google supports the languages Java6 and Kotlin7 .
And the differences don’t end there. These platforms have different toolchains. And they have
different interfaces for the device’s core functionality. Developers have to learn each platform’s
procedure for things like accessing the camera or checking network connectivity.
One trend is to write mobile apps that are powered by WebViews. These types of apps have minimal
native code. Instead, the interface is a web browser running an app written in HTML, CSS, and JS.
This web app can use the native wrapper to access features on the device, like the camera roll.
Tools like Cordova8 enable developers to write these hybrid apps. The advantage is that developers
can write apps that run on multiple platforms. Instead of learning iOS and Android specifics, they
can use HTML, CSS, and JS to write a “universal” app.
The disadvantage, though, is that it’s hard to make these apps look and feel like real native
applications. And users can tell.
While universal WebView-powered apps were built with the idea of build once, run anywhere, React
Native was built with the goal of learn once, write anywhere.
React is a JavaScript framework for building rich, interactive web applications. With React
Native, we can build native mobile applications for multiple platforms using JavaScript and React.
Importantly, the interfaces we build are translated into native views. React Native apps are not
composed of WebViews.
We’ll be able to share a lot of the code we write between iOS and Android. And React Native makes
it easy to write code specific to each platform when the need arises. We get to use one language
(JavaScript), one framework (React), one styling engine, and one toolchain to write apps for both
platforms. Learn once, write anywhere.
At its core, React Native is composed of React components. We’ll dig deep into components
throughout this book, but here’s an example of what a React component looks like:

4 https://developer.apple.com/swift/
5 https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/
Introduction.html
6 https://docs.oracle.com/javase/8/docs/technotes/guides/language/index.html
7 https://developer.android.com/kotlin/index.html
8 https://cordova.apache.org/
Introduction 2

import React from 'react';

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

export default class StyledText extends React.Component {

render() {
return (
<Text style={styles.text}>{content}</Text>
);
}
}

const styles = StyleSheet.create({

text: {
color: 'red',
fontWeight: 'bold',
},
});

React Native works. It is currently being used in production at Facebook, Instagram, Airbnb, and
thousands of other companies.

About This Book

This book aims to be an extensive React Native resource. By the time you’re done reading this book,
you (and your team) will have everything you need to build reliable React Native applications.
React Native is rich and feature-filled, but that also means it can be tricky to understand all of its
parts. In this book, we’ll walk through everything, such as installing its tools, writing components,
navigating between screens, and integrating native modules.
But before we dig in, there are a few guidelines we want to give you in order to get the most out of
this book. Specifically:

• how to approach the code examples and

• how to get help if something goes wrong

Running Code Examples

This book comes with a library of runnable code examples. The code is available to download from
the same place where you downloaded this book.
We use yarn9 to run every example in this book. This means you can type the following commands
to run any example:
9 https://yarnpkg.com/en/
Introduction 3

• yarn start will start the React Native packager and print a QR code. If you’re on an Android
mobile device, scanning this code with the Expo10 app will load the application. For iOS devices,
see the instructions for loading apps onto your phone at the beginning of the first chapter.
• yarn run ios will start the React Native packager and open your app in the iOS Simulator if
you are using a Mac.
• yarn run android will start the React Native packager and open your app on a connected
Android device or emulator.

In the next chapter we’ll explain each of these commands in detail.

Code Blocks and Context

Nearly every code block in this book is pulled from a runnable code example, which you can find
in the sample code. For example, here is a code block pulled from the first chapter:
weather/1/App.js

import React from 'react';

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

export default class App extends React.Component {

render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
</View>
);
}
}

const styles = StyleSheet.create({

container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
10 https://expo.io/
Introduction 4

Notice that the header of this code block states the path to the file which contains this code:
code/weather/1/App.js.

This book is written with the expectation that you’ll also be looking at the example code
alongside the chapter. If you ever feel like you’re missing the context for a code example, open up
the full code file using your favorite text editor.
For example, we often need to import libraries to get our code to run. In the early chapters of the
book we show these import statements, because it’s not clear where the libraries are coming from
otherwise. However, the later chapters of the book are more advanced and they focus on key concepts
instead of repeating boilerplate code that was covered earlier in the book. If at any point you’re not
clear on the context, open up the code example on disk.

Getting Help
While we’ve made every effort to be clear, precise, and accurate you may find that when you’re
writing your code you run into a problem.
Generally, there are three types of problems:

• A “bug” in the book (e.g. something is explained incorrectly)

• A “bug” in our code
• A “bug” in your code

If you find an inaccuracy in our description of something, or you feel a concept isn’t clear, email us!
We want to make sure that the book is both accurate and clear.
Similarly, if you’ve found a bug in our code we definitely want to hear about it.
If you’re having trouble getting your own app working (and it isn’t our example code), this case is a
bit harder for us to handle. If you’re still stuck, we’d still love to hear from you, and here some tips
for getting a clear, timely response.

Emailing Us
If you’re emailing us asking for technical help, here’s what we’d like to know:

• What revision of the book are you referring to?

• What operating system are you on? (e.g. Mac OS X 10.8, Windows 95)
• Which chapter and which example project are you on?
• What were you trying to accomplish?
• What have you tried already?
• What output did you expect?
Introduction 5

• What actually happened? (Including relevant log output.)

The absolute best way to get technical support is to send us a short, self-contained example of the
problem. Our preferred way to receive this would be for you to send us an Expo Snack link11 . Snack
is an online code editor that let’s one quickly develop and demo React Native components on the
browser or an actual device without having to set up a brand new project. We’ll explain Expo in
more detail in the next chapter.
When you’ve written down these things, email us at [email protected]. We look forward to hearing
from you.
11 https://snack.expo.io/