Merge pull request #302 from pt7892/master

Added onMove prop to ImageZoom

Author: ascoders

README.md

@@ -86,6 +86,8 @@ export default class App extends React.Component {
 | loadingRender          | function<br><br>`() => React.ReactElement<any>`                                        | no       | placeholder for loading                                                                                                                                                                                                              | `() => null`                                              |
 | onSaveToCamera         | function<br><br>`(index?: number => void`                                              | no       | The callback for save to camera                                                                                                                                                                                                      | `() => {}`                                                |
 | onChange               | function<br><br>`(index?: number => void`                                              | no       | When the image changed                                                                                                                                                                                                               | `() => {}`                                                |
+| onMove                 | ( position: [IOnMove](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts) )=>void | reports movement position data (helpful to build overlays)                                                                                                            | ()=> {}      |
+
 | saveToLocalByLongPress | boolean                                                                                | no       | Enable save to camera when long press                                                                                                                                                                                                | `true`                                                    |
 | onClick                | function<br><br>`(onCancel?: function) => void`                                        | no       | Onclick                                                                                                                                                                                                                              | `(onCancel) => {onCancel()}`                              |
 | onDoubleClick          | function<br><br>`(onCancel?: function) => void`                                        | no       | OnDoubleClick                                                                                                                                                                                                                        | `(onCancel) => {onCancel()}`                              |

demo/App.js

@@ -53,6 +53,7 @@ export default class Main extends Component {
             onSwipeDown={() => {
               console.log('onSwipeDown');
             }}
+            onMove={data => console.log(data)}
             enableSwipeDown={true}
           />
         </Modal>

src/image-viewer.component.tsx

@@ -469,6 +469,7 @@ export default class ImageViewer extends React.Component<Props, State> {
           maxOverflow={this.props.maxOverflow}
           horizontalOuterRangeOffset={this.handleHorizontalOuterRangeOffset}
           responderRelease={this.handleResponderRelease}
+          onMove={this.props.onMove}
           onLongPress={this.handleLongPressWithIndex.get(index)}
           onClick={this.handleClick}
           onDoubleClick={this.handleDoubleClick}
@@ -537,6 +538,7 @@ export default class ImageViewer extends React.Component<Props, State> {
               maxOverflow={this.props.maxOverflow}
               horizontalOuterRangeOffset={this.handleHorizontalOuterRangeOffset}
               responderRelease={this.handleResponderRelease}
+              onMove={this.props.onMove}
               onLongPress={this.handleLongPressWithIndex.get(index)}
               onClick={this.handleClick}
               onDoubleClick={this.handleDoubleClick}

src/image-viewer.type.ts

@@ -2,6 +2,14 @@ import * as React from 'react';
 import { Image, ImageURISource, Text, View, ViewStyle } from 'react-native';
 import { simpleStyle } from './image-viewer.style';
 
+interface IOnMove {
+  type: string;
+  positionX: number;
+  positionY: number;
+  scale: number;
+  zoomCurrentDistance: number;
+}
+
 export class Props {
   /**
    * 是否显示
@@ -112,6 +120,10 @@ export class Props {
     //
   };
 
+  public onMove?: (position?: IOnMove) => void = () => {
+    //
+  };
+
   /**
    * 自定义头部
    */