O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning React Native

Book Description

Get a practical introduction to React Native, the JavaScript framework for writing and deploying fully featured mobile apps that look and feel native. With this hands-on guide, you’ll learn how to build applications that target iOS, Android, and other mobile platforms instead of browsers. You’ll also discover how to access platform features such as the camera, user location, and local storage. With code examples and step-by-step instructions, author Bonnie Eisenman shows web developers and frontend engineers how to build and style interfaces, use mobile components, and debug and deploy apps.

Table of Contents

  1. Preface
    1. Prerequisites
    2. Conventions Used in This Book
    3. Using Code Examples
    4. Safari® Books Online
    5. How to Contact Us
    6. Resources
    7. Acknowledgments
  2. 1. What Is React Native?
    1. Advantages of React Native
      1. Developer Experience
      2. Code Reuse and Knowledge Sharing
    2. Risks and Drawbacks
    3. Summary
  3. 2. Working with React Native
    1. How Does React Native Work?
    2. Rendering Lifecycle
    3. Creating Components in React Native
      1. Working with Views
      2. Using JSX
      3. Styling Native Components
    4. Host Platform APIs
    5. Summary
  4. 3. Building Your First Application
    1. Setting Up Your Environment
      1. Installing React Native
      2. iOS Dependencies
      3. Android Dependencies
    2. Creating a New Application
      1. Running a React Native Application for iOS
      2. Uploading to Your iOS Device
      3. Running a React Native Application for Android
      4. Recap: Creating and Running Projects
    3. Exploring the Sample Code
      1. Attaching a Component to the View
      2. Imports in React Native
      3. The FirstProject Component
    4. Building a Weather App
      1. Handling User Input
      2. Displaying Data
      3. Adding a Background Image
      4. Fetching Data from the Web
      5. Putting It Together
    5. Summary
  5. 4. Components for Mobile
    1. Analogies Between HTML Elements and Native Components
      1. The Text Component
      2. The Image Component
    2. Working with Touch and Gestures
      1. Using TouchableHighlight
      2. The GestureResponder System
      3. PanResponder
    3. Working with Organizational Components
      1. Using ListView
      2. Using Navigators
      3. Other Organizational Components
    4. Platform-Specific Components
      1. iOS- or Android-Only Components
      2. Components with Platform-Specific Versions
      3. When to Use Platform-Specific Components
    5. Summary
  6. 5. Styles
    1. Declaring and Manipulating Styles
      1. Inline Styles
      2. Styling with Objects
      3. Using Stylesheet.Create
      4. Style Concatenation
    2. Organization and Inheritance
      1. Exporting Style Objects
      2. Passing Styles as Props
      3. Reusing and Sharing Styles
    3. Positioning and Designing Layouts
      1. Layouts with Flexbox
      2. Using Absolute Positioning
      3. Putting It Together
    4. Summary
  7. 6. Platform APIs
    1. Using Geolocation
      1. Getting the User’s Location
      2. Handling Permissions
      3. Testing Geolocation In the iOS Simulator
      4. Watching the User’s Location
      5. Limitations
      6. Updating the Weather Application
    2. Accessing the User’s Images and Camera
      1. The CameraRoll Module
      2. Requesting Images with GetPhotoParams
      3. Rendering an Image from the Camera Roll
      4. Displaying a List of Photos
      5. Uploading an Image to a Server
    3. Storing Persistent Data with AsyncStore
      1. Other Storage Options
    4. The SmarterWeather Application
      1. The WeatherProject Component
      2. The Forecast Component
      3. The Button Component
      4. The LocationButton Component
      5. The PhotoBackdrop Component
    5. Summary
  8. 7. Modules
    1. Installing JavaScript Libraries with npm
    2. Native Modules for iOS
      1. Including a Third-Party Component
      2. Using the Video Component
      3. Anatomy of an Objective-C Native Module
      4. Implementation of RCTVideo
    3. Native Modules for Android
      1. Installing a Third-Party Component
      2. Anatomy of a Java Native Module
      3. Android Implementation of LinearGradient
    4. Cross-Platform Native Modules
    5. Summary
  9. 8. Debugging and Developer Tools
    1. JavaScript Debugging Practices, Translated
      1. Activating the Developer Options
      2. Debugging with console.log
      3. Using the JavaScript Debugger
      4. Working with the React Developer Tools
    2. React Native Debugging Tools
      1. Using Inspect Element
      2. The Red Screen of Death
    3. Debugging Beyond JavaScript
      1. Common Development Environment Issues
      2. Common Xcode Problems
      3. Common Android Problems
      4. The React Native Packager
      5. Issues Deploying to an iOS Device
      6. Simulator Behavior
    4. Testing Your Code
      1. Type-Checking with Flow
      2. Testing with Jest
    5. When You’re Stuck
    6. Summary
  10. 9. Putting It All Together
    1. The Flashcard Application
      1. Project Structure
      2. Component Hierarchy
    2. Modeling and Storing Data
      1. Data Flow Architecture: Reflux and Flux
      2. Using Reflux in Zebreto
      3. Persistence, AsyncStorage, and the Reflux Stores
    3. Using the Navigator
    4. A Look at Third-Party Dependencies
    5. Responsive Design and Font Sizes
    6. Summary and Homework
  11. 10. Deploying to the iOS App Store
    1. Preparing Your Xcode Project
      1. Selecting Supported Devices and Target iOS Version
      2. Launch Screen Images
      3. Adding Your Application Icon
      4. Setting Your Bundle Name
      5. Updating AppDelegate.m
      6. Set Schema for Release
    2. Uploading Your Application
      1. Getting Your Paperwork in Order
      2. Creating an Archive
      3. Creating an App in iTunes Connect
    3. Beta Testing with TestFlight
    4. Submitting the Application for Review
    5. Summary
  12. 11. Deploying Android Applications
    1. Setting Application Icon
    2. Building the APK for Release
    3. Distributing via Email or Other Links
    4. Submitting Your Application to the Play Store
      1. Beta Testing via the Play Store
      2. Play Store Listing
      3. Required Assets for the Store Listing
      4. Publishing Your Application
    5. Summary
  13. Conclusion
  14. A. ES6 Syntax
    1. Destructuring
    2. Importing Modules
    3. Function Shorthand
    4. Fat Arrow Functions
    5. String Interpolation
  15. B. Commands and Quickstart Guide
    1. Creating a New Project
    2. Running on iOS
      1. Taking Screenshots on iOS
    3. Running on Android
      1. Taking Screenshots on Android
    4. Running the React Native Packager
  16. Index