CODEWITHSUNDEEP
androidreact-nativereact-native-maps
Carrie
Carrie

Reputation: 29

MapView is causing the app to crash. No errors printed in log. React-Native-Maps

It was working fine before, but now my views that contain a mapview crash and only work when I take the mapview out. I have been through several issues on the react-native-maps github page that seemed similar to mine and most say it has to do with google play services that you have added in dependencies in the build.gradle and I have made changes with regard to that however nothing has changed. I checked and my maps api key is just fine and the library is set up according to the guidelines. If you know what the problem might be please comment or answer. The mapviews were working well a few days ago and now, they are not.

Inside my build.gradle sdk versions...

  compileSdkVersion 23
   buildToolsVersion "23.0.3"

    defaultConfig {
        minSdkVersion 16
        targetSdkVersion 23

Dependancies....

compile(project(':react-native-maps')){
        exclude group: 'com.google.android.gms', module: 'play-services-base'
        exclude group: 'com.google.android.gms', module: 'play-services-maps'
    }
compile 'com.google.android.gms:play-services-base:+'
compile 'com.google.android.gms:play-services-location:+'
compile 'com.google.android.gms:play-services-maps:+'

Inside the manifest

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

   <meta-data
  android:name="API_KEY"
  android:value="AIzaSyCV3tjuvgsj1HqTdKqtyh-x8oFLmupq9iI"/>

Inside the MainApplications.java

 new MapsPackage(),
Inside settings.gradle
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')

How I call MapView

<MapView
      region={{            
        longitude: LONGITUDE,
        latitude: LATITUDE, 
        longitudeDelta: LONGITUDE_DELTA,
        latitudeDelta: LATITUDE_DELTA
      }
      }
      style={styles.container}
    >

Anything that might mean something: I am using geolocation to get the users location and then switch the initial region to the users current location coordinates.

Upvotes: 0

Views: 1953

Answers (1)

Kranthi
Kranthi

Reputation: 1070

Try this In constructor

this.state= {
      region: {
        latitude: 24.4539,
        longitude: 54.3773 ,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      },
    };

this method for changing region

onRegionChange(region: Object) {
    this.setState({
      region : region
    });
  }

call MapView 

<MapView style={{flex: 1}}
         initialRegion={this.state.region}
         region={this.state.region}
         onRegionChangeComplete={(region) => this.onRegionChange(region)} />

Upvotes: 1

Related Questions