Contents
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v
1.1 Setting Up Your Development Environment 1
1.2 Writing ES6 with Babel 4
1.3 Organizing Project Files 7
1.4 Dealing with Catastrophic Failure 14
2.1 Stop Repeating Yourself: Implement Custom Components 19
2.2 Adding an Open Source Progress Bar 23
2.3 Sharing Custom Components 30
2.4 Routing Between Login Screens 37
2.5 Using Redux for Global State Management in Redux 47
3.1 Composing Stylesheets 63
3.2 Building Flexible Layouts with Flexbox 66
3.3 Importing Image Vectors and Icons 69
3.4 Looping Animations 76
4.1 Asking for Permission to Use Device Hardware (iOS) 79
4.2 Fetching Paginated Requests 88
4.3 Save Application State with Redux and Local Storage 93
4.4 Using the Filesystem 95
5.1 Automate Publishing Your App 103
5.2 Sharing Your iOS App with Beta Testers 108
5.3 Configuring Application Settings 110
6.1 Protect Your Components with PropTypes 119
6.2 Check Runtime Errors with Flow 124
6.3 Automate Your Component Tests 130
6.4 Maintain Coding Standards with ESLint 136
6.5 Write Your App with Reason 145
Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Preface
When my first React Native application landed on the App Store, I knew the folks behind this technology were onto something special. At the time, I had only spent a few days working with the iOS ecosystem and found myself overwhelmed with Xcode, Objective-C, and the libraries for iOS. My last foray into iOS development was almost 8 years ago and, with a background in web development, I was intimidated. I also knew there were lots of others in the same boat.
React Native changed all of this overnight. I found myself at home with a design philosophy and set of skills I had developed as a web application developer. Better still, my app wasn’t going to be a second-class citizen. I can’t stand rigid animations and clumsy scrolling. React Native is an open source toolset that brings native application development to the countless JavaScript developers the world over.
Who Should Read This Book
You are already familiar with programming and JavaScript in particular. This book assumes you are tackling common software design choices that arise when building native applications. You may be working in your garage on the next great social media platform, or turning a lumbering enterprise system into a zippy mobile experience. If you’re trying to bring a cross-platform native application to market quickly and have chosen React, this book is for you. Every section of the book is rooted in personal experiences building native applications.
Why I Wrote This Book
There is a ton of information online about React Native: the documentation is plentiful, and between StackOverflow and the React Native issues on GitHub, you will be able to solve most discrete programming problems. This book tries to go a little deeper: how do you organize a project? How can you design a user experience that accounts for asking users for permission to use their camera? These are common cookbook: the recipes should provide a great starting point. Let them inspire you to come up with your own solutions, or produce something when you’re in a pinch!
A Word on JavaScript Today
It feels like every week JavaScript reinvents itself with a new name, a new set of language features, and new transpilers and compilers! Whether you call it ECMAScript, ES6, ES6+, or find yourself transpiling from TypeScript, CoffeeScript, NativeScript, Flow, Elm, or Reason, the ultimate output runs on a JavaScript virtual machine. Java‐ Script fatigue is real: with so much movement, how do you stay focused on a stable set of technologies?
There is no right answer. Know that all of these tools are simply trying to make you, the software developer, more productive. If these conditions are satisfied, then you should sleep well at night knowing that when the next wave crashes, you will be in the company of a supportive open source community preparing to catch the undercurrent.
For the purposes of this book, I use the terms JavaScript and ES6 interchangeably.
In the final section, I challenge you to embrace this shifting landscape by studying how the same component written in ES6 can be rewritten with Reason, a functional programming language built on top of OCaml!
Navigating This Book
This book is organized into six chapters:
• Chapter 1 discusses JavaScript tools and how they work with React Native.
• Chapter 2 explores the React Native ecosystem: how you leverage what is available and how to bring it into your project.
• Chapters 3 and 4 go into some common challenges seen in most applications:
handling application state, dealing with device I/O, and structuring your design assets.
• Chapter 5 describes the deployment process and some techniques for reducing your delivery time.
• Chapter 6 tackles writing maintainable code: making code reusable, portable, self-documenting, and adding tools that catch bugs before your customers do.
Like any cookbook, it’s best to flip through the examples and see how they connect with the work you are trying to accomplish. If you are already familiar with React Native or feel at home with Node, NPM, and Yarn, I suggest skipping Chapter 2. If you have already written native applications, then Chapter 1 is probably worth flipping through.
Online Resources
React Native relies on a suite of tools that can be loosely grouped into three categories:
JavaScript tools, Apple SDKs, and Android SDKs. React Native bundles all your code into a JavaScript bundle that then runs on the native platform (for example, Android or iOS). Ensure these native platforms are installed correctly by following the React Native Getting Started guide.
If you have no experience with React, the React Overview should help you stay oriented. I recommend looking through some of these references before starting this book. This list touches on a collection of technologies that underpin much of the React Native developer experience, including JavaScript/ES6, NPM, React, React Native, and Redux:
• The definitive guide: React Native: Getting Started
• A quick primer on the transpiler powering our JavaScript pipeline: Learn ES2015
• A great introduction to the Node Package Manager (NPM): What is npm?
• An excellent and concise explanation of React: React Overview
• A community directory of all things React Native: Awesome React Native
• Free video tutorials discussing state management by the creator of Redux: Getting Started with Redux
• A curated directory of React Native packages: Opinionated catalog of Open Source React Native packages
• A listing of React Native packages available via NPM: An open catalog of React Native libraries
The React Native Toolchain
React Native lives in an ecosystem with dozens of little software tools. You have transpilers (Babel, Metro, Webpack), package managers (NPM, Yarn), linters, unit test frameworks, and more. This chapter will cover the language basics and the minimum set of open source tools you will be working with in your React Native project. You’re probably writing your React Native application with JavaScript or some kind of transpiled source that compiles down to JavaScript, like TypeScript or ES6+. I hope this chapter will help acquaint you with JavaScript’s breakneck speed.
Expo
Recently the React Native team has partnered with Expo to deliver React Native applications in development without running a local development environment. This is a great way to explore React Native and get a taste, but you will likely want to work with the hardware at some point, at which point a local development environment will be critical to your productivity.
1.1 Setting Up Your Development Environment
If you’re working with any of these tools in other web projects, you might find yourself having to troubleshoot your environment. Like a carpenter arriving on a job site, you need to know how all the tools work and if they need to be fixed.
React Native is a package that includes three programming environments: Node.js, iOS, and Android. NPM, the Node Package Manager, needs to be in good working order.
