A plug-and-play React Native app that cuts down on the set-up and development time needed to add a Store Locator into your app. Use our starter themes and features as a plug-and-play solution, or further customize your Store Locator with our flexible build.
The React Native Locator Kit is a downloadable project for you to add beautiful plug-and-play Store Locators to your React Native applications. Use the Kit to allow your users to find and browse store locations, view additional info for each store, and preview the distance and route to the store. Not building for a store owner or a business? You can use this project to locate anything from bike share hubs to ATMs to your neighborhood parks.
We built this Kit to cut down on the set-up and development time needed to add a Store Locator into your app. Use our starter themes and features as a plug-and-play solution, or further customize your Store Locator with our flexible build.
Use our pre-built markers, or add in your own by creating your own icon, using your company’s logo, or another open source image.
Customize the style of the interactive scrolling cards (i.e. pop-ups) included in your Store Locator.
Add as many store locations as you wish as a GeoJSON file. Remember that you could use this Kit to locate not just stores, but anything else like bike share hubs, ATMs, parks, or even your friends!
The Kit comes with five UI starter themes, but you can further customize these themes as you see fit. Or create your own custom map styles by using Mapbox Studio to build a style that fits your brand.
The Kit includes the use of the Mapbox Directions API to display estimated travel distances and display driving routes to store locations. It’s also possible to modify the routing profile to use our cycling or walking directions.
Dependencies
Git
git clone [email protected]:mapbox/store-locator-react-native-gl.git
cd store-locator-react-native
Yarn
yarn add @mapbox/store-locator-react-native
Npm
npm install @mapbox/store-locator-react-native --save
Getting Started
There are a few steps needed to get up and running.
id
, name
, phoneFormatted
, addressFormatted
, and hoursFormatted
are all required fields that we use to render the cards on the bottom of the screen.{
"id": "1",
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-77.034084142948,
38.909671288923
]
},
"properties": {
"name": "Place 1",
"phoneFormatted": "(202) 234-7336",
"addressFormatted": "33 Birchwood Drive, North Arlington",
"hoursFormatted": "10 AM - 9 PM"
}
}
import MapboxGL from '@mapbox/react-native-mapbox-gl';
import StoreLocatorKit from '@mapbox/store-locator-react-native';
import reallyCoolIcon from '...';
import evenCoolerIcon from '...';
import ultraCoolIcon from '...';
export const theme = new StoreLocatorKit.Theme({
icon: reallyCoolIcon,
activeIcon: evenCoolerIcon,
styleURL: MapboxGL.StyleURL.Light,
primaryColor: `#A35BCD`,
primaryDarkColor: '#5D39BA',
directionsLineColor: '#987DDF',
cardIcon: ultraCoolIcon,
cardTextColor: '#6A159B',
accentColor: '#C7A8D9',
});
async componentWillMount () {
if (!IS_IOS) {
const isGranted = await MapboxGL.requestAndroidLocationPermissions();
this.setState({ isGranted: isGranted });
}
MapboxGL.setAccessToken(MAPBOX_ACCESS_TOKEN);
}
import places from '...'; // this is the dataset from step one
import { theme } from '...'; // theme from step 2
...
<StoreLocatorKit.MapView
simulateUserLocation
accessToken={MAPBOX_ACCESS_TOKEN}
theme={theme}
centerCoordinate={this.state.initialLocation}
featureCollection={places}
zoomLevel={13}
style={styles.matchParent} />
Example Application
There is an example application bundle with this repo, to show you a working example of a store locator. Here are the steps needed to get it up and running
cd RNStoreLocatorExample
npm i
npm start
Open up App.js in the example application and you should see a message to enter your access token. Just replace this with your access token from Mapbox Studio.
const MAPBOX_ACCESS_TOKEN = '<Enter your access token>';
There are a few ways you can run the project. You can open up Xcode or Android Studio and run them for there (highly recommend to open up the example project in each once) or you can use the React Native CLI
Android
react-native run-android
iOS
react-native run-ios
Mapbox is the location data platform for mobile and web applications. We provide building blocks to add location features like maps, search, and navigation into any experience you create. Use our simple and powerful APIs & SDKs and our open source libraries for interactivity and control.
Not a Mapbox user yet? Sign up for an account here. Once you’re signed in, all you need to start building is a Mapbox access token. Use this same short code with all of our interactive mapping libraries, Python and JavaScript SDKs, and directly against our REST APIs. You can create and manage your access tokens in Mapbox Studio.