🔴 Build the Uber clone in React Native (Tutorial for Beginners)
Let's learn React Native by building the Uber clone from scratch even if you are a beginner.
🔴 Build the Uber clone in React Native (Tutorial for Beginners) [2] • 🔴 Build the Uber clon...
❗Try our FREE 4-day Masterclass on notJust.Academy:
assets.notjust.dev/masterclass
✨ Asset Bundle: assets.notjust.dev/uber
⌨️ Source code: github.com/Savinvadim1312/Ube...
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
academy.notjust.dev
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 Uber 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 Uber app menu using React Navigation.
Learn how to work with Google maps in react native, to draw routes on the maps, and to implement an autocomplete feature for the location input.
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 Uber 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.
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
00:00 Intro
01:32 What will we build?
04:17 What will you learn?
06:24 Prerequisites
09:45 Initialize a new React Native Project
12:09 Install Vector Icons
25:40 Home Screen
1:15:57 Search page (Google Places Autocomplete)
1:57:47 Search Results Page
2:00:00 List with Uber Options
2:37:00 React Native Maps
3:00:20 Render Cars on the Map
3:16:07 Maps Direction (Route)
3:27:00 Q&A
#uberclone #notjustdev #reactnative
Hi I am from India and started my career in react native by learning from your videos. It helped me landing to my first job and i cant explain my happiness. Thankyou very much for such great efforts and teachings.
Hey, that's really awesome, congratulations. Can you share a bit more details about the process, so that new developers can learn from it. How specifically did my videos help you?
what process/flow would you follow from start to end.. kindly share it please
Hi Ayush i'm new to react native can you please let me know what to learn first step by step ?
we can make app for you check our Readymade carpooling App kzhead.info/sun/rNBxg71rgH1sl3k/bejne.html and connect with us by details in description
Share more details please. I want to be a freelancer like you.
You are an incredible person and believe me I didn't know anything about React Native but with this tutorial I learned much more than I expected and now I feel very comfortable and I acquired a lot of knowledge that is completing my career. I'm on the waiting list to start one of your courses. thank you very much Vadim.
Wow, thank you!
Man!! You r awesome bro!! I am using your uber clone and messenger clone as a reference and combine them to build a new project for my startup business!!
This is such a cool tutorial! :) Keep it going! Cheers mate!
I can't believe its working! keep it up! Shared everywhere! You deserve it!
have you tried the tutorial lately? and please are the codes and everything working i just wanna know because i want to start this as my final year project🤔🤔
You are best ...you deserve more subs..i will share it to my colleagues
That's the best thing about livestream , the code solves the problem live and that helps the viewer to grasp the content . A tailored tutorial that has skipped the mistakes and debugging stuff makes the learner believe that he/she is not good enough and also some teeny tiny bits are skipped and has to rewatch everything . I've got an internship man and I'll pay whatever I can after receiving my first salary .
I appreciate that. Nobody is perfect and nobody can code without stackoverflow. Good luck with the internship
This channel is on fire 🔥 🚀 🚀
Thanks bro i was waiting for this... you are superb
It's great! Vadim you are amazing!! thank you for taking the time to impart your knowledge 👏👏
Glad you liked it!
can u get me a virtual credit card with $1 please? so i can use it for AWS verification, and Google Developer to turn Billing on. please .
You are doing amazing job man. Hats off to you. Keep up this great work. i hope u reach a million subs.
thank you Vadim Savin, more power to you!
Thank you too!
awesome video Vadim! thanks for this tutorial! God bless you and Rusia!
great job, guy!!!!!! I'm from Brazil and I'm learning a lot. Thanks!!!
for the last 2 hours couldn't get the autocomplete to work looked all over the internet, by the way the best tutorial ever keep up the good work
were you able to solve it?
I have no doubt that you are the best! Well, the only one!
thanks for this tutorial, happy new year bro
Thanks, happy new year to you too
Thank for your work!
Yeah, yep..so yeah. great!
u definitely deserves more subs than this
Step by step :D
Hi Vadim, Thank you so much for the great series, and I just have a question, Regarding the codes (are these full codes for the full series which is I can upload them and the project after that gonna works probably or do I need to add other things). Thank you again and I'll be waiting for your response
Hats off. very useful help
Always great 👍
We are very welcome
Здорово) ответил на многие вопросы, thx!
Hello sir we can make app for you check our Readymade taxi booking app kzhead.info/sun/iNmJZNmbommMgYE/bejne.html and connect with us by details in description
Hello, good content! Thank you. Question for you, why did you decide not to use Expo?
You are the best..can you consider doing the Admin Section of the app. Thanks
3:08:00 Instead of hardcoding the marker size values, I recommend using the device pixel rate. I was on this stream 2 years ago and it's still fun to watch.
Hi, I'll be starting Native React would you still recommend this course since it was recorded 2yrs ago?
@@sphalamula6129 Yeah, I'll recommend this video and suggest you look up the documentation in case of changes to how things are implemented.
hey sir, i am making a clone of this app for a client . will i able to build the complete app from this playlist or do i have to add other things for it to work in real time?
FYI, in this course you will need a visa/master card/... to get the places API to continue.
Hi Vadim. Nice video. Just a question. Do the cars update their position real-time on the map? Or is it static?
This channel is very informative..keep up your god work for humanity..that plugpoint on the wall 0:05 is interesting too.
Thank you so much 😀
Wow, great content Vadim. Wish you a good luck ;) I hear the notes of Russian accent which is also cool, hehe
Thanks Dima :). Yeah, I am coming from a post-soviet country, so I know a bit of russian
@@notjustdev Kruto! :)
we can make app for you check our Readymade carpooling App kzhead.info/sun/rNBxg71rgH1sl3k/bejne.html and connect with us by details in description
Hello dear sir, can't wait for this channel to blow up and reach million subs, your content is amazing, can you please consider add making a tinder clone with your experience will be a huge hit 🙏
Thanks for the support
Não consigo parar de assistir seus vídeos
Thank you very very much sir😍
we can make app for you check our Readymade carpooling App kzhead.info/sun/rNBxg71rgH1sl3k/bejne.html and connect with us by details in description
Wow...so so amazing. And you're a good teacher. Will this app run on both Android and iOS? Please clone the passenger app as well.
This is amazing and very informative video . Excellent explanation and tutorial. Thanks for sharing.
can you complete this project
Awesome concept.
Hi, I am a hit man by trade. I was wondering why no one has made a hit man version of uber where we can accept contracts for wetwork based on location and availability. I am getting too old to fly around the world for a job. Any chance someone here could write something like that and set it live?
Amazing video!!.. Hello, is it possible to use a web UI instead of mobile UI when using React? Thank you
Nice video shot, thanks for sharing, like it :)
Hi Vadim, firstly I just want to say awesome work, you clones are great. Secondly, I would like to ask if you can make a tutorial or share some documentation around installing react-native cli? I'm finding it extremely difficult to get it to work. Expo is great, its works perfect but I see a lot of your builds use react native cli.
Thanks buddy
@@notjustdev thank you for your response. I have strictly followed the official documentation but I seem to get a flipper and flipper r socket error.
@@notjustdev ok I just got it to work 😃 it was the flipper folly pod file that needed to be downgraded to version 2.3.0
Y’a pas
Nice seeing this tutorial though have not yet building it but I want to ask what I am really looking for is Logistic App that is parcel tracking app, way bill management app. Have you done something similar in React-Native?
Nice work
Thank you
Hello friend, your tutorials are very good, I am learning React a lot ... a question that you use to autocomplete the code, I use visual code, if you can help me, please
Thank you very mach
THANKS
U are so underrated man ❤🙏
Patience! Thanks
Awesome project
its fun watching your video can you guide a bit more about google location api as i have to restirect it for specific platform right but it is not showing autocomplete. I have given 100% height and bgColor as well.
Where and how can I install the boilerplates used in the video? Your help would be greatly appreciated
I am a regular view and subscriber of your channel.Your course contents are excellent.I have a request,can you please make some project in Reach Js?
Noted
Awesome!
I love you man, You the best
no you
It's great!
Awesome
Cool man!
Muito bom!😃
Вы самый комфортный стример! плюс английский можно прокачать. Молодец!!
Hi, Can you do an LMS (Learning Management System) with firebase. role based auth with 3 roles, Admin, moderator and student. Thanks
can i follow along using expo instead of react-native-cli?
First time I see that use case (array in line 34, minute: 1:11:16). Cool.
That's how you can send multiple style objects to a component
14k subs? My man is pumping out golden content and we only got 14k subs? We gotta do better than that boys
haha :D thanks for the support
@@notjustdev that sub count will be 6 figures soon my friend 👌 good luck!
@@notjustdev also, snapchat clone anytime soon? 🤔 would love to see it
Subscribed👍
The issue with your jsx file was you cant write tags directly without putting {} these brackets.
hi , thanks for this tutorial , can u make a clone of uber eats for restaurant (for tablets) ? another question please what's software do u use for capture the video
Great sharing🎉❤
Thank you! Cheers!
Can you please do backend of the uber application
dude needs to know slideshow and animations! great tutorial!
Love to learn 📕 ❤️
Always learning 📚
Hi is there a way to customise how the MapView looks? E.g how Uber changed the way it's mapview looks.
Hi vadim, Can you upload a video where you run User and Driver Apps at a time...it would help me a lot..thanks in advance
Hey man, I am confused as a little bit of code pre-exists on your system, which looks like some template also the phone screen mockup on the right side .....or I am guessing that it is the react native environment you were talking about initially in the video.
Awesome project sir Just a quick question, the backend you will be using is Nodejs/Graphql?
I will be using AWS Amplify for the backend and we will create a graphql API with it
Hi.. I really loved the video. It's very informative. I have one question where is the best place to store the api keys when releasing the app to App store or Google Play?
For production you will need to put all your apikeys in the env file.
Hi Vadim, thanks for your time and sharing your knowledge. I’ve been building a Uber clone similar to yours. I’m just wondering for the user location on map does Uber use accelerometer? When you rotate phone on Uber app it rotates the user marker. Thanks again, I have a lot of questions haha Thanks for your help
You can use the bearing prop
@@larrynxumalo4012 we can make app for you check our Readymade carpooling App kzhead.info/sun/rNBxg71rgH1sl3k/bejne.html and connect with us by details in description
vector icons not working, I have done same like you but for you showing icons for me not showing when I import vector icons and add icon to show it is saying that build gradle failed I have tried so many times, please say how can I add vector icons is there any video
nice tutorial
Hi, what extension do you use when you type "fc" to get the functional component template?
I know it is few month later, I do believe it is a user snippet you can create them within VScode or whatever IDE you using
Hi, thank you for your great tutorials, have you ever tried to show traffic on the suggested route in React Native ? I'll appreciate if you help me with that ? a hint maybe ... thanks in advance
Hello sir we can make app for you check our Readymade taxi booking app kzhead.info/sun/iNmJZNmbommMgYE/bejne.html and connect with us by details in description
Hello sir just wondering how to start navigation? I mean how to center and rotate map along the rotating the heading marker while vehicle position is moving?
Wow good!
Is this a perfectly native, full-stack app that we can publish on the play store? And run
Hey can we do all of this with EXPO??? I am about to follow but first i need this clarification. Im confused
Yes, you should be able
YES! fuck android studio, fuck npx ...expo start all day bruh...literally will never download Android studio again and putting it in all future contracts, direct hire conditions...garbo....nice project tho
Hi Vadim, nice content are we still getting the second part this week
Unfortunately, there will be no Livestream this week. We will get back to it following weeks after my relocation. Meanwhile, checkout other builds on the channel: IG, Twitter, AIrbnb, Spotify, Tiktok
Congrats Vadim. Thanks for the good work. I will wait. So excited. This is my favourite build
I have always want to go into mobile app development Thank you Vadim for this great content. My Mobile App is of on a good start thanks so much bro.
Best of luck!
hi Sir , please make video on fleet management app where features like replay , tracking exist . as there is not any video on fleet in youtube
Can I use expo for this project?
My boi using ubersuggest !
How can we contact you in regards of a project that I have
Hello Vadim, hello guys, we are trying to show our position on the map in realtime while driving around. That works fine so far but our position is always near the street never "on" the street. Is there a good tutorial or can someone help us fixing this problem? I know there must be something like "snap on road". We are building our app in react native on a mac. Thanks in advance Vadim. PS: of course I would like to pay for the help.
Hi what's the database you're using for this app?
Can i use spring boot and hibernate for backend of this app ?
Vadim thanks for the turoail! Can you please tell me what kind of extension are you using for your editor? You type in some variable follow by : but that's not JS code. That's an extension right?
@notJust.dev please answer me if you can, it's almost impossible for me to follow your tutorial (I am just starting with JS and RN) when i am not able to type the same code as yours. this is some type hinting right? How can i do that in VS Code so i can follow along? Thanks!
That is just some hints from Webstorm. I don't know if there is an extension for that in VScode. Just ignore that part
@@entropyet783 we can make app for you check our Readymade carpooling App kzhead.info/sun/rNBxg71rgH1sl3k/bejne.html and connect with us by details in description
can we get any project backend in nodejs/express or firebase?
Wow, subscribed... I din't get a chance to look at whoel video but did someone actually follow and prepare the whole app?
Thanks. Yes, you can follow this tutorial as a beginner
please drop the name of extension to generate boiler plate in vs_code
i wish you could have used tailwind for styling
where to save the icons? in same directory as the project directory. that part is a bit fuzzy for me
can u please tell us the name of the extension you use for auto import