Build a WhatsApp Clone with React Native (Expo Router, Reanimated, Clerk, Gestures, Gifted Chat)

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

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

50% 1

Join me as I build an epic WhatsApp Clone with React Native. You'll learn how to do the following in this tutorial:
👉 Use Expo file-based routing
👉 Use Clerk for user authentication
👉 Add Sign-in with Apple and Google Auth
👉 Work with Reanimated for Animations
+ A LOT OF FUN 🚀
LINKS
🔥 Learn React Native FAST: galaxies.dev
🔐 Try Clerk: dub.sh/geBfnV5
👨‍💻 Get the code: github.com/Galaxies-dev/whats...
🔗 Check out the AirBnB Clone: • Airbnb Clone with Reac...
#############################
❤️ You can also find me on:
Twitter: / schlimmson
Instagram: / simongrimm_
#############################
00:00 About this clone
01:31 WhatsApp Clone Overview
04:32 App Setup and Expo Prebuild
16:33 Mask Input and Code Field
01:01:15 OTP Auth with Clerk
01:25:32 Expo Router Tab Bar Setup
01:34:06 Settings Page with iOS Header
01:48:46 Calls Page with JSON Data
02:03:48 Segmented Control and Layout Animations
02:18:30 Swipeable Row and Reanimated Styling
02:37:27 Chat List with Apple Swipe
02:55:08 Section List with Alphabet Scroll
03:12:15 Customizing Gifted Chat
03:44:22 Swipe to Reply Gesture
04:04:48 Teardown

Наука

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

1 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@galaxies_dev 3 месяца назад

Join Galaxies.dev today - the Home of the Best React Native content🚀

@sherif2222222 26 дней назад

Hey Simon, First Thanks for the gr8 course, was a big fan since the ionic tutorials along time ago, am hitting one issue in the "OTP Auth with Clerk" step, 'Cannot find native module "ExpoApplication" ', after checking the comments section, am not the only one hitting this.

@sherif2222222 26 дней назад

i have tried the same with your repo, it's giving me the same error what i got here after debugging, is kinda interesting after the app is loaded, and on clicking "Agree & Continue" Am getting umatched Route "myapp:///otp" and this is happening in both your repo and my local dev putting in mind when getting into "Sitemap", i can find all routes except for otp so am not sure what is exactly happening here, and why is your repo not working as well :)

@alexandreboving2873 3 месяца назад

I had a course in my master called "Design and implementation of a Mobile application". Watching a few videos of yours made me learn way more that I saw in 3 months.

@galaxies_dev 3 месяца назад

Wow that really means a lot to me Alex, maybe share the videos with the university to give them some inspiration :D

@eddiegere 3 месяца назад

Loads of content. About to start. Amazing! Thank you.

@galaxies_dev 3 месяца назад

Let me know when you have questions!

@mishen-thakshana 3 месяца назад

Waited for this one. Thanks

@galaxies_dev 3 месяца назад

Make sure to share it Mishen!

@devanshsk7222 3 месяца назад

Can't wait to fully build this application with it's entire backend assembled. The level of excitement is to much to handle.

@rishabh1S 2 месяца назад

was looking for this, comment, so did you come up with any backend?

@devanshsk7222 2 месяца назад

@@rishabh1S The work is in progress, it will be a part of something greater.

@gracjankoodziej261 3 месяца назад

38:53 - I think it's also good to consider when the phone does not have bottom insets (for example old iPhone SE, some android phones) - In this case the button would be right at the bottom, I usually do Math.max(insets.bottom, 20) to ensure there is always at least 20px between the bottom and the element

@galaxies_dev 3 месяца назад

Thanks for the addition!

@wujekbizon1 3 месяца назад

Cool, let's start !

@MARSIAN-officIal 3 месяца назад

You just read my mind. Love your work!

@galaxies_dev 3 месяца назад

Give it a share ✌️

@fouadchahd2969 3 месяца назад

That's a lot to learn for me the gesture the animation and many, Many thanks 🙏🏼 in advance wish you covered the audio component that WhatsApp use to display audio 😅i m really in needs of it

@galaxies_dev 2 месяца назад

That's something we could definitely do in another tutorial, good idea!

@mubirujamesbenjamin3440 Месяц назад

From Uganda, thank you Simon

@rog0079 3 месяца назад

Great tutorial!! Keep em' coming!!!

@galaxies_dev 3 месяца назад

I will!

@chokeslam1996 3 месяца назад

Brilliant! Well done 🎉

