# react-native-here

A native module to use Here Maps SDK with React Native

![](https://media.giphy.com/media/bbORXxwGhb7BWTHPF3/giphy.gif) | ![](https://media.giphy.com/media/4TrIodkaHvxts0KY4l/giphy.gif)

## Here Maps license

Go to [HERE website](https://developer.here.com/develop/mobile-sdks) and create your license key.

## Getting started

`$ npm install react-native-here --save`

### Mostly automatic installation

`cd ios && pod install`

## Extra Steps

## Android

In AndroidManifest.xml add:

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Then, open AndroidManifest.xml and update this section with your license.

```
    <!-- HEREMaps -->
    <meta-data
        android:name="com.here.android.maps.appid"
        android:value="YOUR-APP-ID-HERE" />

    <meta-data
        android:name="com.here.android.maps.apptoken"
        android:value="YOUR-APP-TOKEN-HERE" />

    <meta-data android:name="com.here.android.maps.license.key"
        android:value="YOUR-LICENSE-KEY-HERE"/>
```

## iOS

In `AppDelegate.m`: - Enter an app id, app code and license key.

```
@import NMAKit;

NSString* const kSampleAppID = @"";
NSString* const kSampleAppCode = @"";
NSString* const kSampleMapLicenseKey = @"";

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

  [NMAApplicationContext setAppId:kSampleAppID
                             appCode:kSampleAppCode
                          licenseKey:kSampleMapLicenseKey];
  return YES;
}

```

## Usage

## Android

```
import Here from 'react-native-here';

const markers = [
  {
    latitude: 41.0872972,
    longitude: 29.0023211,
    title: 'example 1',
    description: 'example 1 description',
  },

  {
    latitude: 41.0872972,
    longitude: 29.0023211,
    title: 'example 2',
    description: 'example 2 description',
  },
];


 <Here
    style={{flex: 1, backgroundColor: '#FFF'}}
    center={{
      latitude: 30.326498,
      longitude: 78.065121,
    }}
    markersList={markers}
    mapType="normal"
    initialZoom={17}
    tilt={180}
    onClickMarker={marker => {
      console.log(marker.title); // example 1
    }}
  />

```

## iOS

```
import Here from 'react-native-here';

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

this.state = {
  routeParams: {
    OriginLat: 0,
    OriginLng: 0,
    DestinationLat: 0,
    DestinationLng: 0,
  },
  initCoords: {
    Lat: 40.668727,
    Lng: -73.99285,
  },
  ButtonText: 'Create Route',
  switchView: false,
};
this.createRoute = this.createRoute.bind(this);


createRoute() {
  if (this.state.ButtonText !== 'Navigate') {
    this.setState({
      routeParams: {
        OriginLat: 40.668727,
        OriginLng: -73.99285,
        DestinationLat: 41.07064,
        DestinationLng: -71.860219,
      },
      ButtonText: 'Navigate',
    });
  } else {
    sleep(100).then(() => NativeModules.Here.Action('Navigate'));
  }
}

<Here
  InitCoords={this.state.initCoords}
  routeParams={this.state.routeParams}
  style={{
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#FF0000',
  height: 400,
  width: 400,
  }}
/>

```