react-native-mechanic-map

React Native wrapper for Mechanic Map

Table of Contents

• Getting started
  • Other Required Steps
    • Android
    • iOS
• Usage
• Example App
  • Showcase
• Contributing
• License

Getting started

npm install react-native-mechanic-map

Dependencies

This library needs these dependencies to be installed in your project before you can use it:

npm install react-native-webview

Check react-native-webview installation guide.

Other Required Steps

Android

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

apply from: "../../node_modules/react-native-mechanic-map/react.gradle"

Rebuild your app.

iOS

This module does not require any extra step.

Usage

import * as React from 'react';
import MechanicMap, { MechanicMapHandle } from 'react-native-mechanic-map';

// ..

const App = () => {
  const mechanicMapRef = React.useRef<MechanicMapHandle>(null);

  return (
    <MechanicMap
      ref={mechanicMapRef}
      languageCode="en"
      payload={Payload}
      options={{
        rotate: 90,
        initialScaleFactor: 1.25,
      }}
      onMapLoaded={() => {
        // execute when map loaded
      }}
      onLevelSwitched={(newLevel) => {
        // execute when floor switched
      }}
      onLocationOpened={(target) => {
        // executes when any location opened
      }}
      onLocationClosed={() => {
        // executes when any location closed
      }}
      onNavigationCancalled={() => {
        // executes when navigation cancalled
      }}
      onLocationHighlighted={(target) => {
        // executes when location highlighted
      }}
      onMapError={(data) => {
        // executes when occours error on mechanic map
      }}
    />
  );
};

Select Floor:

mechanicMapRef?.current?.setFloor(floorNo: Number) => void;

Navigation:

import type {Route} from 'react-native-mechanic-map'

mechanicMapRef?.current?.showNavigation(
  route: Route,
  options?: {
    autoMode?: Boolean,
    zoomEnabled?: Boolean,
    showPins?: Boolean,
}) => void;

Close Navigation:

mechanicMapRef?.current?.closeNavigation(resetLevel?: Boolean) => void;

Show Location:

import type {LocationTypes} from 'react-native-mechanic-map'

mechanicMapRef?.current?.showLocation({
  id: String,
  type: LocationTypes,
  duration?: Boolean,
  closeNavigation?: Boolean,
  moveAndZoom?: Boolean,
}) => void;

Hide Location:

mechanicMapRef?.current?.hideLocation() => void;

Highlight Locations:

import type {LocationTypes} from 'react-native-mechanic-map'

mechanicMapRef?.current?.highlightLocations(
  ids: Array<String>,
  options?: {
    type?: LocationTypes,
    zoomEnabled?: Boolean,
    duration?: Number,
}) => void;

Show Pin on Map:

mechanicMapRef.current?.setCurrentLocation(
  x: Number,
  y: Number,
  options?: {
    floorNo?: Number,
}) => void;

Focus to Pin:

mechanicMapRef.current?.showCurrentLocation() => void;

Move Pin:

mechanicMapRef.current?.moveCurrentLocation(
  coords: Array<{ x: Number; y: Number }>,
  options?: {
    floorNo?: Number,
  }
) => void;

Remove Pin:

mechanicMapRef.current?.removeCurrentLocation() => void;

Zoom In:

mechanicMapRef.current?.zoomIn() => void;

Zoom Out:

mechanicMapRef.current?.zoomOut() => void;

Zoom To:

mechanicMapRef.current?.zoomTo(
  x: Number,
  y: Number,
  options?: {
    scale?: Number;
    duration?: Number;
    easing?: String;
}) => void;

Move To:

mechanicMapRef.current?.zoomTo(
  x: Number,
  y: Number,
  options?: {
    scale?: Number;
    duration?: Number;
    easing?: String;
}) => void;

Add Level:

import type {MechanicMapPayload} from 'react-native-mechanic-map'

mechanicMapRef.current?.addLevel(level: MechanicMapPayload) => void;

Reset Level:

mechanicMapRef.current?.resetLevel() => void;

Change Colors:

import type {Color} from 'react-native-mechanic-map'

mechanicMapRef.current?.changeColors({
  activeStores?: Color;
  inactiveStores?: Color;
  services?: Color;
  background?: Color;
  locations?: {
    [key: string]: Color;
}) => void;

Reload:

mechanicMapRef?.current?.reload() => void;

Example App

# clone the project
git clone https://github.com/ridvanaltun/react-native-mechanic-map.git

# go into the example folder
cd react-native-mechanic-map/example

# install dependencies
npm i

# run for android
npm run android

# or

# install pods for ios
cd ios && pod install && cd ..

# run for ios
npm run ios

Showcase

Preview
Test all features with action menu

Contributing

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

License

MIT