React Native Chat App UI Tutorial

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.

► 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)

[RamanandSingh]

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]

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 ? :)

[vigneshwaraneswaramoorthi]

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.

[zafer_koca]

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

[arupgorai]

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

[DKeverGaminG]

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

[BA-viyk]

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

[hadrienjaubert]

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

[oxygame]

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

[nats]

Are.. you.. a.. transformer..? You.. sound.. like.. a.. robot.. (MECHA)

[jwf]

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

[eloymaldonado]

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

[digvijaybind]

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

[southredmondtoxik]

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

[reveriches]

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

[Karinnederland]

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

[pradeeptomer]

Sir please make a video on twilio and Agora chat app

[nizamramazanov]

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

[arupgorai]

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 :-

const setTabBarVisible = (route) => {
const routeName =
const hideOnScreens =
> -1) return false;
return true;
}

[ankitpanchal]

where is the database for chat screen?