React Native Cookbook
by Jonathan Lebensold
Copyright 2018 Paradem Consulting. All rights reserved.
Printed in the United States of America.
Published by OReilly Media, Inc. , 1005 Gravenstein Highway North, Sebastopol, CA 95472.
OReilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com/safari). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com .
- Editors: Nan Barber and Meg Foley
- Production Editor: Kristen Brown
- Copyeditor: Kim Cofer
- Proofreader: Christina Edwards
- Indexer: Judith McConville
- Interior Designer: David Futato
- Cover Designer: Karen Montgomery
- Illustrator: Rebecca Demarest
- March 2018: First Edition
Revision History for the First Edition
- 2018-02-13: First Release
See http://oreilly.com/catalog/errata.csp?isbn=9781491993842 for release details.
The OReilly logo is a registered trademark of OReilly Media, Inc. React Native Cookbook, the cover image, and related trade dress are trademarks of OReilly Media, Inc.
While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights.
978-1-491-99384-2
[LSI]
Preface
When my first React Native application landed on the App Store, I knew thefolks behind this technology were onto something special. At the time, I hadonly spent a few days working with the iOS ecosystem and found myselfoverwhelmed with Xcode, Objective-C, and the libraries for iOS. My last forayinto iOS development was almost 8 years ago and, with a background in webdevelopment, I was intimidated. I also knew there were lots of others in the sameboat.
React Native changed all of this overnight. I found myself at home with adesign philosophy and set of skills I had developed as a web applicationdeveloper. Better still, my app wasnt going to be a second-class citizen. Icant stand rigid animations and clumsy scrolling. React Native is an open source toolsetthat brings native application development to the countless JavaScriptdevelopers the world over.
Who Should Read This Book
You are already familiar with programming and JavaScript in particular. Thisbook assumes you are tackling common software design choices that arise whenbuilding native applications. You may be working in your garage on the next greatsocial media platform, or turning a lumbering enterprise system into a zippy mobileexperience. If youre trying to bring a cross-platform native application to marketquickly and have chosen React, this book is for you. Every section of the bookis rooted in personal experiences building native applications.
Why I Wrote This Book
There is a ton of information online about React Native: the documentation isplentiful, and between StackOverflow and the React Native issues on GitHub, youwill be able to solve most discrete programming problems. This book tries to goa little deeper: how do you organize a project? How can you design a userexperience that accounts for asking users for permission to use theircamera? These are common questions that require some thought and dontnecessarily have one solution. This is a cookbook: the recipes should providea great starting point. Let them inspire you to come up with your own solutions,or produce something when youre 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+, orfind yourself transpiling from TypeScript, CoffeeScript, NativeScript, Flow, Elm, orReason, the ultimate output runs on a JavaScript virtual machine.JavaScript fatigue is real: with so much movement, how do you stay focusedon a stable set of technologies?
There is no right answer. Know that all of these tools are simply tryingto make you, the software developer, more productive.If these conditions are satisfied, then you should sleep well at night knowingthat when the next wave crashes, you will be in the company of a supportive open source community preparing to catchthe undercurrent. For the purposes of this book, I use the terms JavaScript and ES6interchangeably. In the final section, I challenge you to embrace this shiftinglandscape by studying how the same component written in ES6 can be rewrittenwith Reason, a functional programming language built on top of OCaml!
Navigating This Book
This book is organized into six chapters:
discusses JavaScript tools and how they work with React Native.
explores the React Native ecosystem: how you leverage what is available and how to bring it into your project.
Chapters go into some common challenges seen in most applications: handling application state, dealing with device I/O, and structuring your design assets.
describes the deployment process and some techniques for reducing your delivery time.
tackles writing maintainable code: making code reusable, portable, self-documenting, and adding tools that catch bugs before your customers do.
Like any cookbook, its best to flip through the examples and see how they connect with the work you are tryingto accomplish. If you are already familiar with React Native or feel at home with Node, NPM, and Yarn, I suggest skipping is probably worthflipping through.
Online Resources
React Native relies on a suite of tools that can be looselygrouped into three categories: JavaScript tools, Apple SDKs, and Android SDKs.React Native bundles all your code into a JavaScript bundle that then runs onthe native platform (for example, Android or iOS). Ensure these native platformsare installed correctly by following theReact Native Getting Started guide.
If you have no experience with React, theReact Overview should helpyou stay oriented. I recommend looking through some of these references before starting thisbook. This list touches on a collection of technologies that underpin much of the React Nativedeveloper 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
Conventions Used in This Book
The following typographical conventions are used in this book: