React Native Cookbook: Recipes for solving common React Native development problems, 2nd Edition

✍ Scribed by Dan Ward

• Publisher: Packt Publishing
• Year: 2019
• Tongue: English
• Leaves: 898
• Edition: 2
• Category: Library

✦ Synopsis

Improve your React Native mobile development skills and transition from web to mobile development with this solution-packed guide

Key Features

• Learn strategies and techniques to face React Native mobile development challenges head-on
• Explore ways to use iOS and Android for React Native development to maximize code reuse and cohesion
• Build engaging user experiences with React Native

Book Description

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.

What you will learn

• Build UI features and components using React Native
• Create advanced animations for UI components
• Develop universal apps that run on phones and tablets
• Leverage Redux to manage application flow and data
• Expose both custom native UI components and application logic to React Native
• Employ open source third-party plugins to create React Native apps

Who this book is for

If you're a JavaScript developer looking for a practical guide for developing feature-rich mobile apps using React Native, this book is for you. Though not necessary, some experience of working with React will help you understand the React Native concepts covered in this book easily.

While React Native development can be done on a Windows machine, certain aspects, such as running your apps on iOS devices and in the iOS simulator, or editing native code with Xcode, can only be done with a Mac.

Table of Contents

1. Setting Up Your Environment
2. Creating a Simple React Native App
3. Implementing Complex User Interfaces – Section 1
4. Implementing Complex User Interfaces – Section 2
5. Implementing Complex User Interfaces -- Section3
6. Adding Basic Animations to Your App
7. Adding Advanced Animations to Your App
8. Working with Application Logic and Data
9. Implementing Redux
10. App Workflow and Third-Party Plugins
11. Adding Native Functionality - Part I
12. Adding Native Functionality - Part II
13. Integration with Native Applications
14. Deploying Your App
15. Optimizing the Performance of Your App

✦ Table of Contents

