Expo React Native Chat App | iOS and Android Chat App with React Native Gifted Chat and Firebase

In this video , we will walk through how to use the firebase to store and fetch the messages. With the help of the react native gifted chat, the chat app can easily be created.
source code:

Support us with Bitcoin:
1NTuEsXoXE89YiJRNoBDBBRBECE7P9mBik

Open Crypto Wallet

🔥🔥🔥To get the latest Udemy coupon and news, subscribe our telegram channel🔥🔥🔥

article:

00:00 introduction
00:47 create project and install packages
02:30 add stack navigator
04:38 create login screen
08:45 create register screen
12:44 add firebase to the project
14:56 create register function
18:47 onauthstatechange - check the state to display different screens
21:55 create signin function
22:05 create signout function
25:27 fix the navigation problems
28:35 implement the react native gifted chat
30:11 edit the giftedchat component and save the message to the firebase firestore
33:25 fetch the messages from the firebase firestore and test the chat app

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🔥Complete Courses🔥
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
React native Expo for multiplatform mobile app development

Complete NodeJS course with express, socket io and MongoDB
Complete Progress Web App BootCamp

Complete Modern JavaScript BootCamp from the beginning

React - The Complete Guide with React Hook Redux 2020 in 4hr

Vue JS and Firebase:Build an iOS and Android chat app [2020]

New SAT Math Course

New SAT Math Practice Test Explain

Get A* in GCSE Maths (Quadratic equations and graph)

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💟Follow me
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

***Equipment that I use***

Macbook Pro



Blue Yeti USB mic



Camtasia

#javascript
#webdevelopement

[ckmobile]

Join the affiliates program and start earning money🚀

[Bigdog]

I just need the chat portion of the app. I have authentication, sign in and sign up already enabled using AWS. Can I just take the chat app specific stuff from this video and integrate it into my app?

[namegener]

do u have the full app for download on your course?

[GreenBrainX]

Hi, does this work for dating apps whee one person has to send a message request to another, the other has to accept before they can chat?

[cerritosrules]

Do you have an idea on how to implement a join chat room feature?

[arikmosfor]

great tutorial.can you make a screen that display all the chats?

[SL-xomb]

try using

<Button title="login" buttonStyle={styles.button} />
<Button title="register" buttonStyle={styles.button} />


if style={styles.button} does not work for you

[trustgunn]

Please I do not understand where the second ID from the gifted chat came from

[tharindurajapaksha]

In my case at the very beginning, "rnfe" doesn't give any suggestions for the react-native functional export component. why is it and how can I solve this. I installed all the packages also.can you please help me

[mohammedosman]

Please show how to send image in gifted chat.

[artiommatvejev]

Hello, how to remove event listener when you are not on this screen?

[xenoxel]

I am not able to npm start my emulator, when I start with expo web or android emulator I get a blank screen. Does anybody know what i am doing wrong?

[zarifhossain]

it's for only one to one chat. not for more than two person chat

[Loki]

Could you please share git repo of this?

[mirjalolkhudratov]

test it in real apple device your keyboard hide input. can you fix it

[ckmobile]

Hope you guys enjoy this video! Keep learning and your dreams will come true :) Don't forget to SUBSCRIBE for more videos

What will you create with react native gifted chat? Please leave a comment below.

You can also subscribe to get info or our (free) course coupons


Read articles:




Support what I do and push me to keep making free content

[SL-xomb]

if anyone sees duplicated messages in chat, just comment out the GiftedChat.append(previousMessages, messages); inside onSend function, I am guessing we let onSnapshot 'loads' the messages instead.

[mseddimariam]

when i put db.collection('chats'.add({
not work !