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?

On an emulator to run the Maps you'll have to install Google Play services too. Did you try to log while running the app? In one Tab of your terminal run the following code adb logcat '*:S' ReactNative:V ReactNativeJS:V -d > Desktop/log.txt and run your app from another tab. — Tushar Khatiwada
– Tushar Khatiwada, Commented Jul 26, 2016 at 3:04

Daniel Schmidt · Accepted Answer · 2016-07-26 11:36:30Z

8

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

answered Jul 26, 2016 at 11:36

Daniel Schmidt

12k5 gold badges43 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Carl Over a year ago

Yes, setting eg. flex: 1 on the MapView should work.

Curtis Chong Over a year ago

Thanks! And to anyone else, you have to remove the <view> tags and set the width and height to null to get the map to become full screen.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related