🔴 Build the Airbnb app in React Native [ Advance UI ]
Вставка
- Опубліковано 3 чер 2024
- 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 - Наука та технологія
![🔴 Build the Uber Driver App in React Native & AWS Amplify (Tutorial for Beginners) Part [5]](http://i.ytimg.com/vi/E95VMb6nzKc/mqdefault.jpg)
This is truly incredible stuff. The map and flatlist functionality and its bindings were particularly awesome. Keep up the amazing content!!
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!
Best react native tutorials I've ever seen
Thanks buddy
Awesome video and great tutorial! What happened to the snap alignment of the PostCarouselItems after the onViewChanged was implemented?
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.
just found out how to use stylesheet and inline styles together, in case anyone is wondering
I have not seen your new video, but I am pressing Like, because you are creating wonderful content!!!)
That's the mindset. Destroy that button bro
Hi again Vadim, Let me know in which of your courses we can work with restfull json data that comes from backend ?
hey will you include post your house as a stay option as well ?
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
Thanks for this info
how does the code look?
Yynhnjj
K
Yynhnjji😔😜
Yynhnjjkku..uk
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 '
This is great! Very valuable content.
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) ??
thank you so much Vadim. i love this tutorial
Glad you like it!
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!
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
hi～ I like your course I new beginner react native
I learn a lot from your course
Thank a lot
thanks, keep building
It's great!
🚀 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/
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?
I might do that in the future. I use Apollo client, and a custom graphql server at my startup, and I love it.
your video is soo cool and can you help me that did the expo supports the video call options?
Thanks!
Is is necessary to give info regarding payment in billing account or is there any other way of it
Hello. You videos are amazing!! But i am facing error when trying to show dummy data in the maps
Is there any specific reason why you exported both HomeTabNavigator.js and Router.js as Router?
The carousel is 🔥🔥🔥🔥🔥 omg thank you lol. My app is looking good.
Binding was awesome! autocomplete do work on expo now
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!
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!
Stop this is illegal
You all will be prosecuted to the maximum extent of the law
God is good
I love these videos of you! I hope this series is not over and continue. Hope you answer
Thanks
@@notjustdev backend are you going to use databse? And I use firebase or another database
@@thekaiser5212 we will use AWS Amplify
@@notjustdev I look forward to it. Hope you can guide me as soon as possible !!!!
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
I got the same problem, you found any solutions?
@@josemanuelacostasegovia1770 yes i shifted to flutter..
Do you have a plan to continue to the series with user/host features?
to enable billing it will ask for payment right how can i do without putting my card details
how can i create folder and list it in listing page like file explorer in react native ?? @reference : adobe scanner mobile app
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.
This is amazing.. btw, i am having so many dependency issues. I have spent 4x time to battle them so far.
Same
What issues?
The previously video no full bro, can u render in youtube full stream? Many questions i have? i think not only i
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 :(
I think you've got same problem at 2:29:15
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
yes I am facing same issue
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.
Thanks bro
How can we develop switch user features like Airbnb?
Thanks a lot
My pleasure!
Thank you
You're welcome
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 ...
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
@@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
Do you plan to make videos for the management part of the application
Can you give more details about what you mean?
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
how do i implement this for react
The aibnb clone that you build have backend?
Yes it does
what is the name of the plugin that displays your git @2:33:44 in the video ?
Check it out here: ua-cam.com/video/jCzJYyknKGg/v-deo.html
Hello vadim, i want to learn react -native mobile development. Please guide which language to learn javascript or typescript.
Start with javascript, and then, it's very easy to learn typescript, because typescript is the same javascript only it has types
Can you clone UberEats using React Native without expo thanks.
I will try my best
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
Hi Vadim, if you have a real state app like Airbnb (not include booking), I will buy one.
How to make multi user dan admin login??
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
Thanks. I have some builds done in typescript
@@notjustdev where can I find it please?
@@fayinfos2725 Netflix, The 12h livestream (Vcrypto), and other expo builds
boss ,is biling accout for this project paid for
Seems snapToAlignment doesnt work on android. anyone?
This is the end and the continuation of the 3 video? Create the Airbnb application in React Native [Advance UI]
There is one more video in this series where we implement the backend, check it on my channel page
Hi V.
I usually view you on a masked site of UA-cam but I think I'm on the legit site now.
Where is the 2nd part ??
Here is the next part (and the whole playlist):
ua-cam.com/video/ch2oOdnLkqw/v-deo.html
@@notjustdev awesome content ,, learn alot from this project ,, looking forward for more such projects 👍🏻👍🏻👍🏻✌️✌️✌️ #PeaceOut
e-commerce
noted
Yes please !!!!
am voting for ecommerce
This is terrorism