🔴 Build the Airbnb app in React Native [ Advance UI ]

Ғылым және технология

Let's learn React Native by building the Airbnb clone from scratch even if you are a beginner.
📚 Enroll NOW for "The Full-stack Mobile Developer" and save 30%
academy.notjust.dev/
🚀 Download the Asset Bundle (Images, Dummy data, PDF presentation): assets.notjust.dev/airbnb
🐱‍💻 Source code:
github.com/Savinvadim1312/Air...
💬 Join the notJust Development gang and let's build together:
/ discord
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 Livestream 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. If you finish the app, tag me on social media and I will give you feedback.
We will start building the Airbnb clone from scratch, starting from setting up a React Native project and finishing with connecting the application with a GraphQL 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 Airbnb menu using React Navigation.
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.
Doing the react-native Airbnb clone yourself is a great opportunity to practice React Native, modern Javascript, Typescript, 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.
Tag me on social media when you finish the Whatsapp Clone, and I will give you feedback on your code.
LinkedIn: / vadimsavin
IG: / vadimsavin0
Twitter: / savinvadim_
Timecodes:
0:00 Intro
3:32 Who am I
6:40 Prerequisites
8:56 Finish Navigation for previous project
32:10 Places autocomplete
1:01:49 Maps
1:51:28 Place Carousel Item Component
2:04:25 Carousel Flatlist
2:34:31 Detail view for one accommodation
2:56:21 Demo
3:09:17 Q&A
#VadimSavin #notejust.dev #notJustDevelopment

