Build a Realtime Chat App with React Native and Firebase | Tutorial 2023

Hey what's up guys, In this video we learn how to create a real-time chat app using React Native and Firebase as a backend.
React Native Course 👉🏼 codewithbeto.dev/learn
For resources go to Code With Beto 👉🏼 codewithbeto.dev
My new channel 👉🏼 / @codewithbeto1
Join the Discord: / discord
👨🏻‍💻 ☕️ 🌟 Would you like to support me? Sponsor me on GitHub🌟 ☕️ 👨🏻‍💻
github.com/betomoedano
⭐️ If you want to learn more about me, check this links:
Twitter: / betomoedano
Instagram: / betomoedano. .
Github: github.com/betomoedano
Linkedin: / betomoedano
Discord: / discord
Code With Beto: codewithbeto.vercel.app/
Medium: / betomoedano01
Figma: www.figma.com/@betomoedano
My channel in Spanish: / betomoedano
⭐️ My apps & projects:
► Code With Beto: codewithbeto.vercel.app/
► Eco Studios: ecodev.netlify.app
⭐️ Contact: [e-mail]

[@alec_baldman]

I just wanted to come back now that I finished the tutorial and thank you for making these :) You can see I complained before, and I still agree! But you are an excellent resource especially since there aren't many up to date React Native videos out there. Thanks for your work!

[@namanagrawal5665]

Great tutorial man, would like to have more videos like this which let us learn more about a specific topic in depth. Thanks and keep it up

[@tokyodynamite6497]

TY for the save. I watched so many other other videos for the react native data pull from firebase. None worked. Yours works perfectly!

[@codewithbeto]

Thank you!

[@vitorpeixoto2324]

Thanks for your work, from Brazil!!!

[@GabrielPereira-hd8tc]

Use expoConfig not manifest to new versions of expo-constant in minute 10:27

[@ultrahardcorn]

Really helpful even to this day, easy to follow and to implement into other project. Thank you so much!

[@codewithbeto]

Glad it was helpful!

[@maisumcodigo]

Hi Beto. The best tutorial about chat app with React-Native that I saw on KZbin. Thanks for helping me.

[@codewithbeto]

Glad it was helpful!

[@soniauduma1640]

Nice tutorial, Thank you!

[@AjitPool-tl4bl]

Excellent !! Thank you 👍👍

[@rahatamanturov1934]

Still works Thank you for the tutorial! Much love❤

[@codewithbeto]

Glad to hear!

[@Hugeorm]

great video, thanks beto! any suggestion on how to proceed to create private chat rooms and add other users? thanks

[@kartikgupta5566]

wonderful tutorial first time i got no major error while following a tutorial kudos!

[@Lordwisetech]

This is green flag for me 😂😂😂to engage in this video

[@beingbaraa8860]

man u saved my life , ihave to submit my graduation project after 7 days and ive been stuck at this firebase authentication thing since there are alot of outdated tutorials out there

[@harishas3401]

I completely relate. I have been stuck with Firebase Auth for a while now

[@Fitsum-um5pm]

Hello brother I'm working also my graduation project. Can you help me please.

[@ossigen8_Shorts-Video]

7:59 , you can share this type of information because FireBase allow you to WhiteList the DNS that are allowed to use the api

[@Mr_Maphari_PJ]

your video helped me alot thank you man

[@codewithbeto]

Glad to hear it!

[@jdavid81tfe]

Buen video !!!

[@kssingh8514]

hey, love to watch your videos. pls make video on refer and earn & push notification with react-native expo

[@alihaydarsevgili3971]

first of all thanks for this great tutorials sir and I have 3 questions,1-how we can send notification to users while they are not active at chat screen? 2-how we can add voice and image messages to firebase storage?third and last how we can create group chats?

[@yiyunkim6062]

amazing video, Beto. However, can I ask quick question why you are using web instead of ios/android to set up firebase?

[@mecksonraja4518]

kuddos man

[@pseudomonous]

This channel is a must Subscribe

[@techweb9982]

bro great work

[@codewithbeto]

Thanks 🔥

[@mohamedyoussef8835]

Awesome video +++++++++++++++++ Thank You 😀

[@eric31022]

Can you make a tutorial on how to send and receive push notifications with gifted chat from firebase using expo

[@nimabayat1581]

fucking amazing mate!

[@fratelo9832]

