Sign In Start Free Trial

React Native Cookbook

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

Customer Reviews

3.2 (6)

5 star

33.3%

4 star

0

3 star

33.3%

2 star

16.7%

1 star

16.7%

Connecting the store to the view

So far, we have set up the state, we have included middleware, and we've defined actions, action creators, and reducers for interacting with a remote API. However, we are not able to show any of this data on the screen. In this recipe, we'll enable our component to access the store that we have created.

Getting ready

This recipe depends on all of the previous ones, so make sure to follow each recipe preceding this one.

In the first recipe of this chapter, we installed the react-redux library along with our other dependencies. In this recipe, we are finally going to make use of it.

We'll also be using a third-party library for generating random color hexes, which we'll use...

Search

Your notes and bookmarks