🔴 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

[@AyushMishra-rj8dh]

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.

[@notjustdev]

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?

[@AkbarAli-vt8or]

what process/flow would you follow from start to end.. kindly share it please

[@mordoodigital]

Hi Ayush i'm new to react native can you please let me know what to learn first step by step ?

[@dudhwalebhaiya4781]

we can make app for you check our Readymade carpooling App kzbin.info/www/bejne/r52bhIxpfrBpmqM and connect with us by details in description

[@NonSense1311]

Share more details please. I want to be a freelancer like you.

[@naciribraimo7967]

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.

[@notjustdev]

Wow, thank you!

[@Simo2797]

This is such a cool tutorial! :) Keep it going! Cheers mate!

[@user-ph9ju1xv7n]

I can't believe its working! keep it up! Shared everywhere! You deserve it!

[@Qwesi999]

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🤔🤔

[@theaveragecoder6182]

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 .

[@notjustdev]

I appreciate that. Nobody is perfect and nobody can code without stackoverflow. Good luck with the internship

[@jonathanalexander2797]

It's great! Vadim you are amazing!! thank you for taking the time to impart your knowledge 👏👏

[@notjustdev]

Glad you liked it!

[@learncse]

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 .

[@relaxationmeditationmusic6856]

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!!

[@muhammadariefarianto1978]

awesome video Vadim! thanks for this tutorial! God bless you and Rusia!

[@21kumag]

thank you Vadim Savin, more power to you!

[@notjustdev]

Thank you too!

[@sumitkothawade]

You are doing amazing job man. Hats off to you. Keep up this great work. i hope u reach a million subs.

[@bijeesraj007]

This channel is on fire 🔥 🚀 🚀

[@justcisco]

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

[@jamaluddin-tq2pl]

thanks for this tutorial, happy new year bro

[@notjustdev]

Thanks, happy new year to you too

[@ramankremko371]

Здорово) ответил на многие вопросы, thx!

[@cityparcel212]

Hello sir we can make app for you check our Readymade taxi booking app kzbin.info/www/bejne/i6azZaiZoJyJhKs and connect with us by details in description

[@bosskababy]

You are best ...you deserve more subs..i will share it to my colleagues

[@andrewcbuensalida]

Hi Vadim. Nice video. Just a question. Do the cars update their position real-time on the map? Or is it static?

[@udayamadukumara6953]

Thanks bro i was waiting for this... you are superb

[@sudani1969]

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

[@raphulali8937]

were you able to solve it?

[@jafarsultonov9193]

Yeah, yep..so yeah. great!

[@donaldlynxx8182]

Amazing video!!.. Hello, is it possible to use a web UI instead of mobile UI when using React? Thank you

[@kotov2]

great job, guy!!!!!! I'm from Brazil and I'm learning a lot. Thanks!!!

[@gofullstack]

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.

[@sphalamula6129]

Hi, I'll be starting Native React would you still recommend this course since it was recorded 2yrs ago?

[@gofullstack]

​@@sphalamula6129 Yeah, I'll recommend this video and suggest you look up the documentation in case of changes to how things are implemented.

[@raphulali8937]

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?

[@NomadicDmitry]

Wow, great content Vadim. Wish you a good luck ;) I hear the notes of Russian accent which is also cool, hehe

[@notjustdev]

Thanks Dima :). Yeah, I am coming from a post-soviet country, so I know a bit of russian

[@NomadicDmitry]

@@notjustdev Kruto! :)

[@dudhwalebhaiya4781]

we can make app for you check our Readymade carpooling App kzbin.info/www/bejne/r52bhIxpfrBpmqM and connect with us by details in description

[@sammagagula3221]

You are the best..can you consider doing the Admin Section of the app. Thanks

[@marvinbolanos1015]

Hello, good content! Thank you. Question for you, why did you decide not to use Expo?

[@dipeshdebnathltd]

This channel is very informative..keep up your god work for humanity..that plugpoint on the wall 0:05 is interesting too.

[@notjustdev]

Thank you so much 😀

[@alfredohammer8497]

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

[@SunilKumar-nq4iu]

Thank you very very much sir😍

[@dudhwalebhaiya4781]

we can make app for you check our Readymade carpooling App kzbin.info/www/bejne/r52bhIxpfrBpmqM and connect with us by details in description

[@TheAlexChannelClub]

Thank for your work!

[@alexdeviant2676]

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 🙏

[@notjustdev]

Thanks for the support

[@sundayolaoye713]

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?

[@oyishomapeter7574]

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.

[@minhtris21]

FYI, in this course you will need a visa/master card/... to get the places API to continue.

