React Native - The Practical Guide

Table of contents

1. Chapter 1 : Getting Started
   1. Welcome to This Course and What to Expect!
   2. What Is React Native?
   3. A Glance Under the Hood of React Native.
   4. Creating React Native Projects: Expo CLI Versus React Native CLI
   5. Creating a New React Native Project
   6. Analyzing the Created Project
   7. Running Our First App on a Real Device!
   8. Setting Up a Local Development Environment
   9. About This Course
2. Chapter 2 : React Native Basics [Course Goals App]
   1. Module Introduction
   2. Exploring Core Components and Component Styling
   3. Working with Core Components
   4. Styling React Native Apps
   5. Exploring Layouts and Flexbox
   6. React Native and Flexbox
   7. Using Flexbox to Create Layouts
   8. Flexbox - A Deep Dive
   9. Improving the Layout
   10. Handling Events
   11. Managing a List of Course Goals (in Our Demo App)
   12. iOS and Android Styling Differences
   13. Making Content Scrollable with ScrollView
   14. Optimizing Lists with FlatList
   15. Splitting Components into Smaller Components
   16. Utilizing Props
   17. Working on the "Goal Input" Component
   18. Handling Taps with the Pressable Component
   19. Making Items Deletable and Using IDs
   20. Adding an Android Ripple Effect and an iOS Alternative
   21. Adding a Modal Screen
   22. Styling the Modal Overlay
   23. Opening and Closing the Modal
   24. Working with Images and Changing Colors
   25. App Finishing Touches
   26. Module Summary
3. Chapter 3 : Debugging React Native Apps (Introduction)
   1. Module Introduction
   2. Handling Errors
   3. Logging to the Console
   4. Debugging JavaScript Remotely
   5. Using the React DevTools
   6. Using the Documentation
4. Chapter 4 : Diving Deeper into Components, Layouts, and Styling - Building a Mini-Game App
   1. Module Introduction and What We will Build
   2. Starting Setup and Analyzing the Target App
   3. Setting Up Our Screen Components
   4. Creating Custom Buttons
   5. Styling for Android and iOS
   6. Styling the "Number Input" Element
   7. Configuring the TextInput Field
   8. Adding Visual Feedback to the Buttons
   9. Improving the Buttons
   10. Coloring the Components and the Overall App
   11. Adding a Linear Gradient
   12. Adding a Background Image
   13. Getting Started with Game Logic
   14. Handling User Input and Showing an Alert Dialog
   15. Switching Screens Programmatically
   16. Starting Work on the Game Screen
   17. Respecting Device Screen Restrictions with the SafeAreaView
   18. Creating a Title Component
   19. Managing Colors Globally
   20. Creating, Using, and Displaying Random Numbers
   21. Adding Game Control Buttons ("+" and "-") to the App
   22. Checking for "Game Over"
   23. Improving the Game Screen Visuals
   24. Using "Cascading Styles"
   25. Working with Icons (Button Icons)
   26. Adding and Using Custom Fonts with React Native Apps
   27. Adding a (Foreground) Image
   28. Using and Styling Nested Text
   29. Adding Logic to (Re)Start Games and Displaying a Summary Screen
   30. Logging Game Rounds
   31. Outputting Log Data with FlatList
   32. Styling the Game Round Logs
   33. Finishing Touches
   34. Module Summary
5. Chapter 5 : Building Adaptive User Interfaces (Adapt to Platform and Device Sizes)
   1. Module Introduction
   2. Setting Dynamic Widths
   3. Introducing the Dimensions API
   4. Adjusting Image Sizes with the Dimensions API
   5. Understanding Screen Orientation Problems
   6. Setting Sizes Dynamically (for Different Orientations)
   7. Managing Screen Content with KeyboardAvoidingView
   8. Improving the Landscape Mode UI
   9. Further Improvements with useWindowDimensions
   10. Writing Platform-Specific Code with the Platform API
   11. Styling the Status Bar
