Skip to content
Get packs

react-native-maps

A React Native map component for iOS and Android, with markers, shapes, and tile overlays.

GitHub Download v1.29.11
Stars
16k
Forks
5k
Licence
MIT
Language
TypeScript
Last update
18 days ago
Type
Library

What it is

react-native-maps is a library that lets developers show interactive maps inside React Native apps for iOS and Android. Map features like markers, polygons, and tile overlays are added as child components of the MapView, following React's declarative style. It is useful for apps that need a map view without writing separate native code for each platform.

  • Show a map centered on a location with an initial region
  • Render a list of markers with titles and descriptions
  • Make a marker draggable and read its new coordinate on drag end
  • Overlay a custom tile layer from a tile server such as OpenStreetMap
  • Style a Google Maps view using a Google Map ID

Great for

  • React Native developers adding a map screen to an iOS or Android app
  • Teams that want map features declared as normal React components
  • Apps that need custom marker images or custom marker views
  • Projects that need offline or custom tile layers from a tile server or local tiles

Not ideal for

  • Developers building only for the web, since this targets iOS and Android React Native apps
  • Projects on very old React Native versions, because the README lists minimum version requirements per release
  • Teams that need guaranteed performance for many animated custom marker views, since the README warns custom views have performance costs
Step-by-step guide: how to use react-native-mapsInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js · React Native (version must match the compatibility table in the README)

    Installation details

    See docs/installation.md in the repository
  2. 2

    Run it

    • Follow the installation guide in docs/installation.md
    • Import MapView from 'react-native-maps' in a screen component
    • Pass an initialRegion with latitude, longitude, latitudeDelta, and longitudeDelta
    • Add Marker children to the MapView to place points on the map
  3. 3

    Get the most out of it

    • Use the Google provider with a googleMapId to apply a styled map from Google Cloud
    • Use UrlTile for a custom tile server, and check the README's iOS App Transport Security note
    • Use LocalTile with mapType set to none on Android for fully offline tile display
    • Control the map with refs and component methods to animate to positions
    • Check the Component API docs for MapView, Marker, Callout, Polygon, Polyline, Circle, Heatmap, and Geojson

Downloads

Source code (.zip)master branch · straight from GitHubRelease v1.29.11Release notes and source

Strengths

  • Map features are written as React children, which fits the usual React pattern
  • Documented examples cover markers, callouts, tile overlays, and region control
  • Open source under the MIT license with a large community (about 16,000 stars)

Trade-offs

  • The README says the project is maintained by a small group, so response times may vary
  • Custom marker views have performance implications and the README recommends custom images when possible
  • Android local tiles still load underlying map tiles unless mapType is set to none, which takes extra setup

How it compares

ProjectStarsTypeLevelUpdatedBest for
react-native-maps (this)16kLibraryintermediate18 days agoReact Native developers adding a map screen to an iOS or Android app
react-native-elements25.9kLibraryintermediate6 months agoReact Native developers who want ready-made UI components
react-native-web22.2kLibraryintermediate4 days agoDevelopers who already use React Native and want the same components on the web
NativeBase20.4kLibraryintermediate9 months agoTeams maintaining an existing app already built on NativeBase
react-native-paper14.5kLibraryintermediate4 days agoReact Native developers who want ready-made Material Design components
react-native-gifted-chat14.4kLibraryintermediate19 days agoDevelopers building a chat or messaging screen in a React Native app

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.