🔴 Build the Airbnb app in React Native [ Tutorial for beginners ]

Рет қаралды 102,985

Күн бұрын

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, cokies):
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:
00:00 Intro
12:10 Initialize React Native Project with CLI
15:20 Install and setup Vector Icons
22:37 Setup project structure
26:40 Implement Home Screen
01:01:21 Post (accommodation) component
01:25:50 React Props for Post component
01:41:45 (Flat)List of Posts
01:52:45 Location Search Screen
02:13:30 Guests Filter Screen
02:39:43 React Navigation v5
#VadimSavin #notejust.dev #notJustDevelopment

Пікірлер: 238

@notjustdev 3 жыл бұрын

📚 Enroll in "The Full-stack Mobile Developer" and become a 6-figure dev in 2021: academy.notjust.dev/ 🎒 Download the Asset Bundle: assets.notjust.dev/airbnb

@1968Mcneil 3 жыл бұрын

Savin, You are Great, Thanks a lot for your help, Great Teacher! Greetings from Costa Rica!

@notjustdev 3 жыл бұрын

@@1968Mcneil Thanks for the kind words

@upsideInvestments2024 3 жыл бұрын

Can you provide us guide on how a complete app are build and deployed on play store that will act like a roadmap for some people

@martinlingvide8887 3 жыл бұрын

@@notjustdev Hey Vadim, you are beyond amazing. Ive tried alot of different courses on Udemy and this beats everything. One question: I know you have alot of typescript tutorials, is it possible to follow them even though I would like to use JS? Meaning are they that close so that it makes sense and its not too easy to get lost in differences of how to do things? Best from estonia

@carinelima4053 3 жыл бұрын

@TheCitron59 3 жыл бұрын

A big thank from France ! Your english is really understandable, and your tutorials are a real pleasure tu follow ! Thank you very much Vadim.

@notjustdev 3 жыл бұрын

Thanks for appreciation

@rahmanaulia3129 3 жыл бұрын

half way through, so far good explanation and really easy to understand, thank you soo much vadim !!

@notjustdev 3 жыл бұрын

Hey, really glad that you enjoy it

@kapilshanbhag5052 3 жыл бұрын

Awesome one! Would love to see more clones and projects from you.

@notjustdev 3 жыл бұрын

Thanks

@EduardTataru 3 жыл бұрын

If you have any problem with position: 'absolute', top:50, zIndex: 1 on Android, you will need to have elevation: 2 for searchButton to show the search bar in the app

@laurencedale3854 2 жыл бұрын

Thanks!

@anirbanmukhopadhyay426 2 жыл бұрын

I was struggling for this from past 2 days. Thanks for your suggestion here. It worked perfectly fine for me :))

@MoDDingMS 2 жыл бұрын

You're a hero!

@MateusOpessoa 2 жыл бұрын

THANKS!!

@hoangdang9631 3 жыл бұрын

Thank my friend Vadim...I learned a lot from you.

@ahmetmutlu7469 7 ай бұрын

Thank you so much mate.You are doing georgous work for people who are willing to learn React-Native.As i am a beginner i feel comportable while i am watching you.

@griffinkirkland9087 5 ай бұрын

how do you not run into bugs since it's 3 years ago?

@tenslider6722 3 жыл бұрын

great content, just what i was looking for.

@notjustdev 3 жыл бұрын

Glad it was helpful!

@bdk9830 3 жыл бұрын

thank you so much . I really appreciate you doing the best rn tutorial for beginners. :)

@notjustdev 3 жыл бұрын

You're very welcome!

@ramsankar6202 3 жыл бұрын

மிகவும் சிறப்பாக கற்று கொடுக்கிறீர்கள் உங்களிடம் இருந்து நிறைய கற்று கொண்டேன் You are teaching very well I have learn lot of things from your tutorials I respect you sir ! Thank you so much

@notjustdev 3 жыл бұрын

Thank you!

@paulmurray954 Жыл бұрын

Great video, helped me a lot thank you!

@SS4DEUCE 11 ай бұрын

Are you having any issues with page viewer ?