@galaxies_dev 3 месяца назад

Thank you - Give it a share ✌️

@raymondmichael4987 3 месяца назад

Next inkdrop ui, would like your ways and thinking when designing that fancy 3 layout with sleek animations. much love from Tanzania 🇹🇿 ❤

@galaxies_dev 3 месяца назад

That would indeed be a cool project, I'll ask Clerk about it x)

@raymondmichael4987 3 месяца назад

@galaxies_dev , thanks. Hopefully clerk and convex will agree

@mikevillarreal8291 3 месяца назад

Thank you Simon! Do you mind if i ask a question? Can we use conditional routing with Expo Router, for example for Admin / regular user navigation flows?

@galaxies_dev 3 месяца назад

Yes, working on a video about that!

@sdinan 2 месяца назад

Awesome tutorial! Been using React for years but learning React Native has definitely taken a bit of adjustment. Out of curiosity -- what's the benefit of going with prebuild in this instance? I ended up just using the default Expo setup after hitting some snags getting things to compile with prebuild and everything ran really smoothly. Also curious as to which tool you're using for drawing those rainbow lines on the screen :)

@galaxies_dev 2 месяца назад

Not all modules are included with Expo Go, and prebuild is just one command and after that, it's basically the same experience! The drawing tool is called "Screenbrush" on the Mac appstore :)

@user-iq9cp3cz8r 25 дней назад

Hey, great tutorial, and i like that you showed also some cool animations. But if it's possible that you make an upgrade video, how to implement voice message, but more the animation part. I mean like how it's done in what's app or telegram or even snapchat. With hold, swipe up to lock, or left to discard. This would be amazing. Because honestly everyone avoiding this i don't know why. Is it so hard to implement???

@jayprakashjaiswal8220 2 месяца назад

hey simon thanks for ur all these videos , i just want to have one request, can u please make one video on how can we access file system by default if we use expo, i mean i saw different android app which when i open they ask for permission and after that they render content or document based on tab like pdf , excel, etc by default with out picker , how to achive such feature please try to make video on it whenever u are free, i have done alot online search but i got to know that with expo we cannot access file system directly but i want to creat document viewer app which render different type of document in there respective tab by default with out expo picker

@damianczarnota6651 3 месяца назад

Hey Simon, as firebase dynamic links is deprectated, we would love to get full course of how to setup deep linking right now to the apps :) Like the complex, as they are a few articles about that, but all of them are pretty tricky. Or maybe someone already have some great source?

@galaxies_dev 2 месяца назад

I actually have a course on that here: galaxies.dev/course/react-native-deeplinks

@nro337 3 месяца назад

Great tutorial!

@galaxies_dev 3 месяца назад

Thank you - Give it a share ✌️

@mishen-thakshana 3 месяца назад

what you using for code completion in terminal that's really cool

@juandiegodurango4715 Месяц назад

Excelent video thanks! How to create the BlurEffect in the header on hide the LargeTitle and searchBar?

@mohamadyousef2129 3 месяца назад

Really Great one

@galaxies_dev 3 месяца назад

Thank you - Give it a share ✌️

@raymondmichael4987 3 месяца назад

This one is loaded ❤

@galaxies_dev 3 месяца назад

Ohh yes it is Raymond!

@tranquillityEnthusiast 3 месяца назад

Whatsapp Clone with Ionic would be appreciated. 😊

@Baduofficial Месяц назад

Couldn't make swipe to reply, is it working only on expo? I work on react native CLI

@frogprog5350 3 месяца назад

Hi, Simon. What is your brackets vscode plugin name? thxs

@ricardob8032 3 месяца назад

hello, how to combine zustand and sockets on expo?

@Dayogg 2 месяца назад

I love you so much, thank you!!

@galaxies_dev 2 месяца назад

Glad I could help man!

@igmtink 3 месяца назад

sir can you make a clone full stack with express js, including how you will create the authentication, not using clerk

@mastermorel339 3 месяца назад

Thank you

@galaxies_dev 3 месяца назад

Thanks for checking in!

@HmongDev 2 месяца назад

6:20 The command for opening the repo in your editor is `code .`

@liyang2656 2 месяца назад

Hello, I am a Chinese react native developer, I may not know much about React-native-gifted-Chat, can I ask you for some advice

@yonasklibi1189 3 месяца назад

Which software do you use to record your videos?

@galaxies_dev 2 месяца назад

Screenflow on my Mac

@AbsolutePain 7 дней назад

Can someone explain why did sir did pre build ?

