🔴 Let's build Uber 2.0 with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Google Autocomplete)

Подписаться 261 тыс.

Просмотров 2,1 млн

50% 1

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
🫂 Join my Community, "University of Code" for FREE: www.universityofcode.com
🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
---
The much-anticipated build is FINALLY HERE!
Join me as I build the UBER CLONE with REACT NATIVE (yes we're building for iOS & Android!), you'll learn how to do the following in this build:
👉 Use Tailwind CSS with RN for awesome styling!
👉 Use the Google Distance Matrix API to calculate Travel time and Distance (+ Cost!)
👉 Use the Directions Google API for real navigation!
👉 Use Google Places API for real navigation!
👉 Use apple & google maps for iOS & Android
👉 Use React Native Navigation to navigate between screens!
👉 Use React Native Elements to elevate your app design!
+ SO MUCH MORE!
🎙️ PODCAST
links.papareact.com/podcast
🌍 SOCIALS:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
Newsletter: links.papareact.com/newsletter
❤️ SUPPORT
PAPAFAM Merch: links.papareact.com/merch
Donate: links.papareact.com/donate
🕐 TIMESTAMPS:
00:00 Introduction
01:00 Build Showcase
03:26 Build Explanation
08:59 Setting up Expo
14:57 Initialising the Build
23:33 Setting up and Implementing Redux
44:01 Building the HomeScreen Component
55:41 Building the NavOptions Component
1:14:44 Implementing React Native Navigation
1:27:13 Implementing Google Autocomplete Library
2:00:34 Building the MapScreen Component
2:04:27 Building the Map Component
2:17:04 Building the RideOptionsCard Component (1/2)
2:18:33 Building the NavigateCard Component (1/2)
2:29:06 Implementing the Directions API
2:38:06 Building the NavFavourites Component
2:46:25 Implementing Keyboard Avoiding View
2:50:34 Building the NavigateCard Component (2/2)
2:57:12 Building the RideOptionsCard Component (2/2)
3:17:38 Implementing the Travel Time Calculation
3:26:13 Implementing the Price Calculation
3:32:58 Building the Menu Button
3:35:32 Bug Fixing
3:36:42 Final Build Demo
3:40:45 Outro
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Uber and its subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for educational purposes.
#reactjs #reactnative #redux #tailwindcss #tailwind

Опубликовано:

7 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 763

@SonnySangha Год назад

📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university

@vloggersofthesea9898 Год назад

hello sonny, i dont have any experience and knowledge in making app, can i learn about this one? do you have school? thanks

@muhammedhabib3388 4 месяца назад

Pppp

@musa7801 4 месяца назад

hello sunny, in this video shown only one tab get a ride, what about uber order food??. if it done please can share video link in reply please.

@user-tv6re4hw3i 23 дня назад

@@musa7801 ط حطي يپلاؤغئع

@adityakadam2256 2 года назад

This single video is equivalent to almost all the paid react-native courses. Thanks a lot, Sonny for sharing this and putting all your time to explain and create it so well :)

@nikolaimakarov3034 2 года назад

Were you able to implement google autocomplete using the google places API ?

@tomodiero7524 2 года назад

If you are using the Android emulator to follow this tutorial you might have issues with the back button @3.02.57 ish. Evidently you could make two blunders. 1. Is to import {TouchableOpacity} from 'react-native-gesture-handler. The recommendation unless you know what you really wnat to do is to import it from import {TouchableOpacity } from 'react-native'. Once you have done that then using the absolute positioning may also cause the back button < chevron not to fire, in this case place the textbox before the TouchableOpacity component. This applies only for Android. The ecosystem is a little finicky especially with the expo wrapper, but for what you are getting it's well worth the few bumps in the road.

@samamistoso2068 2 года назад

I was stuck on this part so thank you very much for your advice 👍

@igiranezashalom6122 2 года назад

The solution also blocks navigation to NavigateCard.

@TheEliteBeats 2 года назад

Thanks a lot bro! Didn't think the comment section would become the perfect stack overflow forum lol👍

@TheEliteBeats 2 года назад

To fix the button placement you could also replace top-3 in the TouchableOpacity to bottom-2 and that should be perfect!

@tomodiero7524 2 года назад

@@TheEliteBeats it is a z-order issue for sure. I could have made that more clear, but didn't want to affect the look and feel too much