6. Chapter 6 : React Native Navigation with React Navigation [Meals App]
   1. Module Introduction
   2. What Is Navigation?
   3. Getting Started with the App and Outputting Meal Categories
   4. Displaying Items in a Grid
   5. Getting Started with the React Navigation Package
   6. Implementing Navigation Between Two Screens
   7. Understanding the useNavigation Hook
   8. Working with Route Parameters to Pass Data Between Screens
   9. Displaying Meals
   10. Adding Images and Styling
   11. Styling Screen Headers and Backgrounds
   12. Setting Navigation Options Dynamically
   13. Adding and Configuring the Meal Details Screen
   14. Outputting Content in the Meal Details Screen
   15. Finishing the Meal Details Screen
   16. Adding Header Buttons
   17. Adding an Icon Button to a Header
   18. Adding Drawer Navigation and Creating a Drawer
   19. Configuring the Drawer Navigator and the Drawer
   20. Adding, Configuring, and Using Bottom Tabs
   21. Nesting Navigators
   22. Bottom Tabs and App Finishing Touches
   23. Module Summary
7. Chapter 7 : App-Wide State Management with Redux and Context API
   1. Module Introduction
   2. Getting Started with React's Context API
   3. Managing App-Wide State with Context
   4. Using the Created Context with useContext
   5. Managing Favorite Meals with the Context API
   6. Getting Started with Redux and Redux Toolkit
   7. Working with Redux Slices
   8. Managing Redux State and Dispatching Actions
   9. Using Redux State in Components
   10. Module Summary
8. Chapter 8 : Time to Practice - The Expense Tracker App
   1. Module Introduction and What We will Build
   2. The Starting Setup
   3. Adding Navigation (with React Navigation) and Configuring Navigation
   4. Adding Global Colors and Editing Navigation Configuration
   5. Creating Key App Components to Display Expenses
   6. Continuing Work on the Expense-Related Components
   7. Adding Dummy Expense Data
   8. Outputting a List of Expenses
   9. Improving App Layout and Styling
   10. Working on Expense List Items
   11. Formatting Dates
   12. Adding a Header Button and Making Expense Items Tappable
   13. Navigating Programmatically Between Screens
   14. Styling the Expense Management Screen
   15. Supporting Different Editing Modes and Using Route Parameters
   16. Adding a "Delete" Button
   17. Adding Custom Buttons
   18. Closing a Modal Programmatically
   19. Managing App-Wide State with Context
   20. Using Context from Inside Components
   21. Deleting and Updating Expenses
   22. Finishing Touches
9. Chapter 9 : Handling User Input
   1. Module Introduction
   2. Building a Custom Input Component
   3. Creating an Overall Form
   4. Configuring the Form Input Elements
   5. Adding Styling
   6. Setting the Form Layout
   7. Handling User Input in a Generic Way
   8. Managing Form State and Submission
   9. Working with Entered Data
   10. Setting and Using Default Values
   11. Adding Validation
   12. Providing Visual Validation Feedback
   13. Adding Error Styling
   14. Module Summary
10. Chapter 10 : Sending Http Requests
    1. Module Introduction
    2. Backend Setup (Firebase)
    3. Installing Axios
    4. Sending POST Http Requests
    5. Fetching Backend Data (GET Requests)
    6. Transforming and Using Fetched Data
    7. Using Response Data from POST Requests
    8. Updating and Deleting Backend Data (UPDATE and DELETE Requests)
    9. Managing the Loading State
    10. Handling Request Errors
    11. Module Summary
11. Chapter 11 : User Authentication
    1. Module Introduction
    2. Demo App Walkthrough
    3. How Does Authentication Work?
    4. Backend Setup
    5. Controlling Signup and Login Screens
    6. Sending Authentication Requests to the Backend
    7. Creating New Users
    8. Logging Users In
    9. Authentication Error Handling
    10. Storing and Managing the User Authentication State (with Context)
    11. Extracting the Authentication Token
    12. Protecting Screens
    13. Adding a Logout Functionality
    14. Accessing Protected Resources
    15. Storing Auth Tokens on the Device and Logging Users Automatically
    16. Module Summary
