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.

Related Content you might be interested in

Current Title:

Small book image
React Native Cookbook - Second Edition
Daniel Ward
Jan, 2019 | 592 pages
Small book image
Mastering React Native
Eric Masiello | Jacob Friedmann
Jan, 2017 | 496 pages
Small book image
React Native - Building Mobile Apps with JavaScript
Vladimir Novick
Aug, 2017 | 434 pages
Small book image
Getting Started with React Native
Ethan Holmes | Tom Bray
Dec, 2015 | 172 pages
Table of Contents (17 chapters)
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
1
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
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9
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
10
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
11
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
12
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
13
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
14
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
15
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
16
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Detecting orientation changes

When building complex interfaces, it's very common to render different UI components, based on the device's orientation. This is especially true when dealing with tablets.

In this recipe, we will render a menu based on screen orientation. In landscape, we will render an expanded menu with icons and texts, and in portrait, we will only render the icons.

Getting ready

To support orientation changes, we are going to use Expo's helper utility called ScreenOrientation.

We will also use the FontAwesome component provided by the Expo package @expo/vector-icons. The Using font icons recipe in Chapter 2, Creating a Simple React Native App, describes how to use this component.

Before we get...

Previous Section
End of Section 3
Next Section