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

2,313,803
0
Published 2021-07-30
🚨 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/dailycodingchallenges

---

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

All Comments (21)
  • @adityakadam2256
    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 :)
  • @omsun456
    The way he acknowledges donations is really awesome.
  • @andrewpiszek
    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
    Mailman delivering once again. Can't wait to try out React Native. Thanks for dropping all this knowledge.
  • @hTfvmGNrIZ
    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.
  • 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🔥
  • @raja4148
    Giving hearts to all the comments, so nice of you man. Keep up the good work and give us more stuffs like these ❤️❤️
  • @flyte9844
    THANKS !! ive been learning react native in the past 2 month and alot of my progress come from what i learned here !
  • @agushaven
    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.
  • @gregormaric
    This video is a game-changer! As an RPA Champion dedicated to teaching business process automation, I can't stress enough how important it is to build robust and scalable apps. Utilizing React Native, Navigation, Redux, Tailwind CSS, and Google Autocomplete together is a brilliant approach. It not only streamlines the development process but also ensures a seamless user experience. Kudos to the creator for breaking down complex concepts into actionable steps. For anyone looking to automate and optimize their business processes, mastering these tools is essential. Keep up the great work and let's keep pushing the boundaries of what's possible!
  • @musweum6746
    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!
  • @TheDorac1
    Content is amazing. Thank you! Production level tutorial projects are not common so I really appreciate your content.
  • 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 <3
  • 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
  • You rock man!! 💥 I was gonna start learning Android Studio. But I think after react , React Native is the way to go.
  • Papa Fam for life ... So pumped for this you are really changing lifes thank you so so much Sonny ... Love from Pakistan
  • @tomodiero7524
    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.