@brandingbrand/fslocator
TypeScript icon, indicating that this package has built-in type declarations

11.88.1 • Public • Published

FSLocator

image

Configurable store locator component for React and React Native projects.

Table of Contents

Configuration 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 are list 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
  }}
  ...

Contributing

Please see the Contributing Guidelines.

Readme

Keywords

none

Package Sidebar

Install

npm i @brandingbrand/fslocator

Weekly Downloads

92

Version

11.88.1

License

MIT

Unpacked Size

230 kB

Total Files

86

Last publish

Collaborators

  • bbtravisreadonly
  • tom_thornton
  • philtompkins
  • nathan-sankbeil
  • chrisjlan89branding
  • branderbrett
  • skyeckstrom
  • nickburkhartbb
  • bbtravis
  • deemaabdallah
  • msiauko
  • jasonmosleybb
  • dshadrick
  • nickbb
  • notajvento
  • andyschwob
  • xero
  • varzamanbb
  • bb_jenkins
  • crherman7
  • wsedlacekc
  • ckornell
  • jmwr
  • mjweb48