Skip to content

Latest commit

 

History

History
213 lines (170 loc) · 8.01 KB

installation.md

File metadata and controls

213 lines (170 loc) · 8.01 KB
Raw

Installation

First, download the library from npm:

npm install react-native-maps --save

Second, install the native dependencies: You can use rnpm (now part of react-native core via link) to add native dependencies automatically then continue the directions below depending on your target OS.

react-native link

This installation should work in physical devices. For Genymotion, be sure to check Android installation about Google Play Services

iOS

Option 1: CocoaPods - Same as the included AirMapsExplorer example

  1. Setup your Podfile like the included example/ios/Podfile, replace all references to AirMapExplorer with your project name, and then run pod install. (If you do not need GoogleMaps support for iOS, then you can probably completely skip this step.)
  2. Open your project in Xcode workspace
  3. Drag the following folder into your project:
    • node_modules/react-native-maps/ios/AirMaps/
  4. If you need GoogleMaps support also drag this folder into your project:
    • node_modules/react-native-maps/ios/AirGoogleMaps/

Option 2: CocoaPods

This is now considered the old way because it will only work if you don't have use_frameworks! in your Podfile.

To install using Cocoapods, simply insert the following line into your Podfile:

pod 'react-native-maps', :path => '../node_modules/react-native-maps'

If you need GoogleMaps support in iOS also add this line:

pod 'react-native-google-maps', :path => '../node_modules/react-native-maps'

Now if you need GoogleMaps support you will also have to add a bunch of other stuff to your Podfile. See the *comments in the included example/ios/Podfile which explain the rest.

After your Podfile is setup properly, run pod install.

Option 3: Manually

This was already done for you if you ran "react-native link"

  1. Open your project in Xcode, right click on Libraries and click Add Files to "Your Project Name" Look under node_modules/react-native-maps/ios and add AIRMaps.xcodeproj.
  2. Add libAIRMaps.a to `Build Phases -> Link Binary With Libraries.
  3. Click on AIRMaps.xcodeproj in Libraries and go the Build Settings tab. Double click the text to the right of Header Search Paths and verify that it has $(SRCROOT)/../../react-native/React as well as $(SRCROOT)/../../react-native/Libraries/Image - if they aren't, then add them. This is so Xcode is able to find the headers that the AIRMaps source files are referring to by pointing to the header files installed within the react-native node_modules directory.
  4. Whenever you want to use it within React code now you can: var MapView = require('react-native-maps');

Android

  1. In your android/app/build.gradle add:

    This step is not necessary if you ran "react-native link"

    ...
dependencies {
  ...
  compile project(':react-native-maps')
}

    If you have a different play serivces than the one included in this library, use the following instead (switch 10.0.1 for the desired version):

    ...
dependencies {
    ...
    compile(project(':react-native-maps')){
        exclude group: 'com.google.android.gms', module: 'play-services-base'
        exclude group: 'com.google.android.gms', module: 'play-services-maps'
    }
    compile 'com.google.android.gms:play-services-base:10.0.1'
    compile 'com.google.android.gms:play-services-maps:10.0.1'
}

  2. In your android/settings.gradle add:

    This step is not necessary if you ran "react-native link"

    ...
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/android')

  3. Specify your Google Maps API Key:

    For development, you need to get a API Key. Go to https://console.developers.google.com/apis/credentials to check your credentials.

    Add your API key to your manifest file (android\app\src\main\AndroidManifest.xml):

    <application>
    <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
    <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="Your Google maps API Key Here"/>
</application>

    Note: As shown above, com.google.android.geo.API_KEY is the recommended metadata name for the API key. A key with this name can be used to authenticate to multiple Google Maps-based APIs on the Android platform, including the Google Maps Android API. For backwards compatibility, the API also supports the name com.google.android.maps.v2.API_KEY. This legacy name allows authentication to the Android Maps API v2 only. An application can specify only one of the API key metadata names. If both are specified, the API throws an exception. Source: https://developers.google.com/maps/documentation/android-api/signup

  4. Ensure that you have Google Play Services installed:

  • For Genymotion you can follow these instructions.
  • For a physical device you need to search on Google for 'Google Play Services'. There will be a link that takes you to the Play Store and from there you will see a button to update it (do not search within the Play Store).

Troubleshooting

If you have a blank map issue, (#118, #176, #684), try the following lines :

On iOS:

You have to link dependencies with rnpm and re-run the build:

  1. react-native link
  2. react-native run-ios

On Android:

  1. Be sure to have new MapsPackage() in your MainApplication.java :

    This step is not necessary if you ran "react-native link"

    import com.airbnb.android.react.maps.MapsPackage;
...
@Override
     protected List<ReactPackage> getPackages() {
         return Arrays.<ReactPackage>asList(
                 new MainReactPackage(),
                 new MapsPackage()
         );
     }

  2. Set this Stylesheet in your map component

    import MapView from 'react-native-maps';
...
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

module.exports = class MyApp extends React.Component {
  render() {
    const { region } = this.props;
    console.log(region);

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

  3. Run "android" and make sure all packages are up-to-date.

  4. If not installed yet, you have to install the following packages :

    • Extras / Google Play services
    • Extras / Google Repository
    • Android 6.0 (API 23) / Google APIs Intel x86 Atom System Image Rev. 19

  5. Check manual installation steps if you didn't run "react-native link"

  6. Go to Google API Console and select your project, or create one. Then, once enabled, select Go to credentials. Select Google Maps Android API and create a new key. Enter the name of the API key and create it.

  7. Clean the cache :

 watchman watch-del-all
 npm cache clean

  1. When starting emulator, make sure you have enabled Wipe user data.

  2. Run react-native run-android

  3. If you encounter com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim, then clear build folder.

 cd android
 gradlew clean
 cd ..