This application requires JavaScript.
maps for react native

React Native maps, the boring infra part sorted.

Use the official maplibre-react-native fork for true native map views on iOS and Android. The same maps.guru style URL works; auth travels on every tile.

install
pnpm add @maplibre/maplibre-react-native
tsx
import MapLibreGL from '@maplibre/maplibre-react-native';
import { StyleSheet } from 'react-native';

const MAP_STYLE = 'https://maps.guru/api/v1/styles/standard/light/style.json?key=YOUR_API_KEY';

export default function CityMap() {
  return (
    <MapLibreGL.MapView
      style={styles.map}
      mapStyle={MAP_STYLE}
      logoEnabled={false}
      compassEnabled
    >
      <MapLibreGL.Camera
        zoomLevel={11}
        centerCoordinate={[77.209, 28.6139]}
      />
      <MapLibreGL.PointAnnotation
        coordinate={[77.209, 28.6139]}
        id="delhi"
      />
    </MapLibreGL.MapView>
  );
}

const styles = StyleSheet.create({
  map: { flex: 1 },
});
{native render}
native · React Native

Native WebGL map, runs on iOS and Android.

The React Native SDK renders straight to the platform’s OpenGL / Metal context. Web preview is skipped — install the package and run on a simulator to see live tiles.

Why React Native teams ship on maps.guru

Free-tier generous enough for real production traffic. 50,000 tile requests/month , no credit card.

  • Native mapview with gesture handling, idle detection, and offline caches built in.
  • Same JSX API surface as react-map-gl, a drop-in for shared React components.
  • Use Camera + PointAnnotation JSX children instead of imperative map.addLayer calls.

Frequently asked

Ready to build with
beautiful basemaps?

Join developers worldwide who trust maps.guru for their mapping needs. Start free, no credit card required.

Contact us
Free forever plan
5-minute setup
No credit card