{"library":"react-native-maps","title":"React Native Maps","description":"React Native Maps is a comprehensive, community-maintained library providing native map components for both iOS and Android platforms, allowing developers to integrate highly customizable maps into their React Native applications. It supports popular map services like Apple Maps (MapKit) on iOS and Google Maps on Android, with an optional Google Maps provider for iOS as well. The current stable version is `1.27.2`, and the project demonstrates an active development cadence with multiple bug fix and minor releases occurring monthly or bi-monthly, reflecting continuous maintenance and improvement. Its key differentiator lies in its declarative, React-like API, enabling map features such as Markers, Polylines, Polygons, Circles, Overlays, and Heatmaps to be defined as children of the `<MapView />` component. This approach simplifies map state management and interaction. The library also emphasizes compatibility with both the \"Old Architecture\" and the newer \"Fabric (New Architecture)\" of React Native, though specific version requirements apply to each, which are crucial considerations for developers.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-maps"],"cli":null},"imports":["import MapView from 'react-native-maps';","import { Marker } from 'react-native-maps';","import { PROVIDER_GOOGLE } from 'react-native-maps';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport MapView, { Marker, type Region } from 'react-native-maps';\n\nexport default function App() {\n  const [region, setRegion] = useState<Region>({\n    latitude: 37.78825,\n    longitude: -122.4324,\n    latitudeDelta: 0.0922,\n    longitudeDelta: 0.0421,\n  });\n\n  const handleRegionChangeComplete = (newRegion: Region) => {\n    setRegion(newRegion);\n  };\n\n  return (\n    <View style={styles.container}>\n      <MapView\n        style={styles.map}\n        region={region}\n        onRegionChangeComplete={handleRegionChangeComplete}\n      >\n        <Marker\n          coordinate={{ latitude: 37.78825, longitude: -122.4324 }}\n          title=\"My Location\"\n          description=\"A sample marker on the map\"\n        />\n      </MapView>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  map: {\n    width: '100%',\n    height: '100%',\n  },\n});","lang":"typescript","description":"This quickstart renders a full-screen map centered on a specific region with a single interactive marker, demonstrating basic setup and controlled region state in a functional React Native component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}