react-native maps not loading for android (blank map)

Question

I've been stuck on this for a long time now and am starting to think perhaps react native maps cannot work on android emulator, as all the answers I find that seem to work are for IOS anyways.

I am currently using android emulator to run my app. Here is the code for a simple map...

class MainMap extends Component {
    constructor() {
    super();
  }
    render(){
        return (
            <View style={styles.container}>
            <MapView
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
  </View>
        )
    }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    width:150,
    height:150,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

module.exports = MainMap;

The code seems like it should work, as I took it straight from an example. I even got my API key from google API and then added the following in my AndroidManifest.xml

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

Now, when I run react-native run-android the app seems to run fine, with no error messages. However, the app is blank. The View container loads fine, but its content MapView does not load at all. All I see is literally a blank screen.

Note that I also have Google Play services and Google API installed on my emulator too.

How can I debug this issue since I get no error messages at all? Can react-native maps even work on android emulator?

EDIT

I've been stuck on this for a long time now, and it's stalling me from being able to work on this project of mine. Because the nature of the question is difficult to debug, I am going to provide a github link to my repository in case anyone is willing to replicate the problem on their end and see what my issue is...

https://github.com/Bolboa/TTC-Mapping

All I need is for the map to load. The code looks like it should work, but the map does not load...

I am going to offer a bounty to anyone who can help me out.

Answer 1

Give style to MapView.

Include

var { width, height } = Dimensions.get('window')

in render method

<View style={styles.container}>
        <MapView style = {styles.mapcontainer}
          showsUserLocation={true}
          showsMyLocationButton={false}
          zoomEnabled = {true}
          region={this.state.region} >
        </MapView>
</View>

Include style

container: {
    flex: 1,
  },
mapcontainer: {
    flex: 1,
    width: width,
    height: height,
  },

Answer 2

For some reason, regenerating an API Key and updating it in:

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

fixed it for me. Not sure how as both have the same settings.. No longer have the grey screen with Google icon!