React Native - The Practical Guide

Video description

Build native iOS and Android apps with React Native using your React skills, including Push Notifications, Hooks, and Redux

About This Video

  • Get to grips with the concepts of the latest React Native and JavaScript
  • Gain the skills to build real-world mobile applications
  • Uncover techniques to make applications work on different devices

In Detail

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.

Audience

This course is for you if you are a software engineer, web developer, or mobile developer who wants to create modern, powerful, and responsive mobile apps with React Native. To get started with this course, you will need a basic understanding of React and JavaScript.

Publisher resources

Download Example Code

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

Product information

  • Title: React Native - The Practical Guide
  • Author(s): Academind by Maximilian Schwarzmüller
  • Release date: May 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781789139747