Book Image

React Native Cookbook

By : Crysfel Villa, Stan Bershadskiy
Book Image

React Native Cookbook

By: Crysfel Villa, Stan Bershadskiy

Overview of this book

<p>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.</p> <p>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.</p> <p>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.</p>

Related Content you might be interested in

Current Title:

Small book image
React Native Cookbook
Crysfel Villa | Stan Bershadskiy
Dec, 2016 | 536 pages
Small book image
Mastering React Native
Jacob Friedmann | Eric Masiello
Jan, 2017 | 496 pages
Small book image
React Native - Building Mobile Apps with JavaScript
Vladimir Novick
Aug, 2017 | 434 pages
Small book image
Getting Started with React Native
Tom Bray | Ethan Holmes
Dec, 2015 | 172 pages
Table of Contents (19 chapters)
React Native Cookbook
React Native Cookbook
Credits
Credits
Foreword
Foreword
About the Authors
About the Authors
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Preface
Preface
Free Chapter
1
Getting Started
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
2
Implementing Complex User Interfaces
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
3
Animating the User Interface
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
4
Working with Application Logic and Data
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
5
Implementing Redux
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
6
Adding Native Functionality
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
7
Architecting for Multiple Platforms
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
8
Integration with Applications
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
9
Deploying Our App
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
10
Automated Testing
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
11
Optimizing the Performance of Our App
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

Building a complex layout for tablets using flexbox

Flexbox is really convenient when it comes to creating responsive layouts. React Native uses flexbox as a layout system, and if you are already familiar with these concepts it will be really easy for you to start creating layout of any kind.

In this recipe, we will create a layout to display a list of blog posts. Each post will be a small card with an image, an excerpt, and a button to read more. We will use flexbox to arrange the posts on the main container based on the screen size; this will allow us to handle the screen rotation by properly aligning the cards as landscape or portrait.

Getting ready

In order to follow the steps in this recipe, it is necessary to create an empty app using the React Native CLI. We are going to name the new app ComplexLayout.

How to do it...

Let's start by creating all the files and folders we will need for this recipe:

  1. First, we need a src folder where we will write all our code; inside that folder we need a...

Previous Section
End of Section 4
Next Section