@i4h2x3 3 месяца назад

Hey Simon, When I try to start my prebuild I get several errors that my android sdk is not good and certificate problems. I'm on Ubuntu tho, but I followed the steps. I'm really nervous about this, because I can't start the tutorial like that. Do you have any similar experience or something to help me out? Thanks in advance, Peter

@mattvalgreen 3 месяца назад

In my case when I try to run "$ npx expo run:android" it shows: "Failed to resolve the Android SDK path". Do you relate the same problem?

@i4h2x3 3 месяца назад

@@mattvalgreen yeah

@mattvalgreen 3 месяца назад

Hey, have you already thought about macOS VM? @@i4h2x3

@mattvalgreen 2 месяца назад

Have you already considered to install a VM macOS on your Linux?@@i4h2x3

@developerjk Месяц назад

@@mattvalgreen Add ANDROID_HOME & JAVA_HOME variables

@user-nf1mn3yd7u 2 месяца назад

can you do animted bottom bar using expo !! ,

@tech-winks 26 дней назад

I am faching issue with expo prebuil. Can anyone help me. CommandError: Failed to build iOS project. "xcodebuild" exited with error code 65.

@swdotdev 2 месяца назад

Can you teach us how to implement debounce functionality to search input in "Chats" screen?

@galaxies_dev Месяц назад

Will add it to my list!

@aashikdevelop3724 3 месяца назад

It’s cool ❤ but waiting for Uber clone ❤❤❤

@galaxies_dev 3 месяца назад

Good idea, I'll tell Clerk :D

@Virlo 3 месяца назад

Nice man! Great video I mean that! Can you make a Cash App clone that people can send money to each other but it is like fake money numbers in the database that change if you send it

@galaxies_dev 2 месяца назад

That sounds like a cool idea, yeah!

@Virlo 2 месяца назад

@@galaxies_dev Yeah! I think that is a great idea and people will love that too, something different that no other RU-vidr did and skillful

@ykarateke_ Месяц назад

You can make your own whatsapp with a good server setup :D

@galaxies_dev Месяц назад

Indeed!

@darah.k3221 3 месяца назад

can you please bring back the capacitor js tutorials? i have experience with both and cap js is way better

@ismaeltinta6118 3 месяца назад

the problem with Clerk is the pricing. Convenient for tutorials but NOT for production especially for a B2C app. Imagine having 1million users using your app and paying 20K/mo just for auth lol. just crazy to me

@i4h2x3 3 месяца назад

If you have one million user u can make your own auth don't worry 😂

@ismaeltinta6118 3 месяца назад

@@i4h2x3 yeah of course. I am coming from a point of blindly using stacks. I was new to web dev 4 months ago and everybody was using clerk in their video until I realize I couldn't use this for what I am building. Migration would be a nightmare i guess. So I am learning backend now lol

@55BLOCKS 3 месяца назад

It's not good idea

@HDChif 2 месяца назад

if you have 1m users you can afford 20k a month

@christianangelomsulit3759 2 месяца назад

It's actually better to rely on 3rd party auth 20k month with 1m user is nothing

@Clytax Месяц назад

Man I really need a mac, prebuild looks amazing but I have to use eas :/

@Muhammed_Furkan_Yilmaz 2 месяца назад

I am in Türkiye and when I send otp code to my phone it takes more than 10 mins for code to come to my phone and it is expired even before it reaches my phone. I just said bcs it funny to think about it

@jasim17 Месяц назад

pls make project in react native cli too... i was waiting for cli 😩

@FahmiEshaq 3 месяца назад

😮😮Awesome man

@galaxies_dev 3 месяца назад

Thank you Fahmi!

@hubesh716 3 месяца назад

please complete this using any backend like firebase or supabase or node js with socket please sir

@mattvalgreen 3 месяца назад

Hey Simon, Could you build Instagram Clone for the next challenge? Thanks in advance!

@galaxies_dev 2 месяца назад

Definitely adding it to my list!

@Asylum377 3 месяца назад

i keep getting an error from react-native-reanimated: Task :react-native-reanimated:compileDebugJavaWithJavac FAILED. if i remove it, it works

@beckman925 2 месяца назад

Did you find any solution?

@Asylum377 2 месяца назад

yes i switched to java sdK 18 or 20@@beckman925

@fallanstar 3 месяца назад

plz make it with backend and make it full stack uisng firebase or node socket plz

@maxym922 3 месяца назад

2:50:06 better to use flex: 1 for the text and set numberOfLines={2}

@galaxies_dev 2 месяца назад

