React Native Cookbook

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

React Native Cookbook

Cookbook
Crysfel Villa, Stan Bershadskiy

Take your React Native application development to the next level with this large collection of recipes
$39.99
$49.99
RRP $39.99
RRP $49.99
eBook
Print + eBook

Instantly access this course right now and get the skills you need in 2017

With unlimited access to a constantly growing library of over 4,000 eBooks and Videos, a subscription to Mapt gives you everything you need to learn new skills. Cancel anytime.

Preview in Mapt

Book Details

ISBN 139781786462558
Paperback536 pages

Book Description

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.

Table of Contents

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

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

Authors

Table of Contents

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

Book Details

ISBN 139781786462558
Paperback536 pages
Read More

Read More Reviews