Book Image

Mastering React Native

Book Image

Mastering React Native

Overview of this book

React Native has completely revolutionized mobile development by empowering JavaScript developers to build world-class mobile apps that run natively on mobile platforms. This book will show you how to apply JavaScript and other front-end skills to build cross-platform React Native applications for iOS and Android using a single codebase. This book will provide you with all the React Native building blocks necessary to become an expert. We’ll give you a brief explanation of the numerous native components and APIs that come bundled with React Native including Images, Views, ListViews, WebViews, and much more. You will learn to utilize form inputs in React Native. You’ll get an overview of Facebook’s Flux data architecture and then apply Redux to manage data with a remote API. You will also learn to animate different parts of your application, as well as routing using React Native’s navigation APIs. By the end of the book, you will be able to build cutting-edge applications using the React Native framework.
Table of Contents (20 chapters)
Mastering React Native
About the Authors
About the Reviewer
Customer Feedback


React Native is a library for creating mobile applications using familiar web technologies without sacrificing performance or the look and feel typically associated with fully native applications. It is built on top of Facebook’s open source JavaScript library, React, and indeed, iOS and Android applications created using the library are primarily written in JavaScript. Because one does not need to learn new languages, ecosystems, and best practices for each platform they work on, React Native is pushing the boundaries of what is possible for React developers.

In this book, we will look at the fundamental concepts of React and React Native, as well as the libraries and tools within the React Native ecosystem. We will also work towards the more practical goal of creating a complete React Native application. Finally, we’ll dig into useful and complex React Native concepts such as animation, navigation, native modules, testing and performance analysis. Upon turning over the last page of this book, you’ll be armed with the knowledge to create polished, sophisticated mobile applications using React Native.

What this book covers

Chapter 1, Building a Foundation in React, In order to work effectively in React Native, you must first understand React. This chapter explains the motivation behind React and teaches you how to think in React.

Chapter 2, Saying Hello World in React Native, contains two primary topics. First, we’ll review how React Native works and compare it to other popular mobile development options. Then, we’ll switch gears and focus on configuring your computer to build your first React Native project for iOS.

Chapter 3, Styling and Layout in React Native, React Native borrows many concepts from the web development world, including some of the best parts of Cascading Style Sheets (CSS). It also deliberately avoids some of CSS’s less desirable qualities. This chapter explains how to style React Native apps and how to use Flexbox to layout components.

Chapter 4, Starting our Project with React Native Components, React Native includes many powerful components and APIs. This chapter demonstrates how to use many of these as we begin to build our news reader app, called Readly.

Chapter 5, Flux and Redux, ... The React community has largely eschewed the Model View Controller pattern in favor of a unidirectional data flow pattern called Flux. In this chapter, we’ll help you think in Flux and explain how to leverage a popular Flux implementation known as Redux.

Chapter 6, Integrating with the NYT API and Redux, builds upon what we learned in this chapter. In order to bring our Readly app to life, we’ll implement Redux and Redux middleware as a means of managing our data and communicating with the New York Times API.

Chapter 7, Navigation & Advanced APIs, Navigation in React Native has been a long journey resulting in an abundance of navigation options. But which should you choose? This chapter will make sense of these options. We’ll then apply experimental navigation components along with other advanced React Native APIs to our project.

Chapter 8, Animation and Gestures in React Native, React Native offers two primary ways of creating fluid animations. This chapter will explain how to apply each of these along with touch gesture support to build out an on boarding experience for our Readly app.

Chapter 9, Refactoring for Android, React Native makes cross platform development simple. However, configuring your computer to actually build for Android is a bit less than simple. This chapter will walk you through, step by step, how to install and configure all the tools necessary for Android development. We’ll then revisit our project, refactoring it to both work and feel like a first class Android app.

Chapter 10, Using and Writing Native Modules, One of the most amazing parts of React Native is that it doesn’t limit you to the components and APIs that come packaged with the framework. If you want your app to do something else, you can either bridge custom native code to React Native or include other third-party libraries. This chapter adds additional capabilities to our project by exploring how to create custom native code written in Objective C for iOS and Java for Android.

Chapter 11, Preparing for Production, Discovering the root cause of bug or performance problem can be a real chore. In this chapter we’ll introduce Jest, a testing framework along with other tools for uncovering pesky performance problems. Finally, we’ll show you how to bundle your apps so you can ship them to the iOS and Android stores.

Chapter 12, React Native Tools & Resources, React Native is praised for its awesome developer experience and cross platform support. But can we take React Native even further? In this final chapter, we’ll show off some tools that can improve upon how you build React Native apps. Then we’ll explore a few React Native projects that allow us to extend platform support to the web, macOS, and even Windows.

What you need for this book

While we will add Android support to our project in later chapters, the majority of this book focuses on iOS development. In order to develop for iOS, you must have access to an Apple Mac computer capable of running Xcode 7 or later. Xcode is only necessary for building and testing React Native apps. You’re welcome to edit your code in any editor or IDE of your choosing.

In addition to Xcode, React Native requires a few other tools. These include Homebrew, Node.js (6.5.0 or later), npm (3.10.3 or later), Watchman, the React Native CLI, and Google Chrome for debugging. We’ll explain what all these tools are and how to install them in Chapter 2, Saying Hello World in React Native.

In Chapter 9, Refactoring for Android, we’ll update our project so it can run on both platforms. Android has its own set of software requirements including the Java Development Kit (JDK 1.8 or later) and Android Studio. Once again, we’ll walk you through how to install and configure these tools in Chapter 9, Refactoring for Android.

Finally, in Chapter 12, React Native Tools & Resources, we’ll evaluate software that can aid your React Native workflow and allow you to build React Native apps for even more platforms. All of these installations are completely optional. However, it’s worth noting that the React Native plugin for Universal Windows Platform will require a computer or virtual machine running Windows 10 and Visual Studio 2015 Community.

Who this book is for

It’s expected the reader possess a strong understanding of JavaScript and is familiar with ECMAScript 2015 (ES2015 or ES6). Code samples in this book will heavily leverage ES2015 features such as classes, arrow functions, destructuring, and spreading. Familiarity with React, mobile development, HTML, and CSS will aid in your understanding but are not a requirement.


In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "We can include other contexts through the use of the include directive."

A block of code is set as follows:

exten => s,1,Dial(Zap/1|30)
exten => s,2,Voicemail(u100)
exten => s,102,Voicemail(b100)
exten => i,1,Voicemail(s0)

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

exten => s,1,Dial(Zap/1|30)
exten => s,2,Voicemail(u100)
exten => s,102,Voicemail(b100)
exten => i,1,Voicemail(s0)

Any command-line input or output is written as follows:

cp /usr/src/asterisk-addons/configs/cdr_mysql.conf.sample

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Clicking the Next button moves you to the next screen."


Warnings or important notes appear in a box like this.


Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for this book from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

You can download the code files by following these steps:

  1. Log in or register to our website using your e-mail address and password.

  2. Hover the mouse pointer on the SUPPORT tab at the top.

  3. Click on Code Downloads & Errata.

  4. Enter the name of the book in the Search box.

  5. Select the book for which you're looking to download the code files.

  6. Choose from the drop-down menu where you purchased this book from.

  7. Click on Code Download.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

  • WinRAR / 7-Zip for Windows

  • Zipeg / iZip / UnRarX for Mac

  • 7-Zip / PeaZip for Linux

The code bundle for the book is also hosted on GitHub at We also have other code bundles from our rich catalog of books and videos available at Check them out!


Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to and enter the name of the book in the search field. The required information will appear under the Errata section.


Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at [email protected] with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.


If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.