By: Erin Quinn
Charlotte, NC based development shop Team Luna built the Charlotte Light Rail App for their city’s light rail service, allowing riders to see their closest station, get stop-by-stop arrival predictions, and answer quick questions like: “When’s the next train coming?”
The self-proclaimed “web developers, now mobile developers” opted to build the mobile app with our Maps SDK for React Native — a cross-platform tool that allows you to build mapping and location into Android and iOS apps — after trying out a few dev kits.
We chatted with Joseph Guerra and Brandon Fancher of Team Luna to learn more about their decision and process for building the app:
We wanted to help people get around using the light rail in Charlotte. But another equally important goal for us was to learn how to use React Native to build and deploy a live app to the App Store. We wanted to do this without writing a line of Swift or Objective C. And that meant that we were limited to map libraries specifically for React Native.
The team tried out a handful of API configurations but ran into blockers after looking into the fine print. Some APIs were not licensed to work with others, while others had a low threshold for free users.
That’s when we found Mapbox and your wonderful Mapbox Maps SDK for React Native. That, combined with your excellent Distance API and generous free tier, meant we could achieve what we set out to do, and purely in React Native. And it provided a great experience!
Our vector maps load quickly on the client side; and our Matrix API (formerly the Distance API) calculates travel times between many points in one API request, allowing the Charlotte Light Rail App to efficiently let pedestrians know where the nearest rail station is.
With these maps in place, Team Luna quickly developed the app over a handful of iterations:
We went through three iterations, give or take, before we nailed it. The first iteration was really just us learning how to get React Native up and running and display a map. We then rebuilt with an intermediate state…a quick-and-dirty MVP that proved out our approach with Mapbox. Finally, we rebuilt one last time from the ground up with a focus on quality.
The finished product works beautifully. So far, over 3,500 people in the Charlotte metropolitan area rely on the Charlotte Light Rail App every month to get where they need to go. Team Luna just updated the app to include the newly opened Blue Line extension.
And the locals love it:
Want to build native mobile apps for iOS and Android? Download our Maps SDK for React Native and read through this first steps tutorial to get started.
Have you written about building your own Mapbox application? Let us know about it @Mapbox! Thanks to Team Luna’s for permission to repost and expand on their original post.
Built in React Native: the Charlotte Light Rail app was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.