Build a Realtime Chat App with React Native and Firebase

Подписаться 10 тыс.

Просмотров 100 тыс.

50% 1

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: betomoedano@outlook.com

Наука

Опубликовано:

12 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 125

@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!!!

@maisumcodigo 9 месяцев назад

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

@codewithbeto 9 месяцев назад

Glad it was helpful!

@soniauduma1640 Год назад

Nice tutorial, Thank you!

@rahatamanturov1934 Год назад

Still works Thank you for the tutorial! Much love❤

@codewithbeto Год назад

Glad to hear!

@ultrahardcorn 10 месяцев назад

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

@codewithbeto 10 месяцев назад

Glad it was helpful!

@AjitPool-tl4bl Год назад

Excellent !! Thank you 👍👍

@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

@Hugeorm Год назад

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

@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.

@jdavid81tfe Год назад

Buen video !!!

@kssingh8514 Год назад

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

@Maphari_PJ Год назад

your video helped me alot thank you man

@codewithbeto Год назад

Glad to hear it!

@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?

@GabrielPereira-hd8tc 7 месяцев назад

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

@mecksonraja4518 3 месяца назад

kuddos man

@pseudomonous Год назад

This channel is a must Subscribe

@yiyunkim6062 7 месяцев назад

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

@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

@mohamedyoussef8835 Год назад

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

@techweb9982 Год назад

bro great work

@codewithbeto Год назад

Thanks 🔥

@eric31022 Год назад

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

@penguinxed 11 месяцев назад

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

@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

@shivamkatiyar2899 Год назад

❤❤❤ from India

@letadz8577 Год назад

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

@daniel723 2 месяца назад

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

@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 9 месяцев назад

i need that too guys have you figured it out?

@lelle_w622 3 месяца назад

Is it best to use realtime database or firestore?

@oozmakappa6104 8 месяцев назад

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

@NirLevin-sp9iy Год назад

i can i add different room for each group

@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 !

@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 11 месяцев назад

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

@eronsgberaese1971 Год назад

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

@FIFTH.CLOTHING 3 месяца назад

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.

@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...

@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.

@YashJain2000 7 месяцев назад

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?

@wazrymohamed1654 Год назад

can i follow this with CLI

@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

@Sooraj0306 9 месяцев назад

how can we show recent chat please reply

@thedyingone-ng7km Год назад

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

@cat.basilio 8 месяцев назад

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

@codewithbeto 8 месяцев назад

At the time it was not possible to

@hiepnguyentuan417 6 месяцев назад

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

@frostykm 8 месяцев назад

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 6 месяцев назад

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)

@usmanmarkaz Год назад

Sir plz upload more Projects on React Native

@codewithbeto Год назад

Sure I will

@moemia902 Год назад

Giftedchat doesnt work

@MrWhoever Год назад

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

@ayushkumarbhadani5841 Год назад

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

@kumawatnikhil_ Год назад

Install this package

@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

@namanagrawal5665 Год назад

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

@mafelojr Месяц назад

This has to do with your network connection

@Urbeys 10 месяцев назад

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

@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

@hubesh716 Год назад

bro can you share the github link for this project

@codewithbeto Год назад

codewithbeto.dev/projects/chat-app

@PRIME_Playyys... 16 дней назад

provide download link

@mieleinstein7530 Год назад

Is it for beginners too ?

@codewithbeto Год назад

Yes

@cybertrontech1931 Год назад

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

@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 3 месяца назад

yes pls use cli@@codewithbeto

@jonathanfocus362 Год назад

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

@mathieu98asfthm Год назад

check his github account in the description

@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 5 месяцев назад

It is working for me😮

@faithkerubo8357 4 месяца назад

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

@rayonefreire5257 Год назад

I can't build the application

@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 7 месяцев назад

How can we deploy it now?

@faithkerubo8357 4 месяца назад

Is yours working?

@faithkerubo8357 4 месяца назад

Is yours working?

@filateiboijumiyen2610 4 месяца назад

Yes

@filateiboijumiyen2610 4 месяца назад

@@faithkerubo8357 Yes

@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.

@SwiftCommunication 2 месяца назад

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. 😕

@atharvalakhamade2126 4 месяца назад

This is not a tutorial man you are just pasting stuff

@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.

@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