How to implement react-native-maps

Question

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,

But when I try this line,

import MapView from "react-native-maps";

it gives me this error, please find below screenshot.

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,

Almost all tutorials on react-native-maps are wildly out of date with installation instructions. For example, DO NOT USE react-native link is very clearly stated in the official project's installation docs. Always use the official docs first before following tutorials; especially when using native modules on React Native because of the fast changing environment. Start over and use the official installation instructions first and see if that works. — Michael Cheng
– Michael Cheng, Commented Mar 8, 2018 at 16:34

PPL · Accepted Answer · 2018-03-09 10:34:26Z

3

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.

Hope this works.

answered Mar 9, 2018 at 10:34

PPL

6,5551 gold badge13 silver badges32 bronze badges

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

4 Comments

Kartiikeya Over a year ago

I'm getting blank map.

PPL Over a year ago

What issues you are facing, is there any error? try zoom In/out

Kartiikeya Over a year ago

I'm getting empty map with only google at bottom of screen

PPL Over a year ago

It means map is loading successfully, please set mapview initial region

Jigar · Accepted Answer · 2018-03-08 06:44:14Z

0

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

answered Mar 8, 2018 at 6:44

Jigar

1,3749 silver badges20 bronze badges

2 Comments

Jigar Over a year ago

make sure u have installed all required dependencies

Kartiikeya Over a year ago

steps mentioned there only run to problems/issues.

Collectives™ on Stack Overflow

How to implement react-native-maps

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related