Skip to content

Latest commit

 

History

History
135 lines (89 loc) · 4.23 KB

INSTALLATION.md

File metadata and controls

135 lines (89 loc) · 4.23 KB
Raw

Installation

Before we can use the HERE SDKs properlly, we have to do some manual setup to get it to work.

Installing the library

# using npm
npm install react-native-maps-here

# using yarn
yarn add react-native-maps-here

1. Sign-up to HERE Platform

First you need to get the access keys from the official HERE web portal.

Keep in mind that providing the billing info is important to unlock the SDKs for both iOS and Android

2. Register a new app

Go to this link and regiter a new application.

After that it should bring you to a menu with the tab Credentials selected by default.

On the left menu select OAuth 2.0 and click Create credentials

A popup menu will showup saying: Your access key ID and secret were created with a Download button to get the credentials

The content of your downloaded file should be like this:

here.user.id = YOUR_USER_ID
here.client.id = YOUR_APP_ID
here.access.key.id = ACCESS_KEY_ID
here.access.key.secret = ACCESS_KEY_SECRET
here.token.endpoint.url = https://account.api.here.com/oauth2/token

This step is important to get the access keys that you will then use to initialize the SDKs later on.

3. Download the HERE SDK Explore Edition

On the Page above you will see a list of SDKs. The ones you need are:

  • HERE SDK Explore Edition for Android
  • HERE SDK Explore Edition for iOS

If you signed in and added billing info, you should see a Get now button to download each SDK

4. Extract and move the SDKs to your project

  • Android

After you download and extract the zip file you should see a .aar file amongst many others

Copy that file and place it on your-project/android/app/libs folder

Then go to your your-project/android/app/build.gradle file and edit the dependencies block like bellow

dependencies {
    // ... other react dependencies

    // Import HERE SDK
    implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'])
}

  • iOS

After you download and extract the zip file you should see a .xcframework folder (heresdk.xcframework)

Copy that file and place it on your-project/ios/Frameworks folder.

On the same folder (ie your-project/ios/Frameworks) create a podspec file with the name heresdk.podspec

and past in the following:

Pod::Spec.new do |s|
  s.name         = "heresdk"
  s.version      = "1.0.0"
  s.summary      = "Description of HERE SDK"
  s.homepage     = "https://platform.here.com/portal/sdk"
  s.author       = { "HERE Team" => "author@example.com" }
  s.source       = { :http => 'http://example.com/heresdk.zip' }
  s.platform     = :ios
  s.ios.vendored_frameworks = 'heresdk.xcframework'
end

Note that: The information in this podspec doesn't have to be exact since we only want Cocoapods to recognise the xcframework

After that open your-project/ios/Podfile and add the library you just moved:

target 'MapsHereExample' do
  # ... some stuff

  use_react_native!(
    # ...some other stuff
  )

  # Import HERE SDK
  pod 'heresdk', :path => 'Frameworks'
end

Finaly in your terminal run pod install

If the app doesn't run properly on iOS, then you have to manualy add react-native-maps-here to the Target Membership of heresdk. You do so by opening xcode and naviagting to the heresdk.xcframework package inside the Pods/Developement Pods/heresdk, then checking react-native-maps-here on the right menu like shown in the image bellow:

XCode HERE SDK Target Membership

Athenticate using credentials

After setting up the SDKs on both platforms, we should initialize it using the ACCESS_KEY_ID and ACCESS_KEY_SECRET that we retrived previously.

Just go to your index.ts file and add this before the AppRegistry.registerComponent(appName, () => App):

import { MapsHereConfig } from 'react-native-maps-here';

MapsHereConfig.initializeHereSDK(
  'YOUR_ACCESS_KEY_ID',
  'YOUR_ACCESS_KEY_SECRET'
);

If all done correctly, you should have HERE Maps working