Registry / web-framework / react-native-maps

react-native-maps

library1.27.2jsnpmunverified

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.

web-framework

npm install react-native-maps

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-MAPS

react-native-maps

web-frameworkjavascriptv1.27.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

MapView

✓ import MapView from 'react-native-maps';

✗ const MapView = require('react-native-maps');

While CommonJS `require` is supported for backwards compatibility, ESM `import` is the idiomatic and recommended approach for modern React Native projects.

Marker

✓ import { Marker } from 'react-native-maps';

✗ import MapView, { Marker } from 'react-native-maps';

Marker is a named export, not part of the default MapView export. Importing `MapView` and `{ Marker }` separately is common.

PROVIDER_GOOGLE

✓ import { PROVIDER_GOOGLE } from 'react-native-maps';

✗ import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

Used to explicitly specify the map provider, especially for using Google Maps on iOS or ensuring Google Maps on Android.

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.

import React, { useState } from 'react'; import { StyleSheet, View } from 'react-native'; import MapView, { Marker, type Region } from 'react-native-maps'; export default function App() { const [region, setRegion] = useState<Region>({ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }); const handleRegionChangeComplete = (newRegion: Region) => { setRegion(newRegion); }; return ( <View style={styles.container}> <MapView style={styles.map} region={region} onRegionChangeComplete={handleRegionChangeComplete} > <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} title="My Location" description="A sample marker on the map" /> </MapView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, map: { width: '100%', height: '100%', }, });

Debug

Known issues

breakingReact Native New Architecture (Fabric) compatibility requires specific `react-native-maps` versions. Upgrading React Native or `react-native-maps` can lead to build failures if versions are not aligned.

fix

For `react-native-maps` v1.26.1+, ensure React Native is `>=0.81.1`. For `react-native-maps` v1.26.0 and below, React Native `>=0.76` is required for Fabric. Check the official compatibility table in the documentation.

affects: >=1.26.0

gotchaUsing custom React Native views inside `<Marker />` components for rendering custom markers can significantly impact performance, especially with many markers.

fix

For better performance, consider using the `image` prop with pre-rendered native image assets (PNGs) rather than complex custom views. Only use custom views if absolutely necessary and optimize them carefully.

affects: All

gotchaWhen providing a custom marker image, using `image={require('path/to/image.png')}` might not scale optimally across different screen densities compared to using `image={{ uri: 'image_asset_name' }}` with properly configured native asset bundles.

fix

For best scaling, generate multiple resolution `png` images (e.g., `custom_pin.png`, `custom_pin@2x.png`, `custom_pin@3x.png`), place them in Android drawables and iOS asset catalogs, and refer to them by `uri: 'custom_pin'`.

affects: All

breakingAn unstable Android API `MapUIBlock` caused issues prior to version `1.27.0`, leading to potential crashes or unexpected behavior on Android devices.

fix

Upgrade `react-native-maps` to version `1.27.0` or newer to resolve stability issues related to `MapUIBlock` on Android.

affects: <1.27.0

Errors

Common errors & fixes

Android app crashes on map interaction or lifecycle events on some devices.

Known issues with Android native module lifecycle (`doDestroy`) or rendering logic.

fix

Upgrade to `react-native-maps@1.26.18` or newer, which includes fixes for crashes related to `doDestroy` and `getFeatureAt`.

iOS map's bottom inset is incorrect or adjusts unexpectedly during initialization, obscuring UI elements.

Automatic bottom inset adjustment during map view initialization on iOS.

fix

Upgrade to `react-native-maps@1.26.20` or newer, which includes a fix to prevent auto bottom inset adjustment on iOS.

Markers are not displayed correctly, or they disappear/reappear unexpectedly on Android.

Incorrect native handling of marker addition and removal within the Android map view.

fix

Upgrade to `react-native-maps@1.26.15` or newer, which contains fixes for correctly adding and removing markers on Android.

Upgrade

Version history

1.27.2latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React Native applications.

react-nativerequiredCore dependency for all React Native applications.

react-native-weboptionalPeer dependency, potentially used for web compatibility but primarily a native module.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/react-native-maps/react-native-maps ↗

packagehttps://www.npmjs.com/package/react-native-maps ↗