Configurable store locator component for React and React Native projects.
Table of Contents
- Configuration Options
- Developer Notes
- Running the Test Project
- External Links
|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 are
|geoOptions||no||Geolocation options used for finding current location. React Native Geolocation||enableHighAccuracy=true, timeout=10000, maximumAge=10000, distanceFilter=100|
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:
Please see the Contributing Guidelines.