No video :(

React Native Chat App UI Tutorial

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

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

50% 1

In this tutorial, you'll learn how to create a chat UI in react native. To create this UI, I have used a package called react native gifted chat and then customized it to fit our requirement. With this chat screen, I have also created a list of messages screen in which we will display all the users to whom we have sent messages before.
→ Social App with Firebase in React Native Playlist • Social App with Fireba...
→ React navigation v5 tutorial playlist • React Navigation 5 Tut...
→ Food Finder App in React Native Playlist • Food Finder App in Rea...
→ React Native News App Playlist • News App in React Nati...
GitHub Repo URL bit.ly/3iW5n0v
► Timestamps
0:00 Introduction
2:02 Discussing Project Structure
3:28 Create Messages Screen UI
7:52 Passing Custom Parameter to Chat Screen through react navigation
9:19 Create Chat Screen UI with react native gifted chat
11.13 Changing The Chat Bubble Appearance
12:59 Customizing Message Send Button
15:26 Customizing Scroll To Bottom Button
17:39 Hiding Bottom Tab Bar in a Specific Nested Stack Navigator Screen (Chat Screen)
React Native Gifted Chat Package URL github.com/Far...
If you found my tutorials helpful, you can buy me a coffee from this link paypal.me/itzp...
Follow me on Twitter / itzpradip
Follow me on GitHub github.com/itz...
Subscribe to my Channel bit.ly/2PaUqOk
For more tutorials on WordPress, React JS, React Native and Flutter visit: www.pradipdebna...

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

15 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Whenever I need something to learn, this guy appears. Thank you mate!!

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

Got insights: gifted-chat: send button design with sendcomponent, scrolltobottom prop with custom component, chat bubble custom design. tab visiblity: tabVisible with route name check & index check keep tabNavigator inside stack, reverse may make UI glitches during screen navigation.

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

Bro u are a legend. Ty for all your effort. This helps me a lot.

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

God bless. Let's be honest, I used your code

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

I enjoy your tutorials so much because they are detailed and you explain everything, please do a part two of this and make it with firestore functionality. Please brother.

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

Hi Pradip, Pls Pls Pls Pls Make the backend of this tutorial I was trying to build but i coudnt so pls build the backed of this tutorial

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

Nice explaining! I cant find the video that explains how to set up the chat in firebase with Android and how to do it in the code. Please could you paste the link ? :)

@Wa-badeaN 3 года назад

so my suggestion bro to do great tutorials with completed app and we can pay for that if you do so why not coz you deserve as your explanations are clear and simple to understand

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

Hey ! sir very helping Tutorial . Thank you so much

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

if you want make the tutorial please show it step by step. i cant follow this because you have the other think yet before the video started. how can i see the messagestyles??

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

Hi Pradeep, very nice tutorial.. just curious.. when chat functionality with firebase comming ?? plz reply..

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

Thank you for this amazing video !! Do you know when you will upload the part where you store the messages in firebase please ?

@BA-vi8yk 2 года назад

Brother you are amazing, PLEASE give us the part with the firebase soon PLEASEEEE THANK YOU

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

Hi Pradip Debnath, Thanks for your contributions

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

Pradip bhai mera ek navigation problem hai Login to profile page please help me

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

hello can you guide me ..i have a home screen in bottom of the screen textinput box (chat screen)here when keyboard open at the time tab bar also scroll up..how can fix the position in tab bar..??

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

Very nice it is such a great tutorial

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

You're the React Native God !!!

@webnet9285 Год назад

Hi, say i have two users (two app instances) , does gifted chat sends and receives messages without any middleware? like a broker service?. I'm kind of confused here . Note: I don't intend to store the messages for later use . Its just an on demand chat for that specific context only. In that case, i dont need to use service like Firebase right?. For use registration im using aws amplify.

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

I like your tutorials, clear explanation. Can you please make another tutorial regarding chat functionalities for sending images, geo maps, contacts, videos, and detailed explanations about storing in firebase and also the custom popups in chat.

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

Hi Pradip can you please do a part two of this and make it with firestore functionality. Please my guy

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

Thank you for your content, very interesting

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

My pleasure!

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

i got error undefined is not funciton can you help me?

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

how to delete a message in chat screen please provide this functionality also

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

Sir, i did love your tutorial but can you make tutorial about firebase admin? I would appreciate it

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

Amazing Thank You

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

@Pradip Debnath Sir can you complete this chat app including remote notifications.

@ankitpanchal7554 Год назад

where is the database for chat screen?

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

Thank you!

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

Please could you post the links to the firebase videos of the social app? :))

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

Have you implemented its second part that have back end etc

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

@pardip could you provide me starter template for react native project

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

ERROR :- If you getting this error while hide bottom-tab on specific screen [Accessing the 'state' property of the 'route' object is not supported.] SOLUTION :- import {getFocusedRouteNameFromRoute} from '@react-navigation/native'; const setTabBarVisible = (route) => { const routeName = getFocusedRouteNameFromRoute(route); const hideOnScreens = ['SCREEN_NAME_ON_TO_BE_HIDE']; if(hideOnScreens.indexOf(routeName) > -1) return false; return true; }

@Sundayfunday-ro1xc 3 года назад

Awesome please make video on firebase firestore pagination with this chat ui

@furqonwahyudi4095 Год назад

hello mr, can you give a tutorial on how to make a react native chat application whose client uses pusher and the server uses laravel?

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

Bro please make a vedio for setting environment for react native tutorial

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

Can you make a bottom navigation bar with the center tab bar display bigger like a circle ? Quiz up as an example.

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

thank you!!!!

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

Superb 👌

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

Do you have a video that you implement firebase in this chat app?

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

Kindly Make Video for React Native Context (useContext etc) please . Thanks

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

Thank you for this amazing tutorial 🔥 Can we send pictures/gifs with Gifted Chat? If so, can you make a video about it?

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

hi , any update on this ?

@0x2bn 3 года назад

@@ashikhp1675 PooPO

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

can you share the wallpaper?

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

Sir please make a video on twilio and Agora chat app

@Wa-badeaN 3 года назад

your tutorials are great but i'm not learning something will benefit me as real app , so better to do great app completed one and you will see how many subscribers you will get it is all about contents bro

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

thanks

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

You're welcome!

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

Hello Sir, can you make a tutorial about Google Drive API with React Native ? I want to upload an image to google drive and I want to save the image path (google drive link/path) to the firebase/firestore.

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

bro very nice lectures but you are focusing only on UI and not to on coding with firebase and how to structure it properly ..

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

can you make some new things with gestures? like zoom image or carousel etc?

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

Merci beaucoup

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

Thanx bro

@eloymaldonado1584 Год назад

La gente de habla hispana no le gustan los juegos por turno temática gacha, si he visto eso mucho que en otros lugares les gusta mucho y aquí estamos más acostumbrados a los FPS

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

great

@othnieldavidson7579 Год назад

i feel is not clear

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

Sir could you please make video of chat integration

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

sir pls tell how to send image pdf and audio

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

Nice video

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

Thanks

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

🔥🔥

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

thanks for the video, but I need help. how to change chat time color appear in every chat we type, its not changing I have provide this textStyle ={{ right: {color: "#000"} left: {color: "#000"} }}, please can you help me with this?

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

Please make video on Redux and CRUD

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

firebase k sath connection tu banaye , bhai g

@Wa-badeaN 3 года назад

why don't make one completed app with backend such as restaurants app, coffee, or any other completed app instead of making short tutorial for only UI and other unnecessary stuff