Learning React Native: Building Native Mobile Apps with JavaScript

by Bonnie Eisenman

Overview

Get a practical introduction to React Native, the JavaScript framework for writing and deploying fully featured mobile apps that render natively. The second edition of this hands-on guide shows you how to build applications that target iOS, Android, and other mobile platforms instead of browsers—apps that can access platform features such as the camera, user location, and local storage.

Through code examples and step-by-step instructions, web developers and frontend engineers familiar with React will learn how to build and style interfaces, use mobile components, and debug and deploy apps. You’ll learn how to extend React Native using third-party libraries or your own Java and Objective-C libraries.

• Understand how React Native works under the hood with native UI components
• Examine how React Native’s mobile-based components compare to basic HTML elements
• Create and style your own React Native components and applications
• Take advantage of platform-specific APIs, as well as modules from the framework’s community
• Incorporate platform-specific components into cross-platform apps
• Learn common pitfalls of React Native development, and tools for dealing with them
• Combine a large application’s many screens into a cohesive UX
• Handle state management in a large app with the Redux library

Product Details

ISBN-13:	9781491989142
Publisher:	O'Reilly Media, Incorporated
Publication date:	11/18/2017
Edition description:	2nd ed.
Pages:	240
Product dimensions:	7.00(w) x 9.10(h) x 0.70(d)

About the Author

Bonnie Eisenman is a software engineer at Twitter and a member of the hackerspace NYC Resistor, with previous experience at Codecademy, Fog Creek Software, and Google. She is the author of Learning React Native, a book on building native iOS and Android applications with Javascript, published with O’Reilly Media. In her spare time, she enjoys learning languages, tinkering with hardware projects, and knitting. Her projects are posted at http://bonnieeisenman.com. Find her on Twitter as @brindelle.

Table of Contents

Preface ix

1 What is React Native? 1

Advantages of React Native 2

Developer Experience 2

Code Reuse and Knowledge Sharing 3

Risks and Drawbacks 4

Summary 4

Working with React Native 5

How Does React Native Work? 5

Rendering Lifecycle 7

Creating Components in React Native 8

Working with Views 8

Using JSX 9

Styling Native Components 10

Host Platform APIs 11

Summary 12

3 Building Your First Application 13

Setting Up Your Environment 13

Developer Setup: Create React Native App 14

Creating Your First Application with create-react-native-app 14

Previewing Your App on iOS or Android 15

Developer Setup: The Traditional Approach 16

Creating Your First Application with react-native 16

Running Your App on iOS 17

Running Your App on Android 18

Exploring the Sample Code 19

Building a Weather App 22

Handling User Input 24

Displaying Data 26

Fetching Data from the Web 29

Adding a Background Image 32

Putting It All Together 34

Summary 37

4 Components for Mobile 39

Analogies Between HTML Elements and Native Components 39

The <Text> Component 40

The <Image> Component 42

Working with Touch and Gestures 44

Creating Basic Interactions with <Button> 44

Using the <TouchableHighlight> Component 45

Using the PanResponder Class 48

Working with Lists 54

Using the Basic <FlatList> Component 56

Updating the <FlatList> Contents 59

Integrating Real Data 63

Working with <SectionList> 65

Navigation 69

Other Organizational Components 70

Summary 71

5 Styles 73

Declaring and Manipulating Styles 73

Using Inline Styles 74

Styling with Objects 75

Using StyleSheet. create 75

Concatenating Styles 76

Organization and Inheritance 77

Exporting Style Objects 77

Passing Styles as Props 78

Reusing and Sharing Styles 79

Positioning and Designing Layouts 80

Using Layouts with Flexbox 80

Using Absolute Positioning 84

Putting It Together 85

Summary 88

6 Platform APIs 91

Using Geolocation 91

Reading the User's Location 92

Handling Permissions 93

Testing Geolocation in Emulated Devices 94

Watching the User's Location 95

Working Around Limitations 95

Updating the Weather Application 96

Accessing the User's Images and Camera 99

Interacting with the CameraRoll Module 99

Requesting Images with GetPhotoParams 100

Rendering an Image from the Camera Roll 101

Uploading an Image to a Server 102

Storing Persistent Data with AsyncStorage 103

The SmarterWeather Application 104

The <WeatherProject> Component 104

The <Forecast> Component 107

The <Button> Component 108

The <LocationButton> Component 109

The <PhotoBackdrop> Component 110

Summary 112

7 Modules and Native Code 113

Installing JavaScript Libraries with npm 113

Installing Third-Party Components with Native Code 115

Using the Video Component 116

Objective-C Native Modules 116

Writing an Objective-C Native Module for iOS 116

Exploring react-native-video for iOS 121

Java Native Modules 124

Writing a Java Native Module for Android 124

Exploring react-native-video for Java 127

Cross-Platform Native Modules 130

Summary 130

8 Platform-Specific Code 133

iOS- or Android-Only Components 133

Components with Platform-Specific Implementations 134

Using Platform-Specific File Extensions 134

Using the Platform Module 137

When to Use Platform-Specific Components 137

9 Debugging and Developer Tools 139

JavaScript Debugging Practices, Translated 139

Activating the Developer Options 139

Debugging with console.log 141

Using the JavaScript Debugger 143

Working with the React Developer Tools 144

React Native Debugging Tools 145

Using Inspect Element 145

Interpreting the Red Screen of Death 146

Debugging Beyond JavaScript 150

Common Development Environment Issues 151

Common Xcode Problems 151

Common Android Problems 152

The React Native Packager 153

Issues Deploying to an iOS Device 153

Simulator Behavior 155

Testing Your Code 155

Type Checking with Flow 156

Unit Testing with Jest 156

Snapshot Testing with Jest 157

When You're Stuck 160

Summary 161

10 Navigation and Structure in Larger Applications 163

The Flashcard Application 163

Project Structure 166

Application Screens 167

Reusable Components 173

Styles 177

Data Models 178

Using React-Navigation 181

Creating a StackNavigator 182

Using navigation.navigate to Transition Between Screens 182

Configuring the Header with navigation Options 185

Implementing the Rest 186

Summary 187

11 State Management in Larger Applications 189

Using Redux to Manage State 189

Actions 190

Reducers 192

Connecting Redux 195

Persisting Data with AsyncStorage 203

Summary and Homework 206

Conclusion 207

A Modern JavaScript Syntax 209

B Deploying Your Application 215

C Working with Expo Applications 219

Index 221