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

Running your app in a simulator/emulator

You have created a new project, and started running that project with Expo in the last step. Once we start making changes to our React Native code, wouldn't it be nice to see the results of those changes? Thanks to Expo, running your project in the installed iOS simulator or Android emulator has also been streamlined.

Running your app on an iOS simulator

Running your app in the Xcode simulator only takes a few clicks.

Open Xcode.
Open the Simulator from the menu bar: Xcode | Open Developer Tool | Simulator:

The app can be started with the Expo CLI in your Terminal if you run the following command:

expo start

The command will build your app and open the Expo Developer Tools in your web browser. In the Expo Developer Tools, select Run on iOS Simulator.

The first time you run a React Native app on the iOS simulator via Run on iOS Simulator, the Expo app will be installed on the simulator, and your app will automatically be opened within the Expo app. The simulated iOS will ask if you want to Open in "Expo"?. Choose Open:

Upon loading, you will see the Expo Developer menu. You can toggle between this menu and your React Native app by pressing command key + D on your keyboard:

There's more...

Once you have launched an app in the simulator, you'll be able to press the Run on iOS Simulator button without opening Simulator from Xcode. It should also remember your device choice. Opening Simulator from Xcode provides an easy way to choose your preferred iOS device to simulate.

You can toggle between your React Native app and the Expo Developer menu, a list of helpful features for development, by pressing command key + M on your keyboard. The Expo Developer menu should look something like this: