Build a Realtime Chat App in React Native (tutorial for beginners) 🔴

Рет қаралды 1,410,104

Күн бұрын

Check out the NEW updated version of this build:
kzfaq.infomxXJSVW4tRY
Let's build a Realtime Chat mobile application in React Native based on the Whatsapp UI design.
✨ Asset Bundle: assets.notjust.dev/whatsapp
⌨️ Source code: github.com/Savinvadim1312/Wha...
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
academy.notjust.dev
If you are a beginner that wants to learn javascript and react native, or and advanced javascript developer that wants to get into mobile development using react native then this Livestream is for you. This is a perfect opportunity to follow along and build this application together with us, and add it to your portfolio as it will help you land your next job. If you finish the app, tag me on social media and I will give you feedback.
We will start building the Whatsapp clone from scratch, starting from setting up a React Native project using Expo and finishing with connecting the application with a GraphQL backend using AWS Amplify. We will walk through designing the UI layout of the app, structuring everything in components, and putting everything together. We will also implement navigation between screens, header bars, and tab bars for the Whatsapp menu.
For the backend, we will be using AWS Amplify, which is an amazing combination of tools and services from AWS, that helps us build mobile and web applications faster. It offers pre-made authentication components and flows, database, API (REST and GraphQL), storage, and much more. We will be using Graphql subscriptions for the realtime chat functionalities
Doing the Whatsapp clone yourself is a great opportunity to practice React Native, modern Javascript, Typescript, AWS Amplify. We are always trying to use the latest technologies and best practices, so that's another opportunity to learn something new, being it functional components, hooks, state, navigations or AWS and Amplify.
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes
0:00 Intro
9:47 Initialize the React Native project
15:22 Project structure
16:35 React Navigation
50:57 Chat List Item Component
1:31:05 Chat Rooms List (FlatList)
1:48:34 Chat Screen
2:51:17 Chat Input Component
3:23:16 Floating Button (New Chat Room)
3:45:52 Demo
#VadimSavin #notjustdev #whatsapp

Пікірлер: 450

@marinaro2729 Жыл бұрын

Thank you so much, this is an awesome tutorial! Extremely grateful for the live debugging especially.

@codingwithanonymous890 3 жыл бұрын

Sir i recently finished Reactjs and started to learning reactnative from ur videos and ur projects helped me to learn a lot thank you so much sir

@knowakshayjoshi 3 жыл бұрын

Thank You so much, Vadim. Learning a lot from you!!

@arikmosfor4907 2 жыл бұрын

as a c# developer this is an amaizing work!!great job boddy!!

@exevirus887 2 жыл бұрын

It's really helped me a lot, thank you, Vadim. I now can build real-time chat apps using react native.

@notjustdev 2 жыл бұрын

That's awesome

@zackOverflow 2 жыл бұрын

I have been searching for the part 2 of this tutorial and I have not come across it. Can I get a link?

@amanueltadesse1655 2 жыл бұрын

What a journey it was my first experience with react native and you make it a lot easier

@zackOverflow 2 жыл бұрын

I have been searching for the part 2 of this tutorial and I have not come across it. Can I get a link?

@mahilkr Жыл бұрын

@@zackOverflow kzfaq.info/get/bejne/fsp8lcSn28zKnIU.html

@carlharrison10 3 жыл бұрын

Regarding your comments around 2:07 ... this is personally why I favour your streams over others and why I want to watch many more. I really enjoy the natural process of coming across a problem and seeing how a developer will get around it and their thought process. There are too many unrealistic streams and tutorials on YT where the developer looks like they know everything which is ridiculous. Your method gives me confidence that "oh wait, other people struggle with this too, not just me"

@zackOverflow 2 жыл бұрын

I have been searching for the part 2 of this tutorial and I have not come across it. Can I get a link?

@mahilkr Жыл бұрын

@@zackOverflow kzfaq.info/get/bejne/fsp8lcSn28zKnIU.html

@mamaessuperpreparadas-dica5782 2 жыл бұрын

Gostei demais do roteiro e da edição do seu vídeo, curti e compartilhei

