Display issues on Android - Nexus 5

[akontaroudis]

First of all thank you for this package, on iOS it works very well based on testing done so far.

On Android (6.1 running on Nexus 5) on the other hand there are a lot of issues. It's difficult to explain but please see the video below:

Issues are:

1. It doesn't move between images. You can see the header indicator always stays as 1/2
2. You can drag the image way beyond the screen
3. Images don't stay aligned when moving
4. Not shown on the video but if saveToLocalByLongPress is enabled you cannot move the images at all as the popup appears as soon as the screen is touched

As you can see from video itself I've pretty much disabled everything to test it with the default settings:

<Modal visible={this.props.isVisible} transparent={true}>
  <ImageViewer
     imageUrls={images}
     saveToLocalByLongPress={false}
  />
</Modal>

Where the images are:

let images = this.props.images.map(image => ({
      url: pathToUri(getImagePath(image)),
      width: 2448,
      height: 3264,
    }));

The dimensions are hardcoded to the actual image size. Please note that these are images taken from the camera. I have also tried playing around with the dimensions, in case that's the problem, setting them to the screen size with no luck though.

[akontaroudis]

After a lot of research I found out that the bug is actually related to the saveToLocalByLongPress which I always had to set to false. The problem with the react-native-image-zoom package is that on specifically the Nexus 5 device it believes all presses are long presses, and thus on onPanResponderRelease the below always evaluates to true:

if (this.isLongPress) {
  return;
}

This code is on: https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.component.tsx#L433

causing it to never report moves of images. Commenting out the above if statement makes this package work like a charm again.

Anyway I'll close this bug as it's really a problem of 'react-native-image-view'

[akontaroudis]

This is embarrassing but I have to write it here in case it helps someone else running into the same problem. The problem was actually that I was running on debug mode and not having the phone to sync the time automatically. This meant that setTimeout was obviously not going to work properly!

The react-native-image-zoom does rely on setTimeout to calculate when the press is a longPress, see:

if (this.longPressTimeout) {
  console.log('Clearing timeout');
  clearTimeout(this.longPressTimeout);
}

this.longPressTimeout = setTimeout(() => {
  console.log('Setting long press');
  this.isLongPress = true;
  if (this.props.onLongPress) {
    this.props.onLongPress();
  }
}, this.props.longPressTime);

So my computer and phone being out of sync caused the timeout to be called instantly and thus setting the long press on every interaction with the images.

Embarrassing and frustrating, but just FYI for anyone that runs into this issue!