react-native - How to display map using react-native-maps

Question

I am trying to display a Map View using react-native-maps. The component appears to be displaying except it is blank.

Is it my stylesheet or am I calling the 'MapView' component right?

Here is the code:

var MapView = require('react-native-maps');

class Map extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView style={styles.map}
          initialRegion={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0,
              longitudeDelta: 0.0,
          }}
        />
      </View>

    );
  }
};


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

Have you tried setting the styles like in their documentation — G. Hamaide
– G. Hamaide, Commented Nov 21, 2016 at 8:27
I have a clarification. Can I able to search for two places in react-native-maps. Or it just show the map and I need to add additional package for this. — sejn
– sejn, Commented Jan 29, 2020 at 12:19

Vikram Belde · Accepted Answer · 2016-11-21 00:43:56Z

1

Run

$react-native link

from the project root directory to link the react-native-maps with your project. (or you can follow these manual steps listed here:https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md#option-3-manually )

answered Nov 21, 2016 at 0:43

Vikram Belde

1,1989 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

react-native - How to display map using react-native-maps

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related