Пікірлер: 110

  • @x2jinchu2x
    @x2jinchu2x3 жыл бұрын

    This is truly incredible stuff. The map and flatlist functionality and its bindings were particularly awesome. Keep up the amazing content!!

  • @MaximilianoOsorio
    @MaximilianoOsorio Жыл бұрын

    Thank you so much for sharing this tutorial on React Native! I had never used it before, but your video made it easy to understand and follow along. I'm really excited to start using React Native in my own projects now. Your explanations and demonstrations were spot on and I can't wait to see what else you have to teach. Keep up the great work and thanks again for the valuable content!

  • @GarTheStar
    @GarTheStar3 жыл бұрын

    Best react native tutorials I've ever seen

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    Thanks buddy

  • @eriklindgren414
    @eriklindgren4143 жыл бұрын

    Awesome video and great tutorial! What happened to the snap alignment of the PostCarouselItems after the onViewChanged was implemented?

  • @bryanrigsby9685
    @bryanrigsby96852 жыл бұрын

    just found out how to use stylesheet and inline styles together, in case anyone is wondering

  • @DominiqSimeon
    @DominiqSimeon2 жыл бұрын

    If you are using an emulator, The Marker onPress does not trigger on Pixel 4 API 29. Use Nexus 5x API 29 instead. This took me some time to figure out. Might save someone some time on debugging. Thanks, @Vadim Savin for this wonderful tutorial.

  • @indiradendukuri2821
    @indiradendukuri28213 жыл бұрын

    hey will you include post your house as a stay option as well ?

  • @rayediaz
    @rayediaz Жыл бұрын

    This is great! Very valuable content.

  • @igormarynich1845
    @igormarynich18453 жыл бұрын

    I have not seen your new video, but I am pressing Like, because you are creating wonderful content!!!)

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    That's the mindset. Destroy that button bro

  • @kesterbelgrove818
    @kesterbelgrove8183 жыл бұрын

    Hi just adding an update that took me a while to figure out please not that in addition to the react-navigation/material-top-tabs you also need to do "yarn add react-native-pager-view" for the top tab to work, or in my case on10/June/2021 it does not work without the pager-view addition

  • @DominiqSimeon

    @DominiqSimeon

    2 жыл бұрын

    Thanks for this info

  • @SS4DEUCE

    @SS4DEUCE

    2 жыл бұрын

    how does the code look?

  • @okokajee4454

    @okokajee4454

    Жыл бұрын

    Yynhnjj K

  • @okokajee4454

    @okokajee4454

    Жыл бұрын

    Yynhnjji😔😜

  • @okokajee4454

    @okokajee4454

    Жыл бұрын

    Yynhnjjkku..uk

  • @ghadirfarzaneh9422
    @ghadirfarzaneh94223 жыл бұрын

    Hi again Vadim, Let me know in which of your courses we can work with restfull json data that comes from backend ?

  • @bdk9830
    @bdk98303 жыл бұрын

    thank you so much Vadim. i love this tutorial

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    Glad you like it!

  • @user-oy7hj7nm3r
    @user-oy7hj7nm3r2 жыл бұрын

    Hi. I have a question. At 2:59:00 of the video, on the screen with the LIST tab and the MAP tab, when you scroll down, can you make the header '

  • @stewarteaton6288
    @stewarteaton62882 жыл бұрын

    What is the vs extension your using that that adds the type of input in functions as small faint descriptions - for ex. (initialValue: , deps: , effect: , initialSate) ??

  • @sanchezcarlos1986
    @sanchezcarlos19863 жыл бұрын

    28:15 Put a navigator as a component in another navigator still makes me feel a bit confused hahaha but I think I'm getting used to it. Once again thanks so much for bringing this great content!

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    Yeah, nested navigation can get messy. That's why the official documentation recommends to nest navigators that only needs to be nested for the UI wise, not logically nested. For example, if you need a bottom tab navigator, where the first page is the home page, and the home page needs 2 top tabs, then you need to nest a top tab navigator inside the bottom tab navigator

  • @andrewng9950
    @andrewng99503 жыл бұрын

    Just wanna say thanks for these tutorials! May I suggest building a full stack application built on your favourite stack and streaming the whole thing. I'd happily pay a course fee, for your explanations are very clear and it's really fun to code-along with you!

  • @marcelpatrick3840

    @marcelpatrick3840

    2 жыл бұрын

    I guess Im asking the wrong place but does any of you know a way to get back into an instagram account..? I somehow lost the password. I would love any tips you can offer me!

  • @mistytaylortaylor3579

    @mistytaylortaylor3579

    Жыл бұрын

    Stop this is illegal

  • @mistytaylortaylor3579

    @mistytaylortaylor3579

    Жыл бұрын

    You all will be prosecuted to the maximum extent of the law

  • @mistytaylortaylor3579

    @mistytaylortaylor3579

    Жыл бұрын

    God is good

  • @anum2471
    @anum2471 Жыл бұрын

    Binding was awesome! autocomplete do work on expo now

  • @israrahmed8305
    @israrahmed83053 жыл бұрын

    I tried the two way binding map and flatlist but i dont know why but if the condition( onViewChanged useref ) goes into a loop and keep changing the location ( between the selected marker and any random one ) on its on once I try to change it using the map markers ,, Need ur help

  • @josemanuelacostasegovia1770

    @josemanuelacostasegovia1770

    2 жыл бұрын

    I got the same problem, you found any solutions?

  • @israrahmed8305

    @israrahmed8305

    2 жыл бұрын

    @@josemanuelacostasegovia1770 yes i shifted to flutter..

  • @mandream185
    @mandream1853 жыл бұрын

    hi~ I like your course I new beginner react native I learn a lot from your course Thank a lot

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    thanks, keep building

  • @manojmandil2983
    @manojmandil29833 жыл бұрын

    Is is necessary to give info regarding payment in billing account or is there any other way of it

  • @thelma2084
    @thelma20842 жыл бұрын

    The carousel is 🔥🔥🔥🔥🔥 omg thank you lol. My app is looking good.

  • @Hizbullla
    @Hizbullla3 жыл бұрын

    Is there any specific reason why you exported both HomeTabNavigator.js and Router.js as Router?

  • @Akshaykumar-pz1cx
    @Akshaykumar-pz1cx Жыл бұрын

    how can i create folder and list it in listing page like file explorer in react native ?? @reference : adobe scanner mobile app

  • @relaxationmeditationmusic6856
    @relaxationmeditationmusic68563 жыл бұрын

    Hello. You videos are amazing!! But i am facing error when trying to show dummy data in the maps

  • @batuhantastekin8927
    @batuhantastekin89273 жыл бұрын

    Do you have a plan to continue to the series with user/host features?

  • @thekaiser5212
    @thekaiser52123 жыл бұрын

    I love these videos of you! I hope this series is not over and continue. Hope you answer

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    Thanks

  • @thekaiser5212

    @thekaiser5212

    3 жыл бұрын

    @@notjustdev backend are you going to use databse? And I use firebase or another database

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    @@thekaiser5212 we will use AWS Amplify

  • @thekaiser5212

    @thekaiser5212

    3 жыл бұрын

    @@notjustdev I look forward to it. Hope you can guide me as soon as possible !!!!

  • @Moonlight-kh9pr
    @Moonlight-kh9pr2 жыл бұрын

    The previously video no full bro, can u render in youtube full stream? Many questions i have? i think not only i

  • @abiodunomonijo
    @abiodunomonijo4 күн бұрын

    Hi guys. I'm having issues in my code on this work. When I click the Submit button on the Guest page, it takes me back to the Home/Explore page instead of the SearchResult page. Please I need help.

  • @zekiunyildiz
    @zekiunyildiz3 жыл бұрын

    It's great!

  • @arrowfunction3200
    @arrowfunction32003 жыл бұрын

    Are you thinking about creating our own graphql api and server and using apollo client at front end with any project? what are your toughts about not using aws?

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    I might do that in the future. I use Apollo client, and a custom graphql server at my startup, and I love it.

  • @siddharthanelango6034
    @siddharthanelango60343 жыл бұрын

    your video is soo cool and can you help me that did the expo supports the video call options?

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    Thanks!

  • @shubbhammalve6250
    @shubbhammalve62503 жыл бұрын

    to enable billing it will ask for payment right how can i do without putting my card details

  • @alirazzaq1541
    @alirazzaq15413 жыл бұрын

    This is amazing.. btw, i am having so many dependency issues. I have spent 4x time to battle them so far.

  • @SS4DEUCE

    @SS4DEUCE

    2 жыл бұрын

    Same

  • @Galexynn

    @Galexynn

    2 жыл бұрын

    What issues?

  • @azisezoungrana2672
    @azisezoungrana26722 жыл бұрын

    Thanks bro

  • @NguyenTran-uv6mu
    @NguyenTran-uv6mu3 жыл бұрын

    I watch this video late, but i have found a bug in ur code. When click a marker-> the selectedMarkerChange -> Scroll the flatlist -> onViewChange -> the selectedMarkerChange -> scroll the flatList .... It become an endless loop. For ex, this occurs when the selected marker index is 1 and i click the third one, the flat list will scroll to 3rd, but it scroll to the 2nd before, after that, onViewChange is fired with the second index, it continue to update the selected Marker ...

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    Yes, that’s true. It is easy to fix this issue. Add the property minimumViewTime in viewabilityConfig and set it to something like 300 (ms). This will trigger an item to become visible only after being visible for that amount of time. Hope it is clear

  • @NguyenTran-uv6mu

    @NguyenTran-uv6mu

    3 жыл бұрын

    @@notjustdev It works, thanks for awesome tutorial bro. I'm android dev. After 2 days watching your video, now i can also work with react native

  • @salihgumus552
    @salihgumus5523 жыл бұрын

    Do you plan to make videos for the management part of the application

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    Can you give more details about what you mean?

  • @mrhimin3808
    @mrhimin38082 жыл бұрын

    Hi. I am writing a mobile app using react-native maps. I call data from (post) However, when I switch (article) to . map, I get the error as shown. please help me to fix this error. Thank you for all.

  • @TheXrSerpents
    @TheXrSerpents3 жыл бұрын

    Thanks a lot

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    My pleasure!

  • @dev-c6905
    @dev-c69052 жыл бұрын

    How can we develop switch user features like Airbnb?

  • @ghadirfarzaneh9422
    @ghadirfarzaneh94223 жыл бұрын

    Hi again Man. as I said I'm coming with you step by step in android. but in android there is issue that is not in ios during making CustomMarker. we should replace

  • @mateuszsliwka8985
    @mateuszsliwka89853 жыл бұрын

    Hi, thanks for this video. I've got little problem. When we click marker, for example - index1 is selected and we click on marker index3 lists try to scroll from index1 to index3 and it's ok but between them it's index2 and during animation it's interpreted as selecting index2 (because of onViewChanged caused by animation) so finally we do not change 1->3 but 1->2. The only solution which I found is scrollToIndex animation to false but when it's true changing selected markers whose indexes differ by 2 does not work because the marker between them disrupts the animation and is selected as selected :(

  • @mateuszsliwka8985

    @mateuszsliwka8985

    3 жыл бұрын

    I think you've got same problem at 2:29:15

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    THere is a easy fix for this. Add a `minimumViewTime` property to the viewabilityConfig. This will set the item as visible, only after the item has been physically visible on the screen for that amount of time. And in the case that we scroll from 1 to 3, the 2nd item will not be visible for long enough to trigger it as visible

  • @pankajsharma-rf1ov

    @pankajsharma-rf1ov

    2 жыл бұрын

    yes I am facing same issue

  • @nikhilgupta71
    @nikhilgupta713 жыл бұрын

    Hello vadim, i want to learn react -native mobile development. Please guide which language to learn javascript or typescript.

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    Start with javascript, and then, it's very easy to learn typescript, because typescript is the same javascript only it has types

  • @brianb6796
    @brianb67963 жыл бұрын

    how do i implement this for react

  • @emawa1
    @emawa13 жыл бұрын

    Thank you

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    You're welcome

  • @Askbowe
    @Askbowe2 жыл бұрын

    what is the name of the plugin that displays your git @2:33:44 in the video ?

  • @notjustdev

    @notjustdev

    2 жыл бұрын

    Check it out here: kzread.info/dash/bejne/nHeurLuym9Gxd8o.html

  • @pauldeacon6123
    @pauldeacon61233 жыл бұрын

    You know what i clicked on one of your previous videos before and subscribe to download the materials to follow this is around two days now and still haven't received the email for the download hmhmmh leave me wondering

  • @findahome8961
    @findahome89612 жыл бұрын

    Hi Vadim, if you have a real state app like Airbnb (not include booking), I will buy one.

  • @okta_ziro
    @okta_ziro Жыл бұрын

    How to make multi user dan admin login??

  • @emawa1
    @emawa13 жыл бұрын

    The aibnb clone that you build have backend?

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    Yes it does

  • @kondwanichiomba5411
    @kondwanichiomba54113 жыл бұрын

    boss ,is biling accout for this project paid for

  • @jhanbrentowendelossantos916
    @jhanbrentowendelossantos9163 жыл бұрын

    Can you clone UberEats using React Native without expo thanks.

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    I will try my best

  • @notjustdev
    @notjustdev3 жыл бұрын

    🚀 Download the Asset Bundle (Images, Dummy data, PDF presentation): assets.notjust.dev/airbnb 📚 Enroll in "The Full-stack Mobile Developer" and become a 6-figure dev in 2021: academy.notjust.dev/

  • @fayinfos2725
    @fayinfos27253 жыл бұрын

    Very very good content 😊 could you please change a few places in the code from jacascript to typescript if it would be possible. i think type defined is much better

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    Thanks. I have some builds done in typescript

  • @fayinfos2725

    @fayinfos2725

    3 жыл бұрын

    @@notjustdev where can I find it please?

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    @@fayinfos2725 Netflix, The 12h livestream (Vcrypto), and other expo builds

  • @georgeassan7164
    @georgeassan71642 жыл бұрын

    Seems snapToAlignment doesnt work on android. anyone?

  • @winstonmckinmey1772
    @winstonmckinmey17722 жыл бұрын

    Hi V. I usually view you on a masked site of KZread but I think I'm on the legit site now.

  • @dangelgeek
    @dangelgeek3 жыл бұрын

    This is the end and the continuation of the 3 video? Create the Airbnb application in React Native [Advance UI]

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    There is one more video in this series where we implement the backend, check it on my channel page

  • @israrahmed8305
    @israrahmed83053 жыл бұрын

    Where is the 2nd part ??

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    Here is the next part (and the whole playlist): kzread.info/dash/bejne/lZxm0bGdnq_Rodo.html

  • @israrahmed8305

    @israrahmed8305

    3 жыл бұрын

    @@notjustdev awesome content ,, learn alot from this project ,, looking forward for more such projects 👍🏻👍🏻👍🏻✌️✌️✌️ #PeaceOut

  • @shantanu391996
    @shantanu3919963 жыл бұрын

    e-commerce

  • @notjustdev

    @notjustdev

    3 жыл бұрын

    noted

  • @mauriciogodinez9930

    @mauriciogodinez9930

    3 жыл бұрын

    Yes please !!!!

  • @jamespoda5621
    @jamespoda56213 жыл бұрын

    am voting for ecommerce

  • @mistytaylortaylor3579
    @mistytaylortaylor3579 Жыл бұрын

    This is terrorism

Келесі