@andrewpiszek 2 года назад

I've finally been able to block out the time to fully watch this video and practice along. Thank you so much for sharing your knowledge. You are amazing at breaking down new topics and making them easy to understand.

@andyb9990 2 года назад

Mailman delivering once again. Can't wait to try out React Native. Thanks for dropping all this knowledge.

@omsun456 2 года назад

The way he acknowledges donations is really awesome.

@flyte9844 2 года назад

THANKS !! ive been learning react native in the past 2 month and alot of my progress come from what i learned here !

@Tony-qv7sx 2 года назад

love your energy and you have been 100x times more helpful than most of the react native content on youtube. thank you so much!

@clamgts Год назад

This stream is honestly so well done man, thank you for all your content this was so helpful for implementing a bunch of functionality in a similar app I'm building.

@camelcasesprogramming992 2 года назад

Got to know react due to you a year ago and now I got my first client due to you ! keep making these builds man 🔥❤️ LOVE YOUR ENERGY🔥

@saintazur 2 года назад

The error stating that setOrigin is not a function is resolved by naming the reducers object inside navSlice as "reducers" with an "s" instead of "reducer". Thank you and keep it up 👍

@temiemmanuel3580 2 года назад

This comment went a very long way. Thanks a whole lot

@hiteshnalamwar2722 2 года назад

thanks)

@arielaugusto1 2 года назад

Thanks so much! You the best my man, had spent the last hour trying to debug this.

@KurtWeberkeb_wer 2 года назад

You're a beast, thank you

@Dzikrullah_999 2 года назад

this could be easily prevented by using Typescript. Since TS yell when you mistype param name

@nyashamusanhu541 2 года назад

I was waiting for this. I'm salivating...this is my moment!! You are the best....and you are changing lives!

@AtifKhan-cm8qv 2 года назад

