🔴 Build the Uber clone in React Native (Tutorial for Beginners) [2]
Let's learn React Native by building the Uber 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/uber
Join the notJust Development gang and let's build together: / discord
Source code: github.com/Savinvadim1312/Ube...
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.
Tag me on social media when you finish this build, and I will give you feedback on your code.
LinkedIn: / vadimsavin
IG: / vadimsavin0
Twitter: / savinvadim_
Timecodes:
00:00 Intro
01:06 What we are going to build?
02:29 What are you going to learn?
04:00 Prerequisites
07:20 Demo starting point
15:43 Map Marker Rotation
25:56 Places Autocomplete
01:03:32 Geolocation
01:37:48 React Navigation
01:51:42 Navigating Between Screens
02:03:10 Send data when navigating
02:11:53 Drawer Navigation (Hamburger Menu)
#VadimSavin #notjust.dev #notJustDevelopment
I've finished this entire tutorial but I'm always coming back to these uber clone videos because of the exaggerated amount of insane knowledge in this uber tutorial
Insane amount of knowledge bombarded thanks man 👌👌👍👍 For this tutorial i had a fyp. really saved the research time for stack.
Love the content keep it up. Thanks for free education.
Sir you are great and patient. Jesus will reward you.
Hi there.... First for all i love your videos very much and appreciate it.... I want to know is there any way we can use mobile biometrics like fingerprint with React Native because i think i have done a lot research and used many libraries but it didn't come our successful....
Loving this project 😊😊
Thanks
Awesome 👍 and easy to understand
🚀 Download the Asset Bundle: assets.notjust.dev/uber 📚 Enroll in "The Full-stack Mobile Developer" and become a 6-figure dev in 2021: academy.notjust.dev/
Just found your videos, thanks for the great tutorials
Glad you like them!
Thank you for the video
I've learned how to walk thanks to Vadim!
Did those mushrooms help?
Did u make an admin panel and database for this clone?? I mean backend and all that..coz i cant see those in your videos..thanks your videos are amazing
Awesome Video :) Really Helpful. Bro When 3rd part is coming?
Bro learning a lot ... Itz all natural coding and debugging .... Not any scripted ... Love ur content ... Idk why I am want to guess ur age 🤣 😅 ... But I think u will be around 33 ...Thanks bro for the great content ... Lots of love ❤️
Till now, I have Learned a lot and enjoyed it as well. Little bit more on database connectivity with the app is missing.
This build is amazing bro
Thanks
Thank you for giving back to society. Please I’m humbly suggesting, if you could teach us a complete e-commerce app. Thank you once again
Thanks for appreciating my work. E-com will come in future
I spent 5hr on the first video for the client side, am glad to continue i hv learn alot thank you so much, now i can call my self an "App developer"
I am so happy for you :3
You are the best! Thank You! I have been to Kishinev, capital of Moldova, Moldova I lived in Odessa and traveled to Kishinev to look for merchandise. It is a Beautiful Place! Now I live in Miami, USA , but I was living in Tenerife too. Seven years! I know Santa Cruz very well! Are you there?
You are the best💕
Hi, just coming across this tutorial.. I miss the first part, can someone kindly share a link to the first part? Thanks
awesome!
hello teacher Vadim. We have 2 textinput and in state stores Origin and Destination. How to do this so that when I click on textInput1, the map component is redirected to the map and select a location on the map, or by default there was a location. And on 2textinput, also select on the map. I made this component select on the map. And it works like this: there is a marker in the center and you can change any location. And this data is now stored in the state const[region, setRegion]=useState ({region: longitude:56.97778, latitude:33.87784}). Help help please. Without using googleautomplete.
Hey Vadim , I am having an issue with this google auto complete and all this map thing, i even tried your api key but i didnt show any auto suggestion on auto complete and it is not showing map as well. It shows a blank portion and google is written on it. What do I need to do?
I spent 8h on your videos and i learned lot lot from you.
I am glad you found it valuable
Hey, can you make a video on Morph Transaction with SVG in react-native.
Here is Yoseph from DC. Am looking for the first part to start watching your video, but couldn't find part one. Can I start from part 2 without missing a lot?
Hi Vadim When will you make production-ready apps??
also my current location on map doesn't appears, it it because i don't enable billing account?
Hi, I have an issue where my current location is not working, I constantly get a TypeError: null is not an object (evaluating RNFusedLocation.getCurrentPosition can anyone help?
hi all, in my project when i enter my location and then where to (2:03 in video) it dont automatically go to next page to choose which uber car i want, is it because my billing account not enable???? please, any help?
Dear Vadim i cannot get assets bundle from the link , you have other link pls?
Anyone please help me , i have an issue with destination const destinationLoc = { latitude: destination.details.geometry.location.lat, longitude: destination.details.geometry.location.lng, }; There is no geometry object in JSON while debugging.. how to resolve my issue?
Can u add more functionalities?
Can we do a clone with node and express as the backend please... with authentication also, it would be a huge help, thanks in advance, love your channel and love your clones...
Thanks for suggestion. We might do it in near future
@@notjustdev Does this application have no backend? Rog 007 did you make all the videos? And is the application complete?
@@andersonbtr2008 it has both front end and back end
@@notjustdev Please do that, so interested!
How can I use my Android phone to run react native I don't want to uee emulator
Thank very much for the video. Unfortunately int the last part I have an error of null object on Destination.details.geometry.location.lat, while debugging it seems that details has no geometry property. I might be doing something wrong. Please anybody could help me?
FetchDetails is missing in DestinationSearch. 😉
i have issue displaying showsUserLocation on the map.
Please 🙏🙏 make your next video on this to use fingerprint or face recognition with React Native
I Almost cried 🤩🤩 tnks
When the 3rd part is coming ?
Vadim, we didnt do price calculations
Hey @Vadim Savin, Can you build Reddit app please?? Thank you
How do you get the color picker on the side of the line number?
a extenstion
AWS Services not working GraphQlAPi Error code not found
how do i reinstalled all things
Hi, I have an issue with MapViewDirections - Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Any help ?
just downgrade react native map version
Doesn't navigate to RouteMap. In your case it's just a delay, in my case doesnt work at all :/
to me its giving an error Invariant Violation: Tried to register two views with the same name AIRMap
God damnit with react native and all the dependencies and updates.. only a few months later and i have TOOONS of issues following the tutorial..
Which is better? React native or Flutter?
I am biased. React Native
2:53:36 Android emulators takes up ~5GB of your RAM
HAVING ERROR WHILE INSTALLING NAVIGATION npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: GasUp@0.0.1 npm ERR! Found: react@17.0.1 npm ERR! node_modules/react npm ERR! react@"17.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.0" from @react-native-community/masked-view@0.1.10 npm ERR! node_modules/@react-native-community/masked-view npm ERR! @react-native-community/masked-view@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\imbil\AppData\Local pm-cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\imbil\AppData\Local pm-cache\_logs\2021-03-19T13_23_15_116Z-debug.log
Check internet connection on android emulator
Hey it would be a great favour if you share API key aswell. i am coding along with you and its my day 3 and I am glad you are offering these services for free. Currently I dont have any card which deals with international transactions that why I am unable to see maps. :(
Wov again super .... I have almost finished. However I have faced some issue , when I Have set "origin.details.geomerty.location.lat" and "...lng" whenever I have select place which is given from autocomplate (provided by google ) generally it has no information under details as geometry , thats why always i have render error like "cannot read properties of undefined(reading"lolaciton")" how coul ı passed it? best regards.
HOLA,, PUEDES VENDERME TU CODIGO DE UBER CHOFER CLIENTE Y ADMIN, Y CUANTO PARA QUE TU ME LO SUBAS A GOOGLE STORE, Y APPLE STORE.??
next part?
can you tell me, how to make phone screen lock app in react native. Thats my college project. plz help me
ok
Let's try fintech next!
Are you interested in helping me on my new project? I'd like to have some discussion and dialogue with you and think you could fast track my plan something I would be willing to make it worth your time within my means. Thank you.
Hey, thanks for reaching out. Unfortunately, at the moment I am tight on time, so I cannot help you personally, but I will try my best to help you through my videos.
Hi Robert, feel free to reach out to me on your project. Thanks for the tutorial Vadim
Joss
best at 1.5x speed
He's definitely a good engineer, but there is no pros for watching this on stream. He bumps too much.
Please, no more "SO"
Stuck in an error 😭 undefined is not an object (evaluating 'route.params.originPlace') in searchresult.js.
it is fugging LAUGHABLE that you would list this as for beginners