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

Поділитися
Вставка
  • Опубліковано 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 UA-cam 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 ua-cam.com/video/HdLbavvfflQ/v-deo.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 ua-cam.com/video/HdLbavvfflQ/v-deo.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  4 роки тому +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...

  • @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 UA-cam 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!