[Bug]: Horizontal panning not working

[MaRaSu]

Summary

With ResumableZoom and example code from the module docs I can pinch zoom and pan vertically, but horizontal panning is not working: it either does not pan at all (example code) or with my own images and testing different props I could get some horizontal panning, but not really working properly and also I got sometimes weird effects where Image started to flip between centered image and horizontally panned image (have videos of those if needed).

Happy to help in debugging to identify the root cause of the problem.

Environment

Expo SDK 51, expo router v3 react-native-gesture-handler 2.16.2. react-native-reanimated 3.10.1 react-native-zoom-toolkit 3.1.0

Expo dev build, dev-mode, tested on iPhone 14 with iOS 17.6.1

Steps to Reproduce

1. Copy-paste ResumableZoom example from module documentation as-is, put it into a file which is defined as a Stack.Screen for Expo Router v3
2. Navigate to said screen and try to pinch zoom and pan the image

[Glazzes]

Your issue sounds quite strange to me, please share me the videos you've taken and your code in case you've made any type of modification to the base example on the docs.

[MaRaSu]

@Glazzes please find attached the video on flipping. However please note that this error state is a lesser problem. The main issue is that I cannot get any horizontal panning working. I will next try to isolate the problem into a Expo Snack. However should that fail, I would be interested to learn what things to try or how to debug.

https://github.com/user-attachments/assets/8aa74a45-7e48-4e55-8875-af6c16429f64

Here is the base example from docs that I tested (and I do not get horizontal panning for that either). I embedded it as a Stack navigation screen in my Expo router v3 based App.

import React from 'react';
import { Image, View, useWindowDimensions } from 'react-native';
import { ResumableZoom, getAspectRatioSize, useImageResolution } from 'react-native-zoom-toolkit';

const uri =
    'https://assets-global.website-files.com/63634f4a7b868a399577cf37/64665685a870fadf4bb171c2_labrador%20americano.jpg';

const App = () => {
    const { width } = useWindowDimensions();

    // Gets the resolution of your image
    const { isFetching, resolution } = useImageResolution({ uri });
    if (isFetching || resolution === undefined) {
        return null;
    }

    // An utility function to get the size without compromising the aspect ratio
    const imageSize = getAspectRatioSize({
        aspectRatio: resolution.width / resolution.height,
        width: width
    });

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <ResumableZoom maxScale={resolution}>
                <Image source={{ uri }} style={imageSize} resizeMethod={'scale'} />
            </ResumableZoom>
        </View>
    );
};

export default App;

[Glazzes]

@MaRaSu Nice catch, I just fucked up the example in the docs real bad. I forgot that if you have the {flex: 1, justifyContent: "center", alignItem: "center"} style in the parent component it can not get measured... So you just need to remove justifyContent and alignItemsstyle properties from the View enclosing ResumableZoom or remove that view entirely.

I will update the docs right now.

[MaRaSu]

@Glazzes thanks for quick replies! Removing those style props was an instant fix, now zooming works very nicely indeed.