MapView on Android does not work when building APK

#1

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
#2

Could you post the logs you mentioned?

#3

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
#4

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.

#5

Thanks for sharing the solution you found with the community!

closed #6

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