How to Implement Google Map in React Native Android (React-Native-Maps)

Question

I've been using the React-Native-Maps library from https://github.com/lelandrichardson/react-native-maps/blob/master/docs/installation.md

I've followed all of the instillation steps but I've still receiving a blank screen (the entire react screen is white like nothing is rendering).

However when I try to render a element in react, text pops up. Therefore my map not showing up is a result of my implementation of the library not a problem with react.

Here is my code for the index.android.js page

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import MapView from 'react-native-maps';

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
 map: {
    position: 'absolute',
    top: 0,
    left: 0,
  },
});

AppRegistry.registerComponent('roads', () => roads);

I'm also receiving this error message on my phone

warning encountered 4 times.
Show Stacktrace
Unable to symbolicate stack trace: The stack is null

This is the closest thread I've found regarding the error but it should be fixed... https://github.com/facebook/react-native/issues/8311

I've also checked my permissions for my API key on the google developers console and I still can't get my map to show up (it says that it's receiving API requests). So does anyone know how to implement google maps onto my app?

Answer 1

The Map component does not get any properties which may be used to determine its size. Therefore it is 0x0 pixel big and not to be seen. In order to fix this you need to add one of these properties to styles.map:

• flex
• height & width
• right & bottom