Mastering React Native: A Beginner's Guide

Cover
Half Title
Series Page
Title Page
Copyright Page
Table of Contents
Mastering Computer Science Series Preface
About the Editor
Chapter 1 Getting Started with React Native
In This Chapter
What Is React Native
JSX
Building and Testing the React Native App
About React Native Release
Prerequisite
Installation
History of React Native
Various Steps to Optimizing the Performance of the React Native Applications
Reduce System Size
Reduce Image Size
Photo Caching
Improving Application Release Time
JSON Data Upgrade
Do Not Give if Not Needed
Memory Leaks
Animation in React Native
Navigation Development
Lack of Multithreading
Improving Screen Orientations
Make Maps Better
Benefits of React Native
Advantages
Key Benefits
Community Support
Proper Performance
Reusable Code and Advanced Components
Benefits of Live and Hot Reloads
Expensive Solution
Simplified UI
External Plugin Support
Modular Architecture
Growing Stability and Reliability
Access to Libraries and Ready-to-Do Solutions
Disadvantages of Native React
Immaturity
Hard to Learn
Low Security
Complex UI
Long Initialization Time
Memory Management
Conclusion
Chapter 2 Working with React Native
In This Chapter
How Does React Native Work?
Process Involved in Working of React Native
React Native Architecture
Development Process
React Native Features
NPM Repository Support
Reuse of Code
Flexible Planning Language
A Powerful Community
Supports 3D Group Libraries
Use High Performance in Mobile Environments
HMR (Hot Module Replacement)
UI-rich Skills
The Future of React Native
Development of Broadcast Model
Advances in Platform-Agnosticism
Ease of the Bridge
Async Skills Expansion
What Does the Development Process Look Like?
React Native Component Life Cycle Phases
Mounting Phase
Constructor()
static getDerivedStateFromProps()
render()
ComponentDidMount()
Updating Phase
Static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
Unmounting Phase
componentWillUnmount()
Error Handling Phase
getDerivedStateFromError()
componentDidCatch()
Creates Components in a Traditional Responsive Way
What Is the Component of React Native?
React Native – Class Component
Description
React Native – Function Component
Description
Host Platform APIs
Platform Module
Detecting Android version
Getting iOS Version
Platform-Specific Extensions
Native-specific Extensions (i.e. Sharing Code with NodeJS and Web)​
Conclusion
Chapter 3 Building Your First Application
In This Chapter
Installation of React Native CLI
Installing Windows Terminal
Ways to Install Windows Terminal
Installing Git
How to Download Git?
Install Git
Installing Node​.​js and NPM package manager
Introduction
Requirements
Installing Node​.​js and NPM on Windows System
What Is NPM?
How to Install or Update NPM
Installing React Native CLI
Installing Python
React Native CLI
Installing Android JDK
JAVA_HOME Flexible Environment
Installing Android Studio
Android Studio: https://developer​.android​.com​/studio
Android Studio Configuration
Installing Android SDK
Android Studio SDK configuration
Installing Visual Studio Code (IDE)
How to Download and Install Visual Studio Code?
How to Install VStudio Code on Windows?
Why Do You Use React Native?
Setting Up Your Environment
Running React Native Application
Modifying Your App
Exploring the Sample code
Building an App
Building an Android App with React Native
STEP 1: Blank React Native Project Creation
STEP 2: Connect Android Device
STEP 3: Getting Information from the Moviedb API
STEP 4: Defining the fetchMoviesData Method
STEP 5: Creating the Life Cycle componentDidMount Method
STEP 6: View Creation
STEP 7: Reconstructing the Return Method
STEP 8: Running the App
Conclusion
React Native – Default Application
Props and State Definition
State
Difference between State and Props
Using State
Updating State
Build Your First App with React Native
Creating an App
At the Start of NPM
What Is Cross-Platform Development?
What Are Some of the Features of Cross-Platform Development?
A Lot of Listeners
Stability of the Court
Reusable Code
Rapid Development
Reduced Costs
Requires Additional Technology to Ensure High Performance
Chapter Summary
Chapter 4 Components for Mobile Development
In This Chapter
Components for Mobile
Analogies between HTML and Native Components
The Text Component
The Image Component
Working with Touch and Gestures
Using TouchableHighlight
Touch/PressDemo​.​js illustrates the use of TouchableHighlight
GestureResponder System
PanResponder
Creating a PanResponder requires us to pass a set of callbacks
Attaching the PanResponder using spread syntax
Touch/PanDemo​.​js explain the use of PanResponder
Choosing a Touch Management Method
Working with Organizational Components
Using ListView
For _renderRow, we only pass along the suitable data to the
Adding methods render to header and footer elements in BookListV2​.​js
Bestsellers/BookItem​.​js
Using Navigators
Other Organizational Components
Platform-Specific Components
iOS- or Android-Only Components
Components with Platform-Specific Versions
Switch​.ios​​.js
CrossPlatform​.​js Makes Use of the Component
When to Use Platform-Specific Components
Summary
Conclusion
Chapter 5 Styles and Layouts
In This Chapter
1. Styles Are Important: Make Them Easy to Find
2. Get Atomic!
3. Styles Are Important: Make Them Easy to Use
4. Keep Styles Close
Caveats
Container Component
Presentational Component
React Native Style Method
Style Props
React Native Application: The Flexbox Architecture
Using StyleSheet
Styled-Component in React Native
Using React Native SVG to Draw Certain Conditions
Organization and Inheritance
Style Inheritance of React Native
Realistic Way to Implement Custom Fonts to Your App
Creating React Application
Step to Run Application
Output: Positioning and Designing Layouts
Positioning
Starting with the View
Positioning Basics
Layout with Flexbox
Flex​
Flex Direction​
Layout Direction​
Justify Content​
Align Items​
Align Yourself
Align Content​
Flex Wrap​
Flex Basis, Grow, and Shrink​
Width and Height​
Absolute and Relative Layout​
Conclusion
Chapter 6 Platform APIs
In This Chapter
Platform APIs
What Is an API Platform?
Adding to the Traditional Look in Managing the Full Life API
Using Geolocation
Detecting Geolocation Support
Using getCurrentPosition
Position Error Timeout
Managing Position Errors
Tracking Position Changes
Setting Links Using Chromium Developer Tools
How the Position Is Determined
Nearby iOS Location
Find User Location
Using the Geolocation API
Handling Errors and Rejections
Showing the Result in the Map
Location-Specific Information
The getCurrentPosition() Method – Return Data
Geolocation Object – Other interesting Methods
@capacitor/geolocation
Install
iOS
Android
Variables
API
getCurrentPosition(…)
watchPosition(…)
clearWatch(…)
checkPermissions()
requestPermissions(…)
Interfaces
Type Aliases
Accessing the User’s Images and Camera
Create the Page
Add File Input
Add a Canvas
Respond to Change
Draw into the Canvas
Options
Storing Persistent Data with asyncstore
Importing AsyncStorage Library
Persisting Data
Fetching Data
Methods​
getItem()​
setItem()​
removeItem()​
mergeItem()​
clear()​
getAllKeys()​
flushGetRequests()​
multiGet()​
multiSet()​
multiRemove()​
multiMerge()​
Conclusion
Chapter 7 React Native Modules
In This Chapter
Modules
Native Modules Intro
Installing JavaScript Libraries with NPM
What Exactly Is NPM?
How to Download NPM?
How to Download Packages Using NPM?
How to Download Packages Globally with NPM
How to Use the package
iOS Native Modules
Create a Calendar Native Module​
Setup​
Create Custom Native Module Files​
Module Name​
Export a Native Method to JavaScript​
Synchronous Methods​
Test What You Have Built​
Building as You Iterate​
Recap
Beyond a Calendar Native Module​
Better Native Module Export​
Argument Types​
Exporting Constants​
Callbacks​
Promises​
Sending Events to JavaScript​
Threading​
Dependency Injection​
Exporting Swift​
Reserved Method Names
Native Modules for Android
Create a Calendar Native Module​
Setup​
Create Custom Native Module File​
Module Name​
Export a Native Method to JavaScript​
Synchronous Methods​
Register the Module (Android Specific)​
Test What You Have Built​
Building as You Iterate​
Recap​
Beyond a Calendar Native Module​
Better Native Module Export​
Argument Types​
Exporting Constants​
Callbacks​
Promises​
Sending Events to JavaScript​
Getting Activity Result from startActivityForResult​
Listening to Lifecycle Events​
Threading​
Cross-Platform Native Modules
What Are the Advantages of Cross-Platform Application Development Frameworks?
Code Reusability
Reduced Costs and Resources
Easy Deployment and Maintenance
Wider Market Reach
Uniform Design
Conclusion
Chapter 8 Debugging and Developer Tools
In This Chapter
Debugging and Developer Tools
Enabling Fast Refresh
Enabling Keyboard Shortcuts​
LogBox​
Console Errors and Warnings​
Unhandled Errors​
Syntax Errors​
Chrome Developer Tools​
Debugging Using a Custom JavaScript Debugger​
Safari Developer Tools​
React Developer Tools​
Integration with React Native Inspector​
Inspecting Component Instances​
Performance Monitor​
Debugging Application State​
Native Debugging
Projects with Native Code Only
Accessing Console Logs​
Debugging on a Device with the Chrome Developer Tools​
Debugging Native Code​
Javascript Debugging Practices Translated
Best Practices
Beautify to Debug
Debugging Methods
Console Method
Using a Debugger
Breakpoints
Unconditional Breakpoints
Using a Breakpoint List
Adding Logpoints
Unsetting Breakpoints
Using Watches
Using Call Stack
Debugging Tools
Rookout
NodeJS Inspector
Using a Code Editor
Framework Debugging Tools (Angular, React, Vue)
JSON Formatter and Validator
“use strict” Mode
React Native Debugging Tools
Top 6 Debugging Tools for React Native Developers
Chrome’s DevTools
React Developer Tools
React Native Debugger
Redux DevTools
Nuclide – Atom’s Plug-in
Reactotron
Debugging Beyond JavaScript
The Basics of Console Logging
Beyond the Basics of Console Logging
console​.tab​le()
console​.asse​rt()
console​.tra​ce()
console​.cou​nt()
console​.memo​ry
console​.ti​me()
Conclusion
Chapter 9 Putting It All Together
In This Chapter
The Flashcard Application
React Native Flashcards
How to Install
How to Run
Modeling and Storing Data
Storing Data in the React Native Local Storage with Examples
Using the Navigator
React Navigation 5.0
Installing React Navigation
The React Native Stack Navigator
React Native Navigation Examples
Using Stack Navigator to Navigate between the Screen Components
Using Tab Navigation
Using Drawer Navigation
Conclusion
Chapter 10 Deploying to the iOS App Store
In This Chapter
Comply with the Developer’s Specifications
Choose an iOS Programming Language
Tap into APIs and Libraries
Expand into the Cloud
Test Locally, Test Globally
Publish Your App to the App Store
Creating an Xcode Project for an App
Overview
Prepare Configuration Information
Important
Create a Project
Manage Files in the Main Window
Beta Testing With Testflight
Testflight Is Used for Beta Testing
Advantages of Beta Testing
Beta Testing by Using Testflight
Main Functions of Testflight
Algorithm for Testing the Application’s Beta Versions
Internal Testers
External Testers and Groups
Using E-mail to Invite Testers
Using Public Links to Invite Testers
Test Information
Getting Feedback
Submitting the Application for Review
Code Signing: Create iOS Distribution Provisioning Profile and Distribution Certificate
When you attach a new device to your Mac, Xcode detects it and adds it to your team provisioning profile automatically. It’s worth noting that in order for your app to run on a device, the device must register on your team provisioning profile.
Create App Store Connect Record for Your App
For Paid Apps
Add a New App
Archive and Upload App Using Xcode
Configure App’s Metadata and Further Details in its App Store Connect Record
Submit Your App for Review
Check on the Status of App
How Long Does It Take to Get Approval from an App Store?
If Your Application Has Been Rejected
If Your Application Has Been Approved
Summary
Conclusion
Chapter 11 Deploying Android Applications
In This Chapter
List the Pods, with Their Attached Labels
Select Pods with the Label Provided
Deploy a Webserver Using the CLI
List ReplicaSets and Pods
Exposing an Application
Accessing an Application
Life and Readiness to Test
Building the APK for Release
Using the React Native CLI
STEP 1: Generate a Keystore
STEP 2: Adding Keystore to Your Project
STEP 3: Uninstall the APK Generation
Generate React Native Release Build with Android Studio
How to Send E-mail From React Native Application
Distributing the React Native App with Microsoft App Center
Getting Started
Three Ways to Send E-mails from React Native App
Configuring Linking API
Working with Your Own Server
Using Third-Party Tools
Wrap Up
Submit Your Request to the Google Play Store
Produces the Upload Key
Add a Signing Setting to Gradle for Your App
Generating the Release AAB​
Testing the Release Build of Your App​
Publishing in Other Stores
Enables Proguard to Reduce APK Size (Optional)
Modify Old Android React Native Apps to Use Google Play Signing App
Conclusion
Appraisal
Bibliography
Index