react-native-sk-linkedmap

Create and show maps with position linking and more...

Usage

import React from 'react'
import { Alert, SafeAreaView } from 'react-native'
import LinkedMap, { TMap, TPosition } from 'react-native-sk-linkedmap'

const App = () => {
  const pos: TPosition[] = [
    // create positions with key, title, target and coordinates
  ]

  const [map, setMap] = useState<TMap>({
    key: 'mapexample',
    title: 'Map Example',
    imageSource: '',
    positions: [...pos],
  })

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'lightgray' }}>
      {_renderTestButtons()}
      <LinkedMap
        testID='linkedmap'
        map={map}
        editMode={false}
        hidePositions={false}
        showMenu={true}
        onChange={(map) => { setMap(map) }}
        onClick={(pos) => {
          let _text = `Target: ${pos?.target}`
          let _target = pos?.target
          if (typeof _target === 'object') {
            _text = Object.entries(_target)
              .map((entry) => entry[0] + ': ' + entry[1])
              .join('\n')
          }
          if (Array.isArray(_target)) {
            _text = `Targets [${pos?.target.length}]:\n${_target.join('\n')}`
          }
          Alert.alert(`Position: ${pos?.title}`, `${_text}`)
        }}
        showZoomButtons={true}
        zoomButtonsStyle={{ marginRight: 12, marginBottom: 10, padding: 5, fontSize: 20, width: 40, height: 40 }}
        title={'Example for LinkedMap'}
        titleStyle={{ backgroundColor: 'white', color: 'black', paddingHorizontal: 6, paddingVertical: 2 }}
      />
    </SafeAreaView>
  )
}

Parameter

activePosition [optional]

Type: TPosition
Active position is focused.

customAnimation [optional]

Type: typeof Animated.View
Allows the user to set own custom position animation.

editMode [optional]

Type: Boolean
Enables edit mode to edit map & positions.

hidePositions [optional]

Type: Boolean
If enabled, positions won't be visible on the map (only active position).

map

Type: TMap
Shows the map (and positions).

onChange (map) [optional]

Type: (TMap) => Void
Called when the map / positions are changed.

onClick (position) [optional]

Type: (TPosition) => Void
Called when a position is clicked/pressed.

positionStyle [optional]

Type: ViewStyle
Changes the style of the positions.

showMenu [optional]

Type: Boolean
Shows a menu button to edit maps & positions. Deprecated, use editMode instead.

showZoomButtons [optional]

Type: Boolean
Shows zoom-in, zoom-out & reset-zoom buttons (web-only).

style [optional]

Type: ViewStyle
Changes the style of the component.

testID [optional]

Type: String
Used to locate this component in end-to-end tests.

title [optional]

Type: String
Shows the title above the map.

titleStyle [optional]

Type: TextStyle
Changes the style of the title.

zoomButtonsStyle [optional]

Type: ViewStyle | TextStyle
Changes the style of the zoom buttons.