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

React Native Cookbook

Book Description

Take your React Native application development to the next level with this large collection of recipes

About This Book

  • Build rich and engaging user experiences in React Native while maintaining peak application performance
  • Leverage the best of iOS and Android for React Native development while maximizing code reuse and cohesion
  • Implement architecture patterns in your React Native application that support efficient data access, routing, and testing

Who This Book Is For

This book is for web developers who are familiar with React.js and know the basics of UI development. You may or may not have used React Native before, but it’s ideal for you if you want to develop native applications for iOS and Android using React Native. Existing knowledge of JavaScript ES2015 is highly recommended.

What You Will Learn

  • Build simple and complex UIs using React Native
  • Create advanced animations for UI components
  • Build universal apps that run on phones and tablets
  • Leverage Redux to manage application flow and data
  • Expose both custom native UI components and application logic to React Native
  • Integrate with existing native applications on iOS and Android
  • Deploy your React Native application to the Google Play and Apple App Store
  • Add automated testing to your React Native application

In Detail

React has taken the web development world by storm, and it is only natural that the unique architecture and its ecosystem of third-party support be applied to native application development. This book will take you through the basics of React Native development all the way through to some more advanced components.

This book covers topics in React Native ranging from adding basic UI components to successfully deploying for multiple target platforms. The book follows a top-down approach beginning with building rich user interfaces. These UIs will be created with both built-in and custom components that you will create, style, and animate.

You will then learn about different strategies for working with data, including leveraging the popular Redux library and optimizing the performance of the application. Then, you will step further into exposing native device functionality. Finally, we will discuss how to put your application into production and maintain its reliability.

Style and approach

