How to use react-native -maps in react-native

Question

I try to use react-native-maps. I tried like this :

 <View style={styles.container}>
          <MapView style={styles.map}
             region={{
               latitude: this.state.latitude,
               longitude:this.state.longitude,
               latitudeDelta:0.1,
               longitudeDelta:0.1, 
             }}

          >
            <Marker
              coordinate= {{
                latitude: 38.41885,
                longitude: 27.12872,
              }}
              title={'my marker'}
              description={'test'}
            />


        </MapView>
      </View>

however when I start app, app close immediately. I couldn understand why it close ?

Try to check all about the installation, especially in Android Manifest.xml the apiKey. Or try to uninstall the app, the re-run it. — Liza Catherine Ombyaw
– Liza Catherine Ombyaw, Commented Jun 17, 2019 at 12:28
Are you sure that adding this code only your app crashes ? Try removing the code and check if app is working or not. — Kirankumar Dafda
– Kirankumar Dafda, Commented Jun 17, 2019 at 13:14
When I remove package of react-native-maps it is working, Otherwise it is not. I did what they say here : npmjs.com/package/react-native-maps but still closing app — rnn
– rnn, Commented Jun 17, 2019 at 13:29

Liza Catherine Ombyaw · Accepted Answer · 2019-06-17 13:48:38Z

1

Try this, if it does not work check your Android Emulator if it has a Google Play Services.

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-maps:+'

For addition, add this.

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

Add the apiKey, after this code:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

So it should be like this:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
  <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="yourAPIkey"
  />

answered Jun 17, 2019 at 13:48

Liza Catherine Ombyaw

9043 gold badges12 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Liza Catherine Ombyaw Over a year ago

Very grateful to help.

Collectives™ on Stack Overflow

How to use react-native -maps in react-native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related