By: Nick Italiano
Today, we’re releasing our React Native Store Locator Kit, a plug-and-play solution that reduces the time it takes to set up and develop a beautiful store locator in your app. Use the kit to quickly create functionality like browsing several locations, interacting with each point to view additional info, and previewing the distance and route to each store. To preview a route, we’re rendering Mapbox Directions on top of our maps using React Native.
How to add Directions to your React Native app
The first thing you’ll need for adding directions to your app is mapbox-sdk-js, an open source JavaScript client to Mapbox services. Not only does mapbox-sdk-js work well when bridging our APIs with our Maps SDK for React Native, it’s perfect for building cross-platform applications for web and mobile.
To add this to your project run this in your favorite command line:
npm i --save url
npm i --save mapbox
Since React Native does not ship with the URL module that node comes with, you’ll need to add it as a polyfill, as well as include the javascript SDK. After you pull this into the project, it’s time to set your access token, which is needed to use any of our tools, APIs, and SDKs.
const mapboxClient = new MapboxClient(<access token>);
Once the access token is set, everything is ready to make requests to our Directions API. In order to do this, you must know your start coordinate and end coordinate. We like to refer to these as origin and destination.
If you would like to learn more about our request options, see our documentation.
Now that you have directions in your application, it’s time to render them onto the map. In our kit, we created a Directions React component that takes in origin, destination, access token, and callback for when directions are fetched. This component handles the whole lifecycle of fetching data to rendering it on the map.
This is our render function inside of the component:
The directions object returns with a handy geometry property as a LineString, so we’re able to directly add this object as the shape to our source. Your route line will then be rendered on your map; nothing else is required.
Get started with the React Native Store Locator Kit
Check out our Github repo for detailed instructions on building with the kit. This is the first of several plug-and-play “kits” we’re releasing for React Native so stay tuned. If you have questions or suggestions, hit us up on Twitter or Github.
Adding directions to the React Native Store Locator Kit was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.