This is a fast-paced guide with clear, concise recipes that let you discover and take advantage of the many features offered by React Native to build compelling mobile apps. This book will take your skills to the next level and equip you with the expertise to build high performing, native mobile apps in JavaScript.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. React Native Cookbook
    1. React Native Cookbook
    2. Credits
    3. Foreword
    4. About the Authors
    5. About the Reviewer
    6. www.PacktPub.com
      1. Why subscribe?
    7. Customer Feedback
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Sections
        1. Getting ready
        2. How to do it…
        3. How it works…
        4. There's more…
        5. See also
      5. Conventions
      6. Reader feedback
      7. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    9. 1. Getting Started
      1. Introduction
      2. Adding styles to text and containers
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      3. Using images to mimic a video player
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Creating a toggle button
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      5. Displaying a list of items
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      6. Adding tabs to the viewport
        1. Getting ready
        2. How to do it...
      7. Using flexbox to create a profile page
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      8. Setting up a navigator
        1. Getting ready
        2. How to do it...
        3. There's more...
    10. 2. Implementing Complex User Interfaces
      1. Introduction
      2. Creating a reusable button with theme support
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Building a complex layout for tablets using flexbox
        1. Getting ready
        2. How to do it...
        3. There's more...
      4. Including custom fonts on iOS
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      5. Including custom fonts on Android
        1. Getting ready
        2. How to do it...
      6. Using font icons
        1. Getting ready
        2. How to do it...
        3. There's more...
      7. Dealing with universal apps
        1. Getting ready
        2. How to do it...
        3. How it works...
      8. Detecting orientation changes
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      9. Using a WebView to open external websites
        1. How to do it...
        2. How it works...
      10. Rendering simple HTML elements using native components
        1. Getting ready
        2. How to do it...
        3. How it works...
      11. How to create a form component
        1. Getting ready
        2. How to do it...
        3. How it works...
    11. 3. Animating the User Interface
      1. Introduction
      2. Simple animations
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      3. Running several animations at the same time
        1. Getting ready
        2. How to do it...
        3. How it works...
      4. Animating notifications
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      5. Expanding and collapsing containers
        1. Getting ready
        2. How to do it...
        3. How it works...
      6. Loading animation
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Removing items from a list component
        1. Getting ready
        2. How to do it...
        3. How it works...
      8. Creating a Facebook reactions widget
        1. Getting ready
        2. How to do it...
        3. How it works...
      9. Display images in full screen
        1. Getting ready
        2. How to do it...
        3. How it works...
    12. 4. Working with Application Logic and Data
      1. Introduction
      2. Storing and retrieving data locally
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Retrieving data from a Remote API
        1. Getting ready
        2. How to do it...
        3. How it works...
      4. Sending data to a Remote API
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Establishing real-time communications with WebSockets
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      6. Integrate persistent database functionality with Realm
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Mask the application upon network connection loss
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      8. Synchronizing locally persisted data with a Remote API
        1. Getting ready
        2. How to do it...
        3. How it works...
      9. Logging in with Facebook
        1. Getting ready
        2. How to do it...
        3. How it works...
      10. Sharing content on Facebook
        1. Getting ready
        2. How to do it...
        3. How it works...
      11. Tracking application events with Facebook Analytics
        1. Getting ready
        2. How to do it...
        3. How it works...
    13. 5. Implementing Redux
      1. Introduction
      2. Installing Redux and preparing our project
        1. How to do it...
        2. How it works...
      3. Defining actions
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Defining reducers
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Setting up the store
        1. How to do it...
        2. How it works...
      6. Communicating with a Remote API
        1. How to do it...
        2. How it works...
      7. Connecting the store with the views
        1. Getting ready
        2. How to do it...
        3. How it works...
      8. Storing offline content using Redux
        1. Getting ready
        2. How to do it...
      9. Showing network connectivity status
        1. Getting ready
        2. How to do it...
        3. How it works...
    14. 6. Adding Native Functionality
      1. Introduction
      2. Exposing custom iOS modules
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      3. Rendering custom iOS view components
        1. How to do it...
        2. How it works...
      4. Exposing custom Android modules
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Rendering custom Android view components
        1. How to do it...
        2. How it works...
      6. Handling the Android back button
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Reacting to changes in application state
        1. How to do it...
        2. How it works...
        3. There's more...
      8. Copy and pasting content
        1. Getting ready
        2. How to do it...
        3. How it works...
      9. Receiving push notifications
        1. Getting ready
        2. How to do it...
        3. How it works...
      10. Authenticating via TouchID or fingerprint sensor
        1. Getting ready
        2. How to do it...
        3. How it works...
      11. Hiding application content when multitasking
        1. Getting ready
        2. How to do it...
        3. How it works...
      12. Background processing on iOS
        1. Getting ready
        2. How to do it...
        3. How it works
      13. Background processing on Android
        1. Getting ready
        2. How to do it...
        3. How it works...
      14. Playing audio files on iOS
        1. Getting ready
        2. How to do it...
        3. How it works...
      15. Playing audio files on Android
        1. Getting ready
        2. How to do it...
        3. How it works...
    15. 7. Architecting for Multiple Platforms
      1. Introduction
      2. Building for the Universal Windows Platform
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Building for Mac OS X Desktop
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Building for Apple tvOS
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Creating platform specific UI Components
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      6. Extending UI Components for platform-specific experiences
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Best practices for sharing code between platforms
        1. How to do it...
    16. 8. Integration with Applications
      1. Introduction
      2. Embedding a React Native application inside an iOS application
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Communicating from an iOS application to React Native
        1. Getting ready
        2. How to do it...
        3. How it works...
      4. Communicating from React Native to an iOS application container
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Handling being invoked by external iOS application
        1. How to do it...
        2. How it works...
      6. Embedding a React Native application inside an Android application
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Communicating from an Android application to React Native
        1. Getting ready
        2. How to do it...
        3. How it works...
      8. Communicating from React Native to an Android application container
        1. Getting ready
        2. How to do it...
        3. How it works...
      9. Handling being invoked by external Android application
        1. How to do it...
        2. How it works...
      10. Invoking an external iOS and Android application
        1. How to do it...
        2. How it works...
    17. 9. Deploying Our App
      1. Introduction
      2. Deploying development builds to an iOS device
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Deploying development builds to an Android device
        1. Getting ready
        2. How to do it...
        3. There's more...
        4. How it works...
      4. Deploying testing builds to HockeyApp
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Deploying testing iOS builds to TestFlight
        1. Getting ready
        2. How to do it...
        3. How it works...
      6. Deploying production builds to the Apple app store
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Deploying production builds to Google Play Store
        1. Getting ready
        2. How to do it...
        3. How it works...
      8. Deploying Over-The-Air updates
        1. Getting ready
        2. How to do it...
        3. How it works...
      9. Optimizing React Native application size
        1. Getting ready
        2. How to do it...
        3. How it works...
    18. 10. Automated Testing
      1. Installing the environment
        1. Getting ready
        2. How to do it...
      2. Running the Inspector to access the elements
        1. Getting ready
        2. How to do it...
      3. Integrating Appium with Mocha
        1. Getting ready
        2. How to do it...
        3. How it works...
      4. Selecting and typing into input texts
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      5. Pressing a button and testing the result
        1. Getting ready
        2. How to do it...
        3. How it works...
    19. 11. Optimizing the Performance of Our App
      1. Introduction
      2. Optimizing our JavaScript code
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Optimizing the performance of our custom UI components
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      4. Keeping our animations running at 60 FPS
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      5. Getting the most out of ListView
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      6. Boosting the performance of our app
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Optimizing the performance of native iOS module
        1. Getting ready
        2. How to do it...
        3. How it works...
      8. Optimizing the performance of native Android modules
        1. Getting ready
        2. How to do it...
        3. How it works...
      9. Optimizing the performance of native iOS UI components
        1. Getting ready
        2. How to do it...
        3. How it works...
      10. Optimizing the performance of native Android UI components
        1. Getting ready
        2. How to do it...
        3. How it works...