12. Chapter 12 : Using Native Device Features (Camera, Location, and More)
    1. Module Introduction
    2. Adding a "Favorite Places" List
    3. Editing the Favorite Place Items
    4. Adding an "Add Place" Screen + Navigation
    5. Adding a Header Button
    6. Global Colors and Styling
    7. Getting Started with a Custom Form
    8. Adding and Configuring the Camera Package (for Native Camera Access)
    9. Taking Photos on Android
    10. Taking Photos on iOS + Managing Permissions
    11. Showing an Image Preview
    12. Creating a Custom Button
    13. Getting Started with the Location Picker
    14. Locating Users
    15. Adding a Location Preview Map
    16. Adding an Interactive Map (Google Maps and Apple Maps)
    17. Allowing Map Interaction and Adding Markers
    18. Confirming Picked Locations
    19. Previewing Picked Locations
    20. Adding a Form Submit Button
    21. Managing Location and Image State in the Form
    22. Converting Picked Locations to Human-Readable Addresses
    23. Passing Entered Data to the "AllPlaces" Screen
    24. Outputting a List of Places
    25. Styling Place Items
    26. SQLite: Getting Started and Initialization
    27. Preparing Code to Insert Data into the SQLite Database
    28. Inserting Places into the Database
    29. Fetching Places from the Database
    30. Adding the Place Details Screen
    31. Fetching Place Detail Data from the Database
    32. Showing a Readonly Map
    33. Module Summary
13. Chapter 13 : Building React Native Apps without Expo
    1. Module Introduction
    2. How Exactly Does Expo Work?
    3. Expo Alternatives
    4. Setting Up Our System
    5. Using Expo's Bare Workflow
    6. Using Native Device Features with the Bare Workflow
    7. Ejecting to the Bare Workflow
    8. Creating Projects with the React Native CLI (no Expo)
    9. Non-Expo Apps and Native Device Features
    10. Module Summary
14. Chapter 14 : Publishing React Native Apps
    1. Module Introduction
    2. Publishing Apps: An Overview
    3. Key Configuration Items and Considerations
    4. Configuring App Names and Versions
    5. A Quick Note About Environment Variables
    6. Adding Icons and a Splash Screen
    7. Building Expo Apps with EAS
    8. EAS for iOS (Even on Windows Devices)
    9. Building for iOS without Expo
    10. Building for Android without Expo
15. Chapter 15 : Push Notifications
    1. Module Introduction
    2. What Are (Local) Notifications?
    3. Adding the Expo Notification Package
    4. Scheduling Notifications
    5. Handling Incoming Notifications
    6. Reacting to Incoming Notifications
    7. Reacting to User Interaction with Incoming Notifications
    8. Understanding Push Notifications
    9. Push Notifications Setup
    10. Using the Push Token
    11. Sending Push Notifications
    12. Module Summary
16. Chapter 16 : Course Roundup
    1. Course Roundup
17. Chapter 17 : Bonus: JavaScript Refresher
    1. Module Introduction
    2. JavaScript - A Summary
    3. Core Syntax Refresher
    4. let and const
    5. Arrow Functions
    6. Objects: Properties and Methods
    7. Arrays and Array Methods
    8. Arrays, Objects, and Reference Types
    9. Spread Operator and Rest Parameters
    10. Destructuring
    11. Async Code and Promises
    12. Wrap Up
18. Chapter 18 : Bonus: React.js Refresher
    1. Module Introduction
    2. What is React?
    3. A Starting Project
    4. Understanding JSX
    5. Understanding Components
    6. Working with Multiple Components
    7. Working with Props
    8. Rendering Lists of Data
    9. Handling Events
    10. Parent-Child Communication
    11. Managing State
    12. More on State
    13. User Input and Two-Way Binding
    14. Wrap Up