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

Поделиться
HTML-код
  • Опубликовано: 15 ноя 2024

Комментарии • 181

  • @galaxies_dev
    @galaxies_dev  8 месяцев назад +8

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

    • @sherif2222222
      @sherif2222222 6 месяцев назад

      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
      @sherif2222222 6 месяцев назад

      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
    @alexandreboving2873 8 месяцев назад +13

    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
      @galaxies_dev  8 месяцев назад +2

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

  • @devanshsk7222
    @devanshsk7222 8 месяцев назад +4

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

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

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

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

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

  • @gracjankoodziej261
    @gracjankoodziej261 8 месяцев назад +4

    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
      @galaxies_dev  8 месяцев назад

      Thanks for the addition!

    • @mozz6052
      @mozz6052 4 месяца назад

      38:55 39:02 39:02 39:02 39:03 39:03 39:03 39:03 39:04 39:04 39:04 39:04 39:04 39:05 39:05

  • @fouadchahd2969
    @fouadchahd2969 8 месяцев назад +2

    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
      @galaxies_dev  8 месяцев назад +1

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

  • @raymondmichael4987
    @raymondmichael4987 4 месяца назад +2

    I really enjoy the energy in your teaching; regarding Settings -> search input, how can we tap to it so that we can do something with the entered text?

    • @galaxies_dev
      @galaxies_dev  4 месяца назад

      You can hook the searchfield up to state and then use that value!

  • @mishen-thakshana
    @mishen-thakshana 8 месяцев назад +7

    Waited for this one. Thanks

    • @galaxies_dev
      @galaxies_dev  8 месяцев назад +1

      Make sure to share it Mishen!

  • @marvinfok65
    @marvinfok65 Месяц назад +1

    Must give Simon a BIG BIG thank you for this lesson! This is some of the best lessons that I have watched on youtube.

  • @eddiegere
    @eddiegere 8 месяцев назад +2

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

    • @galaxies_dev
      @galaxies_dev  8 месяцев назад +1

      Let me know when you have questions!

  • @dreamsachiever212
    @dreamsachiever212 8 месяцев назад +25

    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
      @i4h2x3 8 месяцев назад +16

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

    • @dreamsachiever212
      @dreamsachiever212 8 месяцев назад

      @@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
      @55BLOCKS 8 месяцев назад

      It's not good idea

    • @HDChif
      @HDChif 8 месяцев назад +4

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

    • @Malcolm777-i
      @Malcolm777-i 7 месяцев назад +1

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

  • @raymondmichael4987
    @raymondmichael4987 8 месяцев назад +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
      @galaxies_dev  8 месяцев назад +1

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

    • @raymondmichael4987
      @raymondmichael4987 8 месяцев назад

      @galaxies_dev , thanks.
      Hopefully clerk and convex will agree

    • @raymondmichael4987
      @raymondmichael4987 4 месяца назад

      still waiting 😢

    • @raymondmichael4987
      @raymondmichael4987 4 месяца назад

      ask mongodb realm team, will good you make a tutorial for them 😊too

  • @andreweells4994
    @andreweells4994 4 месяца назад +1

    Would you consider ever doing a walkthrough of your VSCode extensions?

  • @kamal9650-z1w
    @kamal9650-z1w 3 месяца назад +1

    Please create part 2 with backend connection

  • @sdinan
    @sdinan 8 месяцев назад

    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
      @galaxies_dev  8 месяцев назад

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

  • @jhmesseroux
    @jhmesseroux 17 дней назад

    Great tutorials.
    I have a little issue with this , when i try to implement infinite scroll inside the Flastlist with the large header , it does not work correctly. It fetch all the data without scrolling. Someone can help me with this please?

  • @GigglesDose
    @GigglesDose 4 месяца назад +1

    You are awesome, teach us advanced concepts, kindly work on responsive design plz

  • @MARSTEE-official
    @MARSTEE-official 8 месяцев назад +2

    You just read my mind. Love your work!

  • @wujekbizon1
    @wujekbizon1 8 месяцев назад +4

    Cool, let's start !

  • @mikevillarreal8291
    @mikevillarreal8291 8 месяцев назад

    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
      @galaxies_dev  8 месяцев назад +1

      Yes, working on a video about that!

  • @Dollazuche
    @Dollazuche 4 дня назад

    its good i want to click on agree and continue to go to a login page to create new account

  • @tranquillityEnthusiast
    @tranquillityEnthusiast 8 месяцев назад +1

    Whatsapp Clone with Ionic would be appreciated. 😊

  • @jayprakashjaiswal8220
    @jayprakashjaiswal8220 8 месяцев назад

    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

  • @mubirujamesbenjamin3440
    @mubirujamesbenjamin3440 7 месяцев назад +1

    From Uganda, thank you Simon

  • @JuriDiener
    @JuriDiener 6 месяцев назад

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

  • @Dollazuche
    @Dollazuche 4 дня назад

    i just downloaded vscode i do not know on how to set up the terminal

  • @yonasklibi1189
    @yonasklibi1189 8 месяцев назад +1

    Which software do you use to record your videos?

  • @Muhammed_Furkan_Yilmaz
    @Muhammed_Furkan_Yilmaz 8 месяцев назад +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

    • @kanavsharma2024
      @kanavsharma2024 Месяц назад

      Make it completely real app for production required extended version

  • @igmtink
    @igmtink 8 месяцев назад

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

  • @HaniElhamwi
    @HaniElhamwi 7 месяцев назад +1

    can you do animted bottom bar using expo !! ,

  • @-mohammadalakedy5417
    @-mohammadalakedy5417 4 месяца назад +1

    Build error with npx expo run:android gradle error 😢😢

    • @galaxies_dev
      @galaxies_dev  4 месяца назад

      Did you install the Android SDK and set it up in your path correctly?

  • @Kitety
    @Kitety 13 дней назад

    Could you please tell me what software you use to annotate on this screen? I also want to know. Thanks

  • @shambhavshandilya8865
    @shambhavshandilya8865 8 месяцев назад +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

  • @sahiljaidka6657
    @sahiljaidka6657 5 месяцев назад

    settings page is amazing

  • @rog0079
    @rog0079 8 месяцев назад +2

    Great tutorial!! Keep em' coming!!!

  • @fallanstar
    @fallanstar 8 месяцев назад +1

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

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

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

  • @maxym922
    @maxym922 8 месяцев назад

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

  • @mattvalgreen
    @mattvalgreen 8 месяцев назад +2

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

    • @galaxies_dev
      @galaxies_dev  8 месяцев назад +2

      Definitely adding it to my list!

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

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

  • @EmmanuelBassey-q9d
    @EmmanuelBassey-q9d 3 месяца назад

    Clerk OTP auth system doesn't work in Nigeria, hence limiting continuing with the project. So painful

  • @darahk88
    @darahk88 8 месяцев назад

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

  • @EmmanuelBassey-q9d
    @EmmanuelBassey-q9d 3 месяца назад

    Sorry to askplease, Clerk OTP auth system doesn't work in Nigeria, how do i workaround it. I need to continue with the project

  • @i4h2x3
    @i4h2x3 8 месяцев назад +2

    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
      @mattvalgreen 8 месяцев назад

      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
      @i4h2x3 8 месяцев назад +1

      @@mattvalgreen yeah

    • @mattvalgreen
      @mattvalgreen 8 месяцев назад

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

    • @mattvalgreen
      @mattvalgreen 8 месяцев назад

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

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

      @@mattvalgreen Add ANDROID_HOME & JAVA_HOME variables

  • @mishen-thakshana
    @mishen-thakshana 8 месяцев назад

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

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

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

  • @0xlabcrypto
    @0xlabcrypto 3 месяца назад

    this one same for andriod also?

  • @Virlo
    @Virlo 8 месяцев назад +1

    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
      @galaxies_dev  8 месяцев назад +1

      That sounds like a cool idea, yeah!

    • @Virlo
      @Virlo 8 месяцев назад

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

  • @frogprog5350
    @frogprog5350 8 месяцев назад

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

  • @mohitpatel713
    @mohitpatel713 6 дней назад

    to immediately open vs code that command is: "code ."

  • @AbsolutePain
    @AbsolutePain 5 месяцев назад

    Can someone explain why did sir did pre build ?

  • @Baduofficial
    @Baduofficial 6 месяцев назад

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

  • @jasim17
    @jasim17 6 месяцев назад

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

  • @ykarateke_
    @ykarateke_ 6 месяцев назад

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

  • @ricardob8032
    @ricardob8032 8 месяцев назад

    hello, how to combine zustand and sockets on expo?

  • @chokeslam1996
    @chokeslam1996 8 месяцев назад +2

    Brilliant! Well done 🎉

    • @galaxies_dev
      @galaxies_dev  8 месяцев назад +1

      Thank you - Give it a share ✌️

  • @juliovc7805
    @juliovc7805 8 месяцев назад +1

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

  • @PreyzPlayer
    @PreyzPlayer 5 месяцев назад

    Man hört den deutschen Akzent raus 😆 Super Tutorial!

  • @Jasim-g3q
    @Jasim-g3q 16 часов назад

    hi which extension highlighting color text red i mean i use color highlight extension but its highlight only #ff0000 any one pls????

  • @aashikdevelop3724
    @aashikdevelop3724 8 месяцев назад +1

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

    • @galaxies_dev
      @galaxies_dev  8 месяцев назад +1

      Good idea, I'll tell Clerk :D

  • @Tech_Tidbit
    @Tech_Tidbit 2 месяца назад +2

    4 hr video... Editor learn full react native course 💀🙌

  • @hubesh716
    @hubesh716 8 месяцев назад

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

  • @tech-winks
    @tech-winks 6 месяцев назад

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

  • @juanmurillo5463
    @juanmurillo5463 Месяц назад

    What should i do , if I have windows ? with thepre build

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

      You can only build for Android then, or use EAS to make an iOS build

  • @nro337
    @nro337 8 месяцев назад +2

    Great tutorial!

    • @galaxies_dev
      @galaxies_dev  8 месяцев назад +1

      Thank you - Give it a share ✌️

  • @damianczarnota6651
    @damianczarnota6651 8 месяцев назад +1

    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
      @galaxies_dev  8 месяцев назад +1

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

  • @Asylum377
    @Asylum377 8 месяцев назад +1

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

    • @beckman925
      @beckman925 8 месяцев назад

      Did you find any solution?

    • @Asylum377
      @Asylum377 8 месяцев назад

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

  • @cubedev4838
    @cubedev4838 4 месяца назад

    Please make ecommerce clone like amazon with stripe as payment gateway

    • @galaxies_dev
      @galaxies_dev  4 месяца назад

      That sounds super interesting!

  • @raymondmichael4987
    @raymondmichael4987 8 месяцев назад +2

    This one is loaded ❤

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

    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

    • @ootaguzta
      @ootaguzta 3 месяца назад

      do you have any recommendation ?

  • @mw2isthebestcod
    @mw2isthebestcod 8 месяцев назад +1

    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
      @joshsmith6595 8 месяцев назад +1

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

    • @galaxies_dev
      @galaxies_dev  8 месяцев назад

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

  • @mettle_x
    @mettle_x 8 месяцев назад

    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.

  • @playlist-d3
    @playlist-d3 8 месяцев назад

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

  • @Mohadiz
    @Mohadiz 8 месяцев назад

    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
      @galaxies_dev  8 месяцев назад

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

    • @Mohadiz
      @Mohadiz 8 месяцев назад

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

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

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

  • @shreysadhukha8477
    @shreysadhukha8477 8 месяцев назад

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

  • @kadanssgames5237
    @kadanssgames5237 6 месяцев назад

    Ckerk is very expensive wish you did firebase

  • @GigglesDose
    @GigglesDose 4 месяца назад

    How to connect clerk with supabase database

    • @galaxies_dev
      @galaxies_dev  4 месяца назад

      Working on exactly that!

    • @GigglesDose
      @GigglesDose 4 месяца назад

      @@galaxies_dev also teach us responsive design, Its humble request when you make vides , app must be responsive

  • @alextl97
    @alextl97 8 месяцев назад +2

    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
      @noormuhammad888 8 месяцев назад +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
      @i4h2x3 8 месяцев назад

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

    • @galaxies_dev
      @galaxies_dev  8 месяцев назад

      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
    @jasonhall6526 7 месяцев назад

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

  • @mohamadyousef2129
    @mohamadyousef2129 8 месяцев назад +1

    Really Great one

    • @galaxies_dev
      @galaxies_dev  8 месяцев назад +1

      Thank you - Give it a share ✌️

  • @mastermorel339
    @mastermorel339 8 месяцев назад +2

    Thank you

  • @Dayogg
    @Dayogg 8 месяцев назад

    I love you so much, thank you!!

  • @indiantastyfoods7022
    @indiantastyfoods7022 8 месяцев назад

    Bro need Google photos clone .plz brother

  • @FahmiEshaq
    @FahmiEshaq 8 месяцев назад +2

    😮😮Awesome man

  • @Dharmic_developer
    @Dharmic_developer 8 месяцев назад

    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
      @shambhavshandilya8865 8 месяцев назад

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

    • @Dharmic_developer
      @Dharmic_developer 8 месяцев назад

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

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

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

  • @DedicatedGamersVideo
    @DedicatedGamersVideo 8 месяцев назад

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

    • @galaxies_dev
      @galaxies_dev  8 месяцев назад

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

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

      @@galaxies_dev code . -r

  • @zareefbeyg
    @zareefbeyg 3 месяца назад +1

    IPhone contacts app clone 😂. Not WhatsApp clone

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

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

  • @WithBhavnish
    @WithBhavnish 8 месяцев назад +1

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

  • @RolandElvira-l4y
    @RolandElvira-l4y Месяц назад

    Taylor Richard Martin Jose Walker Carol

  • @Shubham-rf2bs
    @Shubham-rf2bs 8 месяцев назад +1

  • @danishimwe278
    @danishimwe278 7 месяцев назад +1

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

  • @reyco1
    @reyco1 8 месяцев назад

    No Angular/Capacitor version? 🥲