react-native-image-pin

React native image pin allows for adding a pin or a marker to any image and to zoom and move around the image as needed, this is helpfun for marking specific coordinates in layouts or blueprints or any kind of image

Installation

npm install react-native-image-pin @openspacelabs/react-native-zoomable-view
yarn add react-native-image-pin @openspacelabs/react-native-zoomable-view

Usage

import ImagePinView from "react-native-image-pin";

<ImagePinView
    editable={true}
    containerStyle={{borderWidth:1}}
    imageHeight={300}
    markerSize={0.15} //size based on the view height
    onMarkerAdded={(rx, ry) => {
        console.log(rx), console.log(ry);
    }}
    imageSource={require('./floorplan.jpg')} //or uri
    markerSource={require('./marker.png')} //or uri
/>

Props

  containerStyle: ViewStyle;
  markerX?: number;
  markerY?: number;
  markerSize: number;
  markerSource: ImageSourcePropType;
  parentScrollRef?: RefObject<ScrollView>;
  imageSource: ImageSourcePropType;
  editable: boolean;
  imageHeight: number;
  onMarkerAdded: (x: number, y: number) => void;

Contributing

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

License

MIT

GitHub

View Github