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, 2nd Edition

Learning React Native, 2nd Edition

by Bonnie Eisenman
Publisher: O'Reilly Media, Inc.
Release Date: November 2017
ISBN: 9781491989135
View table of contents
Start reading

Book Description

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

Table of Contents

  1. Preface
    1. Prerequisites
    2. Conventions Used in This Book
    3. Using Code Examples
    4. O’Reilly Safari
    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
    2. Developer Setup: Create React Native App
      1. Creating Your First Application with create-react-native-app
      2. Previewing Your App on iOS or Android
    3. Developer Setup: The Traditional Approach
      1. Creating Your First Application with react-native
      2. Running Your App on iOS
      3. Running Your App on Android
    4. Exploring the Sample Code
    5. Building a Weather App
      1. Handling User Input
      2. Displaying Data
      3. Fetching Data from the Web
      4. Adding a Background Image
      5. Putting It All Together
    6. 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. Creating Basic Interactions with <Button>
      2. Using the <TouchableHighlight> Component
      3. Using the PanResponder Class
    3. Working with Lists
      1. Using the Basic <FlatList> Component
      2. Updating the <FlatList> Contents
      3. Integrating Real Data
      4. Working with <SectionList>
    4. Navigation
    5. Other Organizational Components
    6. Summary
  6. 5. Styles
    1. Declaring and Manipulating Styles
      1. Using Inline Styles
      2. Styling with Objects
      3. Using StyleSheet.create
      4. Concatenating Styles
    2. Organization and Inheritance
      1. Exporting Style Objects
      2. Passing Styles as Props
      3. Reusing and Sharing Styles
    3. Positioning and Designing Layouts
      1. Using Layouts with Flexbox
      2. Using Absolute Positioning
      3. Putting It Together
    4. Summary
  7. 6. Platform APIs
    1. Using Geolocation
      1. Reading the User’s Location
      2. Handling Permissions
      3. Testing Geolocation in Emulated Devices
      4. Watching the User’s Location
      5. Working Around Limitations
      6. Updating the Weather Application
    2. Accessing the User’s Images and Camera
      1. Interacting with the CameraRoll Module
      2. Requesting Images with GetPhotoParams
      3. Rendering an Image from the Camera Roll
      4. Uploading an Image to a Server
    3. Storing Persistent Data with AsyncStorage
    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 and Native Code
    1. Installing JavaScript Libraries with npm
    2. Installing Third-Party Components with Native Code
      1. Using the Video Component
    3. Objective-C Native Modules
      1. Writing an Objective-C Native Module for iOS
      2. Exploring react-native-video for iOS
    4. Java Native Modules
      1. Writing a Java Native Module for Android
      2. Exploring react-native-video for Java
    5. Cross-Platform Native Modules
    6. Summary
  9. 8. Platform-Specific Code
    1. iOS- or Android-Only Components
    2. Components with Platform-Specific Implementations
      1. Using Platform-Specific File Extensions
      2. Using the Platform Module
    3. When to Use Platform-Specific Components
  10. 9. 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. Interpreting 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. Unit Testing with Jest
      3. Snapshot Testing with Jest
    5. When You’re Stuck
    6. Summary
  11. 10. Navigation and Structure in Larger Applications
    1. The Flashcard Application
    2. Project Structure
      1. Application Screens
      2. Reusable Components
      3. Styles
      4. Data Models
    3. Using React-Navigation
      1. Creating a StackNavigator
      2. Using navigation.navigate to Transition Between Screens
      3. Configuring the Header with navigationOptions
      4. Implementing the Rest
    4. Summary
  12. 11. State Management in Larger Applications
    1. Using Redux to Manage State
    2. Actions
    3. Reducers
    4. Connecting Redux
    5. Persisting Data with AsyncStorage
    6. Summary and Homework
  13. Conclusion
  14. A. Modern JavaScript Syntax
    1. let and const
    2. Importing Modules
    3. Destructuring
    4. Function Shorthand
    5. Fat-Arrow Functions
    6. Default Parameters
    7. String Interpolation
    8. Working with Promises
  15. B. Deploying Your Application
    1. Check Your Application Assets and Specify Target OS Versions and Devices
    2. Create a Release Build
    3. Complete Your Paperwork
    4. Beta Test Your Application
    5. Create a Listing
    6. Wait for Review
    7. Release
  16. C. Working with Expo Applications
    1. Ejecting from Expo
  17. Index