@yonatan2608 3 жыл бұрын

thank you, great video! keep going for the 12 hours! I believe in you.

@notjustdev 3 жыл бұрын

Hey, thanks for the support

@getjob3662 2 жыл бұрын

@@notjustdev huh 2021 ending . and my ask how to mix ui with clone stuff

@Deep_880er 3 жыл бұрын

great tutorial man!! loved it. Thankyou very much! completed the ui .. now I will watch the backend

@notjustdev 3 жыл бұрын

Glad you liked it!

@adarshbhardwaj6190 2 жыл бұрын

i was not finding react native cli stuff on utube u helped me a lot thanks✌✌✌

@humayunkhalid8452 2 жыл бұрын

Man,you are changing my fate.Can't thank enough.God Bless you

@aliexpressbomebarato871 2 жыл бұрын

Parabéns pela iniciativa

@VenkateshN6819 2 жыл бұрын

absolute knowledge sharing.. able to understand the concepts well. thank you

@shivamgoyal7717 3 жыл бұрын

Thank you from the bottom of my heart, I learned a lot!!

@notjustdev 3 жыл бұрын

I am so happy that you found it valuable

@user-cn6ke3xe2c 3 жыл бұрын

Can you help me fight illegal software? I will give you money

@pioleonardo Ай бұрын

It is just 3 months since I started React Native and I am loving it. Your videos are great and makes me want to learn React Native more. Thanks and I am subscribed!

@notjustdev Ай бұрын

Happy to hear that! Good luck with your React Native journey 🚀

@fsix4012 3 жыл бұрын

you really made my day, I am happy with this content

@notjustdev 3 жыл бұрын

That means a lot to me, thanks 🙏

@user-cn6ke3xe2c 3 жыл бұрын

Can you help me fight illegal software? I will give you money

@iangprak9284 11 ай бұрын

🎉🎉via d🎉v😢 7:24 @@user-cn6ke3xe2c

@markmanson1440 3 жыл бұрын

You're amazing, please keep teaching us. :) Watching from South Africa.

@notjustdev 3 жыл бұрын

Thanks for the support 🙏❤️

@samiirmahamut3417 3 жыл бұрын

@sthefanocarvalho2823 3 жыл бұрын

Man You are awesome! I'm really happy I discovered your channel today :):) Thank you for all the great content!

@notjustdev 3 жыл бұрын

Thanks a lot, Sthefano

@sthefanocarvalho2823 3 жыл бұрын

@@notjustdev I already have a schedule to binge watch your videos over the next weeks :)

@notjustdev 3 жыл бұрын

@@sthefanocarvalho2823 Awesome brother 👌Make sure to build along. Just watching is not very effective.

@mohammedthiandoum2543 Ай бұрын

One of the best dev videos. Thank you for cloning whatsapp! It helps me 3 years after release. Peace in you bro! From Senegal 🇸🇳!

@notjustdev Ай бұрын

Thanks!

@Shinichir0 3 жыл бұрын

Obrigato bro !! Great content because It took me more than 8hrs to go through all the video haha

@notjustdev 3 жыл бұрын

Glad it helped!

@mahendranath2504 3 жыл бұрын

Just I though of learning react native, I feel so happy I found your channel, thanks for all your work, 👍🏼🙏 happy subscriber, I highly recommend

@notjustdev 3 жыл бұрын

Thanks a lot for your kind words, it means a lot to me

@mahendranath2504 3 жыл бұрын

@@notjustdev Thank you for responding, I felt so happy, is there any way can you tell the alternative way to create the backend for those people who can't spend on AWS, I mean like any free ones, respect your effort for bringing this to use

@notjustdev 3 жыл бұрын

@@mahendranath2504 AWS has a free tier that will cover most* of the services that you would use during the tutorials

@mahendranath2504 3 жыл бұрын

@@notjustdev Thank you

@alirazzaq1541 3 жыл бұрын

Hye Vadim, great tutorial. I am following along. One suggestion for the viewers on the time problem. I just tried a lot of things and the absolute position of the time worked perfectly.

