React Native Maps library

I have problems with installing react native maps library, when I type:

npm install react-native-maps --save

error shows:

react-native-maps error

dependencies:

"react": "15.3.2",  
"react-native": "0.36.0"

As Rishabh says, you should upgrade to the latest versions of react, react-native and react-native-maps.

Depending on how complex your project is, I often find the easiest way to upgrade is to create a brand new, clean project:

react-native init MyProjectName

and then install react-native maps (and another other dependencies)

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

and then copy across all your Javascript source code into the new project.

It seems that I had some problems with build.gradle and settings.gradle, corrected those parts and now its working

You can upgrade it to following dependency

"react": "15.4.1",
"react-native": "^0.39.0"

To upgrade react native to newest version you can follow offical doc. I have used "Alternative" section mention in React native blog.

After upgrade your react native follow below steps:

  1. Install react native map using following command npm install react-native-maps --save (for reference)
  2. Use command react-native link to link react-native-maps resource with project
  3. After linking to project make sure it's linked properly by checking at following files
  4. Go to android/app/build.gradle and check following entry is there or not

    dependencies {
    compile project(':react-native-maps') compile fileTree(dir: "libs", include: ["*.jar"]) compile "com.android.support:appcompat-v7:23.0.1" compile "com.facebook.react:react-native:+" // From node_modules }

  5. in android/settings.gradle react-native-maps project should be included

    include ':react-native-maps'
    project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/android')
    
  6. In android/app/src/main/java/com//MainApplication.java react-native-maps package should be registered.

    import com.airbnb.android.react.maps.MapsPackage;
     ...
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new MapsPackage()
        );
    }
    
  7. go to android/app/src/main/AndroidManifest.xml add following under application tag.

Let me know if you still get error. Please share the important code as well.

You should first upgrade react and react native .If you are building app from scratch then go with

"react": "15.4.2", "react-native": "^0.41.0" then install "npm i react-native-maps --save "

then use the docs from https://github.com/airbnb/react-native-maps to setup the map modules in native component . before starting the app do react-native link .

upgrade to the latest versions of react, react-native and react-native-maps.

 npm install --save react-native-maps
 (or Yarn add react-native-maps)
  react-native link

make sure react-native verion upgrade

You can see my demo project on github https://github.com/krishna201/react-native-maps/tree/master

It is very complicated. I myself had trouble.

First update SDKs using Android Studio (In Case of Android).

Create a RN project. Open project using Android Studio / Eclipse with android folder in the RN project director.

Update the gradle version of the project.

Refer here. https://www.youtube.com/watch?v=c0P87WblPKU

Update the build.gradle files both in app specific and project specific so that it uses implementation.

Then install react-native-maps. Manually update the android and iOS native files as they instructed. It will work.

Comments

Popular posts from this blog

Meaning of `{}` for return expression

Get current scroll position of ScrollView in React Native

flutter websocket connection issue