A library that provides a Map component that uses Google Maps on Android and Apple Maps or Google Maps on iOS.
GitHub
npm
This library is listed in the Expo SDK reference because it is included in Expo Go. You may use any library of your choice with development builds.
react-native-maps provides a Map component that uses Google Maps on Android and Apple Maps or Google Maps on iOS.
No additional setup is required when testing your project using Expo Go. However, to deploy the app binary on app stores additional steps are required for Google Maps. For more information, see the instructions below.
-Â npx expo install react-native-mapsIf you are installing this in an existing React Native app, start by installing expo in your project. Then, follow the additional instructions provided by the library's README or documentation.
See full documentation at react-native-maps/react-native-maps.
import React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<MapView style={styles.map} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
map: {
width: '100%',
height: '100%',
},
});
If you have already registered a project for another Google service on Android, such as Google Sign In, you enable the Maps SDK for Android on your project and jump to step 4.
1
2
3
android.package from app.json (for example: com.company.myapp) to the package name field.4
android.config.googleMaps.apiKey field.{ PROVIDER_GOOGLE } from react-native-maps and add the property provider={PROVIDER_GOOGLE} to your <MapView>. This property works on both Android and iOS.If you have already registered a project for another Google service on iOS, such as Google Sign In, you enable the Maps SDK for iOS on your project and jump to step 3.
1
2
ios.bundleIdentifier from app.json (for example: com.company.myapp) to the bundle ID field.3
ios.config.googleMapsApiKey field.{ PROVIDER_GOOGLE } from react-native-maps and add the property provider={PROVIDER_GOOGLE} to your <MapView>. This property works on both Android and iOS.