@KunalKumar-ei6tt 3 жыл бұрын

You are really Very great mentor to guide .Thank you very much.

@NavyCrack1 3 жыл бұрын

Great work Vadim, greetings from Macedonia

@notjustdev 3 жыл бұрын

Hey There

@darkchip6838 3 жыл бұрын

Very helpful! Keep it up! 💪

@notjustdev 3 жыл бұрын

Thanks

@tharakanuwan 3 жыл бұрын

Great work. Very useful content. Thank you

@notjustdev 3 жыл бұрын

Thanks

@prathammeghani6128 3 жыл бұрын

Simplicity at its Best💯

@notjustdev 3 жыл бұрын

@arwaahmed5066 3 жыл бұрын

thanx a million, really informative and easy to follow

@jovinekyolike2657 2 жыл бұрын

i've got TypeError: Undefined is not an object (evaluating 'post.bed')

@jhonatanmosquera8371 3 жыл бұрын

You are an excellent teacher. What are the snippets you use in vsc? Thank you!

@johnnywu5470 Жыл бұрын

Also wondering what are the snippets or extensions you used?

@DuyTran-ss4lu 3 жыл бұрын

Awesome. Thanks so much

@joshreynolds4164 3 жыл бұрын

Hey Vadim! Awesome project, excited to follow along here. The assets download doesn't seem to have the images though, just a heads up!

@notjustdev 3 жыл бұрын

Thanks a lot, glad that you are enjoying this. Thanks for letting me know, I just updated the assets and it now include the wallpaper image. The housing images are served via URL which are already in the dummy data.

@AhmedFawzy-rb3kn 3 жыл бұрын

you are very skillful and excellent greetings from egypt

@notjustdev 3 жыл бұрын

Thank you very much!

@acdev972 2 жыл бұрын

Hi mate. First of all thank you for the content. I like it. However i have a question : Why did you not create a component for the 3 cards in the QuestsScreen ? Have a nivce day :)

@bondjames4534 3 жыл бұрын

Thanks for nice lecture! 😍

@notjustdev 3 жыл бұрын

Glad you liked it!

@jackwalsh6487 3 жыл бұрын

Is this basically what a React Native front end dev does or does the front end dev hook up to the backend as well? Just looking for some definition of job descriptions/job titles. Thanks!

@dantedt3931 3 жыл бұрын

Great content.Subscribed.

@notjustdev 3 жыл бұрын

Awesome, thank you!

@uni78 Жыл бұрын

its better if you use typescript.. I love your content its very informative and to the point

@zekiunyildiz 3 жыл бұрын

It's great!

@clevercoder2609 3 жыл бұрын

Great work buddy, please make any online payment app.

@internetcafe7203 2 жыл бұрын

Amazing tutorial love from India..

@a.o6749 3 жыл бұрын

Hey, What you to simulate your project on the computer screen? I am really struggling about it. Thanks :D

@shadon_official2510 2 жыл бұрын

You have an awesome tutorial.

@notjustdev 2 жыл бұрын

Thank you! Cheers!

@elvisdelaguila 2 жыл бұрын

Excelente video, felicitaciones. Tendrás PDF , impresión en PDF?? Código QR??

@TheDeeStain 3 жыл бұрын

I completely understand why we use expo lol SO much extra work although I will say it was needed to understand both better.

@notjustdev 3 жыл бұрын

Yeah, I also prefer simplicity

@peterchege4616 3 жыл бұрын

Great content 💯💯💯

@notjustdev 3 жыл бұрын

🙏

@adamgardner1986 Жыл бұрын

Great video but it just cuts short at the end there. Going to Advance UI video does not cover what was cut off from this video. Am I missing a video that covered the rest or we just figure it out on our own?

@claraharmonson2181 2 жыл бұрын

Smashed the like button as fast as I could ❤️❤️❤️❤️❤️🎉🎉🎉🎉

@notjustdev 2 жыл бұрын

Thanks

@zeyuwang1790 3 жыл бұрын

OMG Thanks!!!

@notjustdev 3 жыл бұрын

