Google Maps with React Native | Directions, Pins, and Location
Beto, August 20, 2023 · 20,824 views
Uber, Airbnb, DoorDash: the apps people use every day are built around a map. Here I build that core piece in React Native with react-native-maps: draggable origin and destination pins, a route drawn between them, and real addresses pulled from the Google Maps API when a pin moves. Follow along in the video and you'll have it running in an Expo project.
Exactly what you need if you're building anything with delivery, transport, or location.
What's inside
- Installing react-native-maps and rendering a full-screen
- Setting the initial region with latitude, longitude, and deltas
- Draggable markers for pick-up and drop-off selection
- Drawing the route with , styled to match your design
- Fetching updated addresses from the Google Maps API when pins move
- Getting an API key for directions and routing
Resources
CourseReact Native course
Maps are one feature. 17 sections and 800+ minutes take you from fundamentals to shipped apps.
Had a win? Get featured on Code with Beto.Share your story
Like this article? Get the rest of the library plus weekly React Native tips. Free.