Build a Real-Time Chat App with React Native Expo & Firebase - Complete Tutorial With Source Code
source code: https://www.patreon.com/bugninza/shop...
"dependencies": {
"@react-native-firebase/app": "^18.8.0",
"@react-native-firebase/auth": "^18.8.0",
"@react-native-firebase/firestore": "^18.8.0",
"@react-native-picker/picker": "^2.6.1",
"@react-navigation/native": "^6.1.10",
"@react-navigation/stack": "^6.3.21",
"expo": "~50.0.7",
"expo-linear-gradient": "~12.7.2",
"expo-status-bar": "~1.11.1",
"react": "18.2.0",
"react-native": "0.73.4",
"react-native-date-picker": "^4.3.6",
"react-native-gifted-chat": "^2.4.0",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "~3.29.0",
"react-native-gesture-handler": "~2.14.0",
"@react-native-masked-view/masked-view": "0.3.0",
"expo-dev-client": "~3.3.8"
},
In this step-by-step tutorial, you'll learn how to build a complete chat app using React Native Expo and Firebase. We'll cover everything from setting up the project, integrating Firebase services like Authentication and Firestore, implementing real-time messaging, and creating a sleek UI with a modern gradient design.
By the end of this video, you'll have a fully functional chat app that you can showcase in your portfolio or CV. Whether you're a beginner or an experienced React Native developer, this tutorial will provide you with valuable insights and hands-on experience.
We'll walk through the entire process, starting with initializing an Expo project, installing necessary dependencies, and configuring Firebase. You'll learn how to implement phone number authentication, use Firestore to store user data and chat messages, and leverage React Navigation to navigate between different screens.
The video will also cover advanced topics like real-time messaging, sorting messages by timestamp, and customizing the chat UI using the GiftedChat library. You'll learn how to create a user-friendly interface with a gradient background, custom message bubbles, and additional features like displaying timestamps and the sender's name.
By following this tutorial, you'll gain a deep understanding of React Native Expo, Firebase, and chat app development. You'll also have a polished, functional app that you can proudly showcase to potential employers or clients.
𝐁𝐨𝐨𝐤 ( 𝐅𝐫𝐨𝐦 𝐂𝐨𝐝𝐞 𝐓𝐨 𝐂𝐨𝐧𝐧𝐞𝐜𝐭𝐢𝐨𝐧𝐬: 𝐀 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫’𝐬 𝐠𝐮𝐢𝐝𝐞 𝐭𝐨 𝐛𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐚 𝐬𝐨𝐜𝐢𝐚𝐥 𝐜𝐚𝐫𝐞𝐞𝐫 ) (I'm the Author)
Amazon India: https://amzn.eu/d/axYh0B4
Amazon Worldwide: https://a.co/d/acqJOYR
Gumroad (pdf): https://ninza7.gumroad.com/l/codetoco...
📱 Connect with me:
Instagram: / _ninza7
Discord: / discord
Twitter or X Profile: / _ninza7
Video edited by: / kaushal_2319
Music Source: Youtube Music Library
Timestamps:
0:00 Introduction and Project Demo
1:17 Project setup and dependencies installations
6:52 Firebase Setup For Android and Development Build Setup For Expo
14:08 Code For Phone Authentication (OTP)
33:50 Code For Detail Screen (For User Information)
44:05 Code for the chat app using firebase and react native & Expo
1:17:12 Bug Fixes, Project Demo and Conclusion
Tags: React Native, Expo, Firebase, Chat App, Real-time Messaging, Authentication, Firestore, React Navigation, GiftedChat, Gradient UI, Mobile Development, Tutorial, Step by Step, Beginner, Intermediate, Advanced
#reactnative #expo #firebase #coding #programming #chatapp #javascript #code #react
Watch video Build a Real-Time Chat App with React Native Expo & Firebase - Complete Tutorial With Source Code online without registration, duration hours minute second in high quality. This video was added by user Bug Ninza 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,652 once and liked it 58 people.