CODEWITHSUNDEEP
iosreact-nativemapsreact-native-iosreact-native-maps
PPL
PPL

Reputation: 6555

How to implement react-native-maps

Hope it can be silly question but as I'm new in react-native development, don't know how to get rid of this.

I want to put annotations on MapView & it seems this tutorial from react-community is the best way to do it.

I followed the guidelines from this tutorial, created react-native project, it works perfectly.

I run these commands to link react-native-maps,

npm install react-native-maps --save
react-native link

It gives me following output,

enter image description here

But when I try this line,

import MapView from "react-native-maps";

it gives me this error, please find below screenshot.

enter image description here

I tried every thing from top to bottom, clean cache, restarted Metro Bundler every thing but didn't get success yet.

These tutorials I have searched to implement MapView in react-native,

  1. https://medium.com/@gurusundesh/getting-started-with-react-native-mapview-5e0bd73aa602
  2. https://codeburst.io/react-native-google-map-with-react-native-maps-572e3d3eee14
  3. https://codedaily.io/tutorials/9/Build-a-Map-with-Custom-Animated-Markers-and-Region-Focus-when-Content-is-Scrolled-in-React-Native

Upvotes: 0

Views: 6939

Answers (2)

PPL
PPL

Reputation: 6555

It has been two days since I'm solving this issue. Finally got the solution.

Thanks to this tutorial.

Solved the issue by changing dependencies in package.json manually: Was:

"dependencies": {
    "react": "16.3.0-alpha.1",
    "react-native": "0.54.0",
    "react-native-maps": "0.20.1"
  },

Changed to

"dependencies": {
    "react": "16.0.0",
    "react-native": "0.51.0",
    "react-native-maps": "0.20.1"
  },

Then ran npm install & react-native-git-upgrade.

My App.js code is here.

render() {
    return (
      <View style={styles.container}>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          region={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
          }}
        ></MapView>
      </View>
    );
  }

Finally I got the output like this.

enter image description here

Hope this works.

Upvotes: 3

Jigar
Jigar

Reputation: 1374

i guess only link wont work in map you need to follow this instruction too

https://github.com/react-community/react-native-maps/blob/master/docs/installation.md

Upvotes: 0

Related Questions