bro on 16:50 I don't see keyboard input like you. I don't see any error or something like this. I don't know where is the problem , How I can see some bug or ouput logs

[@penguinxed]

thank you for this brother! may I ask if this still works today? or i need to update some things here? thank you 😊

[@daniel723]

Is the message sent into the chat delivered to everyone in the database? Or can I choose somehow to chat with only specific people

[@lelle_w622]

Is it best to use realtime database or firestore?

[@narasimhann2814]

Great Tutorial ! Can you please comment on how to configure who the sender is and who the receiver is ?

[@arpitpandey7337]

Have you figured this out ?

[@narasimhann2814]

@@arpitpandey7337 No

[@zedlol5684]

i need that too guys have you figured it out?

[@waleedvrock]

ERROR TypeError: Cannot read property 'extra' of null, js engine: hermes ERROR Invariant Violation: "main" has not been registered. This can happen if: * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project. * A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

[@letadz8577]

More tutorial please for real project like bank app with login and sign up using formik, api

[@oozmakappa6104]

if you are creating app for ios and android you need 2 firebase project?

[@eronsgberaese1971]

I was particular about the date timestamp. Please could you fix?

[@M-ABDULLAH-AZIZ]

how expensive would firebase be in a production environment for chat app? and would it be able to scale for like 50k users using the app?

[@vaultofmyths]

Not overly expensive especially at that 50k users range far far far below 5 figures

[@namanagrawal5665]

[FirebaseError: Firebase: Error (auth/network-request-failed).] Hey i was getting this error when logging in

[@YashJain2000]

Let's say there are 4 users in the chat list, I am getting all the messages I sent to person A in the DMs of all other people as well. What shall I be doing incorrectly?

[@johncmm9759]

great stuff man! Is it okay if I use this in an app that I'm making and publishing?

[@codewithbeto]

Yes of course!

[@pratiksonar8523]

Did ur app was build successful, because I build apk but the app get stucks on splashscreen and never moves forward

[@user-pb2se1wr5j]

Hi I have a problem "Property 'user' doesn't exist", please can you help me !

[@shivamkatiyar2899]

❤❤❤ from India

[@FIFTH.CLOTHING]

at time stamp 17:09 after loading in the app, nothing appears. I have followed all the steps so im confused as to why this is happening.

[@abdullahaboayesha]

@Code with Beto, would love to buy your course, would love if you could make an english version or atleats voice over , reading subtitiles does not work . Thank you

[@codewithbeto]

Got it! I’ll work on it. Thanks 🙏🏼

[@abdullahaboayesha]

@@codewithbeto Really appreciate your reply , kindly let me know when it is done , I will buy the course immidiately and so will many other english speaking subscribers to your channel

[@codewithbeto]

@@abdullahaboayesha I really appreciate it! I have started with the translation and the first section is ready! I’ll upload the second one today. I hope I’ll finish the hole course in about 20 days. If you want you can take the lessons as soon as I release them. Thanks again for your support

[@inherentmarketing9302]

i get an error saying react-native-gesture-handler package is found however package itself specifies a main module field that could not be resolved..indeed none of these files exist . i uninstalled and reinstalled the package twice..... any suggestions?

[@beatrizromao5253]

Im having the same problem...

[@NirLevin-sp9iy]

i can i add different room for each group

[@JJ-ot3ps]

can you explain why you don't use context provider or redux ?

[@Reheight]

React Native is a bit different from regular React. React Native takes the DOM/Element structure of HTML and creates Swift/Kotlin UI with it. This means that React Native and React may handle some things differently such as styling as React Native doesn't actually use or fully support true CSS.

[@wazrymohamed1654]

can i follow this with CLI

[@cat.basilio]

Why we are using expo constants to use env vars? Why not just typing process.env....?

[@codewithbeto]

At the time it was not possible to

[@thedyingone-ng7km]

my first react native app. ofcourse i copied all of your code but it was an achievement

[@Sooraj0306]

how can we show recent chat please reply

[@frostykm]

How did you open the project by saying code (dot) i have seen lots of turtorials that do that and I am never able to do it.

[@tebogo10]

you need vs code, i think - then go to the directory in terminal, then type code . (dat meaning this folder location, you could write the full path after code and it should open)

[@hiepnguyentuan417]

extra of null. What can i do. help me!!!

[@rafaelsoares5350]

The tutorial doesn't work anymore, probably some things have been updated

