antonKalinin / react-native-image-view

Modal component to view images with zoom
https://expo.io/@antonkalinin/react-native-image-view
MIT License
325 stars 101 forks source link

Jumps on first press #36

Open davidbiller opened 5 years ago

davidbiller commented 5 years ago

i fixed your onGestureMove

i added const justPressed = Math.abs(dy) < PRESS_TOLLERANCE; justPressed ? null : this.imageTranslateValue.y.setValue(y + dy)

`onGestureMove(event: NativeEventType, gestureState: GestureState) { if (this.isScrolling && this.state.scrollEnabled) { return; }

    if (this.currentTouchesNum === 1 && event.touches.length === 2) {
        this.initialTouches = event.touches;
    }

    const {
        images,
        imageIndex,
        imageScale,
        imageTranslate,
        screenDimensions,
    } = this.state;
    const {screenHeight} = screenDimensions;
    const {touches} = event;
    const {x, y} = imageTranslate;
    const {dx, dy} = gestureState;
    const imageInitialScale = this.getInitialScale();
    const {height} = images[imageIndex];

    if (imageScale !== imageInitialScale) {
        this.imageTranslateValue.x.setValue(x + dx);
    }

    // Do not allow to move image vertically until it fits to the screen
    if (imageScale * height > screenHeight) {
        this.imageTranslateValue.y.setValue(y + dy);
    }

    // if image not scaled and fits to the screen
    if (
        scalesAreEqual(imageScale, imageInitialScale) &&
        height * imageInitialScale < screenHeight
    ) {
        const backgroundOpacity = Math.abs(
            dy * BACKGROUND_OPACITY_MULTIPLIER
        );

        const justPressed = Math.abs(dy) < PRESS_TOLLERANCE;
        justPressed ? null : this.imageTranslateValue.y.setValue(y + dy)
        this.modalBackgroundOpacity.setValue(
            backgroundOpacity > 1 ? 1 : backgroundOpacity
        );
    }

    const currentDistance = getDistance(touches);
    const initialDistance = getDistance(this.initialTouches);
    const scrollEnabled = Math.abs(dy) < FREEZE_SCROLL_DISTANCE;
    this.setState({scrollEnabled});

    if (!initialDistance) {
        return;
    }

    if (touches.length < 2) {
        return;
    }

    let nextScale = getScale(currentDistance, initialDistance) * imageScale;

    if (nextScale < imageInitialScale) {
        nextScale = imageInitialScale;
    } else if (nextScale > SCALE_MAXIMUM) {
        nextScale = SCALE_MAXIMUM;
    }

    this.imageScaleValue.setValue(nextScale);
    this.currentTouchesNum = event.touches.length;
}`

would be nice if you can check it and add it too...

sharoneh commented 5 years ago

What's the value of the PRESS_TOLERANCE constant? Thanks for this, by the way!