React Native Cookbook - Second Edition

React Native Cookbook - Second Edition

by Dan Ward
Released January 2019
Publisher(s): Packt Publishing
ISBN: 9781788991926

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Improve your React Native mobile development skills or transition from web development to mobile development with this practical solution-packed guide

Key Features

  • Learn strategies and techniques to face challenges in React Native mobile development head-on
  • Leverage the best ways to use iOS and Android for React Native development while maximizing code reuse and cohesion
  • Build engaging, performant user experiences with React Native

Book Description

If you are a developer looking to create mobile applications with maximized code reusability and minimized cost, then React Native is here to help. With this practical guide, you will be able to build attractive UIs, tackle common mobile development-related issues, and achieve improved performance in mobile environments.

This book starts with common techniques for React Native customization and helps you set up your development platforms. Over the course of the book, a wide variety of step-by-step recipes are designed with both built-in React Native and custom third-party components that you will create, style, and animate. You will create real-world browser-based authentication, build a fully functional audio player, and integrate with Google maps. You will also explore different strategies for working with data, including leveraging the popular Redux library and optimizing your app's dataflow. You will then get an introduction to writing native device functionality for new and already existing native projects.

Finally, you will learn how app deployment works, and tips and tricks for writing performant code. By the end of the book, you'll have gained enough knowledge to build full iOS and Android applications using React Native.

What you will learn

  • Build UI features and components using React Native
  • Create advanced animations for UI components
  • Develop 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
  • Employ open-source third-party plugins to create React Native apps more efficiently

Who this book is for

If you're a JavaScript developer looking for a practical guide with step-by-step tutorials for developing feature rich mobile apps using React Native, then this book is for you. Though not required, some experience working with React will help you more easily understand the React Native concepts covered in this book.