Welcome!

@pythoncoding9227 3 жыл бұрын

How did you build the splash screen

@teemourf668 3 жыл бұрын

thank you very much for your awesome guide. I have a question: Pressable is not working in android, even though I used the elevation ... elevation is working and showing but not working with onPress function .. plz help me

@teemourf668 3 жыл бұрын

I solved this problem by switching the component and component. thx anyway!

@premiummmmm4957 2 жыл бұрын

did you taught how to add the aws amplify?

@hb2917 3 жыл бұрын

i'm react js developer and i'm preparing for a job interview for RN this friday so i'm here starting from scratch :D

@notjustdev 3 жыл бұрын

Hey, good luck with the interview. If you have experience with ReactJS, it's going to be pretty easy for you to do the switch

@hb2917 3 жыл бұрын

Thank you ! Can i follow along using expo instead ?

@notjustdev 3 жыл бұрын

@@hb2917 In the second video we are using google auto complete library and google maps library, and I am not sure they are supported on expo though

@hb2917 3 жыл бұрын

@@notjustdev okay awesome thank u man 😁

@notjustdev 3 жыл бұрын

@@hb2917 My pleasure

@alex_angri 3 жыл бұрын

If we are on android do we have to install the ios dependencies as well?

@rizvan8836 3 жыл бұрын

Great Man

@notjustdev 3 жыл бұрын

Thanks 🙏

@_marcobaez 6 күн бұрын

Would this be possible to follow if starting the project using Expo Router?

@0xredpill 3 жыл бұрын

As I begin my journey in react native 🙏

@dimmadomevolleyballclips8014 2 жыл бұрын

Hey, great video and explanations! I just can’t seem to get the search bar on the home page to show up over the background image even when I try copy and pasting your source code. I am developing on a Windows environment for the Android OS by the way. Any help would be greatly appreciated!

@AteszmadmanHDPC Жыл бұрын

add elevation: 2 to searchButton

@Mauritz5 3 жыл бұрын

On android there are massive issues: (home) zIndex doesn't work (needs elevation) and even then the button doesn't work. Any fixes for this, since without it's impossible to proceed really

@aren624 Жыл бұрын

thank you

@lorenzobarberi6566 3 жыл бұрын

Great tutorial. Can I ask you something? How can I search other icons with react native vector icons?

@lorenzobarberi6566 3 жыл бұрын

I've done. Now I know how to browse icons. Another question: if I'm working on an Expo project how can I setup react-native-vector-icons? Because it doesn't show icons on bottom tab navigator

@shubbhammalve6250 3 жыл бұрын

where is the search button part from guest screen?

@hassaanzamir 2 жыл бұрын

How would u dealt with, security like Airbnb..

@thebuildguy7 3 жыл бұрын

I had a question why does the pressable button doesn't work in homescreen ("where are you going" one) when there's position absolute given? My device Android.

@anirbanmukhopadhyay426 2 жыл бұрын

#VadimSavin +1. Please assist

@ThannMalin 3 жыл бұрын

Thank you brother!!!

@rahulbillava3103 Жыл бұрын

Thanks

@timmayabi7734 3 жыл бұрын

App on android crashes when I add the image background. The logs are not showing any significant problems

@instant-code 3 жыл бұрын

When I am import destination search and passed by nativagation it is showing blank screen

@muhammadtaimoor9120 3 жыл бұрын

hey Vaidm, have you used redux in any of the builds on your channel?

@notjustdev 3 жыл бұрын

Not yet

@mokshagaming9968 3 жыл бұрын

hi Vadim, thank you for this awesome tutorial I am learning a lot. Could you please mention all the extensions that you are using?

@notjustdev 3 жыл бұрын

Glad that you are learning from it!

@mokshagaming9968 3 жыл бұрын

@@notjustdev yes. You're teaching methods are awesome I can easily grab concepts. I am not able to find Auth navigation in this tutorial. Could you please embed login and sign up in one of your RN projects so I could learn it properly.

@notjustdev 3 жыл бұрын

