Book Image

React Native Cookbook - Second Edition

By : Daniel Ward

4 (1)

Book Image

React Native Cookbook - Second Edition

4 (1)

By: Daniel Ward

Overview of this book

If you are a developer looking to create mobile applications with maximized code reusability and minimized cost, React Native is what you need. With this practical guide, you’ll be able to build attractive UIs, tackle common problems in mobile development, and achieve improved performance in mobile environments. This book starts by covering the common techniques for React Native customization and helps you set up your development platforms. Over the course of the book, you’ll work through a wide variety of recipes that help you create, style, and animate your apps with built-in React Native and custom third-party components. You’ll also develop real-world browser-based authentication, build a fully functional audio player, and integrate Google Maps in your apps. This book will help you explore different strategies for working with data, including leveraging the popular Redux library and optimizing your app’s dataflow. You’ll also learn how to write native device functionality for new and existing React Native projects and how app deployment works. By the end of this book, you'll be equipped with tips and tricks to write efficient code and have the skills to build full iOS and Android applications using React Native.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Setting Up Your Environment

Setting Up Your Environment

Technical requirements

Installing dependencies

Installing Android Studio

There's more...

Initializing your first app

Running your app in a simulator/emulator

Running your app on a real device

Further reading

Creating a Simple React Native App

Creating a Simple React Native App

Adding styles to elements

Using images to mimic a video player

Creating a toggle button

Displaying a list of items

Using flexbox to create a layout

Setting up and using navigation

Implementing Complex User Interfaces - Part I

Implementing Complex User Interfaces - Part I

Creating a reusable button with theme support

Building a complex layout for tablets using flexbox

Including custom fonts

Using font icons

Implementing Complex User Interfaces - Part II

Implementing Complex User Interfaces - Part II

Dealing with universal applications

Detecting orientation changes

Using a WebView to embed external websites

Linking to websites and other applications

Creating a form component

Implementing Complex User Interfaces - Part III

Implementing Complex User Interfaces - Part III

Creating a map app

Creating an audio player

Creating an image carousel

Adding push notifications to your app

Implementing browser-based authentication

Adding Basic Animations to Your App

Adding Basic Animations to Your App

Creating simple animations

Running multiple animations

Creating animated notifications

Expanding and collapsing containers

Creating a button with a loading animation

Adding Advanced Animations to Your App

Adding Advanced Animations to Your App

Removing items from a list component

Creating a Facebook reactions widget

Displaying images in fullscreen

Working with Application Logic and Data

Working with Application Logic and Data

Storing and retrieving data locally

Retrieving data from a remote API

Sending data to a remote API

Establishing real-time communication with WebSockets

Integrating persistent database functionality with Realm

Masking the application upon network connection loss

Synchronizing locally persisted data with a remote API

Logging in with Facebook

Implementing Redux

Implementing Redux

Installing Redux and preparing our project

Defining actions

Defining reducers

Setting up the Redux store

Communicating with a remote API

Connecting the store to the view

Storing offline content using Redux

App Workflow and Third-Party Plugins

App Workflow and Third-Party Plugins

How this chapter works

React Native development tools

Planning your app and choosing your workflow

Using NativeBase for cross-platform UI components

Using glamorous-native for styling UI components

Using react-native-spinkit for adding animated loading indicators

Using react-native-side-menu for adding side navigation menus

Using react-native-modalbox for adding modals

Adding Native Functionality - Part I

Adding Native Functionality - Part I

Exposing custom iOS modules

Rendering custom iOS view components

Exposing custom Android modules

Rendering custom Android view components

Adding Native Functionality - Part II

Adding Native Functionality - Part II

Reacting to changes in application state

Copying and pasting content

Authenticating via touch ID 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

Integration with Native Applications

Integration with Native Applications

Combining a React Native app and a Native iOS app

Communicating from an iOS app to React Native

Communicating from React Native to an iOS app container

Handle being invoked by an external iOS app

Combining a React Native app and a native Android app

Communicating from an Android app to React Native

Communicating from React Native to an Android app container

Handle being invoked by an external Android app

Deploying Your App

Deploying Your App

Deploying development builds to an iOS device

Deploying development builds to an Android device

Deploying test builds to HockeyApp

Deploying iOS test 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 app size

Optimizing the Performance of Your App

Optimizing the Performance of Your App

Optimizing our JavaScript code

Optimizing the performance of custom UI components

Keeping animations running at 60 FPS

Getting the most out of ListView

Boosting the performance of our app

Optimizing the performance of native iOS modules

Optimizing the performance of native Android modules

Optimizing the performance of native iOS UI components

Optimizing the performance of native Android UI components

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

4 (1)

5 star

0

4 star

100%

3 star

0

2 star

0

1 star

0

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 layouts of any kind.

As discussed in the previous chapter, there are some differences between the way flexbox works in React Native as compared to how it works in CSS. For more information on the differences between React Native and CSS flexbox, please refer to the How it works... section of the Using flexbox to create a layout recipe in Chapter 2, Creating a Simple React Native App.

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