Debugging React Native Apps (Introduction) | React Native

Book Overview & Buying
Table Of Contents

React Native - The Practical Guide

By : Academind by Maximilian Schwarzmüller GmbH

Buy this Video

React Native - The Practical Guide

By: Academind by Maximilian Schwarzmüller GmbH

Buy this Video

Overview of this book

Mobile apps are one of the best ways to engage with users; no wonder everyone wants to build one! Wouldn’t it be great if you could use your web development knowledge, combined with your React knowledge, to build mobile apps with that? That’s exactly what React Native allows you to do! No need to learn Java, Android, Swift, Objective-C, or anything else. React and JavaScript is all you need to create awesome native mobile apps that work on both Android and iOS. That’s probably the reason why many global companies are using it to build their mobile apps! With this course, learn to create your own React Native apps, publish them to the Google Play Store and Apple App Store, and dive deep into the React Native ecosystem. Learn all about the theory behind React Native, its core concepts, how to build responsive designs that work on different device sizes, how to navigate around, use maps and the camera, and so much more! The best way to learn is by building a real app. We will build the “Favorite Places” app in this course, an app where users can share amazing pictures and the location where they took them. This app will allow you to see things such as using maps, the camera, user authentication, connecting to a server, and much more in action. By the end of this course, you will have developed React Native and JavaScript skills needed to build and deploy responsive mobile applications. The complete code bundle is available at https://github.com/packtpublishing/react-native---the-practical-guide

Getting Started

Welcome to This Course and What to Expect!

What Is React Native?

A Glance Under the Hood of React Native.

Creating React Native Projects: Expo CLI Versus React Native CLI

Creating a New React Native Project

Analyzing the Created Project

Running Our First App on a Real Device!

Setting Up a Local Development Environment

About This Course

React Native Basics [Course Goals App]

Module Introduction

Exploring Core Components and Component Styling

Working with Core Components

Styling React Native Apps

Exploring Layouts and Flexbox

React Native and Flexbox

Using Flexbox to Create Layouts

Flexbox - A Deep Dive

Improving the Layout

Handling Events

Managing a List of Course Goals (in Our Demo App)

iOS and Android Styling Differences

Making Content Scrollable with ScrollView

Optimizing Lists with FlatList

Splitting Components into Smaller Components

Utilizing Props

Working on the "Goal Input" Component

Handling Taps with the Pressable Component

Making Items Deletable and Using IDs

Adding an Android Ripple Effect and an iOS Alternative

Adding a Modal Screen

Styling the Modal Overlay

Opening and Closing the Modal

Working with Images and Changing Colors

App Finishing Touches

Module Summary

Debugging React Native Apps (Introduction)

Module Introduction

Handling Errors

Logging to the Console

Debugging JavaScript Remotely

Using the React DevTools

Using the Documentation

Diving Deeper into Components, Layouts, and Styling - Building a Mini-Game App

Module Introduction and What We will Build

Starting Setup and Analyzing the Target App

Setting Up Our Screen Components

Creating Custom Buttons

Styling for Android and iOS

Styling the "Number Input" Element

Configuring the TextInput Field

Adding Visual Feedback to the Buttons

Improving the Buttons

Coloring the Components and the Overall App

Adding a Linear Gradient

Adding a Background Image

Getting Started with Game Logic

Handling User Input and Showing an Alert Dialog

Switching Screens Programmatically

Starting Work on the Game Screen

Respecting Device Screen Restrictions with the SafeAreaView

Creating a Title Component

Managing Colors Globally

Creating, Using, and Displaying Random Numbers

Adding Game Control Buttons ("+" and "-") to the App

Checking for "Game Over"

Improving the Game Screen Visuals

Using "Cascading Styles"

Working with Icons (Button Icons)

Adding and Using Custom Fonts with React Native Apps

Adding a (Foreground) Image

Using and Styling Nested Text

Adding Logic to (Re)Start Games and Displaying a Summary Screen

Logging Game Rounds

Outputting Log Data with FlatList

Styling the Game Round Logs

Finishing Touches

Module Summary

Building Adaptive User Interfaces (Adapt to Platform and Device Sizes)

Module Introduction

Setting Dynamic Widths

Introducing the Dimensions API

Adjusting Image Sizes with the Dimensions API

Understanding Screen Orientation Problems

Setting Sizes Dynamically (for Different Orientations)

Managing Screen Content with KeyboardAvoidingView

Improving the Landscape Mode UI

Further Improvements with useWindowDimensions

Writing Platform-Specific Code with the Platform API

Styling the Status Bar

React Native Navigation with React Navigation [Meals App]

Module Introduction

What Is Navigation?

Getting Started with the App and Outputting Meal Categories

Displaying Items in a Grid

Getting Started with the React Navigation Package

Implementing Navigation Between Two Screens

Understanding the useNavigation Hook

Working with Route Parameters to Pass Data Between Screens

Displaying Meals

Adding Images and Styling

Styling Screen Headers and Backgrounds

Setting Navigation Options Dynamically

Adding and Configuring the Meal Details Screen

Outputting Content in the Meal Details Screen

Finishing the Meal Details Screen

Adding Header Buttons

Adding an Icon Button to a Header

Adding Drawer Navigation and Creating a Drawer

Configuring the Drawer Navigator and the Drawer

Adding, Configuring, and Using Bottom Tabs

Nesting Navigators

Bottom Tabs and App Finishing Touches