[@schadrackbotombe9899]

very true , alot has changed , so i was mostly relying on the docs

[@nasyxrakeeb8665]

worked perfectly for me only had to update the giftedchat package in order to make it work

[@golondrinamusic6217]

@@nasyxrakeeb8665 Did you create a query on a windows system? and in an android emulator?

[@cserik2001]

It is working for me😮

[@faithkerubo8357]

​@@cserik2001is there any change you had to make or did you just clone the app?

[@Urbeys]

Pls beto update your github with how can we send images and videos please I will be able to complete my assignment Thank you

[@ayushkumarbhadani5841]

I'm getting an error: Unable to resolve "@react-navigation/native" from "App.js" Please Help

[@kumawatnikhil_]

Install this package

[@moemia902]

Giftedchat doesnt work

[@MrWhoever]

27:54 we haven't even opened the home file and yours is already complete.

[@karl0961]

What is the reason for creating a web app and not IOS 7:35 ?

[@vx1724]

because react native is javascript in core, not native ios/android code

[@usmanmarkaz]

Sir plz upload more Projects on React Native

[@codewithbeto]

Sure I will

[@mieleinstein7530]

Is it for beginners too ?

[@codewithbeto]

Yes

[@cybertrontech1931]

@@codewithbeto different users bro make a 20 min video on that same app thanks'

[@hubesh716]

bro can you share the github link for this project

[@codewithbeto]

codewithbeto.dev/projects/chat-app

[@jonathanfocus362]

Could you maybe provide the code/ text needed for setting it up?

[@mathieu98asfthm]

check his github account in the description

[@paradox_695]

where is your source code please?

[@schadrackbotombe9899]

very cool tut!!!, but expo cries like a baby ...which became abit fustrating😂

[@codewithbeto]

🤣🤣 I should create another video using CLI

[@jasim17]

yes pls use cli@@codewithbeto

[@liuyan8066]

Like your video and RN+firebase teach. BUT your Github tools are old and deprecate, they cannot compile now. Because I am a new learner for RN, it is very hard to me to fix these compile issue. Just pick up one example from many errors, how to fix expo version 44 compile with others? And RN version 07 cannot compile many packages in your chat app now. I am surprised you update the video in Nov 2nd 2022, and many packages in your app cannot work in Dec 2022.

[@cking9145]

Which are the alternatives to firebase? Don't want to feed googles ai with training data for profiling humanity 🤣 sorry, I am paranoid, but better than losing against Skynet haha

[@codewithbeto]

We also have AWS lol

[@cking9145]

@@codewithbeto Think amazon is not better for data abuse

[@filateiboijumiyen2610]

How can we deploy it now?

[@faithkerubo8357]

Is yours working?

[@faithkerubo8357]

Is yours working?

[@filateiboijumiyen2610]

Yes

[@filateiboijumiyen2610]

@@faithkerubo8357 Yes

[@SwiftCommunication]

You Didn't even finished the app there are lots of things you didn't finish. you even had as import things from the react-native library so we can display the chat history and select from list of people. and why did you put the signout in chat. and you showed as the profile edit and logout in the home screen but forgot to implement it. i don't get the comment here. 😕

[@rayonefreire5257]

I can't build the application

[@alec_baldman]

Can we all just agree that copying and pasting code in a tutorial is a crappy way to teach? Maybe not for styling, but this just seems so lazy and we miss out on the explanation behind why you do everything.

[@shannoncole6425]

He’s explaining everything as he’s going. What value do you get by watching someone type? Most creators just speed up the video during typing.

[@atharvalakhamade2126]

This is not a tutorial man you are just pasting stuff

[@axatmirzo956]

@react-native-community/masked-view is not supported in expo. what can i do. HELP ME

[@developerbeck1619]

I'm having the same problem.

[@muhammadshafay8309]

i am getting this erorr @firebase/firestore:, Firestore (9.15.0): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=permission-denied]: Permission denied: Consumer 'project:undefined' has been suspended.

[@arpitpandey7337]

i am facing same problem @Mahammad , have you found any solution ?

[@beingbaraa8860]

Yo , i don't know if you'll see this but i might as well try,i am making my graduation project and my project wont be built because of build gradle issues and i need to build the app, ky submission is within a few days and i need to solve this problem so i can continue making the app, could you some how contact me and help me with this issue? İ would really appreciate it