CODEWITHSUNDEEP
androidreact-nativereact-native-maps
V.Cozzatella
V.Cozzatella

Reputation: 719

react native maps does not display the map correctly

I have installed react-native-maps in my app but when i enter a MapView this is the output :

enter image description here

I followed the installation guide on github and entered the api key, but still does not display anything.

this is the code:

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

import MapView from 'react-native-maps';


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <MapView
         style={styles.map}
         region={{
           latitude: 41.89193,
           longitude: 12.51133,
           latitudeDelta: 0.015,
           longitudeDelta: 0.0121,
         }}
       >
       </MapView>
     </View>
    );
  }
}

const styles = StyleSheet.create({
 container: {
   ...StyleSheet.absoluteFillObject,
   height: 400,
   width: 400,
   justifyContent: 'flex-end',
   alignItems: 'center',
 },
 map: {
   ...StyleSheet.absoluteFillObject,
 },
});

Does anyone know how I can solve this problem or what does it depend on? thank's

Upvotes: 0

Views: 800

Answers (1)

Petar Obradovic
Petar Obradovic

Reputation: 81

You need to add provider to MapView:

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
....
<MapView
     provider={PROVIDER_GOOGLE}
     style={styles.map}
     region={{
       latitude: 41.89193,
       longitude: 12.51133,
       latitudeDelta: 0.015,
       longitudeDelta: 0.0121,
     }}
   >
</MapView>

Upvotes: 1

Related Questions