For the ones who got the error of navSlice.origin is not a function: you probably put your reducer like this: export const navSlice = createSlice({ name: 'nav', initialState, reducer: { But when Sonny Sangha Copied his working file code and pasted it on the navSlice The reducer looks like this now: export const navSlice = createSlice({ name: 'nav', initialState, reducers: { There is gonna be an "s" after the reducer and on 3:02:53 the change there was the z-index: 50 on the style or z-50 for tailwind I hope i helped!

@strahinjasavic2391 2 года назад

Thank you man!!

@agushaven 2 года назад

Excellent work, thanks for taking the time, they are not short videos, and it takes a lot of effort on your part, there really is a lot of work behind it, greetings from Argentina.

@TheDorac1 2 года назад

Content is amazing. Thank you! Production level tutorial projects are not common so I really appreciate your content.

@raja4148 2 года назад

Giving hearts to all the comments, so nice of you man. Keep up the good work and give us more stuffs like these ❤️❤️

@musweum6746 2 года назад

Here I am wishing you made this using flutter, I'm glad I know react too because you've seriously made me question my love for flutter. This is really Awesome!

@MuhammadBilal-cq6tp 2 года назад

Hi sonny , hope you fine dear m you guys are so incredible . I was always in MAPS in React Native , and you solved this issue, May God bless you. Make some more awesome stuff like that

@khanasfireza9515 Год назад

I love how you explain and strucutre your projects, I really like to see them after my work hours or in my free time. Really educational. This time I tried to follow your tutorial, but changed some things instead of following you, added extra additional features and used mapbox instead of Google Maps, added authentication and a small backend. This is my first time working with react native. I learned a lot from your video also helped me understand lot more things at the same time. Respect brother

@kshitizbathwal7509 Год назад

I havent watched these vdieos but can you tell me if they just code frontend or they include backend also?

@khanasfireza9515 Год назад

@@kshitizbathwal7509 It's just frontend but some of his videos contain Firebase backend

@draysams 2 года назад

At 3:03:05, if you are facing the issue where your back button is not clickable, the fix is to add change z-index of your back button. Add "z-50" to the tailwind styles of the back button

@adeell85 2 года назад

Thanks you have saved me tons of time there

@anuragsrigyan677 2 года назад

You rock man!! 💥 I was gonna start learning Android Studio. But I think after react , React Native is the way to go.

@mukiibipeter07 2 года назад

I coded along and I'm finally done. Impressive :)

@whisky8496 2 года назад

Could you pleaseee share the playlist in your background? I love it! Edit: Missed the newsletter part. I've signed up for it! Thanks

@waleedbinaamer6629 2 года назад

Papa Fam for life ... So pumped for this you are really changing lifes thank you so so much Sonny ... Love from Pakistan

@MrEliyahilel 2 года назад

Sonny you are amazing as always! Thanks for everything

@HabeebNG Год назад

Hi Sonny, I'm just 30 mins into this video, And i realize you bare super smart, with the way you explain, its almost as if you are the one who came up with the uber idea. definitely building this as soon as i get the fundamentals down.

@arjunjoshi3481 2 года назад

Sonny, the beast. OMG, this build was epic

@Moody0101 2 года назад

one of the best channels I watch to learn! thanks for the content sonny.

@patrickkioko8191 Год назад

Wow i like how you handle Map navigation , travel time and calculating amount and distance that's awesome ,,, keep up the good job,, to those who are looking for tutorials in relations to react native map navigation, this is the right video for you..

@eyderalbeiro 2 года назад

Really amazing Sonny, thanks for the class bro 🤛🏽

@nischaymehta3047 2 года назад

Best build indeed. Good stuff man.

@MrSammzie 9 месяцев назад

finally, i have been able to complete a build thanks to this tutorial! This has given me so much confidence as a beginner

@leratolerata9811 2 года назад

Oooh Papa React I missed the stream but this is sick man.. Thanks man

@aryanthakre4302 2 года назад

Crazy build!! Can u add some features like real time location tracking and driver dashboard

@VMAN00 7 месяцев назад

Hey all if you are having trouble with the navslice reducer setOrigin function giving an error as undefined. It seems that in the navSlice.js file you have to rename reducer to reducers. Hope this helps!

@emilysmith767 Год назад

Thank you for sharing this right now; most students are interested in taxi booking app development for their college projects, and you are assisting them with this tutorial.

@mohibkhan2492 2 года назад

Crazy Stuff Sonny please extend this build if you can like dashboard for drivers etc/

@erniemac21 2 года назад

Yeah that will be sick

@sergiolaguardia4329 2 года назад

Great video. But when you troubleshoot can you not paste your old code because you might not notice a change but for ppl following along it doesn’t fix the bug. For example, if you go to 1:59:32 on line 12 reducer is changed to reducers. Took me 30min to figure out. Lol. Really like your videos tho, good job and thanks for making them. 😃

@JeremyAlpha 2 года назад

This is exactly what I need thank you so much, you are a legend.

@user-gd7zi1pk3w 3 месяца назад

This stream is honestly so well done man,

@jwhubert91 9 месяцев назад

Sonny I've done a few of your videos. They're always great. However it would be nice if you'd do a React Native video at some point that is just an hour long. Something simple to cover the basics of your preferred setup, then deployment and app store upload. Thanks for all the work you do 🙏

@faraonch 2 года назад

As a Fullstack dev with quite a lot experience but no React Native, you helped me a lot with getting into React Native! Thanks. Went smooth from 0 to 100. You saved me days and weeks from creating my prototype!

@OnlyFam 10 месяцев назад

I don't know much about coding but this dude's vibe is inspiring me to learn.

@mayankkashyap79 Год назад

After watching your builds, development seems like a cakewalk. Keep it up sir, waiting for the video in which you use ML with Native App. ❤️❤️

@ibrahimsiradvancedresearch 2 года назад

Love this channel.Teaching is an are of making topic interesting and that's what you are doing ❤️❤️❤️❤️

@ryanpark3523 2 года назад

Hey Sonny~ your contents are always awesome!! Thanks for this great work !!!

@SonnySangha 2 года назад

Thanks for tuning in dude!!!

@simonedwards7101 Год назад

Thanks Sonny - The real-world examples are a great motivator.

@AtifKhan-cm8qv 2 года назад

Dude this channel is SO UNDERRATED It should have like atleast 300k SUBS

@codewithtonny8176 2 года назад

One of the best clone ever build for react native

@ahmeteneskececi6088 2 года назад

Incredible Tutorial. Thank you so much.

@Yobtuber 6 месяцев назад

I like your format G! Nice Video and good vibes!

@mr_ani 2 года назад

At 1:59:25, what changed was in the createSlice object parameter, you were passing in "reducer" instead of "reducers" as an object property. It wasn't a refresh issue.

@umangshahi3073 2 года назад

Thanks

@malikmuhammadusman3221 2 года назад

Thank u so much i was struck there :)

@JonsonNcube 2 года назад

Life SAVER!!!!!

@solyanamengistu6876 2 года назад

Thank you so much.😊

@yusefweb3693 2 года назад

thank you men i was searching for a while

@shafiulazim3682 2 года назад

I really enjoyed your clone videos..That's are awesome..I learn a lot from those. Will you please make a video about how to send notification using expo & firebase ? There are no tutorial about it on youtube.

@sourabhkashyap1040 2 года назад

Good stuff bro, I just completed whatsapp-2.0 build

@novoemfolha Год назад

Love it! Good job man 💪

@JBUDDTV 7 месяцев назад

Love this ❤. How would you do the drivers side

@dewaleolaoye 2 года назад

No No No No, This is too good. When I hear you say Redux Toolkit, I'm like you nailed it, man. Thanks Sonny

@drchocolate6706 2 года назад

Nice work! Very entertaining and helpful, greetings from Chile!

@aimanhaziq4359 2 года назад

How can u smile while coding . u r awesome dude

@zaquielrodriguezarce2500 Год назад

I only can say...!awesome video! I watch it completely and I have learned a lot!

@gratefulderrick 2 года назад

I like your recording setup and you're really pumped!! very captivating

@hiteshmishra21 2 года назад

Nice video sonny, i learned so much about react js. Sonny, please also make a video on how to make google lens clone( products recommendation by analysing photos).

@d13cnpm1_nguyenphuongnam8 2 года назад

Best tutorial. Hope you many video react native ! Thank you bro

@kaunghtethein3322 2 года назад

thanks man. u made it seem so easy

@atharvavetal453 2 года назад

This guys is god of many developers ❤️

@jimmyreynolds1234 2 года назад

Hello Sonny, Thank you so much for this awesome tutorial what an amazing build! I have implemented several builds from your channel and it is helping me out a lot. I just wanted to point out to you and everyone that the error that occurred @1:58:49 stating that setOrigin is not a function is resolved by naming the reducers object inside navSlice as "reducers" with an "s" instead of "reducer". Thank you and keep it up 👍

@cvxcfv 2 года назад

Thanks for this, he just copied and pasted over the code to fix it instead of debugging lol

@kikombehome7873 2 года назад

I've just seen that difference (reducer - reducers) and came to the comments to see if someone else saw it lol

@des86532 2 года назад

thanks for your help, it took me lots of time lol

@thedeveloper9896 2 года назад

@@kikombehome7873 SAME

@henrybentil9915 2 года назад

thanks a lot. Came over to the comments to see if someone also realised it. Been stuck on this bug for hours . Thanks a million dude

@zazanchugatz4019 2 года назад

This is so great!!!! much respect

@Cookies-cv3nd 3 месяца назад

Im 2 years late, but this is still an amazing and probably the best uber clone, not talking about how accurate the app looks like, i mean the instructions and the code functionality and the explanation on what to do and why, Love you Sonny, you're the best

@krys_gaming476 3 месяца назад

Hello, i'm amongs the very few that my code isn't running. Can i have uses because starting all over again will be too long

@Cookies-cv3nd 3 месяца назад

@@krys_gaming476 well what do you mean by your code isnt running? honestly that could be due to many things, its pretty hard to guess what went wrong, but if i have to guess. i'd guess you didnt get a google maps key properly which would lead to unexpected errors

@krys_gaming476 3 месяца назад

actually its the redux making my code not to funcion properly, everytime i Use the "Provider", it nshows me errors on expo go. Been sending the issues to AIs but all say theres no problem found @@Cookies-cv3nd

@Ashley-qr9bd 26 дней назад

I would like to cooperate with you. Do you need kitchen knives? If you need, please contact me. Our brand is inviting customers to evaluate kitchenware for free.

@kansascitydataguy8194 Год назад

Thank you Sonny for this incredible work. for some reasons the .env file did not work with me. the autocomplete did not work but I worked around it by placing my GOOGLE_API_KEY as variable. I know it is a bad practice but at least my autocomplete is working and all google services are available to the app.

@Arabian_Epileptic 2 года назад

This was amazing! 🍿🎉

@xderen_xd 6 месяцев назад

God may bless you really, there is none course in udemy like this, you saved my life because I am founding my startup in the field of transportation and I need this kind of stuff and also straight to the point since as startup we don't have that much time

@shantanu277 2 года назад

While trying to use Google API from India, it was not giving out any search results. I then created a different billing account and set the account country as US, now its working properly. Amazing approach you have, bro. You clear concepts so clearly. Im definetly more clear in RN because of you.

@divyanshihada3307 Год назад

Hey! I am facing the same problem can you tell what address did you mentioned while opting for different country?

@Pinocciochannel 2 года назад

When sangha drops a video. First thing you do is drop a like and then continue. Remember this process is a must. Appreciate the free contents guys please.

@mohammadazimkhamosh4863 13 дней назад

Thank you Sonny for this amazing course!

@mohammedbouaziz3535 Год назад

thanks sonny, great content, by the way the setOrigin error is resolved by changing "reducer" into "reducers" in navSlice, could save people some time...keep it up sonny

@surendrajat7290 2 года назад

You are helping so many people react papa thank u so much love from india

@yuvrajagarkar8942 2 года назад

Bro this guy is giving all the cool jazz for free ?! All my support dude ✨

@user-to2iv5ly7m 2 года назад

Hello Mr.Sonny Sangha Thank you for your videos and I have a question is the application dynamic or static? Does the code of the Uber 2.0 application on your ghuitub contain the server part and the driver part? Thanks again

@fatihinci1858 2 года назад

Unfortunately, I realized that I cannot use a custom javascript core as I am using a standalone application with the expo. I'm sure some people will encounter the "Can't find variable Intl" failure message because it works with the expo in the android emulator. You can fix the problem with the following steps: yarn add intl import 'intl' import 'intl/locale-data/jsonp/en-GB'

@TariqAq 2 года назад

You're the best!

@saidibrahim5931 2 года назад

woow papa-react this is amazing

@shawngardiner2604 2 года назад

Just finished this build, this was awesome, and the best part of it for me was the debugging of the issues I encountered. Great learning tool for anyone.

@josemora7233 2 года назад

hey bro where can i find images like the uber car?

@diegorodrigues5487 2 года назад

JA QUERO A PARTE 2!!!!!!!! KKKKKKK SENSACIONAL

@toinoudu38 9 дней назад

I know it is an old video, but for people that get the error: [TypeError: 0, _navSlice.setOrigin is not a function (it is undefined)]. There is actually a change : You resolve it by naming the reducers object inside navSlice as "reducers" with an "s" instead of "reducer".

@JohnSmith-me2wg Год назад

Wow everyone here is really smart! I just stumbled upon this channel by mistake - bless you all!

@ahmadirfan7840 2 года назад

I missed this stream.. dang it.. by the way, is it possible I preview the project to anybody straight away to my phone, after I scanned the expo’s qr code? If possible, is there any restriction, such as make it as a production app at expo browser?

@gerardomedellin4355 Год назад

Nice project I finished it today, adjusting everything to the current best practices. I hope that you can do more react-native in the future. Greetings from Mexico!

@oluwatobisamuel247 Год назад

Hi, Gerardo. Please how did you go about the navSlice file? did you copy what is on redux documentation? its different to what sonny did, maybe that is the latest one. Or you typed what is on sonny screen

@gerardomedellin4355 Год назад

@@oluwatobisamuel247 which part exactly? I think that part did not change at all, but let me know exactly where so i can help you

@oluwatobisamuel247 Год назад

@@gerardomedellin4355 @Gerardo Medellin thanks for your response Gerardo. I passed through that process. I'm currently having a blocker at the Navigation part. from min 1:15:00

@revanthrev23 2 года назад

Hey Sonny! Have learnt React from you. Have learnt NextJS from you. Would be wonderful if you can plan a new build using typescript.

@Asuuri 2 года назад

Yeah TS would be amazing!🙌🏻

@ZainulAbidin-pc7tq 2 года назад

You rock man!! I was gonna start learning Android Studio. But I think after react , React Native is the way to go.

@Ashley-qr9bd 26 дней назад

I would like to cooperate with you. Do you need kitchen knives? If you need, please contact me. Our brand is inviting customers to evaluate kitchenware for free.