Running Our First App On A Real Device! | Academind

Autoplay
Autocomplete

Previous Lesson Complete and Continue

React Native - The Practical Guide

Getting Started

Welcome To This Course & What To Expect! (1:05)
What Is React Native? (3:27)
A Glance Under The Hood Of React Native (5:05)
Creating React Native Projects: Expo CLI vs React Native CLI (5:56)
Creating a New React Native Project (5:49)
Analyzing The Created Project (5:15)
Running Our First App On A Real Device! (4:20)
Setting Up A Local Development Environment (9:26)
About This Course (6:54)
Course Resources, Code Snapshots & How To Use

React Native Basics [COURSE GOALS APP]

Module Introduction (1:44)
Exploring Core Components & Component Styling (7:52)
Working With Core Components (7:00)
Styling React Native Apps (10:13)
React Native: Core Components, Styling & Colors - More Information
Exploring Layouts & Flexbox (3:19)
React Native & Flexbox (2:31)
Using Flexbox To Create Layouts (5:08)
Flexbox - A Deep Dive (12:19)
Improving The Layout (7:12)
Handling Events (7:29)
Managing A List Of Course Goals (in our Demo App) (7:10)
iOS & Android Styling Differences (8:50)
Making Content Scrollable with ScrollView (6:15)
Optimizing Lists with FlatList (13:41)
Splitting Components Into Smaller Components (5:11)
Utilizing Props (2:33)
Working on the "Goal Input" Component (9:40)
Handling Taps with the Pressable Component (3:34)
Making Items Deletable & Using IDs (5:17)
Adding an Android Ripple Effect & an iOS Alternative (4:52)
Adding a Modal Screen (6:57)
Styling the Modal Overlay (5:41)
Opening & Closing the Modal (2:30)
Working with Images & Changing Colors (6:04)
App Finishing Touches (7:15)
Module Summary (3:32)

Debugging React Native Apps (Introduction)

Module Introduction (1:17)
Handling Errors (4:37)
Logging to the Console (1:52)
Debugging JavaScript Remotely (3:05)
Using the React DevTools (3:27)
Using the Documentation (0:34)

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

Module Introduction & What We'll Build (2:05)
Starting Setup & Analyzing the Target App (3:03)
Setting Up our Screen Components (5:39)
Creating Custom Buttons (6:58)
Styling for Android & iOS (11:16)
Styling the "Number Input" Element (6:52)
Configuring the TextInput Field (3:21)
Adding Visual Feedback to the Buttons (15:46)
Improving the Buttons (7:38)
Coloring the Components & The Overall App (3:19)
Adding a Linear Gradient (4:02)
Adding a Background Image (7:03)
Getting Started with the Game Logic (7:10)
Handling User Input & Showing an Alert Dialog (7:30)
Switching Screens Programmatically (7:11)
Starting Work on the Game Screen (4:45)
Respecting Device Screen Restrictions with the SafeAreaView (3:06)
Creating a Title Component (4:37)
Managing Colors Globally (6:53)
Creating, Using & Displaying Random Numbers (12:43)
Adding Game Control Buttons ("+" & "-") to the App (15:27)
Checking for "Game Over" (11:12)
Improving the Game Screen Visuals (11:39)
Using "Cascading Styles" (5:45)
Working with Icons (Button Icons) (4:08)
Adding & Using Custom Fonts with React Native Apps (7:03)
Adding a (Foreground) Image (9:01)
Using & Styling Nested Text (4:52)
Adding Logic to (Re-)Start Games & Displaying a Summary Screen (6:58)
Logging Game Rounds (5:51)
Outputting Log Data with FlatList (2:49)
Styling the Game Round Logs (8:10)
Finishing Touches (4:33)
Module Summary (2:56)

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

Module Introduction (4:05)
Setting Dynamic Widths (4:29)
Introducing the Dimensions API (6:39)
Adjusting Image Sizes with the Dimensions API (4:04)
Understanding Screen Orientation Problems (3:16)
Setting Sizes Dynamically (for different Orientations) (7:55)
Managing Screen Content with KeyboardAvoidingView (5:49)
Improving the Landscape Mode UI (7:54)
Further Improvements with useWindowDimensions (4:35)
Writing Platform-specific Code with the Platform API (8:59)
Styling the Status Bar (2:08)

React Native Navigation with React Navigation [MEALS APP]