@@mokshagaming9968 Sign in and sign up is covered in the 3rd video on Airbnb, where I cover the backend

@MsAndsk8 3 жыл бұрын

Hi, great video! Could it be donde using expo?

@notjustdev 3 жыл бұрын

Yes, it should be possible

@anshumantyagi2979 2 жыл бұрын

What if the image type is not supported by our computer?

@JesusMartinez-kn8hz Жыл бұрын

What version of React was used?

@kondwanichiomba5411 3 жыл бұрын

good job from Malawi africa

@notjustdev 3 жыл бұрын

Thanks

@charity2419 3 жыл бұрын

if its not expo how can i run on physical device?

@phornpharath9525 3 жыл бұрын

Thank you so much

@notjustdev 3 жыл бұрын

You're welcome!

@phornpharath9525 3 жыл бұрын

@@notjustdev Could you make it with payment integration? and Could you make Ecommerce App clone. Like Gearbest Mobile App Clone with Payment Option something like that

@notjustdev 3 жыл бұрын

@@phornpharath9525 Will try my best

@phornpharath9525 3 жыл бұрын

@@notjustdev You're the man

@deionstfleur1691 3 жыл бұрын

Hello Vadim I am on minute 36:34 and I am trying to add the Home Screen background image and it seems to not be displaying anything. Any clue to why that is happening?

@prezpolyanin3865 Жыл бұрын

did you solve your problem ı got some ıssue to.

@vigneshwaraneswaramoorthi4117 2 жыл бұрын