Title Page
Copyright and Credits
React Native Cookbook Second Edition
About Packt
Why subscribe?
Packt.com
Contributors
About the author
About the reviewer
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Sections
Getting ready
How to do it…
How it works…
There's more…
See also
Get in touch
Reviews
Setting Up Your Environment
Technical requirements
Installing dependencies
Installing Xcode
Installing Genymotion
Installing Node.js
Installing Expo
Installing Watchman
Initializing your first app
Running your app in a simulator/emulator
Running your app on an iOS simulator
Running your app on an Android emulator
Running your app on a real device
Running your app on an iPhone or Android
Summary
Further reading
Creating a Simple React Native App
Adding styles to elements
Getting ready
How to do it...
How it works...
There's more...
Using images to mimic a video player
Getting ready
How to do it...
How it works...
Creating a toggle button
Getting ready
How to do it...
How it works...
There's more...
Displaying a list of items
Getting ready
How to do it...
How it works...
There's more...
Using flexbox to create a layout
Getting ready
How to do it...
How it works...
There's more...
See also
Setting up and using navigation
Getting ready
How to do it...
How it works...
See also
Implementing Complex User Interfaces - Part I
Creating a reusable button with theme support
Getting ready
How to do it...
How it works...
Building a complex layout for tablets using flexbox
Getting ready
How to do it...
There's more...
See also
Including custom fonts
Getting ready
How to do it...
How it works...
See also
Using font icons
Getting ready
How to do it...
How it works...
See also
Implementing Complex User Interfaces - Part II
Dealing with universal applications
Getting ready
How to do it...
How it works...
See also
Detecting orientation changes
Getting ready
How to do it...
There's more...
Using a WebView to embed external websites
Getting ready
How to do it...
How it works...
Linking to websites and other applications
Getting ready
How to do it...
How it works...
See also
Creating a form component
Getting ready
How to do it...
How it works...
Implementing Complex User Interfaces - Part III
Introduction
Creating a map app with Google Maps
Getting ready
How to do it...
How it works...
There's more...
Creating an audio player
Getting ready
How to do it...
How it works...
There's more...
Creating an image carousel
Getting ready
How to do it...
How it works...
There's more...
Adding push notifications to your app
Getting ready
How to do it...
How it works...
There's more...
Implementing browser-based authentication
Getting ready
How to do it...
How it works...
See also
Adding Basic Animations to Your App
Introduction
Creating simple animations
Getting ready
How to do it...
How it works...
Running multiple animations
Getting ready
How to do it...
How it works...
Creating animated notifications
Getting ready
How to do it...
How it works...
There's more...
Expanding and collapsing containers
Getting ready
How to do it...
How it works...
See also
Creating a button with a loading animation
Getting ready
How to do it...
How it works...
Conclusion
Adding Advanced Animations to Your App
Introduction
Removing items from a list component
Getting ready
How to do it...
How it works...
See also
Creating a Facebook reactions widget
Getting ready
How to do it...
How it works...
Displaying images in fullscreen
Getting ready
How to do it...
How it works...
See also
Working with Application Logic and Data
Introduction
Storing and retrieving data locally
Getting ready
How to do it...
How it works...
See also
Retrieving data from a remote API
Getting ready
How to do it...
How it works...
Sending data to a remote API
Getting ready
How to do it...
How it works...
Establishing real-time communication with WebSockets
Getting ready
How to do it...
How it works...
There's more...
Integrating persistent database functionality with Realm
Getting ready
How to do it...
How it works...
Masking the application upon network connection loss
Getting ready
How to do it...
How it works...
Synchronizing locally persisted data with a remote API
Getting ready
How to do it...
How it works...
Logging in with Facebook
Getting ready
How to do it...
How it works...
Implementing Redux
Introduction
Installing Redux and preparing our project
Getting started
How to do it...
How it works...
Defining actions
Getting ready
How to do it...
How it works...
There's more...
Defining reducers
Getting ready
How to do it...
How it works...
Setting up the Redux store
How to do it...
How it works...
Communicating with a remote API
Getting ready
How to do it...
How it works...
Connecting the store to the view
Getting ready
How to do it...
How it works...
Storing offline content using Redux
Getting ready
How to do it...
How it works...
App Workflow and Third-Party Plugins
How this chapter works
React Native development tools
Expo
React Native CLI
CocoaPods
Planning your app and choosing your workflow
How to do it...
Expo CLI setup
Using NativeBase for cross-platform UI components
Getting ready
Using a pure React Native app (React Native CLI)
Using an Expo app
How to do it... 
How it works...
Using glamorous-native for styling UI components
Getting ready
How to do it... 
How it works...
Using react-native-spinkit for adding animated loading indicators
Getting started
How to do it...
How it works...
There's more...
Using react-native-side-menu for adding side navigation menus
Getting ready
How to do it...
How it works...
Using react-native-modalbox for adding modals
Getting ready
How to do it...
How it works...
Adding Native Functionality - Part I
Introduction
Exposing custom iOS modules
Getting ready
How to do it...
How it works...
There's more...
See also
Rendering custom iOS view components
How to do it...
How it works...
Exposing custom Android modules
Getting ready
How to do it...
How it works...
Rendering custom Android view components
How to do it...
How it works...
Handling the Android back button
Getting ready
How to do it...
How it works...
Adding Native Functionality - Part II
Introduction
Reacting to changes in application state
How to do it...
How it works...
Copying and pasting content
Getting ready
How to do it...
How it works...
Receiving push notifications
Getting ready
How to do it...
How it works...
Authenticating via touch ID or fingerprint sensor
Getting ready
How to do it...
How it works...
Hiding application content when multitasking
Getting ready
How to do it...
How it works...
Background processing on iOS
Getting ready
How to do it...
How it works...
Background processing on Android
Getting ready
How to do it...
How it works...
Playing audio files on iOS
Getting ready
How to do it...
How it works...
Playing audio files on Android
Getting ready
How to do it...
How it works...
Integration with Native Applications
Introduction
Combining a React Native app and a Native iOS app
Getting ready
How to do it...
How it works...
See also
Communicating from an iOS app to React Native
Getting ready
How to do it...
Communicating from React Native to an iOS app container
Getting ready
How to do it...
How it works...
Handling being invoked by an external iOS app
Getting ready
How to do it...
How it works...
Embedding a React Native app inside a Native Android app
Getting ready
How to do it...
How it works...
Communicating from an Android app to React Native
Getting ready
How to do it...
How it works...
Communicating from React Native to an Android app container
Getting ready
How to do it...
How it works...
Handling being invoked by an external Android app
How to do it...
How it works...
Deploying Your App
Introduction
Deploying development builds to an iOS device
Getting ready
How to do it...
How it works...
Deploying development builds to an Android device
Getting ready
How to do it...
There's more...
How it works...
Deploying test builds to HockeyApp
Getting ready
How to do it...
How it works...
Deploying iOS test builds to TestFlight
Getting ready
How to do it...
How it works...
Deploying production builds to the Apple App Store
Getting ready
How to do it...
How it works...
Deploying production builds to Google Play Store
Getting ready
How to do it...
How it works...
Deploying Over-The-Air updates
Getting ready
How to do it...
How it works...
Optimizing React Native app size
Getting ready
How to do it...
How it works...
Optimizing the Performance of Your App
Introduction
Optimizing our JavaScript code
Getting ready
How to do it...
How it works...
Optimizing the performance of custom UI components
Getting ready
How to do it...
How it works...
See also
Keeping animations running at 60 FPS
Getting ready
How to do it...
How it works
There's more...
Getting the most out of ListView
Getting ready
How to do it...
How it works...
See also
Boosting the performance of our app
How to do it...
How it works...
Optimizing the performance of native iOS modules
Getting ready
How to do it...
How it works...
Optimizing the performance of native Android modules
Getting ready
How to do it...
How it works...
Optimizing the performance of native iOS UI components
Getting ready
How to do it...
How it works...
Optimizing the performance of native Android UI components
Getting ready
How to do it...
How it works...
Other Books You May Enjoy
Leave a review - let other readers know what you think