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

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

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

50% 1

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:
www.udemy.com/course/react-na...
Support us with Bitcoin:
1NTuEsXoXE89YiJRNoBDBBRBECE7P9mBik
Open Crypto Wallet
jp-ex.io/register?code=S6Gcvun6
🔥🔥🔥To get the latest Udemy coupon and news, subscribe our telegram channel🔥🔥🔥
t.me/ckmobi
article:
/ a-simple-way-to-build-...
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
www.udemy.com/course/react-na...
Complete NodeJS course with express, socket io and MongoDB
www.udemy.com/course/create-n...
Complete Progress Web App BootCamp
www.udemy.com/course/complete...
Complete Modern JavaScript BootCamp from the beginning
www.udemy.com/course/complete...
React - The Complete Guide with React Hook Redux 2020 in 4hr
www.udemy.com/course/complete...
Vue JS and Firebase:Build an iOS and Android chat app [2020]
www.udemy.com/course/vuejs-an...
New SAT Math Course
www.udemy.com/course/new-sat-...
New SAT Math Practice Test Explain
www.udemy.com/course/new-sat-...
Get A* in GCSE Maths (Quadratic equations and graph)
www.udemy.com/course/get-a-in...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💟Follow me
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
‣‣ Udemy ► www.udemy.com/user/cyruschan2/
‣‣ Twitter ► / ckmobilejavasc1
‣‣ Facebook ► / javascript.ck
‣‣ Instagram ► / ckmobile8050
**Equipment that I use**
Macbook Pro
amzn.to/2CC41HV
Blue Yeti USB mic
amzn.to/3jf3gph
Camtasia
amzn.to/30aopbg
#javascript
#webdevelopement

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

6 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Join the affiliates program and start earning money🚀 ckmobile.gumroad.com/affiliates

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

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 mailchi.mp/cb8cb6b3878e/javascript-course Read articles: ckmobile.medium.com/ Support what I do and push me to keep making free content paypal.me/ckmobile?locale.x=en_GB

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

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?

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

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?

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

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

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

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

@SL-xo1mb 2 года назад

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

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

Wow Its Amazing Thank u so much sir.

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

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

@user-sq7si4jz5h 5 месяцев назад

❤

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

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?

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

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

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

You can try to add one more level of collection in Firebase🤓

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

Awesome video

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

Please show how to send image in gifted chat.

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

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

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

You need to install react snippet extension inside vscode

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

@@ckmobile Thank you dr. I'm new to react-native. well explained tutorial hope more will come near future

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

@@tharindurajapaksha9293 ok I will try my best to improve 😊

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

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

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

Yes, at the last lecture of the section😊. And each lecture will have the intermediate step code for download.

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

helpful ❤

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

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

@TheNotoriousDev Год назад

Could you please share git repo of this?

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

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

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

It should be group chat, because it just have one chat page without using id . So everyone login will go to the same page. It need more work if for one to one

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

Castellano por favor

@SL-xo1mb 2 года назад

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.