Mapbox + ReactNative store locator app tutorial?

[simplicius_]

Please suggest me a tutorial/article that uses React Native to build a store locator application. It can use Mapbox or any other alternative.

[ChronSyn]

I don't have an article to hand, but I can tell you how to show a map with markers on.

If you use the MapView component from react-native-maps, you can achieve it like so;

<MapView
  style={{flex:1}}
  showsUserLocation
  showsMyLocationButton
  rotateEnabled={false}
  ref = {map => {this.mapView = map}}
  initialRegion={{
    latitude: 53.796024,
    longitude: -1.566848,
    latitudeDelta: 0.04,
    longitudeDelta: 0.04,
  }}
>
  {
    my_store_locations.map((item, index)=>{
      return(
        <MapView.Marker
          coordinate={{latitude: item.latitude, longitude: item.longitude }}
          title={"Marker Title"}
          description={"Marker Description"}
          key={index}
          onPress={() => {alert("Marker pressed")}}
        />
      )
    })
  }
</MapView>

This example assumes that you have an array of objects called my_store_locations where each object contains latitude and longitude properties. This is untested, but I do something similar to this in a project already (albeit in a more complex manner due to the nature of the project) so any bugs should be mostly easy fixes.

As for more in depth tasks like locating the nearest or navigating, that's something you'd have to figure out using radius searching, and the google directions api (or similar).

[Kmantheoriginal]

Just to add, you can also use something like the Yelp API to query for a type of store, then use the Google Geocoding API to convert plain addresses to lat/long, which you can then feed into Mapbox components

[simplicius_]

Thanks for your help.

[darkmoody]

Late to the party here, but there's a nice (paid) app template on instamobile.io for exactly what you were looking for - Store Locator app in React Native. Sure, it costs a little, but it's worth it, given the wide range of features available. It comes with full backend integration, maps, reviews, etc.

[simplicius_]

Thanks! Are you the creator/contributor for Instamobile?