React Native react-native-maps Mapview does not show up React Native react-native-maps Mapview does not show up reactjs reactjs

React Native react-native-maps Mapview does not show up


You forgot to add styles to the MapView:

<MapView  style={styles.map}  initialRegion={{    latitude: 37.78825,    longitude: -122.4324,    latitudeDelta: 0.0922,    longitudeDelta: 0.0421,  }}/>

Don't forget to define your styles:

    const styles = StyleSheet.create({      map: {        ...StyleSheet.absoluteFillObject,      },});

Because for the mapView to work, you need to set the style of the MapView to an absolute position with top, left, right and bottom values set. As stated in the repo


  1. Go to the Google Cloud Platform Console. https://cloud.google.com/console/google/maps-apis/overview

  2. Select your project with dropdown in top navigation bar.

  3. Click on Menu and go to "APIs & Services" > "Library"

  4. Activate "Maps SDK for Android" and "Maps SDK for iOS".

  5. Then create new API key and add it to your project in AndroidManifest.xml inside <application> tag:

<meta-data  android:name="com.google.android.geo.API_KEY"  android:value="YOUR_ANDROID_KEY"/>


I had mess up with my google API key, I regenrated and in google developer console I have atttached the SHA key and it worked.