Learning React Native: Building Native Mobile Apps with JavaScript

Learning React Native: Building Native Mobile Apps with JavaScript

by Bonnie Eisenman

Paperback

$36.63 $39.99 Save 8% Current price is $36.63, Original price is $39.99. You Save 8%.
View All Available Formats & Editions
Choose Expedited Shipping at checkout for guaranteed delivery by Tuesday, March 26

Product Details

ISBN-13: 9781491929001
Publisher: O'Reilly Media, Incorporated
Publication date: 01/02/2016
Pages: 272
Product dimensions: 6.90(w) x 9.10(h) x 0.70(d)

About the Author

Bonnie Eisenman is a software engineer at Codecademy, with previous experience at Fog Creek Software and Google. She has spoken at several conferences on topics ranging from ReactJS to musical programming and Arduinos. In her spare time, she enjoys building electronic musical instruments, tinkering with hardware projects, and laser-cutting chocolate. Find her on Twitter as @brindelle.

Table of Contents

Preface ix

1 What Is React Native? 1

Advantages of React Native 1

Developer Experience 2

Code Reuse and Knowledge Sharing 3

Risks and Drawbacks 4

Summary 4

2 Working with React Native 7

How Does React Native Work? 7

Rendering Lifecycle 9

Creating Components in React Native 10

Working with Views 10

Using JSX 12

Styling Native Components 13

Host Platform APIs 14

Summary 14

3 Building Your First Application 15

Setting Up Your Environment 15

Installing React Native 16

iOS Dependencies 16

Android Dependencies 16

Creating a New Application 20

Running a React Native Application for iOS 21

Uploading to Your iOS Device 22

Running a React Native Application for Android 25

Recap: Creating and Running Projects 26

Exploring the Sample Code 26

Attaching a Component to the View 26

Imports in React Native 27

The FirstProject Component 28

Building a Weather App 29

Handling User Input 31

Displaying Data 33

Adding a Background Image 37

Fetching Data from the Web 40

Putting It Together 41

Summary 45

4 Components for Mobile 47

Analogies Between HTML Elements and Native Components 47

The Text Component 48

The Image Component 50

Working with Touch and Gestures 52

Using TouchableHighlight 52

The GestureResponder System 55

PanResponder 58

Working with Organizational Components 64

Using ListView 64

Using Navigators 73

Other Organizational Components 74

Platform-Specific Components 76

iOS- or Android-Only Components 76

Components with Platform-Specific Versions 77

When to Use Platform-Specific Components 80

Summary 81

5 Styles 83

Declaring and Manipulating Styles 83

Inline Styles 84

Styling with Objects 85

Using Stylesheet.Create 85

Style Concatenation 86

Organization and Inheritance 87

Exporting Style Objects 87

Passing Styles as Props 89

Reusing and Sharing Styles 89

Positioning and Designing Layouts 90

Layouts with Flexbox 90

Using Absolute Positioning 95

Putting It Together 96

Summary 100

6 Platform APIs 101

Using Geolocation 102

Getting the User's Location 102

Handling Permissions 103

Testing Geolocation In the iOS Simulator 104

Watching the User's Location 105

Limitations 105

Updating the Weather Application 105

Accessing the User's Images and Camera 108

The CameraRoll Module 108

Requesting Images with GetPhotoParams 110

Rendering an Image from the Camera Roll 111

Displaying a List of Photos 112

Uploading an Image to a Server 117

Storing Persistent Data with AsyncStore 118

Other Storage Options 119

The Smarter Weather Application 119

The WeatherProject Component 121

The Forecast Component 124

The Button Component 125

The LocationButton Component 126

The PhotoBackdrop Component 127

Summary 130

7 Modules 131

Installing JavaScript Libraries with npm 131

Native Modules for iOS 133

Including a Third-Party Component 133

Using the Video Component 136

Anatomy of an Objective-C Native Module 136

Implementation of RCTVideo 139

Native Modules for Android 141

Installing a Third-Party Component 141

Anatomy of a Java Native Module 146

Android Implementation of LinearGradient 149

Cross-Platform Native Modules 151

Summary 153

8 Debugging and Developer Tools 155

JavaScript Debugging Practices, Translated 155

Activating the Developer Options 155

Debugging with console.log 156

Using the JavaScript Debugger 158

Working with the React Developer Tools 159

React Native Debugging Tools 161

Using Inspect Element 161

The Red Screen of Death 162

Debugging Beyond JavaScript 166

Common Development Environment Issues 167

Common Xcode Problems 167

Common Android Problems 169

The React Native Packager 170

Issues Deploying to an iOS Device 170

Simulator Behavior 172

Testing Your Code 173

Type- Checking with Flow 173

Testing with Jest 173

When You're Stuck 175

Summary 175

9 Putting It All Together 177

The Flashcard Application 177

Project Structure 180

Component Hierarchy 181

Modeling and Storing Data 185

Data Flow Architecture: Reflux and Flux 187

Using Reflux in Zebreto 190

Persistence, AsyncStorage, and the Reflux Stores 192

Using the Navigator 194

A Look at Third-Party Dependencies 197

Responsive Design and Font Sizes 198

Summary and Homework 200

10 Deploying to the iOSApp Store 203

Preparing Your Xcode Project 203

Selecting Supported Devices and Target iOS Version 204

Launch Screen Images 205

Adding Your Application Icon 207

Setting Your Bundle Name 209

Updating AppDelegate.m 209

Set Schema for Release 210

Uploading Your Application 212

Getting Your Paperwork in Order 212

Creating an Archive 214

Creating an App in iTunes Connect 216

Beta Testing with Test Flight 220

Submitting the Application for Review 221

Summary 222

11 Deploying Android Applications 225

Setting Application Icon 225

Building the APK for Release 227

Distributing via Email or Other Links 229

Submitting Your Application to the Play Store 230

Beta Testing via the Play Store 232

Play Store Listing 233

Required Assets for the Store Listing 234

Publishing Your Application 235

Summary 236

Conclusion 237

A ES6 Syntax 239

B Commands and Quickstart Guide 243

Index 245

Customer Reviews

Most Helpful Customer Reviews

See All Customer Reviews