Good point, thanks!

@juliovc7805 2 месяца назад

anyone knows why I keep getting 'unable to resolve module expo-application' error after installing clerk?

@sherif2222222 26 дней назад

have you fixed that ?

@Mohadiz 3 месяца назад

I cloned the repo but can’t make it running got lots of errors Would it be possible to provide an install details

@galaxies_dev 2 месяца назад

Have you updated the .env file with your own values?

@Mohadiz 2 месяца назад

@@galaxies_dev do you mind adding all keys as env.example file

@mettle_x 3 месяца назад

Can someone please draw Clerk's attention to fix their phone OTP Auth? It doesn't work for some countries, e.g. India, Bangladesh, etc.

@slimeLofi887 2 месяца назад

Otp isn,t working for other country is anyone can help me

@alextl97 3 месяца назад

Hey Simon I love your content, but i would love even more if you also could make a few content that is not expo related, like a react cli project. The reason is that at my job we dont use expo because of a particular use case we have.

@noormuhammad888 3 месяца назад

Hi mate. Would you mind sharing the use case for not picking up the expo ? I'm in early stages of React native and it would help me to make better decision to chose down the road.

@i4h2x3 3 месяца назад

@@noormuhammad888( don't use cli, expo is the basic way nowadays)

@galaxies_dev 3 месяца назад

I don't really see a reason to NOT use Expo these days, with prebuild and CNG you can do everything you can in a CLI project

@jasonhall6526 Месяц назад

If I want to be a professional developer...... Do I need a mustache?

@galaxies_dev Месяц назад

Only for RU-vid.

@shreysadhukha8477 3 месяца назад

How to deploy this project can anyone please help me with this

@kaan5290 2 месяца назад

I love react native but on system Expo doesnt build my apk correctly I always get a react native reanimated library error whenever i try to build apk and also the apk size is too large for simple projects😢 Do anybody have solutions to these problems??‹ I switched to flutter but really the ecosystem of react is far more comfortable for me...

@shambhavshandilya8865 2 месяца назад

bro i am getting same problem did u find any solution?

@kaan5290 2 месяца назад

@@shambhavshandilya8865 i used reanimated 2.15.0 that solved the problem... i dont know the exact version but if you want i can check and tell But the apk size and build failed when i uploaded my app to expo...so i then switched to flutter same application i built in 2 days and the size was only 18 mb...in react native it was 60 mb...i have followed many optimizations in react native but cant get success

@kaan5290 2 месяца назад

@@shambhavshandilya8865 the temporary solution i found after a lot of research is diwngrading the reanimated library to 2.15.0

@kadanssgames5237 16 дней назад

Ckerk is very expensive wish you did firebase

@joelsamuel9771 Месяц назад

Please dont use gifted chat, there are so many bugs and its currently unmaintained (tried it and moving to flatlist)

@Shubham-rf2bs 3 месяца назад

❤

@indiantastyfoods7022 3 месяца назад

Bro need Google photos clone .plz brother

@_Acrk629lak0sUg1s 3 месяца назад

Most of people wants to remake Whatsapp, remake Facebook, but its only applicable to remake UIs ? Why these peoples ain't remake the Backend like ?

@joshsmith6595 3 месяца назад

I’m sure the audience for making an Erlang backend is comparable to making a frontend app.

@galaxies_dev 3 месяца назад

It's basically impossible to create anything that comes close to what tons of developers are working on as a tutorial from a single person :/

@DedicatedGamersVideo 2 месяца назад

"code ." to open the CWD in visual studio code

@galaxies_dev 2 месяца назад

Yeah but I wanted to open it in the already open VSC instance :D

@developerjk Месяц назад

@@galaxies_dev code . -r

@aimanelaaqdi5245 2 месяца назад

I quit when i heard: "I don't what's the united state's one" 26:40

@WithBhavnish 3 месяца назад

use React native CLI bro not Expo. BTW this is a great project.🌶🌶🌶

@danishimwe278 Месяц назад

now you're forcing us to use clerk which is subscription based,.. thaught you're showing us free materials, better i unsubscribe

@shambhavshandilya8865 2 месяца назад

i am getting reanimated package problem can anyone help me something like this * What went wrong: Execution failed for task ':react-native-reanimated:compileDebugJavaWithJavac'. > Could not resolve all files for configuration ':react-native-reanimated:androidJdkImage'. but when i remove this package and build again it successfully builds but when i again add this package it fails with same error if someone knows what is the real problem here please help @Simon Grimm