MENU

Fun & Interesting

Building an e-Scooter App with React Native and Mapbox

notJust․dev 119,510 11 months ago
Video Not Working? Fix It Now

In this tutorial, we will build an e-scooter rental app similar to Lime and Bird using React Native and Mapbox. We'll cover everything from rendering scooters on the map to integrating directions and navigation features. Follow along to create your own ride-sharing app with our detailed step-by-step guide. Ready to ride? Let's get started 🛴🔥 2️⃣ Watch the second part here: https://youtube.com/live/TRcM3H7qfRI *📄 Project Page:* https://notjust.dev/projects/lime *✅ Checklist:* https://www.notion.so/notjust/Lime-App-95a2987e114e4d4d8166a2c973849983?pvs=4 *💻 Source Code:* https://github.com/notJust-dev/Lime-RNMapbox ⚛️ *React Native Mastery* is the *ONLY* course you need to Master mobile development with React Native & Expo 🚀 *Join the waitlist now:* https://www.notjust.dev/react-native-mastery ❗Try our *FREE* 2-day Masterclass on notJust.Academy: https://assets.notjust.dev/masterclass/?utm_source=youtube&utm_medium=livestream&utm_content=14jun24 📚 This video includes a lot of tools and technologies, providing an excellent opportunity to learn about: - Setting Up the React Native Environment - Installing and Configuring Mapbox - Rendering Scooters on the Map - Adding Navigation and Directions - Implementing Ride Booking Features - Testing and Debugging a React Native app 💡 Have an idea for a future tutorial? Share it on our Idea Board: https://github.com/orgs/notJust-dev/discussions *💬 Join the notJust Development gang and let's build together:* Twitter: https://twitter.com/VadimNotJustDev Instagram: https://www.instagram.com/VadimNotJustDev Facebook: https://www.facebook.com/notjustdev LinkedIn: https://www.linkedin.com/in/vadimsavin Discord: https://discord.gg/VpURUN2 Timecodes: 0:00 Intro and Project Overview 4:18 Setting up a new Expo Project 7:28 Installing and setting up RN MapBox 1:03:17 Rendering Markers (scooters) on the map 1:29:03 Implementing Clustering 1:46:05 Showing Directions 2:35:44 Exporting components to Context Providers 3:04:36 Implementing the Bottom Sheet Details 3:41:51 Styled Scotoer details + Geofencing Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with. #notjustdev #escooter #reactnative

Comment