Module Summary

App-Wide State Management with Redux and Context API

Module Introduction

Getting Started with React's Context API

Managing App-Wide State with Context

Using the Created Context with useContext

Managing Favorite Meals with the Context API

Getting Started with Redux and Redux Toolkit

Working with Redux Slices

Managing Redux State and Dispatching Actions

Using Redux State in Components

Module Summary

Time to Practice - The Expense Tracker App

Module Introduction and What We will Build

The Starting Setup

Adding Navigation (with React Navigation) and Configuring Navigation

Adding Global Colors and Editing Navigation Configuration

Creating Key App Components to Display Expenses

Continuing Work on the Expense-Related Components

Adding Dummy Expense Data

Outputting a List of Expenses

Improving App Layout and Styling

Working on Expense List Items

Formatting Dates

Adding a Header Button and Making Expense Items Tappable

Navigating Programmatically Between Screens

Styling the Expense Management Screen

Supporting Different Editing Modes and Using Route Parameters

Adding a "Delete" Button

Adding Custom Buttons

Closing a Modal Programmatically

Managing App-Wide State with Context

Using Context from Inside Components

Deleting and Updating Expenses

Finishing Touches

Handling User Input

Module Introduction

Building a Custom Input Component

Creating an Overall Form

Configuring the Form Input Elements

Adding Styling

Setting the Form Layout

Handling User Input in a Generic Way

Managing Form State and Submission

Working with Entered Data

Setting and Using Default Values

Adding Validation

Providing Visual Validation Feedback

Adding Error Styling

Module Summary

Sending Http Requests

Module Introduction

Backend Setup (Firebase)

Installing Axios

Sending POST Http Requests

Fetching Backend Data (GET Requests)

Transforming and Using Fetched Data

Using Response Data from POST Requests

Updating and Deleting Backend Data (UPDATE and DELETE Requests)

Managing the Loading State

Handling Request Errors

Module Summary

User Authentication

Module Introduction

Demo App Walkthrough

How Does Authentication Work?

Backend Setup

Controlling Signup and Login Screens

Sending Authentication Requests to the Backend

Creating New Users

Logging Users In

Authentication Error Handling

Storing and Managing the User Authentication State (with Context)

Extracting the Authentication Token

Protecting Screens

Adding a Logout Functionality

Accessing Protected Resources

Storing Auth Tokens on the Device and Logging Users Automatically

Module Summary

Using Native Device Features (Camera, Location, and More)

Module Introduction

Adding a "Favorite Places" List

Editing the Favorite Place Items

Adding an "Add Place" Screen + Navigation

Adding a Header Button

Global Colors and Styling

Getting Started with a Custom Form

Adding and Configuring the Camera Package (for Native Camera Access)

Taking Photos on Android

Taking Photos on iOS + Managing Permissions

Showing an Image Preview

Creating a Custom Button

Getting Started with the Location Picker

Locating Users

Adding a Location Preview Map

Adding an Interactive Map (Google Maps and Apple Maps)

Allowing Map Interaction and Adding Markers

Confirming Picked Locations

Previewing Picked Locations

Adding a Form Submit Button

Managing Location and Image State in the Form

Converting Picked Locations to Human-Readable Addresses

Passing Entered Data to the "AllPlaces" Screen

Outputting a List of Places

Styling Place Items

SQLite: Getting Started and Initialization

Preparing Code to Insert Data into the SQLite Database

Inserting Places into the Database

Fetching Places from the Database

Adding the Place Details Screen

Fetching Place Detail Data from the Database

Showing a Readonly Map

Module Summary

Building React Native Apps without Expo

Module Introduction

How Exactly Does Expo Work?

Expo Alternatives

Setting Up Our System

Using Expo's Bare Workflow

Using Native Device Features with the Bare Workflow

Ejecting to the Bare Workflow

Creating Projects with the React Native CLI (no Expo)

Non-Expo Apps and Native Device Features

Module Summary

Publishing React Native Apps

Module Introduction

Publishing Apps: An Overview

Key Configuration Items and Considerations

Configuring App Names and Versions

A Quick Note About Environment Variables

Adding Icons and a Splash Screen

Building Expo Apps with EAS

EAS for iOS (Even on Windows Devices)

Building for iOS without Expo

Building for Android without Expo

Push Notifications

Module Introduction

What Are (Local) Notifications?

Adding the Expo Notification Package

Scheduling Notifications

Handling Incoming Notifications

Reacting to Incoming Notifications

Reacting to User Interaction with Incoming Notifications

Understanding Push Notifications

Push Notifications Setup

Using the Push Token

Sending Push Notifications

Module Summary

Course Roundup

Bonus: JavaScript Refresher

Module Introduction

JavaScript - A Summary

Core Syntax Refresher

let and const

Arrow Functions

Objects: Properties and Methods

Arrays and Array Methods

Arrays, Objects, and Reference Types

Spread Operator and Rest Parameters

Destructuring

Async Code and Promises

Wrap Up

Bonus: React.js Refresher

Module Introduction

What is React?

A Starting Project

Understanding JSX

Understanding Components

Working with Multiple Components

Working with Props

Rendering Lists of Data

Handling Events

Parent-Child Communication

Managing State

React Native - The Practical Guide

By : Academind by Maximilian Schwarzmüller GmbH

React Native - The Practical Guide

By: Academind by Maximilian Schwarzmüller GmbH

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access