Autoplay
Autocomplete
Previous Lesson
Complete and Continue
[LEGACY] React Native - The Practical Guide
Getting Started
Welcome! (3:13)
What is React Native? (4:22)
How React Native Works (6:15)
Expo vs React Native CLI (6:06)
Creating Our First React Native App (7:47)
Join our Online Learning Community
Working on Our First App (9:42)
React Native Apps Are Hard Work! (2:53)
React Native Alternatives (4:51)
Course Requirements (1:26)
Course Requirement Refreshers
Running the App on an Android Emulator (8:36)
Running the App on an iOS Simulator (3:15)
Course Outline (7:41)
How to get the Most out of This Course (3:53)
Useful Resources & Links
The Academind Pro Referral Program
Diving into the Basics [COURSE GOALS APP]
Module Introduction (0:33)
How to work with React Native Components (2:45)
Setting Up A New Project (3:04)
Planning the App (1:42)
Working with Core Components (4:56)
Getting Started with Styles (7:52)
Flexbox & Layouts (Intro) (3:54)
React Native Flexbox Deep Dive (12:19)
Inline Styles & StyleSheet Objects (5:12)
Quiz 1: Components, Styles, Layouts
Working with State & Events (9:44)
Outputting a List of Items (3:51)
Styling List Items (3:21)
Making it Scrollable with ScrollView! (3:48)
A Better List: FlatList (7:20)
Quiz 2: More Components & Lists
Splitting the App Into Components (4:34)
Passing Data Between Components (6:48)
Working with Touchable Components (8:39)
Deleting Items (4:57)
Adding a Modal Overlay (6:06)
More Flexbox Styling (3:49)
Closing the Modal & Clearing Input (6:45)
Finishing the Modal Styling (5:08)
Wrap Up (2:29)
Useful Resources & Links
Debugging React Native Apps
Module Introduction (0:32)
What To Debug & How To Debug? (6:18)
Handling Error Messages (5:26)
Understanding Code Flow with console.log() (4:06)
Using the Remote Debugger & Breakpoints (4:03)
Working with the Device DevTools Overlay (2:17)
Debugging the UI & Using React Native Debugger (7:25)
Wrap Up (1:02)
Useful Resources & Links
Components, Styling, Layouts - Building Real Apps [GUESS A NUMBER APP]
Module Introduction (2:33)
Setup & App Planning (3:25)
Adding a Custom Header Component (7:54)
Adding a Screen Component (5:32)
Working on the Layout (7:03)
Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners) (7:03)
React Native Styling vs CSS Styling
Extracting a Card Component (Presentational Component) (5:57)
Quiz 3: Components & Styling
Color Theming with Constants (6:03)
Configuring & Styling a TextInput (10:19)
Cleaning User Input & Controlling the Soft Keyboard (5:23)
Resetting & Confirming User Input (8:28)
Quiz 4: Configuring Components
Showing an Alert (2:50)
Time to Finish the "Confirmation Box" (7:44)
Adding Random Number Generation (6:34)
Switching Between Multiple "Screens" (10:41)
Adding Game Features: Hints & Validation (11:02)
Checking the "Win" Condition with useEffect() (10:11)
Finishing the Game Logic (5:17)
Adding Custom Fonts (9:50)
Installing expo-font
A Synthetic Style "Cascade": Custom Wrapper Components & Global Styles (10:34)
Adding Local Images (4:56)
Styling Images (6:07)
Working with Network (Web) Images (2:51)
A Closer Look at the "Text" Component (and what you can do with it) (9:09)
vs - A Summary
Building a Custom Button Component (11:41)
Adding Icons (4:43)
Exploring UI Libraries (2:58)
Managing Past Guesses as a List (7:56)
Styling List Items & Lists (8:54)
ScrollView & Flexbox (Yes, that works!) (7:20)
Using FlatList Instead of ScrollView (9:50)
Wrap Up (5:14)
Useful Resources & Links
Responsive & Adaptive User Interfaces and Apps
Module Introduction (2:26)
Finding Improvement Opportunities (3:51)
Working with More Flexible Styling Rules (3:08)
Introducing the Dimensions API (3:50)
Using Dimensions in "if" Checks (7:51)
Calculating Sizes Dynamically (5:22)
Problems with Different Device Orientations (3:11)
Controlling Orientation & Using the KeyboardAvoidingView (3:49)
Listening to Orientation Changes (5:31)
Rendering Different Layouts (7:09)
Fixing the GameOver Screen (2:09)
Quiz 5: The Dimensions API & Responsive UIs
Expo's ScreenOrientation API (3:42)
Introducing the Platform API (4:25)
Working with Platform.select() and Platform in "if" Checks (7:04)
Using Platform-specific Code Files (3:32)
Quiz 6: The Platform API
Using the SafeAreaView (5:55)
Wrap Up (1:37)
Useful Resources & Links
Navigation with React Navigation [THE MEALS APP]
Module Introduction (1:14)
Planning the App (5:46)
Adding Screens (6:31)
Adding Fonts (3:54)
Installing React Navigation & Adding Navigation to the App (6:44)
MUST READ: Installing Different Navigators
Creating a StackNavigator (10:38)
React Navigation & Code Attachments
Navigating Between Screens (6:50)
Alternative Navigation Syntax
Quiz 7: Navigation Basics
Navigation to the "Meal Details" Screen (1:10)
Pushing, Popping & Replacing (7:35)
Outputting a Grid of Categories (7:55)
Configuring the Header with Navigation Options (7:58)
Passing & Reading Params Upon Navigation (4:29)
Setting Dynamic Navigation Options (5:47)
Default Navigation Options & Config (10:09)
Quiz 8: Navigation Params & Configuration
Grid Styling & Some Refactoring (12:15)
Adding Meal Models & Data (3:46)
Loading Meals for Categories (4:34)
Rendering a Meals List (18:04)
Passing Data to the Meal Detail Screen (5:20)
Adding Header Buttons (11:22)
Fixing the Shadows (2:51)
Adding Tabs-based Navigation (6:10)
Setting Icons and Configuring Tabs (8:08)
navigationOptions inside of a Navigator
Adding MaterialBottomTabs (9:24)
Adding a Favorites Stack (13:29)
Adding a Menu Button & Drawer Navigation (10:05)
Configuring the Drawer (6:33)
More Navigation Config & Styling (6:28)
Adding a DefaultText Component (3:08)
Adding the MealDetail Screen Content (11:17)
Time for the "Filters" Screen Content! (11:57)
Passing Data Between Component & Navigation Options (Header) (13:07)
Wrap Up (0:46)
[React Refresher] useEffect() & useCallback()
Useful Resources & Links
State Management & Redux
Module Introduction (1:04)
What is State & What is Redux? (4:08)
Redux & Store Setup (10:58)
Selecting State Slices (8:30)
Redux Data & Navigation Options (5:04)
Dispatching Actions & Reducer Logic (13:55)
Switching the Favorites Icon (7:09)
Rendering a Fallback Text (2:43)
Adding Filtering Logic (6:16)
Dispatching Filter Actions (6:08)
Debugging Redux in React Native Apps
Wrap Up (1:33)
Useful Resources & Links
Time to Practice - THE SHOP APP
Module Introduction (1:34)
Planning the App (10:42)
Creating the Basic Project Setup (6:08)
The Products Overview Screen (9:49)
Setting Up a Navigator (10:41)
Styling the Product Items (19:15)
Adding Touchable Components (12:26)
Working on the Product Details Screen (5:56)
Using Custom Fonts (5:10)
Adding Items to the Cart (21:08)
Implementing Header Buttons (18:29)
Outputting Cart Items (11:48)
Adding Logic to Delete Items (10:33)
Adding Redux Logic for Orders (9:09)
SideDrawer & The Orders Screen (13:07)
Clearing the Cart (1:43)
Styling Order Items (12:43)
Making the "Show Details" Button Work (8:55)
Building the "User Products" Screen (9:36)
Reorganizing the ProductItem Component (5:29)
Deleting Items (7:57)
Adding Basic Editing & Navigation Logic (6:37)
Handling User Input (12:05)
Using Params to Submit User Input (2:16)
Dispatching Actions for Creating & Updating (15:34)
Time to Improve the App! (9:22)
Wrap Up (1:12)
Useful Resources & Links
Handling User Input
Module Introduction (0:59)
Configuring TextInputs (8:21)
Adding Basic Validation (5:45)
Getting Started with useReducer() (12:12)
Finishing the Merged Form & Input Management (12:59)
Moving Input Logic Into A Separate Component (11:18)
Connecting Input Component & Form (14:47)
Tweaking Styles & Handling the Soft Keyboard (5:28)
Alternatives & Wrap Up (2:06)
Useful Resources & Links
Http Requests & Adding a Web Server + Database
Module Introduction (1:03)
Setup & How To Send Requests (3:27)
Installing Redux Thunk (2:03)
Storing Products on a Server (9:05)
Fetching Products from the Server (7:53)
Displaying a Loading Spinner & Handling Errors (13:03)
Setting Up a Navigation Listener (5:15)
Updating & Deleting Products (4:47)
Handling Additional Errors (9:31)
Storing Orders (4:34)
Displaying an ActivityIndicator (3:12)
Fetching Stored Orders (8:15)
Adding "Pull to Refresh" (4:12)
Wrap Up (1:07)
Useful Resources & Links
User Authentication
Module Introduction (0:44)
How Authentication Works (3:36)
Implementing a Basic Login Screen (14:57)
Adding User Signup (12:44)
Logging Users In (6:26)
Managing the Loading State & Errors (9:01)
Using the Token (11:04)
Mapping Orders to Users (7:42)
Improved Mapping (Scoping) (1:14)
Implementing "Auto Login" (16:50)
Adding Logout (7:20)
Implementing "Auto Logout" (15:26)
Auto-Logout & Android (Warning)
Wrap Up (1:03)
Useful Resources & Links
Native Device Features (Camera, Maps, Location, SQLite, ...) [GREAT PLACES APP]
Module Introduction (1:13)
Planning the App (4:00)
Screen & Navigation Setup (13:27)
Getting Started with the Form (5:36)
Redux & Adding Places (7:29)
Outputting a List of Places (6:36)
Accessing the Device Camera (17:26)
Configuring the Camera Access (5:10)
Using the Picked Image (4:59)
Storing the Image on the Filesystem (8:29)
Diving into SQLite for Permanent Data Storage (10:24)
Storing Data in the Local Database (7:52)
Fetching Data from the Local Database (7:00)
Getting the User Location (11:00)
Showing a Map Preview of the Location (13:24)
More on Environment Variables
Displaying an Interactive Map (8:31)
Adding a Marker (5:27)
Making the Picked Location "Saveable" (7:22)
Storing Picked Places (2:50)
Updating the Location Screen When the Location Changes (4:25)
Storing the Address (7:33)
Displaying the "Details" Screen (6:28)
Finishing the "Map" Screen (6:19)
Running the App on iOS (3:05)
Running the App on Android (1:21)
Wrap Up (1:35)
Useful Resources & Links
Building Apps Without Expo
Module Introduction (3:32)
Alternatives to Expo (6:01)
Building Apps with Just the React Native CLI (9:26)
Live Reload and RN CLI Apps
Adding Native Modules to Non-Expo Apps (8:55)
Understanding Expo's "Bare Workflow" (8:35)
Ejecting from Expo's "Managed Workflow" (10:59)
When To Use Which? (5:28)
Useful Resources & Links
Publishing React Native Apps
Module Introduction (0:41)
Deployment Steps (4:31)
Configuring the App & Publishing (8:09)
Configuring Icons & The Splash Screen (9:13)
Working with Offline Asset Bundles (3:03)
Using "Over the Air Updates" (OTA Updates) (7:43)
Building the Apps for Deployment (iOS & Android) (19:07)
Publishing iOS Apps without Expo (10:23)
Publishing Android Apps without Expo (7:21)
Configuring Android Apps
Useful Resources & Links
Updating to React Navigation 5+
Module Introduction (1:07)
What Changed? (3:55)
Preparing the Project (4:02)
More Information & Updating the Project Dependencies (2:08)
From the "Registry-like" to a "Component-based" Approach (10:35)
Starting the Migration Process (11:37)
Converting more Stack Navigators (6:49)
Adding Drawer Navigation (8:12)
Replacing the Auth Flow & Switch Navigator (12:50)
Logout & Further Fixes (4:57)
Extracting Params (7:47)
Setting Options Dynamically (3:02)
Remaining Migrations (3:02)
A Summary Of All Changes (5:47)
Useful Resources & Links
Push Notifications
Module Introduction (1:18)
Understanding Notifications (3:36)
Sending Local Notifications (8:16)
Getting Permissions (7:34)
Controlling How Notifications Are Displayed (3:36)
Reacting to Foreground Notifications (4:26)
Reacting to Background Notifications (4:13)
How Push Notifications Work (3:39)
Expo & Push Notifications (6:45)
Getting a Push Token (4:44)
Sending Push Notifications (2:59)
Using Expo's Push Server (4:29)
More on Push Tokens (5:49)
Adding Push Notifications to the Shop App (1/3) (10:06)
Adding Push Notifications to the Shop App (2/3) (14:13)
Adding Push Notifications to the Shop App (3/3) (2:37)
Push Notifications in non-Expo Managed Apps
Module Resources
Course Roundup & Next Steps
Roundup & Next Steps (3:52)
JavaScript Refresher
Module Introduction (1:36)
JavaScript in a Nutshell (2:35)
Refreshing the Core Syntax (4:34)
let & const (2:27)
Arrow Functions (5:17)
Objects, Properties & Methods (3:19)
Arrays & Array Methods (4:16)
Arrays, Objects & Reference Types (2:13)
Spread Operators & REST Parameters (6:40)
Destructuring (5:37)
Async Code & Promises (10:28)
Template Literals
Wrap Up (0:50)
Useful Resources & Links
React Refresher
Module Introduction (1:12)
What is React? (3:13)
Setting Up 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)
Child Parent Communication (4:38)
Managing State (5:54)
More on State (4:20)
Fetching User Input (Two-way Binding) (5:52)
Wrap Up (2:11)
Useful Resources & Links
Building the Apps for Deployment (iOS & Android)
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock