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