@antoniocolon3422 2 жыл бұрын

Fell asleep to kurzgesagt, woke up to this. I don't code, program, or every have any intention of learning. But dope shit dude I subscribed.

@SAITEJAPinna 3 жыл бұрын

Thanks Savin for the good work,helping this a lot, can we use text editor for react native just like slack i.e.,bold,italic etc...

@jerrymilesmiles9313 Жыл бұрын

Outstanding! Best regards from Limón, Costa Rica!

@nitin9042 2 жыл бұрын

I have watched video yet but all the comments seems legit and makes me wanna watch this video. Even though i dnt even know nothing about react and all. But i wanted to learn. So thanks

@rahimaskerov 2 жыл бұрын

You are literally a legend!👍

@pedroespinoza7595 3 жыл бұрын

thank you, great video! Vadim

@notjustdev 3 жыл бұрын

Glad you liked it!

@kiranvaddy7302 2 жыл бұрын

this is awesome.. thank you so much for sharing

@_PhantomTrader_ 6 ай бұрын

I used to code in c+ but I haven’t coded for years now I am now coding in Python for trading indicators. I started using computers at a young age when they first started in assembler language and Cobal HTML C+ and other languages. I’m very rusty but I still remember the basics.

@TheWolfTrader 3 жыл бұрын

Thankyou Sir...Lots of Love from India...

@dinethpiyumantha 2 жыл бұрын

Thank you so much Vadim !

@benahloy2838 3 жыл бұрын

its truely amazing bro...

@racket1111 3 жыл бұрын

Thanks for doing the video. Here from the US.

@notjustdev 3 жыл бұрын

Glad you liked it!

@siddhi.classes.jalgaon6685 3 жыл бұрын

Thanks Brother ,It's help lots to me....❤️ ...I follow this tutorial & Also tried...

@notjustdev 3 жыл бұрын

Glad that you like it :)

@nikhilgupta71 3 жыл бұрын

You so good Vadim!! Amazing Project Amazing Value Amazing You!

@notjustdev 3 жыл бұрын

Thanks so much!

@amahabide1631 3 жыл бұрын

@@notjustdev c

@amahabide1631 3 жыл бұрын

@@notjustdevccccccccccccccccccccccccccc Checcccccccccccccccccz

@putragimbalchannel2354 2 жыл бұрын

@@notjustdev kiuuuiukukukuukukiiuiuuumj

@amnaaldh9911 3 жыл бұрын

this is awesome.. thank you for sharing

@adomicarts 2 жыл бұрын

Supper Man ! Hard work subscribed!🔥

@geekthegeek730 3 жыл бұрын

Thats is awesome man!

@notjustdev 3 жыл бұрын

Thanks 🙏

@agustinlavalla8892 3 жыл бұрын

Amazing tutorial. Thanks so much

@user-cn6ke3xe2c 3 жыл бұрын

Can you help me fight illegal software? I will give you money

@ebadrahman1832 11 ай бұрын

Thank you so much. great job!!!

@bhagirathmakwana9112 2 жыл бұрын

Love you bro ❤ you are amazing 🧡

@ArtProductionAgency 2 жыл бұрын

Amazing ! Thank You

@realityshow4815 2 жыл бұрын

Seu video é muito legal você está de parabéns

@BAWAYAJOAL 11 ай бұрын

thanks you so much ,really doing good job

@gbengafagbemi9349 3 жыл бұрын

Great Tutorial, really enjoyed it

@notjustdev 3 жыл бұрын

Thanks for appreciation 🙏

@houuubbpou5496 3 жыл бұрын

Loved it

@alinademeter4887 3 жыл бұрын

Alina from Seal Beach, California. Thank you Vadim for posting this.

@notjustdev 3 жыл бұрын

Glad you enjoyed it

@nairgh 3 жыл бұрын

Great Tutorial. Thanks for your time and help.

@notjustdev 3 жыл бұрын

Glad you liked it

@maksymr5860 3 жыл бұрын

Nice video and explanation! Is there a second part with the server implementation?

@notjustdev 3 жыл бұрын

Yes, check it out on the channel page

