Let's build WhatsApp with React Native (tutorial for beginners) 🔴

Let's build a Realtime Chat mobile application in React Native based on WhatsApp UI design.

📚 Enroll NOW in "The Full-stack Mobile Developer" course

🎒 Get the step-by-step guide and Asset Bundle

If you are a beginner that wants to learn javascript and React Native, or an advanced javascript developer that wants to get into mobile development using react native then this tutorial 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.

We will start building the WhatsApp clone from scratch, starting by setting up a React Native project using Expo all the way to building the 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 real-time chat functionalities

Doing the Whatsapp clone yourself is a great opportunity to practice React Native, modern Javascript, and 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.

🐱‍💻 Source code

💬 Join the notJust Development gang and let's build together

Tag me on social media when you finish this build, and I will give you feedback on your project.

Timecodes:
0:00 Introduction
01:22 What we will build
02:08 Technologies
03:16 Getting started
03:58 Prerequisites
08:29 Initialize the project
14:25 Build the chat list item
40:58 Working with props
49:53 Chats list component
01:08:14 Build the chat screen
01:34:44 Input box component
02:01:22 Implementing navigation
02:47:52 Build contact screen
02:57:41 Q&A

Disclaimer: This build is for educational purposes only!! All views, opinions, technology choices expressed in this video are my own and do not represent the views, opinions, technology choices of any entity whatsoever with which I have been, am now, or will be affiliated.

#notjustdev #whatsappclone #reactnative

[SuperYoda]

Please continue with the backend so that we can finish the app and make it work! I am learning so much here!
Keep up the great work!

[euralux]

Better than any tutorial videos I've seen, I learned so quickly with this

[SuperYoda]

Please add voice and video chat features after finishing easy message functions! I absolutely love learning from you since I just finished a react native course. Really appreciate your work, your channel is awesome!

[jfvanreu]

This is one of the best tutorials I have seen. It's great to follow your entire thought process. Really enjoyable.

[chamathmadhuranga]

this is the best tutorial i've seen so far

[bryanansong]

Providing the notion assets file has been really resourceful

[Franktek]

Very good video. One of the best for React Native. This channel is my React Native learning academy .... 🙂👍

[SAMAmUrl]

Un cours assez enrichissant . Bien Documenté et instructif. Thanks A lot for this Wonderful project.

[wojciechg]

Just starting. if l like the series i will leave a donation 100%

[TechWithHamoon]

Dude you are awesome! I appreciate your videos.

[RockMan]

great curse! i waiting for back-end part!

[ShaphatFiifiGorman]

does the scrolling work for the chats screen because mine isn't 😢

[trevordavlin]

Love this for the next project we should do a stocktwits clone would be very interesting and different

[jasim]

Why do most YouTubers choose to create videos using Expo? Is it because it's easier to use?

[tyomidi]

Any reason you don’t record/stream in 1080p? Blurry text makes it hard to watch. Most YouTubers using 4K but at least 1080p is needed.

[carminetambascia]

@notJustDev please where are the other video?

[harshmittal]

Great Video. Awesome Content. Kudos . When will backend video come?

[xeno]

hey man! just discovered your channel. Thanks for the hard work. I want to ask you something. I want to build and develop my first project watching your tutorials. Should i watch and follow this video or 2 years ago the one you uploaded? I want my app to look like an android WhatsApp. But this one looks like iOS. Which one should i watch? Thank you 💓

[zaggimmanuelo]

i am using android to do this, i have just discovered that, IOS in terface is so different from Android, its totally different,

when you used the navigation it automatically insert the ios setting on the chatscreen but it didn't so the same this for android

[chanelmalith]

if I use to develop expo there any difference between applicating when running on mobile phones