Overview
React Native is one of the fastest-growing frameworks for mobile development, and it has become a go-to tool for developers looking to keep up with the mobile market.
Get ready to build killer apps with React Native. This course teaches you everything you need to know about React Native: how it works, how to get started, and how to succeed.
We are confident that this is the best online source on React Native. This course is a project-based one that will provide you with all the tools and technologies of an React Native app developer in 2022.
- Welcome To This Course & What To Expect!
- What Is React Native?
- Join our Online Learning Community
- A Glance Under The Hood Of React Native
- Creating React Native Projects: Expo CLI vs 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
- Course Resources, Code Snapshots & How To Use
- Module Introduction
- Exploring Core Components & Component Styling
- Working With Core Components
- Styling React Native Apps
- React Native: Core Components, Styling & Colors – More Information
- Exploring Layouts & Flexbox
- React Native & 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 & 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 & Using IDs
- Adding an Android Ripple Effect & an iOS Alternative
- Adding a Modal Screen
- Styling the Modal Overlay
- Opening & Closing the Modal
- Working with Images & Changing Colors
- App Finishing Touches
- Module Summary
- Module Introduction
- Handling Errors
- Logging to the Console
- Debugging JavaScript Remotely
- Using the React DevTools
- Using the Documentation
- Module Introduction & What We’ll Build
- Starting Setup & Analyzing the Target App
- Setting Up our Screen Components
- Creating Custom Buttons
- Styling for Android & iOS
- Styling the “Number Input” Element
- Configuring the TextInput Field
- Adding Visual Feedback to the Buttons
- Improving the Buttons
- Coloring the Components & The Overall App
- Adding a Linear Gradient
- Adding a Background Image
- Getting Started with the Game Logic
- Handling User Input & 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 & Displaying Random Numbers
- Adding Game Control Buttons (“+” & “-“) to the App
- Checking for “Game Over”
- Improving the Game Screen Visuals
- Using “Cascading Styles”
- Working with Icons (Button Icons)
- Adding & Using Custom Fonts with React Native Apps
- Adding a (Foreground) Image
- Using & Styling Nested Text
- Adding Logic to (Re-)Start Games & Displaying a Summary Screen
- Logging Game Rounds
- Outputting Log Data with FlatList
- Styling the Game Round Logs
- Finishing Touches
- Module Summary
- 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
- Module Introduction
- What Is Navigation?
- Getting Started with the App & Outputting Meal Categories
- Displaying Items in a Grid
- Getting Started with the React Navigation Package
- Implementing Navigation Between Two Screens
- Setting the Default Screen
- Understanding the useNavigation Hook
- Working with Route Parameters To Pass Data Between Screens
- Displaying Meals
- Adding Images & Styling
- Styling Screen Headers & Backgrounds
- Setting Navigation Options Dynamically
- Adding & Configuring the Meal Details Screen
- Outputting Content in the Meal Detail Screen
- Finishing the Meal Detail Screen
- Adding Header Buttons
- Adding an Icon Button to a Header
- Adding Drawer Navigation & Creating a Drawer
- Configuring the Drawer Navigator & The Drawer
- Adding, Configuring & Using Bottom Tabs
- Nesting Navigators
- Bottom Tabs & App Finishing Touches
- Module Summary
- 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 & Redux Toolkit
- Working with Redux Slices
- Managing Redux State & Dispatching Actions
- Using Redux State in Components
- Module Summary
- Module Introduction & What We’ll Build
- The Starting Setup
- Adding Navigation (with React Navigation) & Configuring Navigation
- Adding Global Colors & 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 & Styling
- Working on Expense List Items
- Formatting Dates
- Adding a Header Button & Making Expense Items Tappable
- Navigating Programmatically Between Screens
- Styling The Expense Management Screen
- Supporting Different Editing Modes & 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 & Updating Expenses
- Finishing Touches
- 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 & Submission
- Working with Entered Data
- Setting & Using Default Values
- Adding Validation
- Providing Visual Validation Feedback
- Adding Error Styling
- Module Summary
- Module Introduction
- Backend Setup (Firebase)
- Installing Axios
- Sending POST Http Requests
- Fetching Backend Data (GET Requests)
- Transforming & Using Fetched Data
- Using Response Data from POST Requests
- Updating & Deleting Backend Data (UPDATE & DELETE Requests)
- Managing the Loading State
- Handling Request Errors
- Module Summary
- Module Introduction
- Demo App Walkthrough
- How Does Authentication Work?
- Backend Setup
- Controlling Signup & Login Screens
- Sending Authentication Requests to the Backend
- Creating New Users
- Logging Users In
- Authentication Error Handling
- Storing & 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 & Logging Users In Automatically
- A Note About Token Expiration
- Module Summary
- Module Introduction
- Adding a “Favorite Places” List
- Editing the Favorite Place Items” List
- Adding an “Add Place” Screen + Navigation
- Adding a Header Button
- Global Colors & Styling
- Adding & 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 & Apple Maps)
- Allowing Map Interaction & Adding Markers
- Confirming Picked Locations
- Previewing Picked Locations
- Adding a Form Submit Button
- Managing Location & 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 & 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
- 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 & Native Device Features
- Module Summary
- Module Introduction
- Publishing Apps: An Overview
- Key Configuration Items & Considerations
- Configuring App Names & Versions
- A Quick Note About Environment Variables
- Adding Icons & 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
- Configuring Android Apps
- Module Introduction
- What are (Local) Notifications?
- Adding the Expo Notification Package
- Scheduling Notifications
- Configuring Scheduled Notifications
- Handling Incoming Notifications
- Local Notifications – Permissions
- 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
- Module Introduction
- JavaScript – A Summary
- Project Setup
- Core Syntax Refresher
- let & const
- Arrow Functions
- Objects: Properties & Methods
- Arrays & Array Methods
- Arrays, Objects & Reference Types
- Spread Operator & Rest Parameters
- Destructuring
- Async Code & Promises
- Wrap Up
- Module Resources
- 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
- More on State
- User Input & Two-Way Binding
- Wrap Up
- Module Resources
- Legacy Course Content
- This Course Was Updated | Update Information
- Course Update Information & FAQs
- Bonus: More Content!
- Enroll Now!
- Download Syllabus
