A map's viewport is a region: a center plus latitudeDelta and longitudeDelta, the height and width of the visible area in degrees (0.3 is roughly 33 km north to south). Pass initialRegion to start somewhere and let the user move freely; pass region only if you want to control the camera from state. To frame a set of points, fitToCoordinates(points, { edgePadding }) computes the region for you, and animateToRegion(region, ms) flies there. A <Marker> takes a coordinate, a title and description for its callout, and a pinColor or custom child view; a ref's showCallout() opens the callout from code. onRegionChangeComplete reports where the user panned, which is the moment to fetch the shops in view. Which SDK draws the map is the real decision:
| Library | Draws with | Key or account | Licence |
|---|---|---|---|
| react-native-maps 1.27.2 15,999 | Google Maps 1 , Apple Maps | Google key on Android | MIT |
| expo-maps 57.0.3 (alpha) | Google Maps, Apple Maps | Google key on Android | MIT |
| @rnmapbox/maps 10.3.5 | Mapbox 1,919 SDK | Mapbox access token | MIT wrapper |
| @maplibre/maplibre-react-native 11.4.0 | MapLibre 34,367 Native | None (bring tiles) | MIT |
Apple Maps on iOS needs no key. MapLibre is the open-source fork of Mapbox's SDK from before Mapbox changed its licence, and draws vector tiles from any server, including OpenStreetMap-based ones you host or rent, which suits apps that must avoid a Google account. Whatever you choose, show the tile provider's attribution: map data licences require it.