Build a Real-Time Chat App with React Native Expo & Firebase - Complete Tutorial With Source Code

source code: https://www.patreon.com/bugninza/shop/stunning-chat-app-with-react-native-expo-136046?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=productshare_fan&utm_content=join_link

"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/codetoconnections

📱 Connect with me:
Instagram: https://www.instagram.com/_ninza7/
Discord: https://discord.gg/tWnPT38PS4
Twitter or X Profile: https://twitter.com/_ninza7
Video edited by: https://www.instagram.com/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

Тэги:

#react_native #react_native_tutorial #react_native_chat_app #react_native_live_coding #react_native_ui_design #react_native_auth #react_native_expo #react_native_ui #build_a_whatsapp_clone #react_expo #whatsapp_clone_react_native #react_native_aws_amplify_auth #signal_clone_react_native #react_tutorial #react_native_for_beginners #build_a_signal_clone #react_native_chat_app_with_firebase #react_native_app #react_native_chat_ui #build_react_native_app

Скачать видео