Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

React Native Cookbook - Second Edition

By : Ward

3.2 (6)

React Native Cookbook

3.2 (6)

By: 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

Preface

Who this book is for

What this book covers

To get the most out of this book

Sections

Get in touch

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

Summary

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

Introduction

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

Introduction

Creating simple animations

Running multiple animations

Creating animated notifications

Expanding and collapsing containers

Creating a button with a loading animation

Conclusion

Adding Advanced Animations to Your App

Adding Advanced Animations to Your App

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Using images to mimic a video player

Images are an important part of any UI, whether we use them to display icons, avatars, or pictures. In this recipe, we'll use images to create a mock video player. We'll also display the icons from the local device and a large image from a remote server (hosted by Flickr).

Getting ready

In order to follow the steps in this recipe, let's create a new application. We're going to name it fake-video-player.

We're going to display a few images in our application to mimic a video player, so you'll need corresponding images for your application. I recommend using the icons I used by downloading them from the repository for this recipe on GitHub at https://github.com...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

React Native Cookbook

Search

Your notes and bookmarks