react-native-maps: Map components for React Native
Cross-platform React Native bridge to native map SDKs.
Learn more about React Native Maps
react-native-maps is a React Native library that provides map visualization components for cross-platform mobile applications. It bridges to native map implementations on iOS and Android, allowing developers to render maps and map overlays through React components. The library supports various map features including markers, polygons, polylines, circles, heatmaps, and GeoJSON rendering. It maintains compatibility with multiple React Native versions and supports both the legacy architecture and the newer Fabric architecture introduced in React Native 0.76+.
Declarative Map Components
Map features like markers and overlays are specified as child components of MapView rather than through imperative method calls. Provides a React-idiomatic API where map state is controlled through props and component hierarchy.
Native Platform Integration
Wraps native Google Maps implementations on both iOS and Android, allowing access to platform-specific map capabilities while maintaining a unified JavaScript interface. Delivers native performance and feature parity across platforms.
Multiple Overlay Types
Supports rendering diverse map elements including markers with custom views, polygons, polylines, circles, tile overlays, heatmaps, and GeoJSON features within a single map component. Eliminates need for multiple third-party overlay libraries.
import MapView from 'react-native-maps';
import { StyleSheet, View } from 'react-native';
export default function App() {
return (
<MapView
style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
);
}
const styles = StyleSheet.create({
map: { flex: 1 }
});Fix CI build process by adding package version to git commits
- –Fix CI by adding the package's version to the git commit
Add unstable MapUIBlock API for Android and Apple Maps logo positioning for iOS
- –android: unstable api MapUIBlock
- –ios: add appleLogoInsets prop for Apple Maps logo positioning
- –ci by skipping NPM_Tokens all together
- –ci by using a separate publish to npm step that shouldn't require action
Prevent auto bottom inset adjustment during map initialization on iOS
- –ios: Prevent auto bottom inset adjustment during map initialization
Top in Mobile & Desktop
Related Repositories
Discover similar tools and frameworks used by developers
Etcher
Cross-platform app for writing OS images to SD cards and USB drives with data verification.
Seal
Android video/audio downloader using yt-dlp with Kotlin and Jetpack Compose.
React Native FS
Cross-platform native filesystem operations for React Native applications.
Telegram for Android
Official source code for the Telegram Android messaging app with complete buildable codebase.
WSABuilds
Precompiled Windows Subsystem for Android packages with Google Play Store and root access via Magisk/KernelSU.