React Native Cookbook

React Native Cookbook

By : Crysfel Villa, Stan Bershadskiy

Buy this Book

React Native Cookbook

By: Crysfel Villa, Stan Bershadskiy

Buy this Book

Overview of this book

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

React Native Cookbook

Credits

Foreword

About the Authors

About the Reviewer

www.PacktPub.com

Customer Feedback

Preface

Free Chapter

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

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

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

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

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

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

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

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

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

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

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

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Loading animation

In this recipe, we will continue working with the LayoutAnimation class. Here we will create a button when the user presses the button we will show a loading indicator and animate the styles.

Getting ready

Before we start, we need to create an empty app. We are going to call it ButtonLoading, feel free to use any other name, just make sure to use the correct name when registering the bootstrap component.

In addition, we need to create the src/MainApp.js and src/Button/index.js files.

How to do it...

Open the index.ios.js file, remove the current code and add the following. Make sure to use the name of the app, in this case, ButtonLoading:

        import React from 'react'; 
        import { AppRegistry } from 'react-native'; 
        import MainApp from './src/MainApp'; 
 
        AppRegistry.registerComponent('ButtonLoading', () => MainApp);

Open the index.android.js file, remove the existing code and add the following. The code is a little bit different...

React Native Cookbook

By : Crysfel Villa, Stan Bershadskiy

React Native Cookbook

By: Crysfel Villa, Stan Bershadskiy

Overview of this book

Related Content you might be interested in

Current Title:

React Native Cookbook

Mastering React Native

React Native - Building Mobile Apps with JavaScript

Getting Started with React Native

Loading animation

Getting ready

How to do it...