Building an e-Scooter App with React Native and Mapbox

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 🛴🔥

⚛️ *React Native Mastery* is the *ONLY* course you need to Master mobile development with React Native & Expo 🚀

📚 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

*💬 Join the notJust Development gang and let's build together:*

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

[coxato]

I was looking for mapbox tutorials + expo and I think this is the best. Also the longest tutorial 😅
thanks for sharing, greetings from Spain 👍

[amermoosa]

We're used to seeing you do great complementary things. So with some additional touches, authentication, reservation, etc., and definitely with the backend in a second round. It will be of great benefit and fruitfulness to those who follow you. appreciate in advance

[kaustuvgiri]

Excellet video! I recently used MapBox instead of Google Maps and it was the best experience ever... Loved the PointAnnotation implementation as well.

[ibidapoayomide]

I hope this video teaches me a lot I just started learning React Native 🎉🎉🎉 and I have a project I want to implement this mapbox stuff

[rishikeshkv]

Amazing content, eagerly waiting for part-2 of this video💗

[_stan]

Would love to see you integrate backend as well!

[x._ms]

32:33 i'll start from here if i come back, actually bro i was dealing with some error and i followed your process to fix the native build process of mapbox

[abelmurua]

Nice. I am testing this out. Any idea of how you could show a custom thuimbnail as the marker image? Let say each marker shows a custom image.

[TahomaID]

Why are you using a create-expo-stack?

[chosta]

I can't do the prebuild because i have this error : "TypeError: Cannot destructure property 'RNMapboxMapsImpl' of 'undefined' as it is undefined." I'm using expo...

[jasim]

how can we make a call recording apps in react native pls make video on this topic....

[godwinnamweli]

i get this error in windows android when i rum npx expo run android
npx expo run android
› Using expo run:android
env: load .env
env: export MAPBOX_TOKEN
› Building app...
Configuration on demand is an incubating feature.

> Configure project :expo

Using expo modules
- expo-asset (10.0.10)
- expo-constants (16.0.2)
- expo-file-system (17.0.1)
- expo-font (12.0.9)
- expo-image-loader (4.7.0)
- expo-image-picker (15.0.7)
- expo-keep-awake (13.0.2)
- expo-location (17.0.1)
- expo-modules-core (1.12.20)
- expo-secure-store (13.0.2)
- expo-splash-screen (0.27.5)
- expo-system-ui (3.0.7)
- expo-web-browser (13.0.3)


> Configure project :react-native-reanimated
Android gradle plugin: 8.2.1
Gradle: 8.8

FAILURE: Build failed with an exception.

* What went wrong:
Could not determine the dependencies of task ':app:processDebugResources'.
> Could not resolve all dependencies for configuration ':app:debugRuntimeClasspath'.
> Could not resolve
Required by:
project :app > project :rnmapbox_maps
> Could not resolve
> Could not resolve
Required by:
project :app > project :rnmapbox_maps
> Could not resolve

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

BUILD FAILED in 36s
5 actionable tasks: 1 executed, 4 up-to-date
Error: app:assembleDebug -x lint -x test --configure-on-demand --build-cache exited with non-zero code: 1
Error: app:assembleDebug -x lint -x test --configure-on-demand --build-cache exited with non-zero code: 1
at Object.onceWrapper (node:events:634:26)
at ChildProcess.emit (node:events:519:28)
at cp.emit
at maybeClose
at ChildProcess._handle.onexit
...

[lollyinnovation]

Can I use map without doing prebuild
I don't understand the whole build process

[duce]

a very necessary lesson!!! thank you very much for your work!!!

[Mah_Vibe]

Please create indoor navigation app using mapbox or any other library. it's humble request

[goharmunir]

I got spawn unknown error while running the npx expo run:android command. Could you help me out?

[TestYt]

Can you use amplify v6 for backend please? There is no tutorial about amplify v6.

[jasim]

pls make a playlist on how animation works in react native..

[Jake-bhhm]

I wish there was a svelte Native .. :(

[rubenzafratraver]

you are living in barcelona now?? so cool having you close to me! Im from Castellon, couple hours from you!