13

React native image pin allows for adding a pin or a marker to any image and to z...

 3 years ago
source link: https://reactnativeexample.com/react-native-image-pin-allows-for-adding-a-pin-or-a-marker-to-any-image-and-to-zoom/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Images

React native image pin allows for adding a pin or a marker to any image and to zoom

Apr 18, 2022

1 min read

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

GitHub

View Github


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK