Problem with expo react native MapView on Android

1
votes

I have a problem when using MapView in expo on a project. In expo app everything is ok on both iOS and Android, but when building and publishing the same app to Android apk, no matter if on play store or note when opening the map the app crashes and reloads.

I am using:

  • expo 37.0.0
  • react-native expo sdk 37.0.1
  • react-native-maps 0.27.1

Here is the code:

import { PROVIDER_GOOGLE } from 'expo';
import MapView, { Marker, Callout, CalloutSubview } from 'react-native-maps';

<MapView
  ref={'map'}
  onPress={() => this._mapPress()}
  provider={PROVIDER_GOOGLE}
  style={styles.mapView}
  initialRegion={{
      latitude: mapLat,
      longitude: mapLon,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421
  }}
>
  {markers.map((marker, i) => (
      <Marker
          key={`marker-${i}`}
          coordinate={marker.latlng}
          stopPropagation={true}
          onPress={e => this._mapMarkerPress(marker)}
      >
          <Image
              resizeMode='cover'
              source={
                  JSON.stringify(this.state.selectedMarker) == JSON.stringify(marker)
                      ? ACTIVE_PIN
                      : INACTIVE_PIN
              }
              style={styles.mapMarker}
          />
      </Marker>
  ))}
</MapView>

At first I thought there is a problem with the markers array or with the initial lat long, but removing parts of code i reduced the MapView to this:

<MapView
  ref={'map'}
  provider={PROVIDER_GOOGLE}
>
</MapView>

And still not working on apk / live Android, but in ios live works just fine, showing an empty map. But in expo app both ios and android everything is fine with or without the markers.

Anyone had this problem? Thanks!

2
react-nativegoogle-mapsexpoandroid-mapview
Did you add the google-map-api key? – Phạm Tấn Tài
Yes, i added it. Otherwise it would not work in ios or in expo on android... Right? Do you think maybe it's a problem with the api key on live? That does not happen in expo? – Alex Rosca
You forgot to import 'PROVIDER_GOOGLE' =>> import MapView, { Marker, Callout, CalloutSubview, PROVIDER_GOOGLE } from 'react-native-maps' – Maycon Mesquita
It's imported , i forgot to add it in the code in my post. – Alex Rosca
Also, keep in mind that in expo on android, everything is fine. The problem is only when building the apk and putting the app in play store. – Alex Rosca

2 Answers

5
votes

Found the problem and solved it. The api key from google cloud console was only for web. I made it for ios and android too and problem solved. :)

However this is weird, because in expo development the issue was not present... Only in the build for live.

0
votes

Try to add markerLat a markerLon parameters and replace this:

 initialRegion={{
      latitude: mapLat,
      longitude: mapLon,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421
  }}

with this:

 initialRegion={{
      latitude: mapLat,
      longitude: mapLon,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421
  },
      markerLat: Number(48.736279),  
      markerLon: Number(19.146191)
}