FSLocator
Configurable store locator component for React and React Native projects.
Table of Contents
- Maps - Location Item Components - For WebConfiguration Options
| Name | Required? | Description | Default | | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | brandId | yes | An ID corresponding to a brand in Branding Brand's store locator management system | | | searchBarProps | no | A collection of properties to be passed to the search bar component | | | locationItemProps | no | A collection of properties to be passed to the location item component | | | style | no | A React Native StyleSheet for styling the locator component | | | listStyle | no | A React Native StyleSheet for styling the location results list. | | | format | no | A string specifying the layout of the locator component. Valid options arelist
which renders a list view only, mapVertical
which renders a map and list in vertical orientation, and mapHorizontal
which renders a map and list in horizontal orientation. | list |
| geoOptions | no | Geolocation options used for finding current location. React Native Geolocation | enableHighAccuracy=true, timeout=10000, maximumAge=10000, distanceFilter=100 |Developer Notes
Maps
FSLocator uses the react-native-maps components by Airbnb for native maps. The library utilizes the appropriate maps application for the OS -- Apple Maps for iOS and typically Google Maps for Android.The web view utilizes google-map-react which is a React wrapper for the Google Maps API. The Google API key as well as the implementation resides in
/src/components/MapView.web.tsx
as of this writing.Location Item Components
For reusability purposes, the LocationItem components which are used to display location results are located in the FSComponents package.There are a number of available configurations for the location items. For example, templates are available with and without a detail button, phone button, and navigate button. The desired template should be specified by way of the "format" property in locationItemProps passed to the Locator component:
<Locator
brandId="254"
locationItemProps={{
style: S.item,
format: '5',
navIcon: navIcon,
phoneIcon: phoneIcon
}}
...