@zackOverflow 2 жыл бұрын

@@notjustdev I have been searching for the part 2 of this tutorial and I have not come across it. Can I get a link?

@RiseShineInspireDaily-sc4ie 3 ай бұрын

Thank you there is so much to learn in this life !!!!! Awessome tutorial!!!

@notjustdev 2 ай бұрын

You are so welcome!🙌

@muhammadahsenriaz5803 2 жыл бұрын

Great video learned a lot. Thank You....

@haseeb_ahmed 3 жыл бұрын

Keep making more videos like this! Love from Pakistan.

@notjustdev 3 жыл бұрын

Thanks :)

@shivamkumar-qp1jm 2 жыл бұрын

best youtube channel to learn react native

@mamaessuperpreparadas-dica5782 2 жыл бұрын

arrasou amigo!

@dayansir7481 4 ай бұрын

Wow,Thanks

@user-gs5cp6fh7e 3 жыл бұрын

very quality for a video and content love for you

@notjustdev 3 жыл бұрын

Thanks ❤️

@techwithagent7224 3 жыл бұрын

Superb video made my day 😍

@notjustdev 3 жыл бұрын

thanks

@hectorg362 3 жыл бұрын

Will definitely watch this later, but thanks for these awesome content! Do more React tutorials like these?

@notjustdev 3 жыл бұрын

Now or never 😂

@mickylyricalkartel 3 жыл бұрын

How is it Vadim, May you please do a tutorial on video calls using react native? We have fewer and old tutorial here on youtube

@notjustdev 3 жыл бұрын

That's a challenging feature in RN, but sounds like a good challenge for me

@ramsankar6202 3 жыл бұрын

Thank you so much brother !!!!

@notjustdev 3 жыл бұрын

Always welcome

@alexisbustamante7950 Жыл бұрын

AMAZING

@daniyalkaleem2267 3 жыл бұрын

Doing a Great Job Brother

@notjustdev 3 жыл бұрын

Glad that you find it valueable

@daniyalkaleem2267 3 жыл бұрын

@@notjustdev Yes It is :)

@desalegnjeginaw5038 3 жыл бұрын

Thank you very much for your assistance.

@notjustdev 3 жыл бұрын

My pleasure

@imPriyankCoder 3 жыл бұрын

Thank you

@Hewagej 11 ай бұрын

Thank you very good information video for beginning

@annalisaflores3661 2 жыл бұрын

thank you so much

@learntocodenow 2 жыл бұрын

Very informative video ! Awesome

@555pontifex 3 жыл бұрын

Your problem at 1:40:00 is that you have a nested flex column within a flex row, and there is no way to control the width of the column with respect to the items of the parent row. There are three ways to fix it: either, 1) set a fixed width for the 'leftContainer', or 2) set a fixed width for the 'midContainer', or 3) Put the username and the timestamp together into a flex row, and the lastMessage able to flow under it to the whole width of the parent. Solution 3 is the best.

@hasotech7066 Жыл бұрын

Hey Mat, Can you Personally teach me RN?

@annalisaflores3661 2 жыл бұрын

i learned a lot from your video

@cypherny5109 2 жыл бұрын

I don't code, I don't even know why this video came up, but i was sleeping to your voice all night its very soothing

@notjustdev 2 жыл бұрын

You made my day 😅😅😅

@TOSHAMSANDERS 2 жыл бұрын

The same thing just happened to me. 😁

@HealthHabitsHQ. 3 жыл бұрын

Thanks for the great video :) in the future would you mind making the code slightly larger I'm having a hard time reading it.

@notjustdev 3 жыл бұрын

Thanks

@zackOverflow 2 жыл бұрын

I have been searching for the part 2 of this tutorial and I have not come across it. Can I get a link?

@sahilpatel1013289 Жыл бұрын

Hi appreciate your videos. do you know if its possible to display a small cart modal header type view that's above a bottom tool bar and you can swipe up to show the cart details screen?

@devsmith948 3 жыл бұрын

Did you integration with AWS amplify for chatting?

@ha_nguyen_146 Жыл бұрын

