🔴 Build the Airbnb app in React Native [ Tutorial for beginners ]
Вставка
- Опубліковано 2 чер 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, 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 - Наука та технологія
📚 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
Savin, You are Great, Thanks a lot for your help, Great Teacher!
Greetings from Costa Rica!
@@1968Mcneil Thanks for the kind words
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
@@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
Oo
A big thank from France ! Your english is really understandable, and your tutorials are a real pleasure tu follow ! Thank you very much Vadim.
Thanks for appreciation
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
Thanks!
I was struggling for this from past 2 days. Thanks for your suggestion here. It worked perfectly fine for me :))
You're a hero!
THANKS!!
Awesome one! Would love to see more clones and projects from you.
Thanks
half way through, so far good explanation and really easy to understand, thank you soo much vadim !!
Hey, really glad that you enjoy it
மிகவும் சிறப்பாக கற்று கொடுக்கிறீர்கள்
உங்களிடம் இருந்து நிறைய கற்று கொண்டேன்
You are teaching very well
I have learn lot of things from your tutorials
I respect you sir !
Thank you so much
Thank you!
Thank my friend Vadim...I learned a lot from you.
great content, just what i was looking for.
Glad it was helpful!
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.
how do you not run into bugs
since it's 3 years ago?
You are an excellent teacher.
What are the snippets you use in vsc?
Thank you!
Also wondering what are the snippets or extensions you used?
Hey Vadim! Awesome project, excited to follow along here. The assets download doesn't seem to have the images though, just a heads up!
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.
Great work buddy, please make any online payment app.
Excelente video, felicitaciones. Tendrás PDF , impresión en PDF?? Código QR??
Great video, helped me a lot thank you!
Are you having any issues with page viewer ?
Very helpful! Keep it up! 💪
Thanks
Great work Vadim, greetings from Macedonia
Hey There
thank you so much . I really appreciate you doing the best rn tutorial for beginners. :)
You're very welcome!
I completely understand why we use expo lol SO much extra work although I will say it was needed to understand both better.
Yeah, I also prefer simplicity
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!
Great work. Very useful content. Thank you
Thanks
its better if you use typescript.. I love your content its very informative and to the point
Simplicity at its Best💯
you are very skillful and excellent
greetings from egypt
Thank you very much!
You are really Very great mentor to guide .Thank you very much.
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 :)
Awesome. Thanks so much
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
I solved this problem by switching the component and component.
thx anyway!
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?
Amazing tutorial love from India..
thanx a million, really informative and easy to follow
i've got TypeError: Undefined is not an object (evaluating 'post.bed')
Hey, What you to simulate your project on the computer screen? I am really struggling about it. Thanks :D
Thanks for nice lecture! 😍
Glad you liked it!
Great content.Subscribed.
Awesome, thank you!
You have an awesome tutorial.
Thank you! Cheers!
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
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
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
Thank you ! Can i follow along using expo instead ?
@@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
@@notjustdev okay awesome thank u man 😁
@@hb2917 My pleasure
As I begin my journey in react native 🙏
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!
add elevation: 2 to searchButton
It's great!
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?
did you solve your problem ı got some ıssue to.
Smashed the like button as fast as I could ❤️❤️❤️❤️❤️🎉🎉🎉🎉
Thanks
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.
#VadimSavin +1. Please assist
Great content 💯💯💯
🙏
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.
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
@@notjustdev Okay. how ur handling font size across diff devices?
hey Vaidm, have you used redux in any of the builds on your channel?
Not yet
Great tutorial. Can I ask you something? How can I search other icons with react native vector icons?
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
If we are on android do we have to install the ios dependencies as well?
How did you build the splash screen
When getting started, how come when I input "$ yarn start" or "nix react-native init Airbnb" the terminal window returns "bash: $: command not found"?
You do not need the $, at the beginning. Do just "yarn start" and "npx react-native init Airbnb"
@@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.
@@senhorcolcci yes, you need to install yarn. Or, you can use npm. Instead of "yarn start" do "npm run start"
I have major issues to setup react-native-cli in my mac, can I use expo-cli to follow this video?
We are using in the second part if the video some google libraries, and I am not sure if they work on Expo
App on android crashes when I add the image background. The logs are not showing any significant problems
hi Vadim, thank you for this awesome tutorial I am learning a lot. Could you please mention all the extensions that you are using?
Glad that you are learning from it!
@@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.
@@mokshagaming9968 Sign in and sign up is covered in the 3rd video on Airbnb, where I cover the backend
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?
Hey there! Check if you don't have any typos, or send me some code/screenshots to be able to check
@@notjustdev How can I send the screenshots?
Hi Vadim, It's fixed. Instead of giving '()' I used '{}' and didn't return. It's working now. Thanks for the quick response ☺️
did you taught how to add the aws amplify?
OMG Thanks!!!
Welcome!
When I am import destination search and passed by nativagation it is showing blank screen
Great Man
Thanks 🙏
good job from Malawi africa
Thanks
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.
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).
hello i'm getting Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager. what to do...?
I have the same problem.Did Someone find the answer?
React-native-vector-icons won't show but only displays names of icons on my android device and emulator i need help
where is the search button part from guest screen?
Hi, great video! Could it be donde using expo?
Yes, it should be possible
Вадим, сделай плиз простенький music player с навигацией. Спс
Thank you so much
You're welcome!
@@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
@@phornpharath9525 Will try my best
@@notjustdev You're the man
What if the image type is not supported by our computer?
How would u dealt with, security like Airbnb..
about 42:58 line 23 , i have an error : cant find variable : data , what can i do now, please help, thank you
i've got TypeError: Undefined is not an object (evaluating 'post.bed')
Hello to you.
Can you please give us a file on description with the whole code you codes in this video? Thanks a lot
i've got TypeError: Undefined is not an object (evaluating 'post.bed')
if its not expo how can i run on physical device?
Awesome content brother please add the push notifications ,
Thanks
@@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
Amazing video. iOS home screen is perfect. Android Home screen doesn't have "search" button :(
thank you
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'
you have to initialize the amplify project
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!!
Thanks for the support! I will try my best to do it soon
@@notjustdev thank you ❤️❤️
What version of React was used?
Greeting from Azerbaijan
Hey there
Hola, que precio tiene esa app?
Position: 'absolute' is not working in searchButton
Can anyone help?
Thanks
Hi sir this is love from Pakistan 🇵🇰,
Great. Why don't you make a video of coding letgo clone
will you be making more videos in this series?
Yeah, this Friday we continue from where it was interrupted and will implement a lot of cool features
@@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
@@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
@@notjustdev so hyped, cant wait to see it 🤟
Thank you brother!!!
thanks
anyone else experiencing an issue on android with the z-index causing the pressable button to not be clickable?
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
error: Error: Unable to resolve module `./aws-exports` from `index.js`:
what the heck is this error. i have same error and idk what i'm gonna do
how do i change it to a web app???
What happend after 3:12:36 ? Why there is a cut? What did I miss? :(
Not sure what happened there
Be blessed
😍😍😍
hi how can i contact vith u ? i need some help in react native
if using android add: elevation: (Platform.OS === 'android') ? 50 : 0 to css for home styling
Hey, how does one make the pressable(home screen) work on android? the onPress callback function
Installed pods with windows.
clean code
nice hair style
Thanks :D
Pressable is not working with position absolute in android
on android, we should use elevation
@@notjustdev should i use elevation with position absolute or without position absolute?
@@amarbhatia4167 just add elevation: 100, and keep the rest same as vadim, it will work
@@aakash3637 not working when i add elevation 100
Why everyone uses Expo and React itself does not?
What do you mean React does not?
Just wasted an hour trying to find out why my SearchResultsScreen component is not rendering properly. It's because I typed FlatList as Flatlist. It's so frustrating :)