Build a React Native Chat App with Firebase Firestore and Expo

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

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

50% 1

📚 Expo docs
docs.expo.io/get-started/inst...
📱 React native gifted chat docs
github.com/FaridSafi/react-na...
💻 Code of the project
github.com/3stbn/react-native...
Timestamps of the project
00:00 Demo
02:01 Expo setup
07:50 Firebase setup
12:13 Local User
26:19 Firebase real time db and chat ui
46:40 Final Demo
Thanks for watching. If you enjoy this content please like and subscribe to the channel
---------------
You can support the channel for more free content by clicking the Thanks button
---------------
Second channel on Spanish
/ @dacoder8061
----------------
Follow me on social media
GitHub: github.com/3stbn
Twitter: / esteban_codes

Наука

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

13 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@bluekeny 3 года назад

thank you! great content

@sushilshinde9941 3 года назад

That's great actually!! Thanks a lot

@mulwelimushiana8388 3 года назад

Great work man

@vuthuylinh7651 3 года назад

thank you very much! It's really helpful!!

@DailyIntern 3 года назад

Keep it man, i am watching and thank you.

@daru7159 3 года назад

This helped me with a project thanx

@grimflow3919 3 года назад

OMG ,I love you ,thanks a lot !

@DavidCervantes. 3 года назад

Amazing video! Thx

@arifguler5555 3 года назад

Thanks man.

@alexproshkin7892 3 года назад

Thank you!

@narcissisticnarcissus4956 3 года назад

Amazing. You have the best React Native tutorials on RU-vid.

@noticeme_ltd9190 2 года назад

ha hahaahah hindi number one

@aman.tyagi112 3 года назад

Thank you 😊❤️😘

@thedvlpr 3 года назад

Thank you very much, Esteban 👍🏻your tutorial helped me so much ✨pls keep it up, you did a great job!

@code3144 3 года назад

Keep it man!!!!!

@ProfessionalTycoons 3 года назад

Great narration, calm and steady

@junaidanwar9960 2 года назад

nice explanation

@EstebanCodes 2 года назад

Hey, guys recently firebase released a new SDK version that is a bit different from what we use in the video, if you have the 9th version of firebase to follow the video please import firebase or anything related with firebase with the `compat/` folder path, for example . import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; If you install the 8th version you are all good

@jadamine1637 2 года назад

Hi Esteban 👋, I hope you are fine !! Thanks for the tutorial ♥ Do you have any recommendations or additional resources to be able to send messages to a specific user using his id or email.

@gilbertogden3921 Год назад

firebase v9 version use .cjs file extension which isn't supported in expo or in react native by default, therefore you will encounter an error:ERROR MESSAGE: "While trying to resolve module 'idb'..... Indeed none of these files exist". So if you use the 9th version of firebase, you need to resolve this issue by creating a metro.config.js file in the project root. In the file add code: const { getDefaultConfig } = require("@expo/metro-config"); const defaultConfig = getDefaultConfig(__dirname); defaultConfig.resolver.assetExts.push("cjs"); module.exports = defaultConfig;

@gilbertogden3921 Год назад

when use firebase v9 version, can user statement: import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; or just: import * as firebase from 'firebase/compat';

@uniknyafaktadisini 3 года назад

i like it next project again

@radicalglitch9218 3 года назад

Nice tutorial!

@marktombson6358 3 года назад

Yoo the way you filtered the query is genius! Thank you for this

@Michael-lb3hh 3 года назад

THANK YOU! This was SO fun!

@DerlisRuizDiazR 3 года назад

Gracias Esteban

@eddiechen6389 3 года назад

Thanks man its concise and helpful!

@dx5190 3 года назад

Great video with all the necessary details to make the app work.

@Fullflexno 3 года назад

Thank you for this. Cheers from Norway!

@4ktrailers170 3 года назад

It is Awesome Please Make New Videos Like This

@mraykaygaming 3 года назад

Keep it up man ❤️

@vibudathisuraka6229 3 года назад

Well done mate. Keep em coming

@mazhartejani 3 года назад

Thank you so much that really helped to learn the basic fundamental of how it works

@riceymartin2203 3 года назад

Thanks for the tutorial! One more question: How do you sign out of this service?

@mraykaygaming 3 года назад

I think you Spanish, your English accent is so beautiful 😍

@justnumber5197 3 года назад

Spanish accent**

@yogadiary8584 3 года назад

awesome! thanks for your teaching!

@prashoonbhattacharjee8211 3 года назад

Amazing tutorial!!

@jonathanmeguira 3 года назад

great tutorial. you should speed up the audio by 5 -10 % though

@deniro8664 3 года назад

Thank you! What exactly does //@refresh reset on top of file? I wanted to find out if is it related to TypeScript/ESLint/Prettier, but Google don't show me up anything about it.

@EstebanCodes 3 года назад

docs.expo.io/versions/v36.0.0/react-native/fast-refresh/#tips Fast refresh from expo preserves React local state in function components , we want to prevent that during development cause that can cause problems with of firebase observer

@rishisid 3 года назад

Great Tutorial , But How can i chat with image upload as well I cannot do that

@NewleadersTech 3 года назад

❤️❤️

@ericmckevitt8308 3 года назад

when I try to install the dependencies, I get “npm exited with non-zero code: 1”. does anyone know how to fix this? I believe firebase and the async-storage dependencies are the ones causing the issue.

@Rehankhan-eu5dh 3 года назад