Module Introduction (1:28)
What Is Navigation? (4:21)
Getting Started with the App & Outputting Meal Categories (9:31)
Displaying Items in a Grid (14:28)
Getting Started with the React Navigation Package (9:44)
Implementing Navigation Between Two Screens (8:30)
Setting the Default Screen
Understanding the useNavigation Hook (3:38)
Working with Route Parameters To Pass Data Between Screens (6:36)
Displaying Meals (7:51)
Adding Images & Styling (17:10)
Styling Screen Headers & Backgrounds (7:59)
Setting Navigation Options Dynamically (9:04)
Adding & Configuring the Meal Details Screen (8:57)
Outputting Content in the Meal Detail Screen (9:23)
Finishing the Meal Detail Screen (18:57)
Adding Header Buttons (6:55)
Adding an Icon Button to a Header (4:50)
Adding Drawer Navigation & Creating a Drawer (9:31)
Configuring the Drawer Navigator & The Drawer (10:09)
Adding, Configuring & Using Bottom Tabs (6:29)
Nesting Navigators (13:04)
Bottom Tabs & App Finishing Touches (3:52)
Module Summary (2:42)

App-wide State Management with Redux & Context API

Module Introduction (3:04)
Getting Started with React's Context API (5:22)
Managing App-wide State with Context (4:59)
Using the Created Context with useContext (5:11)
Managing Favorite Meals with the Context API (9:39)
Getting Started with Redux & Redux Toolkit (4:45)
Working with Redux Slices (7:02)
Managing Redux State & Dispatching Actions (5:13)
Using Redux State in Components (1:45)
Module Summary (1:15)

Time To Practice - The Expense Tracker App

Module Introduction & What We'll Build (2:21)
The Starting Setup (6:17)
Adding Navigation (with React Navigation) & Configuring Navigation (8:27)
Adding Global Colors & Editing Navigation Configuration (10:03)
Creating Key App Components to Display Expenses (6:17)
Continuing Work on the Expense-related Components (6:48)
Adding Dummy Expense Data (5:37)
Outputting a List of Expenses (4:44)
Improving App Layout & Styling (7:50)
Working on Expense List Items (13:24)
Formatting Dates (4:41)
Adding a Header Button & Making Expense Items Tappable (11:32)
Navigating Programmatically Between Screens (5:16)
Styling The Expense Management Screen (3:06)
Supporting Different Editing Modes & Using Route Parameters (7:00)
Adding a "Delete" Button (5:34)
Adding Custom Buttons (9:40)
Closing A Modal Programmatically (3:21)
Managing App-wide State With Context (18:17)
Using Context From Inside Components (8:18)
Deleting & Updating Expenses (6:32)
Finishing Touches (4:25)

Handling User Input

Module Introduction (1:26)
Building a Custom Input Component (8:34)
Creating an Overall Form (5:57)
Configuring the Form Input Elements (4:08)
Adding Styling (7:40)
Setting the Form Layout (6:41)
Handling User Input in a Generic Way (9:56)
Managing Form State & Submission (4:54)
Working with Entered Data (5:20)
Setting & Using Default Values (7:08)
Adding Validation (6:38)
Providing Visual Validation Feedback (9:18)
Adding Error Styling (4:54)
Module Summary (1:41)

Sending Http Requests

Module Introduction (2:22)
Backend Setup (Firebase) (3:29)
Installing Axios (2:12)
Sending POST Http Requests (6:34)
Fetching Backend Data (GET Requests) (9:25)
Transforming & Using Fetched Data (8:19)
Using Response Data from POST Requests (5:43)
Updating & Deleting Backend Data (UPDATE & DELETE Requests) (7:50)
Managing the Loading State (8:57)
Handling Request Errors (12:01)
Module Summary (0:58)

User Authentication

Module Introduction (1:59)
Demo App Walkthrough (3:56)
How Does Authentication Work? (2:58)
Backend Setup (5:34)
Controlling Signup & Login Screens (4:39)
Sending Authentication Requests to the Backend (5:19)
Creating New Users (5:39)
Logging Users In (6:30)
Authentication Error Handling (3:49)
Storing & Managing the User Authentication State (with Context) (7:13)
Extracting the Authentication Token (4:16)
Protecting Screens (6:57)
Adding a Logout Functionality (3:38)
Accessing Protected Resources (10:17)
Storing Auth Tokens on the Device & Logging Users In Automatically (11:46)
A Note About Token Expiration
Module Summary (2:12)

