React Native Expo Chat Application with Firebase

Name: React Native Expo Chat Application with Firebase
Rating: 4.2 (39 reviews)

Learn React Native, Firebase, Tailwind CSS, Expo, Context API, React Navigation, Push Notifications

Created byWilfried Bertrand Wetta

Last updated 8/2023

English

English [Auto],

What you'll learn

Basics of React Native
Firebase
TailwindCSS
Expo Go
Push Notifications
Image picker

Course content

12 sections • 31 lectures • 7h 23m total length

Introduction4:00
Build a React Native Expo chat application with Firebase backend and Tailwind CSS frontend, featuring login, signup, user search, profiles with avatars, chat messaging, and notifications.
Environment setup2:46
https://discord.gg/gWZTNnrr
Create Project and setting up NativeWind8:39
https://discord.gg/gWZTNnrr

Login screen design24:55
https://github.com/bertdelaspeed/LetsChat_Udemy.git
Register screen design4:23
https://github.com/bertdelaspeed/LetsChat_Udemy.git
Implementing navigation15:50
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/native-stack @react-navigation/native @react-navigation/bottom-tabs

https://github.com/bertdelaspeed/LetsChat_Udemy.git

Home screen avatar to Profile screen8:14
https://github.com/bertdelaspeed/LetsChat_Udemy.git
User informations at Registration14:00
https://github.com/bertdelaspeed/LetsChat_Udemy.git
Profile screen design30:38
Design and implement a profile screen in a React Native Expo app, fetching the username from Firestore via the authenticated user's email, enabling profile picture upload and sign out.
Profile screen Image Picker and Upload to Storage32:59
Select, upload, and display profile images in a React Native Expo app by using Expo image picker, uploading to Firebase storage, and updating Firestore with the profile URL.

Home screen avatar and chat button16:32
Add a bottom-right chat button on the home screen that navigates to a search screen, and fetch the user avatar from Firestore using context and useEffect, with conditional rendering.
Profile screen Image fix4:18
Fix the profile screen image by loading the avatar url on first render from the database, then store it in state or the context api to display the image reliably.
Search screen design13:33
Design the search screen for a react native expo chat app, implementing a text input with placeholder and auto focus, plus a loading state and a magnifier search button.
Search screen functionalities27:22
Learn to implement search screen functionalities in a React Native Expo chat app with Firebase: handle search triggers, loading, queries on users, display results with avatars, and navigate to chat.

Chat screen design16:44
Design and implement a React Native Expo chat screen with a message input, send button, and header showing the friend’s avatar and name, while managing navigation and layout.
Chat screen functionalities28:18
Displaying chat screen messages15:24
Render chat messages in a React Native Expo app using a FlatList and a MessageItem component, auto-scrolling on content changes with real-time updates via onSnapshot.

Home screen functionalities31:17
Learn to build a React Native Expo chat app with Firebase, focusing on the home screen: manage users and friends, fetch chats, avatars, and last messages, with utilities for display.
Displaying chats on Home screen14:35
Display chats on the home screen by using an activity indicator, rendering conversations with a FlatList, and creating a chat item with avatar fallback and navigation to the chat.

Requirements

No programming experience is needed
Having web programming knowledge would be an advantage

Description

Welcome to this comprehensive course on building a chat application with React Native Expo and Firebase! If you're looking to build real-world, cross-platform chat applications using the latest technologies and best practices, then you've come to the right place.

In this course, you will learn how to build a complete chat application from scratch using React Native Expo, a popular and powerful framework for building mobile applications, and Firebase, a scalable and flexible backend-as-a-service platform from Google. Together, these technologies provide a robust and efficient platform for building modern chat applications that work seamlessly on both iOS and Android devices.

Throughout this course, you will learn how to set up and configure your development environment, create and manage user accounts and authentication, set up real-time messaging with Firebase Cloud Firestore, add multimedia support with Firebase Storage, and much more. We will cover everything you need to know to build a fully-functional chat application, from setting up your project to deploying it to production.

By the end of this course, you will have a solid foundation in React Native Expo, Firebase, and chat application development. You will be able to create your own chat applications that are scalable, efficient, and responsive, and that can be deployed to a global audience. Whether you're a beginner or an experienced developer, this course will provide you with the skills and knowledge you need to succeed in the fast-paced world of mobile app development.

So what are you waiting for? Enroll now and start building your own chat applications today!

Who this course is for:

Anybody who would want to learn mobile development both for Ios and Android with React Native
People that wish to take their skills to the next level using practical projects.

React Native Expo Chat Application with Firebase

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 15min

Authentication Screens3 lectures • 45min

Firebase2 lectures • 21min

Navigation Stacks2 lectures • 37min

Profile Screen4 lectures • 1hr 26min

Profile Screen Bug Fix1 lecture • 5min

Search Screen4 lectures • 1hr 2min

Chat Screen3 lectures • 1hr

Home Screen2 lectures • 46min

Env1 lecture • 11min

Requirements

Description

Who this course is for: