Skip to content

About

HERE Maps in React Native

Topics

Resources

Code of conduct

Contributing

Stars

116 stars

Watchers

6 watching

Forks

Latest commit

 

History

119 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-here-explore icon

react-native-here-explore

Integrate HERE Maps Into React Native

npm version license platform

Introduction

The react-native-here-explore library is designed to integrate HERE Maps SDK's features into React Native, one feature at a time. Crafted from scratch utilizing the latest native languages (Kotlin/Swift) and built on the React Native New Architecture, it ensures a streamlined installation process despite the manual approach required for the SDKs themselves.

Pedestrian route with markers across Berlin on the night map Car route between the same two markers Polyline drawn across Berlin Day map of North and Central America

Support

Macinroid is free. If it saves you some time, you can buy me a coffee on Ko-fi.

Buy Me a Coffee at ko-fi.com

Features

  • Map: Interactive maps with day, night, and satellite schemes
  • Marker: Custom image markers placed at any coordinate
  • Polyline: Solid or dashed lines drawn between coordinates
  • Polygon: Fill areas with coordinate lists or circles
  • Arrow: Directional arrows drawn along any path
  • Routing: Route calculation across ten transport modes
  • New Architecture: TurboModules built in Kotlin and Swift
  • Expo Plugin: Config plugin for streamlined SDK setup

Installation

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

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

See the Installation Guide for the full setup guide including HERE SDK downloads and platform configuration.

Example

import React from 'react';
import { Map, Marker } from 'react-native-here-explore';

export default function App() {
  return (
    <Map
      mapScheme="NORMAL_NIGHT"
      zoomValue={12}
      geoCoordinates={{ latitude: 31.6913827, longitude: -8.4413898 }}
    >
      <Marker
        geoCoordinates={{ latitude: 31.6913827, longitude: -8.4413898 }}
        image={require('./assets/pin.png')}
      />
    </Map>
  );
}

Documentation

Full documentation is available at react-native-here-explore.anyfikra.com.

Support

This library is free. If it saves you some time, you can buy me a coffee on Ko-fi.

Buy Me a Coffee at ko-fi.com

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT License — Copyright (c) 2023 AnyFikra

See LICENSE for full text.

About

HERE Maps in React Native

Topics

Resources

Code of conduct

Contributing

Stars

116 stars

Watchers

6 watching

Forks

Releases

Used by

Contributors

Languages