thank you very much

@percysiyabongaNdaba 3 жыл бұрын

I owe you, bro!

@blightedgrounds 9 ай бұрын

NOICE

@satohitomi5147 Жыл бұрын

Hi, Thank you.!

@miguelsantos3057 2 жыл бұрын

Assisti seu vídeo e gostei demais

@mihaicaulea 3 жыл бұрын

Foarte mișto, Vadim! În sfârșit conținut pe KZfaq ce să te facă să vrei să faci programare de drag. Mulțumesc!

@notjustdev 3 жыл бұрын

Mersi mult pentru apreciere, Mihai

@musiclirik4531 2 жыл бұрын

trick in camera tab navigation tabBarOptions={{ style:{ ... marginLeft: '20%' }, iconStyle:{ left:'160%' }

@rayhanalshorif3239 3 жыл бұрын

Wow Amazing

@notjustdev 3 жыл бұрын

Thanks

@DuyTran-ss4lu 2 жыл бұрын

Awesome

@devsmith948 3 жыл бұрын

Really wonderful video!!!

@notjustdev 3 жыл бұрын

Thank you very much!

@danielwestlund9208 2 жыл бұрын

I made it! Moving to backend video now! Thanks for awesome video!

@notjustdev 2 жыл бұрын

Awesome. Keep building

@cova3376 3 жыл бұрын

The reason of ' Property Users are incompatible ' is because instead of users: [User], it should be users: User[]

@tshepo2japhta28 3 жыл бұрын

You Good man

@benjaminikwuagwu6469 3 жыл бұрын

This is really awesome, I did not hesitate to subscribe to your channel and the bell icon. I really wanted to to see the part of camera screen in whatsapp clone...i.e, video recording and snapping, I have not seen whatsapp clone tut that covers that part.

@notjustdev 3 жыл бұрын

Thanks for the support. I might do the video functionality for whatsapp clone in future

@ErbecaCOD 11 ай бұрын

Hi! I initialised the project, however in the WhatsappClone folder there are loads of other folders missing(src,screens,navigation). At first i thought i choose the wrong option when starting the project but i've canceled and repeated the procedure and i still can't find many many folders in the vscode explorer. I also checked if any of this folder were in the gitignore file. it just seems theyre missing. Any help??

@AllRounder-jt1pe 2 жыл бұрын

Sir this tut is best love it❤ sir if i make a chat app by using ur tutorial and then upload on google play then will there be any problem of copyright or anything else?

@notjustdev 2 жыл бұрын

Just don't use the obvious Whatsapp design.

@souviksaha9641 3 жыл бұрын

You channel is very unique than other channel, it's awesome your build

@notjustdev 3 жыл бұрын

Thanks for the support 🙏

@dedisupardi2815 2 жыл бұрын

excellent

@iheanyipaschal1681 2 жыл бұрын

u good bro

@KwamyA 11 ай бұрын

Thank you for the great video. Just want to find out if it is possible for someone to develop an app that is cloned and monetize it if the features are changed, like the names and some few things.

@alexandraputuntica 3 жыл бұрын

Answer on how to fix the ChatListItem lastMessage to fit the screen: ``` leftContainer: { flexDirection: 'row', flex: 1, }, ```

@user-xs5fj6ou7t 3 жыл бұрын

خیلی خوب وعالی است

@sohye_lee 3 жыл бұрын

Hi, thank you so much for this awesome content. I just wonder, I see after you do the expo init, your project root folder has all the components already. Are they written by you beforehand and included in the bundle? And by the way, I requested download but I don't get any email.

@notjustdev 3 жыл бұрын

Hey, thanks. No, that's not wirtten by me, that is the boilerplate that expo generates. When doing expo init make sure to choose the Typescript with tabs template. Regarding the asset bundle, there was an issue with it today, but should start working soon. If it still doesn't work, shoot me an email and I will send them to you

@sohye_lee 3 жыл бұрын

@@notjustdev Thank you so much for quick reply! I think I somehow skipped the 'tabs' part. It worked. I am so excited to have found your tutorial. Thanks!