[@Fantastic697]

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.

[@notjustdev]

Thanks buddy

[@Fantastic697]

@@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.

[@Fantastic697]

@@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

[@sergeaba8944]

Y’a pas

[@juliovicenteperez7172]

I have no doubt that you are the best! Well, the only one!

[@RomanKrawchenko]

Where and how can I install the boilerplates used in the video? Your help would be greatly appreciated

[@KerishaStewart]

Hi, what extension do you use when you type "fc" to get the functional component template?

[@sudani1969]

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

[@mayastain2686]

This is amazing and very informative video . Excellent explanation and tutorial. Thanks for sharing.

[@usmanmarkaz]

can you complete this project

[@darylaranha7970]

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?

[@thatogabanakgosi4077]

For production you will need to put all your apikeys in the env file.

[@slvocationalacademy.]

Hats off. very useful help

[@frekin31]

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

[@larrynxumalo4012]

You can use the bearing prop

[@dudhwalebhaiya4781]

@@larrynxumalo4012 we can make app for you check our Readymade carpooling App kzbin.info/www/bejne/r52bhIxpfrBpmqM and connect with us by details in description

[@5canwalk]

Great sharing🎉❤

[@notjustdev]

Thank you! Cheers!

[@mortezatagipoor2623]

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

[@cityparcel212]

Hello sir we can make app for you check our Readymade taxi booking app kzbin.info/www/bejne/i6azZaiZoJyJhKs and connect with us by details in description

[@csspmspanacea]

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.

[@redabekka5940]

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

[@acjintrodesigns9275]

Hi, Can you do an LMS (Learning Management System) with firebase. role based auth with 3 roles, Admin, moderator and student. Thanks

[@mauroavellaneda9019]

First time I see that use case (array in line 34, minute: 1:11:16). Cool.

[@notjustdev]

That's how you can send multiple style objects to a component

[@jjeon9850]

Hi is there a way to customise how the MapView looks? E.g how Uber changed the way it's mapview looks.

[@arthurcruz3028]

Awesome project sir Just a quick question, the backend you will be using is Nodejs/Graphql?

[@notjustdev]

I will be using AWS Amplify for the backend and we will create a graphql API with it

[@sameerhassan7516]

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?

[@notjustdev]

Noted

[@deoclecioporfirioferreiraf339]

Muito bom!😃

[@fskyforever]

Love to learn 📕 ❤️

[@notjustdev]

Always learning 📚

[@francismomoh4884]

Hi Vadim, nice content are we still getting the second part this week

[@notjustdev]

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

[@francismomoh4884]

Congrats Vadim. Thanks for the good work. I will wait. So excited. This is my favourite build

[@missinglyrics1918]

Always great 👍

[@giannibelizaire2198]

can i follow along using expo instead of react-native-cli?

[@entropyet783]

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?

[@entropyet783]

@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!

[@notjustdev]

That is just some hints from Webstorm. I don't know if there is an extension for that in VScode. Just ignore that part

[@dudhwalebhaiya4781]

@@entropyet783 we can make app for you check our Readymade carpooling App kzbin.info/www/bejne/r52bhIxpfrBpmqM and connect with us by details in description

[@csspmspanacea]

The issue with your jsx file was you cant write tags directly without putting {} these brackets.

[@user-oj5gu3zd6u]

Вы самый комфортный стример! плюс английский можно прокачать. Молодец!!

[@notall9397]

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?

[@junaidahmed9702]

Is this a perfectly native, full-stack app that we can publish on the play store? And run

[@pranjaljain1]

Hi Vadim , great content but one question, after the build I want to add into my portfolio. I have developed many react application and hosted on firebase which is easy for me as I get firebase url. what can we do about react native...?

[@notjustdev]

thanks. you can build it and add it to play market and apple store

[@pranjaljain1]

Thanks vadim can you show us in next live stream..

[@chamaldezilva]

Hey Vadim, I’m watching your video now. In the both google autocomplete fields it’s possible to get same as Uber. I’ll update you the code. Or do you have github repo? So i can create a pull request to it.

[@notjustdev]

Hey there, The link of the repo is in the description. Thanks

[@chamaldezilva]

@@notjustdev thanks Vadim. I’ll update. Also in same time I just subscribed you. Great content and keep it up ❤️

[@praweshpanthi980]

what technology did are used used for making Fitenium app ? reactnative or flutter or anything else

[@notjustdev]

React Native for mobile, React JS for dashboards, NodeJS, Graphql backend, hosted on AWS. Also sprinkled a bit with some AWS serverless

[@TzMKnight]

14k subs? My man is pumping out golden content and we only got 14k subs? We gotta do better than that boys