Using Native Device Features (Camera, Location & More)

Module Introduction (2:36)
Adding a "Favorite Places" List (8:54)
Editing the Favorite Place Items (7:59)
Adding an "Add Place" Screen + Navigation (6:34)
Adding a Header Button (7:17)
Global Colors & Styling (5:03)
Getting Started with a Custom Form (5:59)
Adding & Configuring the Camera Package (for Native Camera Access) (6:19)
Taking Photos on Android (6:08)
Taking Photos on iOS + Managing Permissions (8:28)
Showing an Image Preview (6:41)
Creating a Custom Button (6:00)
Getting Started with the Location Picker (5:33)
Locating Users (9:06)
Adding a Location Preview Map (12:24)
Adding an Interactive Map (Google Maps & Apple Maps) (8:32)
Allowing Map Interaction & Adding Markers (5:10)
Confirming Picked Locations (7:38)
Previewing Picked Locations (9:15)
Adding a Form Submit Button (4:44)
Managing Location & Image State in the Form (9:30)
Converting Picked Locations to Human-Readable Addresses (9:45)
Passing Entered Data to the "AllPlaces" Screen (5:20)
Outputting a List Of Places (4:39)
Styling Place Items (6:29)
SQLite: Getting Started & Initialization (16:11)
Preparing Code to Insert Data into the SQLite Database (7:09)
Inserting Places into the Database (3:17)
Fetching Places from the Database (9:35)
Adding the Place Details Screen (9:15)
Fetching Place Detail Data from the Database (8:36)
Showing a Readonly Map (9:09)
Module Summary (2:28)

Building React Native Apps Without Expo

Module Introduction (1:30)
How Exactly Does Expo Work? (4:20)
Expo Alternatives (5:33)
Setting Up Our System (4:43)
Using Expo's Bare Workflow (7:48)
Using Native Device Features with the Bare Workflow (7:26)
Ejecting To The Bare Workflow (5:41)
Creating Projects with the React Native CLI (no Expo) (7:11)
Non-Expo Apps & Native Device Features (3:27)
Module Summary (1:50)

Publishing React Native Apps

Module Introduction (1:36)
Publishing Apps: An Overview (4:05)
Key Configuration Items & Considerations (2:30)
Configuring App Names & Versions (8:16)
A Quick Note About Environment Variables (1:51)
Adding Icons & A Splash Screen (3:40)
Building Expo Apps with EAS (14:31)
EAS for iOS (even on Windows Devices) (16:46)
Building for iOS Without Expo (10:23)
Building for Android Without Expo (7:21)
Configuring Android Apps

Push Notifications

Module Introduction (1:02)
What are (Local) Notifications? (2:08)
Adding the Expo Notification Package (6:11)
Scheduling Notifications (6:05)
Configuring Scheduled Notifications
Handling Incoming Notifications (5:22)
Local Notifications - Permissions
Reacting To Incoming Notifications (7:10)
Reacting To User Interaction With Incoming Notifications (4:51)
Understanding Push Notifications (6:40)
Push Notifications Setup (5:12)
Using the Push Token (8:54)
Sending Push Notifications (8:42)
Module Summary (2:24)

Course Roundup

Course Roundup (0:39)

JavaScript Refresher

Module Introduction (1:38)
JavaScript - A Summary (2:38)
Project Setup
Core Syntax Refresher (4:37)
let & const (2:29)
Arrow Functions (5:21)
Objects: Properties & Methods (3:23)
Arrays & Array Methods (4:19)
Arrays, Objects & Reference Types (2:16)
Spread Operator & Rest Parameters (6:46)
Destructuring (5:40)
Async Code & Promises (10:33)
Wrap Up (0:51)

React.js Refresher

Module Introduction (1:12)
What is React (3:13)
A Starting Project (4:03)
Understanding JSX (5:31)
Understanding Components (2:50)
Working with Multiple Components (7:04)
Working with Props (6:52)
Rendering Lists of Data (4:30)
Handling Events (7:24)
Parent-Child Communication (4:38)
Managing State (5:54)
More on State (4:20)
User Input & Two-Way Binding (5:52)
Wrap Up (2:11)

Running Our First App On A Real Device!

Complete and Continue