react-native-image-mapper

react-native-image-mapper

React Native component to allow clickable areas on an image

Setup

$ yarn add react-native-image-mapper --save

Usage

Import the ImageMapper component from react-native-image-mapper and use it as seen below:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Image Mapper } from 'react-native-image-mapper';

const imageSource = require('./path/to/my/image.jpg');
const MAPPING = [
  {
    id: '0',
    name: 'First Area Name',
    shape: 'rectangle',
    width: 30,
    height: 40,
    x1: 80,
    y1: 500,
    prefill: 'red',
    fill: 'blue'
  },
  {
    id: '1',
    name: 'Second Area Name',
    shape: 'rectangle',
    x2: 155,
    y2: 540,
    x1: 125,
    y1: 500
  },
]

class MyReactNativeComponent extends Component {
  // ....
  render() {
    return (
      <ImageMapper
        imgHeight={500}
        imgWidth={250}
        imgSource={imageSource}
        imgMap={MAPPING}
        onPress={(item, idx, event) => this.onAnyAreaPress(item, idx, event)}
        containerStyle={styles.myCustomStyle}
        selectedAreaId="my_area_id"
      />
    );
  }
}

Properties

Prop Name	Type	Description	Example
imgSource	string	Image source url	required
imgMap	array	Mapping for image	See below
selectedAreaId	string or array	ID of the currently selected area or array of ids	'areaOne' or ['areaOne', 'areaTwo']
imgWidth	number	Image width	Displayed width
imgHeight	number	Image height	Displayed height
multiselect	boolean	Defaults to false. Allows for tracking of multiple selections.	true or false

When multiselect is set to true, selectedAreaId must be an array of ids rather than a string

Props callbacks	Called on	Signature
onPress	Click on an area in image	(item: object, index: number, event: object)

imgMap is an object describing touchable areas in the image.

Property	Type	Description
id	string	ID of the item used for selected or not selected
name	string	Name of the item
shape	string	Required - Either rectangle or circle
prefill	string	rgba(255, 255, 255, 0.5)
fill	string	rgba(255, 255, 255, 0.5)
x1	number	Required - Top Left X coordinate in rectangle or Center X coordinate in circle
y1	number	Required - Top Left Y coordinate in rectangle or Center Y coordinate in circle
x2	number	Required for Rectangle unless width (below) is specified - Bottom Left X coordinate in rectangle
y2	number	Required for Rectangle unless height (below) is specified - Bottom Left Y coordinate in rectangle
width	number	Required for Rectangle unless x2 (above) is specified - Width of rectangle
height	number	Required for Rectangle unless y2 (above) is specified - Height of rectangle
radius	number	Required for Circle - Radius of circle

Thanks

Big thanks to Coldiary and his React project

License

Copyright (c) 2019 Marc Salo MIT License See LICENSE for specifics