Course
Course Decription
Dive into the world of mobile app development with our comprehensive course, “React Native Firebase Chat with Expo Router.” Learn how to use Firebase as the backend for your React Native app, building a real-time chat with user authentication, Firestore collections, and image storage.
What will I learn?
- 🔒 Build a dynamic chat application with user authentication, ensuring secure and personalized experiences.
- 💪 Discover the power of the file-based Expo Router and protect your app’s internal pages.
- 🔥 Harness Firebase’s Firestore for real-time data from collections, making your app more engaging and responsive.
- 🎆 Master uploading images to Firebase’s Storage for media-rich, interactive chats.
Stay ahead of the curve in mobile app development. Enroll in “React Native Firebase Chat with Expo Router” now and start building interactive, real-time chat applications with Firebase and React Native today!
💪 Getting Started
Course Intro
What are we building in this course, and what will you learn? Let's take a quick look at the course and all objectives!
Create the Expo and Firebase App
Time to dive into React Native and start our app with Expo!
🔐 Authentication
Register new Users
In this lesson we will learn how to register new users in our app and create users in Firebase.
Creating the Login
In this video we'll create the login screen and start our Firebase user session
Tab Bar with Expo Router
We will now add a tab bar to our app using the Expo Router and connect all pages.
Protecting the app with Auth Context
In this lesson, we'll add a context around our app to protect it from unauthorized users, and to automatically restore the Firebase user session on app start.
Adding Password Reset
To complete our authentication functinality we also add the reset password functionality, which works super easy with Firebase.
🔥 Firestore
Updating Firebase Documents
We start working with Firestore documents by updating the user document.
Adding Documents to a Collection
We dive into our chat functionality by creating a new collection and adding documents to it.
Displaying Realtime Collection Data
With data in our colelction we can now implement realtime updates to our UI based on the groups collection.
Routing to Groups Page
To implement our chat we quickly need to refactor our Expo routing to allow us to navigate to a chat group page.
Writing Chat Messages
We start our chat screen by setting up a basic layout and adding a text input inside a special view.
Display Chat Messages with FlatList
We can implement the last pieces of the chat and display the messages in a list component.
😎 Features
Upload Files to Firebase Storage
Learn how to upload files to Firebase Storage using Expo and Firebase.