While React Native development can be done on a Windows machine, certain aspects, such as running your apps on iOS devices and in the iOS simulator, or editing native code with Xcode, can only be done with a Mac.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. React Native Cookbook Second Edition
  3. About Packt
    1. Why subscribe?
    2. Packt.com
  4. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Sections
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
      5. See also
    5. Get in touch
      1. Reviews
  6. Setting Up Your Environment
    1. Technical requirements
    2. Installing dependencies
      1. Installing Xcode
    3. Installing Android Studio
      1. How to do it...
    4. There's more...
      1. Installing Node.js
      2. Installing Expo
      3. Installing Watchman
    5. Initializing your first app
    6. Running your app in a simulator/emulator
      1. Running your app on an iOS simulator
      2. There's more...
    7. Running your app on a real device
      1. Running your app on an iPhone or Android
    8. Summary
    9. Further reading
  7. Creating a Simple React Native App
    1. Adding styles to elements
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    2. Using images to mimic a video player
      1. Getting ready
      2. How to do it...
      3. How it works...
    3. Creating a toggle button
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    4. Displaying a list of items
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    5. Using flexbox to create a layout
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
      5. See also
    6. Setting up and using navigation
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
  8. Implementing Complex User Interfaces - Part I
    1. Creating a reusable button with theme support
      1. Getting ready
      2. How to do it...
      3. How it works...
    2. Building a complex layout for tablets using flexbox
      1. Getting ready
      2. How to do it...
      3. There's more...
      4. See also
    3. Including custom fonts
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    4. Using font icons
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
  9. Implementing Complex User Interfaces - Part II
    1. Dealing with universal applications
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    2. Detecting orientation changes
      1. Getting ready
      2. How to do it...
      3. There's more...
    3. Using a WebView to embed external websites
      1. Getting ready
      2. How to do it...
      3. How it works...
    4. Linking to websites and other applications
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    5. Creating a form component
      1. Getting ready
      2. How to do it...
      3. How it works...
  10. Implementing Complex User Interfaces - Part III
    1. Introduction
    2. Creating a map app
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    3. Creating an audio player
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    4. Creating an image carousel
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    5. Adding push notifications to your app
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    6. Implementing browser-based authentication
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
  11. Adding Basic Animations to Your App
    1. Introduction
    2. Creating simple animations
      1. Getting ready
      2. How to do it...
      3. How it works...
    3. Running multiple animations
      1. Getting ready
      2. How to do it...
      3. How it works...
    4. Creating animated 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...
      4. See also
    6. Creating a button with a loading animation
      1. Getting ready
      2. How to do it...
      3. How it works...
    7. Conclusion
  12. Adding Advanced Animations to Your App
    1. Introduction
    2. Removing items from a list component
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    3. Creating a Facebook reactions widget
      1. Getting ready
      2. How to do it...
      3. How it works...
    4. Displaying images in fullscreen
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
  13. 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...
      4. See also
    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 communication with WebSockets
      1. Getting ready
      2. How to do it...
      3. How it works...
    6. Integrating persistent database functionality with Realm
      1. Getting ready
      2. How to do it...
      3. How it works...
    7. Masking the application upon network connection loss
      1. Getting ready
      2. How to do it...
      3. How it works...
    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...
  14. Implementing Redux
    1. Introduction
    2. Installing Redux and preparing our project
      1. Getting started
      2. How to do it...
      3. 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 Redux store
      1. How to do it...
      2. How it works...
    6. Communicating with a remote API
      1. Getting ready
      2. How to do it...
      3. How it works...
    7. Connecting the store to the view
      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...
      3. How it works...
  15. App Workflow and Third-Party Plugins
    1. How this chapter works
    2. React Native development tools
      1. Expo
      2. React Native CLI
      3. CocoaPods
    3. Planning your app and choosing your workflow
      1. How to do it...
      2. Expo CLI setup
    4. Using NativeBase for cross-platform UI components
      1. Getting ready
        1. Using a pure React Native app (React Native CLI)
        2. Using an Expo app
      2. How to do it...
      3. How it works...
    5. Using glamorous-native for styling UI components
      1. Getting ready
      2. How to do it...
      3. How it works...
    6. Using react-native-spinkit for adding animated loading indicators
      1. Getting started
      2. How to do it...
      3. How it works...
      4. There's more...
    7. Using react-native-side-menu for adding side navigation menus
      1. Getting ready
      2. How to do it...
      3. How it works...
    8. Using react-native-modalbox for adding modals
      1. Getting ready
      2. How to do it...
      3. How it works...
  16. Adding Native Functionality - Part I
    1. Introduction
    2. Exposing custom iOS modules
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    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...
  17. Adding Native Functionality - Part II
    1. Introduction
    2. Reacting to changes in application state
      1. How to do it...
      2. How it works...
    3. Copying and pasting content
      1. Getting ready
      2. How to do it...
      3. How it works...
    4. Authenticating via touch ID or fingerprint sensor
      1. Getting ready
      2. How to do it...
      3. How it works...
    5. Hiding application content when multitasking
      1. Getting ready
      2. How to do it...
      3. How it works...
    6. Background processing on iOS
      1. Getting ready
      2. How to do it...
      3. How it works...
    7. Background processing on Android
      1. Getting ready
      2. How to do it...
      3. How it works...
    8. Playing audio files on iOS
      1. Getting ready
      2. How to do it...
      3. How it works...
    9. Playing audio files on Android
      1. Getting ready
      2. How to do it...
  18. Integration with Native Applications
    1. Introduction
    2. Combining a React Native app and a Native iOS app
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    3. Communicating from an iOS app to React Native
      1. Getting ready
      2. How to do it...
    4. Communicating from React Native to an iOS app container
      1. Getting ready
      2. How to do it...
      3. How it works...
    5. Handle being invoked by an external iOS app
      1. Getting ready
      2. How to do it...
      3. How it works...
    6. Combining a React Native app and a native Android app
      1. Getting ready
      2. How to do it...
      3. How it works...
    7. Communicating from an Android app to React Native
      1. Getting ready
      2. How to do it...
      3. How it works...
    8. Communicating from React Native to an Android app container
      1. Getting ready
      2. How to do it...
      3. How it works...
    9. Handle being invoked by an external Android app
      1. How to do it...
      2. How it works...
  19. Deploying Your 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 test builds to HockeyApp
      1. Getting ready
      2. How to do it...
      3. How it works...
    5. Deploying iOS test 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 app size
      1. Getting ready
      2. How to do it...
      3. How it works...
  20. Optimizing the Performance of Your 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 custom UI components
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. See also
    4. Keeping 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. How to do it...
      2. How it works...
    7. Optimizing the performance of native iOS modules
      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...
  21. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: React Native Cookbook - Second Edition
  • Author(s): Dan Ward
  • Release date: January 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781788991926