MapView on Android does not work when building APK

I’m having trouble with MapView’s on Android. I have a completely fresh brand new create-react-native-app setup. I change my App.js to look like this:

import React from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import { MapView } from 'expo';

const screen = Dimensions.get('window');
const ASPECT_RATIO = screen.width / screen.height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

export default class App extends React.Component {
  constructor(props) {
    super(props);

    props.initialRegion = {
      latitude: LATITUDE,
      longitude: LONGITUDE,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    };
  }

  render() {
    return (
      <MapView
        style={styles.map}
        region={this.props.initialRegion}
      ></MapView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column'
  },

  map: {
    backgroundColor: 'transparent',
    flex: 1,
    width: '100%'
  },
});

I run this in the emulator and everything looks good, I get a fresh map. I accurately follow the instructions listed here and get a final .apk build (using exp build:android) and I install the .apk using adb install onto my emulator, and the maps view is not working. I see the google icon in the corner, and adb logcat shows some kind of authentication error.

I have followed the instructions perfectly, and have replicated this situation a handful of times now. This must be some kind of issue with expo or its cloud building or something.

I have also tried ejecting the application with expo sdk, but when I open and run the project in android studio, I get a blue screen saying that expo wasn’t set up correctly.

1 Like

Could you post the logs you mentioned?

Sure, here’s a pastebin. The interesting bit is at the bottom:

09-07 07:35:12.213 20905 21016 E Google Maps Android API: Authorization failure.  Please see https://developers.google.com/maps/documentation/android-api/start for how to correctly set up the map.
09-07 07:35:12.214 20905 21016 E Google Maps Android API: In the Google Developer Console (https://console.developers.google.com)
09-07 07:35:12.214 20905 21016 E Google Maps Android API: Ensure that the "Google Maps Android API v2" is enabled.
09-07 07:35:12.214 20905 21016 E Google Maps Android API: Ensure that the following Android Key exists:
09-07 07:35:12.214 20905 21016 E Google Maps Android API:   API Key: [manually removed from pastebin for privacy]
09-07 07:35:12.214 20905 21016 E Google Maps Android API:   Android Application (<cert_fingerprint>;<package_name>): 17:51:D9:61:52:06:67:26:67:FA:D6:FA:70:D4:B5:E7:EC:9C:2B:B6;com.maps.demo

Just wanted to follow up and mention that my issue was solved after I:

  1. Ejected the application & opened in android studio
  2. Made sure this was in the module build.gradle:
android {

    dexOptions {
        keepRuntimeAnnotatedClasses false
    }

}
  1. Made a build using ./gradlew assembleProdRelease and signed the apk manually

These were the only steps that worked for me, hopefully it helps someone else that comes across this.

Thanks for sharing the solution you found with the community!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.