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

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

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

  • @Supoxone
    @Supoxone 5 месяцев назад +43

    I'm in IT, not a programmer, but for some reason when I go to sleep with a RUclips video on which is basically every night, it autoplays me programming videos after I fall asleep. Here this past week I always wake up to your videos. Not the worst thing to have auto playing it's cool seeing what you've made when I wake up lol.

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

      interesting, I watch woodworking videos and end up in programming as well lol

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

      @@antalack3245

    • @Mark-GMC
      @Mark-GMC 5 месяцев назад +4

      What 😂
      I fell asleep last night watching a different video and I've woken up to this one, and the first comment I've seen is yours lol.

    • @AozoraOrigami
      @AozoraOrigami 5 месяцев назад +3

      exact same for me LOL

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

      exactly, same

  • @antoniocolon3422
    @antoniocolon3422 3 года назад +11

    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.

  • @codingwithanonymous890
    @codingwithanonymous890 3 года назад +9

    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

  • @carlosharrytravel
    @carlosharrytravel 3 года назад +13

    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
      @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
      @mahilkr 2 года назад

      @@zackOverflow ruclips.net/video/HdLbavvfflQ/видео.html

  • @Mirrorlurker
    @Mirrorlurker 3 года назад +5

    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
      @notjustdev  3 года назад +2

      You made my day 😅😅😅

    • @TOSHAMSANDERS
      @TOSHAMSANDERS 3 года назад +1

      The same thing just happened to me. 😁

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

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

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

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

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

  • @exevirus887
    @exevirus887 2 года назад +12

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

    • @notjustdev
      @notjustdev  2 года назад +2

      That's awesome

    • @zackOverflow
      @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?

  • @notjustdev
    @notjustdev  3 года назад +25

    📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev in 2023! Check out what our successful students are saying about their experience:
    academy.notjust.dev

  • @555pontifex
    @555pontifex 3 года назад +8

    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
      @hasotech7066 2 года назад

      Hey Mat, Can you Personally teach me RN?

  • @nitin9042
    @nitin9042 3 года назад +1

    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

  • @musiclirik4531
    @musiclirik4531 3 года назад +2

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

  • @amanueltadesse1655
    @amanueltadesse1655 3 года назад +6

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

    • @zackOverflow
      @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
      @mahilkr 2 года назад

      @@zackOverflow ruclips.net/video/HdLbavvfflQ/видео.html

  • @mahendranath2504
    @mahendranath2504 3 года назад +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
      @notjustdev  3 года назад

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

    • @mahendranath2504
      @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
      @notjustdev  3 года назад +1

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

    • @mahendranath2504
      @mahendranath2504 3 года назад

      @@notjustdev Thank you

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

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

  • @alirazzaq1541
    @alirazzaq1541 3 года назад +5

    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.

  • @humayunkhalid8452
    @humayunkhalid8452 3 года назад +1

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

  • @markmanson1440
    @markmanson1440 4 года назад +7

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

  • @arikmosfor4907
    @arikmosfor4907 3 года назад +3

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

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

    Thank you! I came here because I googled best video to fall asleep too. This video worked better than any other. You should make a special sleep video with that VOICE!

  • @mickylyricalkartel
    @mickylyricalkartel 3 года назад +11

    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
      @notjustdev  3 года назад +7

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

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

      me 🧐😕

  • @sigitrendang5195
    @sigitrendang5195 5 месяцев назад +37

    Who's here after waking up? ☝️😹

    • @husaynhikmatov7808
      @husaynhikmatov7808 4 месяца назад +3

      I literally just woke up 🤣🤣🤣🤣

    • @Dan-Levi
      @Dan-Levi 4 месяца назад

      Me 😄😄😄

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

      Me😂

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

      0:45

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

      Dude Im listening to podcast till I fall asleep. Then I wake up listening to this lmao

  • @adarshbhardwaj6190
    @adarshbhardwaj6190 2 года назад +1

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

  • @fsix4012
    @fsix4012 4 года назад +15

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

    • @notjustdev
      @notjustdev  4 года назад

      That means a lot to me, thanks 🙏

    • @user-cn6ke3xe2c
      @user-cn6ke3xe2c 3 года назад +1

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

    • @iangprak9284
      @iangprak9284 Год назад

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

  • @_PhantomTrader_
    @_PhantomTrader_ Год назад

    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
    @TheWolfTrader 3 года назад +2

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

  • @marinaro2729
    @marinaro2729 2 года назад +7

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

  • @knowakshayjoshi
    @knowakshayjoshi 3 года назад +7

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

  • @shivamkumar-qp1jm
    @shivamkumar-qp1jm 2 года назад +1

    best youtube channel to learn react native

  • @alinademeter4887
    @alinademeter4887 3 года назад +1

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

  • @racket1111
    @racket1111 3 года назад +3

    Thanks for doing the video. Here from the US.

  • @jerrymilesmiles9313
    @jerrymilesmiles9313 2 года назад +1

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

  • @yonatan2608
    @yonatan2608 4 года назад +3

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

    • @notjustdev
      @notjustdev  4 года назад

      Hey, thanks for the support

    • @getjob3662
      @getjob3662 3 года назад

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

  • @Shinichir0
    @Shinichir0 3 года назад +1

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

  • @gonesilent1037
    @gonesilent1037 3 года назад +1

    I have some questions please reply
    1) is it online or offline
    2) which software I need to develop app(names of software used in video)

  • @souviksaha9641
    @souviksaha9641 4 года назад +5

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

    • @notjustdev
      @notjustdev  4 года назад

      Thanks for the support 🙏

  • @sthefanocarvalho2823
    @sthefanocarvalho2823 4 года назад +2

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

    • @notjustdev
      @notjustdev  3 года назад +1

      Thanks a lot, Sthefano

    • @sthefanocarvalho2823
      @sthefanocarvalho2823 3 года назад

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

    • @notjustdev
      @notjustdev  3 года назад +1

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

  • @nikhilgupta71
    @nikhilgupta71 3 года назад +12

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

  • @maksymr5860
    @maksymr5860 3 года назад +6

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

    • @notjustdev
      @notjustdev  3 года назад +1

      Yes, check it out on the channel page

    • @zackOverflow
      @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?

  • @mamaessuperpreparadas-dica5782
    @mamaessuperpreparadas-dica5782 3 года назад +10

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

  • @hectorg362
    @hectorg362 4 года назад +3

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

  • @shivamgoyal7717
    @shivamgoyal7717 3 года назад +5

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

    • @notjustdev
      @notjustdev  3 года назад

      I am so happy that you found it valuable

    • @user-cn6ke3xe2c
      @user-cn6ke3xe2c 3 года назад +1

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

  • @RiseShineInspireDaily-sc4ie
    @RiseShineInspireDaily-sc4ie 9 месяцев назад

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

    • @notjustdev
      @notjustdev  9 месяцев назад

      You are so welcome!🙌

  • @rahimaskerov
    @rahimaskerov 2 года назад +1

    You are literally a legend!👍

  • @HealthHabitsHQ.
    @HealthHabitsHQ. 3 года назад +5

    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
      @notjustdev  3 года назад

      Thanks

    • @zackOverflow
      @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?

  • @gbengafagbemi9349
    @gbengafagbemi9349 4 года назад +5

    Great Tutorial, really enjoyed it

    • @notjustdev
      @notjustdev  4 года назад

      Thanks for appreciation 🙏

  • @devsmith948
    @devsmith948 3 года назад +3

    Did you integration with AWS amplify for chatting?

  • @haseeb_ahmed
    @haseeb_ahmed 4 года назад +2

    Keep making more videos like this! Love from Pakistan.

  • @daniyalkaleem2267
    @daniyalkaleem2267 3 года назад +2

    Doing a Great Job Brother

  • @cova3376
    @cova3376 3 года назад

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

  • @Deep_880er
    @Deep_880er 3 года назад

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

  • @adomicarts
    @adomicarts 3 года назад +2

    Supper Man ! Hard work subscribed!🔥

  • @Hewagej
    @Hewagej Год назад +2

    Thank you very good information video for beginning

  • @nairgh
    @nairgh 3 года назад +2

    Great Tutorial. Thanks for your time and help.

  • @pedroespinoza7595
    @pedroespinoza7595 3 года назад +3

    thank you, great video! Vadim

  • @learntocodenow
    @learntocodenow 2 года назад +2

    Very informative video ! Awesome

  • @bhagirathmakwana9112
    @bhagirathmakwana9112 3 года назад +3

    Love you bro ❤ you are amazing 🧡

  • @senju31
    @senju31 3 года назад +2

    You are a blessing form the gods, the old and the new.

  • @dinethpiyumantha
    @dinethpiyumantha 3 года назад +1

    Thank you so much Vadim !

  • @ebadrahman1832
    @ebadrahman1832 Год назад +1

    Thank you so much. great job!!!

  • @alexandraputuntica
    @alexandraputuntica 3 года назад +1

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

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

    Hye Vadim, great tutorial. I am following along. One suggestion for the viewers on the time problem.

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

      Hey, thanks for your appreciation!

  • @AllRounder-jt1pe
    @AllRounder-jt1pe 3 года назад +1

    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
      @notjustdev  3 года назад

      Just don't use the obvious Whatsapp design.

  • @VenkateshN6819
    @VenkateshN6819 3 года назад

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

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

    The stock dividend has the advantage of rewarding shareholders without reducing the company's cash balance. However, it does increase its liabilities. Stock dividends have a tax advantage for the investor as well. Unlike cash dividends, stock dividends are not taxed until the investor sells the shares.

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

      Stocks for the win!! As a beginner investor, I used a few things to help expand my knowledge of the stock market in a way that was digestible for a new investor. I still reference it fairly often to get a quick overview of a stock and understand its surface-level fundamentals by using an advisor. I can't recommend that method of learning enough! I use Cynthia Depken she is super helpful to a lot of beginners out there.

  • @scharrmah
    @scharrmah 4 года назад +4

    quick question, does this example include audio/video calling? thanks

    • @notjustdev
      @notjustdev  4 года назад +1

      Hi. Not in this video. Here I do only the UI/UX of the app

    • @scharrmah
      @scharrmah 4 года назад

      Thank you

  • @evanserickson
    @evanserickson 3 года назад +1

    The github repo has the final product.... can you upload the template code before you initialize amplify?

  • @فلسطينيوافتخر-و4ك
    @فلسطينيوافتخر-و4ك 4 года назад +1

    very quality for a video and content love for you

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

    Gorgeous art direction

  • @christophermarshall3702
    @christophermarshall3702 3 года назад +3

    How honestly disliked this..... fantastic work man

  • @danielwestlund9208
    @danielwestlund9208 3 года назад +1

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

  • @desalegnjeginaw5038
    @desalegnjeginaw5038 3 года назад +1

    Thank you very much for your assistance.

  • @wanjohi
    @wanjohi 4 года назад +2

    Hi, Thanks for your content... could you please try to design a VPN provider with react native... they are kinda hot right now! it wouldn't hurt to learn the ones and twos of the internet

    • @notjustdev
      @notjustdev  4 года назад

      Hi, thanks for the support. That;s an interesting idea, thanks for the recomendation

  • @rajpatel9406
    @rajpatel9406 4 года назад +2

    Do you know how to integrate xmpp protocol into react native .(xmpp protocol is use for instant messaging )pls reply

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

    Beautifully crafted

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

      Thank you! Cheers! 🙌

  • @amnaaldh9911
    @amnaaldh9911 3 года назад +5

    this is awesome.. thank you for sharing

  • @agustinlavalla8892
    @agustinlavalla8892 4 года назад +1

    Amazing tutorial. Thanks so much

    • @user-cn6ke3xe2c
      @user-cn6ke3xe2c 3 года назад

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

  • @devsmith948
    @devsmith948 3 года назад +1

    Really wonderful video!!!

  • @techwithagent7224
    @techwithagent7224 4 года назад +1

    Superb video made my day 😍

  • @miteshmasurkar5370
    @miteshmasurkar5370 4 года назад +1

    Hello
    For aligning messages
    Solution
    Take dimension of mobile using
    React dimensions
    And
    Give width to leftcontainer as width/2 or width/1.5
    And use that elliptical
    Solved

  • @SAITEJAPinna
    @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...

  • @geekthegeek730
    @geekthegeek730 4 года назад +1

    Thats is awesome man!

  • @siddhi.classes.jalgaon6685
    @siddhi.classes.jalgaon6685 3 года назад

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

    • @notjustdev
      @notjustdev  3 года назад

      Glad that you like it :)

  • @kiranvaddy7302
    @kiranvaddy7302 3 года назад

    this is awesome.. thank you so much for sharing

  • @muhammadahsenriaz5803
    @muhammadahsenriaz5803 3 года назад

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

  • @ramsankar6202
    @ramsankar6202 3 года назад +1

    Thank you so much brother !!!!

  • @dayansir7481
    @dayansir7481 11 месяцев назад +1

    Wow,Thanks

  • @vatsalmange4615
    @vatsalmange4615 3 года назад

    headershown:false
    While removing this code, it doesn't remove that top bar and replaces with root , it creates another top bar.
    That means I have 2 top bars. @17:53 in the video.
    Help appreciated.
    Thank you.

  • @BAWAYAJOAL
    @BAWAYAJOAL Год назад

    thanks you so much ,really doing good job

  • @aliexpressbomebarato871
    @aliexpressbomebarato871 3 года назад

    Parabéns pela iniciativa

  • @annalisaflores3661
    @annalisaflores3661 3 года назад

    i learned a lot from your video

  • @benahloy2838
    @benahloy2838 3 года назад

    its truely amazing bro...

  • @vd853
    @vd853 Год назад

    Is it better to create the front or backend first?

  • @kelvinkedyson8172
    @kelvinkedyson8172 3 года назад +1

    I expect more than this

  • @devinlounge
    @devinlounge 3 года назад

    I have problems with material-top-tabs... its under to the first createStackNavigator...

  • @KwamyA
    @KwamyA Год назад

    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.

  • @benjaminikwuagwu6469
    @benjaminikwuagwu6469 4 года назад +1

    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
      @notjustdev  4 года назад

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

  • @vattipunith1807
    @vattipunith1807 3 года назад

    Your explanation is so good I learned a lot from you but it's blurry

  • @mihaicaulea
    @mihaicaulea 4 года назад +1

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

    • @notjustdev
      @notjustdev  4 года назад

      Mersi mult pentru apreciere, Mihai

  • @sohye_lee
    @sohye_lee 3 года назад +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
      @notjustdev  3 года назад +4

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