Play it in 1.25x Speed :D

@levi9731 3 года назад

good job dude make more project using expo !!!! new subs from me. would you like give tutorial how to start using expo bare workflow , how to install library properly because im confuse what is linking library and install library properly react native always error

@minhajulkarim7502 3 года назад

Hi, can you please explain what is going on inside unsubscribe of useEffect hook?

@divyanshdixit909 3 года назад

Updated info from firebase does not refresh the screen instead it lists the whole data one more time, how to deal with that

@susuhabibi 3 года назад

can you do it so that you chat with a specific user associated by email?

@kwasiezor1630 3 года назад

Hi Esteban. Thanks for Video. I'm just having some issues with setting up expo cli. While initializing Expo CLi i got this error message: ERROR: Node.js v13.12.0 is no longer supported. expo-cli supports following Node.js versions: * >=10.13.0 =12.13.0 =14.0.0

@EstebanCodes 3 года назад

Hey you just need to change your node version, if you are in linux or mac you can easily do it with www.npmjs.com/package/n for windows you can use github.com/coreybutler/nvm-windows

@codewithyug1129 3 года назад

Everytime I do npm install expo-cli --global, an error occurs otherwise if I do npm i expo, there are few audits that are not being fixed and if I do expo init, an error occurs. Any solution

@rossanobr 3 года назад

this video is amazing Esteban! How would you do to make it a private chat?

@gilbertogden3921 Год назад

@edimarfsatumbo5675 3 года назад

How did you set the Avatars, please if you can do a separated video would be glad!

@sang9107 3 года назад

Use from react-native-elements. Set it in container {position:"absolute"} then use height & width to pick a position

@jorgemoraleslopez5575 3 года назад

Nice job, do you have pagination implemented?

@girikrishna7235 3 года назад

Dude u are the best!!!!!U give the best react native tutorials.Can u pls try to make a social media using react native.

@usuck511 3 года назад

Im going to guess you are able to have both the grey box and the blue box text show up because you have the app hosted on expo ?

@usuck511 3 года назад

Edit: Go to the Giftted chat github, look up one of their examples and you will see how to implement the user object that you pass into the user prop. This was my problem.

@imamabdulazis6159 3 года назад

how delete one message(buble)? can you explain me please

@thenekish1 3 года назад

can you create a video of how to upload previous messages from firebase (e.g if you have 100 messages, so you display 20 initially, and 20 more from before upon pressing a button)

@mazhartejani 3 года назад

that would be so great if you found this solution kindly do share, please. Thank you

@FULLUPE1 2 года назад

i have a little problem ....my chat goes to firestore but cant render it on Gifted-chat componet?

@guleye 3 года назад

why you didnt use socket.io for real time chat ?

@mohitbhasin2728 3 года назад

Is this vedio helpful if I'm using React native cli

@ashikhp1675 3 года назад

I can't install the package, it showing error

@keshavdk3080 3 года назад

Thanks for the video. I work as a Backend developer (Python). I heard that for building a mobile app, React native is the good choice. So, i wanted to build a mobile app for a computer service center(Laptops and desktops PC's) ,where we can keep track of customers details like Name,contact number,Type of goods they give for repair or service, date of submission,status of repair,charges . can i get any idea on which technology we can use to build the mobile app. the mobile app will be for internal reference.

@anandkumaran9837 3 года назад

Yellow box exception showing undefined.. What does it means.. Anybody help

@SakuraiHeinrich 3 года назад

Helloo guys, i have an error like this: [2021-02-07T10:47:24.535Z] @firebase/firestore: Firestore (8.2.6): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds. This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend. my internet connection is pretty good and i dont use any AntiVirus, what should i do? Thank you

@ademr9508 2 года назад

I had the same problem. any solution ?

@saadbajwa2443 Год назад

have a problem. sending and receiving same

@uiuxdesigner9636 3 года назад

idk you know but i think you are spanish and I hope your soccer team win

@pixoterenton1198 2 года назад

Oye guey sabes como hacerle sin firebase using something else like php and MySQL o algo gratis

@6av321 3 года назад

Hi. Thank you for the wonderful video. It helps me a lot. Just a question, is there any reason why did you choose the web app api of firebase instead of android or ios? Just want to know. But I think why you choose the web app api is because to make it cross platform for both android and ios am I correct? Thanks.

@AIArtistTunes 3 года назад

That's right

@noticeme_ltd9190 2 года назад

@@AIArtistTunes ha

@anheminhuc6325 3 года назад

how can you run two simulators?

@BluStik 3 года назад

Does Anyone Know How To Get The Full Name To Show?

@sumitsingh2889 3 года назад

this code is not working ..there are many error

@sandeshshrestha5441 3 года назад

uncaught error in snapshot listner

@ashishmadan5700 3 года назад

I got an error . Please anyone help me .I am really helpful to you ♥️

@triplem6363 3 года назад

Why your fonts look like this ??

@96_shreyachakraborty28 2 года назад

17:43

@1611maximo 3 года назад

hacelo en español tambien

@hwick-col9439 3 года назад

En español bro!

@NaveenKumar-fo4kz 3 года назад

Make firebase authondication

@sahedmohammad837 3 года назад

Sir i have a doubt Q1: can we connect the chat app to our contacts like whats app ? Q2: is the server needed for this chat app ? Q3:Can we send messages to only one person? Q4: Is this code we write in visual code studio ? SIR PLEASE KINDLY REPLY🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