[@notjustdev]

haha :D thanks for the support

[@TzMKnight]

@@notjustdev that sub count will be 6 figures soon my friend 👌 good luck!

[@TzMKnight]

@@notjustdev also, snapchat clone anytime soon? 🤔 would love to see it

[@balajiravi9259]

Subscribed👍

[@nischayagrawal8373]

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.

[@manishenishetty9066]

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

[@eseabeke6210]

I love you man, You the best

[@notjustdev]

no you

[@adarshbhardwaj6190]

u definitely deserves more subs than this

[@notjustdev]

Step by step :D

[@user-qt6ju1hc9x]

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?

[@luizmardesouza8904]

Não consigo parar de assistir seus vídeos

[@csspmspanacea]

Hey can we do all of this with EXPO??? I am about to follow but first i need this clarification. Im confused

[@notjustdev]

Yes, you should be able

[@user-of2pe1fg6j]

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

[@mehulvarshney6708]

dude needs to know slideshow and animations! great tutorial!

[@JamesEvans-fn8xc]

We are very welcome

[@nikhilgoyal6341]

Hey vadim will we able to use gps like original uber app like anyone books car and distance changes in real time as we move??

[@notjustdev]

Yeah, I will try to implement that in next video

[@danishishtiaq1107]

Wow, subscribed... I din't get a chance to look at whoel video but did someone actually follow and prepare the whole app?

[@notjustdev]

Thanks. Yes, you can follow this tutorial as a beginner

[@SleepWithNatur]

Can you please do backend of the uber application

[@laxington]

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.

[@sinethmandanayake5990]

Hi what's the database you're using for this app?

[@andersonbtr2008]

At the end of these classes, will I have a complete application? With backend and front end? Or is this an application with the front-end only?

[@notjustdev]

complete, fullstack app

[@zekiunyildiz]

It's great!

[@Bianchi77]

Nice video shot, thanks for sharing, like it :)

[@user-gg5nh1mf6l]

Can I use expo for this project?

[@vishalgupta-wp2sy]

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

[@user-ln1fs7xn3r]

Awesome concept.

[@abdulmajeedalharbi7910]

Great content Vadim! Keep it up

[@notjustdev]

Thanks

[@ChristineTsoiCutlip]

@@notjustdev sK

[@ChristineTsoiCutlip]

@@notjustdev q

[@ChristineTsoiCutlip]

Eric’sii

[@ChristineTsoiCutlip]

@@notjustdev love

[@thisisvjord3049]

My boi using ubersuggest !

[@nikeshmadhav6768]

Great vids.. It will be perfect app if it has drivers app as well

[@notjustdev]

Yes it will

[@AmritGautam]

@@notjustdev 111q22

[@AmritGautam]

@@notjustdev 212

[@dorumanadoruma6972]

Thank you very mach

[@kar1e720]

U are so underrated man ❤🙏

[@notjustdev]

Patience! Thanks

[@gbengaakingbulere6727]

can u please tell us the name of the extension you use for auto import

[@JohnDoe-ej6vm]

Can i use spring boot and hibernate for backend of this app ?

[@SandroSilvaMascote]

Hello, I am planning to take the step by step and build a uber like app. There are a few things I don't know that you don't cover in your video. Do you work with consulting? Like I can work on building the app but you do the consulting for the work. We don't have enaught money to pay for a company to build our own but we can have some to pay for a professional to help us to build? Do you do such a thing? If yes, I hope to hear from you.

[@notjustdev]

Hey Sandro, thanks for reaching out. At the moment I do not offer such services due to time limitations.

[@devbasit]

can we get any project backend in nodejs/express or firebase?

[@mondeepgogoi3275]

Hi , just want to know Can we use Google AutoComplete feature without a billing account in Google Developers Console ?

[@ChristyleIllusion]

No

[@praskatti]

@vadim thanks for this video. i am trying to get the maps to run on android emulator. I Am getting the following error: " won't run without google play services, which are not supported by your device ". trying to troubleshoot the same right now. any thoughts on what configuration solves this?

[@praskatti]

Post enabling "Google Play Services" in SDK Manager config in side Android studio, this problem got resolved.

[@makaulucky]

Awesome project

[@Karthik-qh4vn]

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

[@draigun3503]

Where is your next video?? It was an awesome video but please complete the series and the full stack app.

[@notjustdev]

kzbin.info/www/bejne/lYaXq5qNmNxljdU

[@xeyalteyyubov1175]

Awesome

[@hassaneldika6645]

Hi dear, I have done user, drive app and dashboard. So what now I need? Should I buy a server? And can u plz send me recommendations