01:11:10 I`ve two questions 1. is it necessary to give width, when giving aspectRation?, 2. why u not used aspectRatio in home screen bg image? and give some idea on screen responsiveness for text elements.

@notjustdev 2 жыл бұрын

1. It's necesery to specify one of the side (widht or height) together with aspectRation, and the other value that is missing (width or height) will be automatically calculated. 2. no particualr reason. There are different ways to acomplish the same outcome

@vigneshwaraneswaramoorthi4117 2 жыл бұрын

@@notjustdev Okay. how ur handling font size across diff devices?

@user-ku2dc2vr5p 9 ай бұрын

Amazing video. iOS home screen is perfect. Android Home screen doesn't have "search" button :(

@commentateurmystere 2 ай бұрын

Hello to you. Can you please give us a file on description with the whole code you codes in this video? Thanks a lot

@jovinekyolike2657 2 жыл бұрын

i've got TypeError: Undefined is not an object (evaluating 'post.bed')

@karanshah3214 3 жыл бұрын

hello i'm getting Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager. what to do...?

@urcadelima4124 Жыл бұрын

I have the same problem.Did Someone find the answer?

@alexdatcode674 3 жыл бұрын

I have major issues to setup react-native-cli in my mac, can I use expo-cli to follow this video?

@notjustdev 3 жыл бұрын

We are using in the second part if the video some google libraries, and I am not sure if they work on Expo

@Joseph_S79 3 жыл бұрын

Вадим, сделай плиз простенький music player с навигацией. Спс

@the_chosenone 3 жыл бұрын

Hey mate I am new to this " react world " can I make this with expo and eject later cause expo makes working really fast. P.S - Your content is really mind blowing sending you love.

@notjustdev 3 жыл бұрын

Hey there. Yeah, sure, you can make this with expo, and it will be much faster because most of the things there come preinstall. You can even start from a template with bottom tabs as it already has navigation and vector icons installed (but it's using typescritp).

@victorezea7086 3 жыл бұрын

React-native-vector-icons won't show but only displays names of icons on my android device and emulator i need help

@aseemkhan00 3 жыл бұрын

You Doing Really Good, Thanks a lot !! God bless you.. Please make a video on How to build an ecommerce app using react Native.. Please!!

@notjustdev 3 жыл бұрын

Thanks for the support! I will try my best to do it soon

@aseemkhan00 3 жыл бұрын

@@notjustdev thank you ❤️❤️

@solfamendeztv 3 жыл бұрын

Hola, que precio tiene esa app?

@sheilang2153 3 жыл бұрын

about 42:58 line 23 , i have an error : cant find variable : data , what can i do now, please help, thank you

@jovinekyolike2657 2 жыл бұрын

i've got TypeError: Undefined is not an object (evaluating 'post.bed')

@iskanderabbassi6256 2 жыл бұрын

thanks

@ScoreMatch_099 3 жыл бұрын

Position: 'absolute' is not working in searchButton Can anyone help?

@isuruudara3794 2 жыл бұрын

Great. Why don't you make a video of coding letgo clone

@ranjubhat 3 жыл бұрын

Hi Vadim, Thanks for doing this. I have one small issue. Icons are not showing up in tab navigator. It is visible in other places. Can you help?

@notjustdev 3 жыл бұрын

Hey there! Check if you don't have any typos, or send me some code/screenshots to be able to check

@ranjubhat 3 жыл бұрын

@@notjustdev How can I send the screenshots?

@ranjubhat 3 жыл бұрын

Hi Vadim, It's fixed. Instead of giving '()' I used '{}' and didn't return. It's working now. Thanks for the quick response ☺️

@alperenbugduz1440 3 жыл бұрын

Installed pods with windows.

@senhorcolcci 3 жыл бұрын

When getting started, how come when I input "$ yarn start" or "nix react-native init Airbnb" the terminal window returns "bash: $: command not found"?

@notjustdev 3 жыл бұрын

You do not need the $, at the beginning. Do just "yarn start" and "npx react-native init Airbnb"

@senhorcolcci 3 жыл бұрын

@@notjustdev thank you 🙏 the npx phrase worked but when I typed "yarn start" it still said command not found. Should I have downloaded something for yarn to work? kind of confusing.

@notjustdev 3 жыл бұрын

@@senhorcolcci yes, you need to install yarn. Or, you can use npm. Instead of "yarn start" do "npm run start"

@lesliechiu1437 3 жыл бұрын

Download the source code and tried to run it, got an error :Module not found: Can't resolve './aws-exports' in '/Users/xyz/Downloads/AirbnbClone-main'

@notjustdev 3 жыл бұрын

you have to initialize the amplify project

@Arshaad786000 3 жыл бұрын

anyone else experiencing an issue on android with the z-index causing the pressable button to not be clickable?

@adityapratap9456 3 жыл бұрын

Render the pressable button after image background, React Native works a bit different than React, as the button has position absolute, it renders first and the second element renders on top, so if we change order the 2nd element (which is now button) will render on top. Explained on Stackoverflow: stackoverflow.com/a/36940904

@rajneeshkumar7574 3 жыл бұрын

Awesome content brother please add the push notifications ,

@notjustdev 3 жыл бұрын

Thanks

@rajneeshkumar7574 3 жыл бұрын

@@notjustdev , can you make app like appointment application, for doctors, or trainers something like that, with one to one chat with notification of the individual chat like whatsApp, that would be very helpful for us, and thank you again Brother

@benzalex3333 3 жыл бұрын

how do i change it to a web app???

@xeyalteyyubov1175 3 жыл бұрын

Greeting from Azerbaijan

@notjustdev 3 жыл бұрын

Hey there

@KayAtanGod Жыл бұрын

Be blessed

@firstnamelastname4685 2 жыл бұрын

error: Error: Unable to resolve module `./aws-exports` from `index.js`:

@bunyaminsanli578 2 жыл бұрын

what the heck is this error. i have same error and idk what i'm gonna do

@golden-mindset 3 жыл бұрын

will you be making more videos in this series?

@notjustdev 3 жыл бұрын

Yeah, this Friday we continue from where it was interrupted and will implement a lot of cool features

@golden-mindset 3 жыл бұрын

@@notjustdev aye thanks for the quick reply! also, a few more questions: 1. will firebase be implemented as well? 2. how many more videos do you plan on making until it is finished? Thanks

@notjustdev 3 жыл бұрын

@@golden-mindset I will use AWS Amplify for the backend. We will do one more video on frontend, and 1-2 videos about the backend

@golden-mindset 3 жыл бұрын

@@notjustdev so hyped, cant wait to see it 🤟