Can I get hold of current zoom level?

[msageryd]

Is it possible to get hold of the current zoom level via an event? I'd like to know when the user tries to zoom in more than 100% so I can ask if the user wants to download the full res image from the server.

[Exilz]

That's an interesting feature. If someone feels like digging into this, I'll gladly review a PR.

[msageryd]

I have actually taken this quite a bit further in a very specialized fork of react-native-image-gallery.

Maybe some of the solutions will fit here? I needed to not only get the zoom level, but everything else about the gesture and current transform.

My version of Gallery.js defines this.imageResponder like this:

  this.imageResponder = {
    onStart: (evt, gestureState) => {
      const currentImageTransformer = this.getCurrentImageTransformer();
      const data = { evt, gestureState, viewTransformer: currentImageTransformer };
      !(this.props.onImageResponderStart && this.props.onImageResponderStart(data)) &&
        currentImageTransformer &&
        currentImageTransformer.onResponderGrant(evt, gestureState);
      if (this.props.onLongPress) {
        this._longPressTimeout = setTimeout(() => {
          this.props.onLongPress(gestureState);
        }, 600);
      }
    },
    onMove: (evt, gestureState) => {
      const currentImageTransformer = this.getCurrentImageTransformer();
      const data = { evt, gestureState, viewTransformer: currentImageTransformer };
      !(this.props.onImageResponderMove && this.props.onImageResponderMove(data)) &&
        currentImageTransformer &&
        currentImageTransformer.onResponderMove(evt, gestureState);
      clearTimeout(this._longPressTimeout);
    },
    onEnd: (evt, gestureState) => {
      const currentImageTransformer = this.getCurrentImageTransformer();
      const data = { evt, gestureState, viewTransformer: currentImageTransformer };
      !(this.props.onImageResponderEnd && this.props.onImageResponderEnd(data)) &&
        currentImageTransformer &&
        currentImageTransformer.onResponderRelease(evt, gestureState);
      clearTimeout(this._longPressTimeout);
    },
  };

I've added three callbacks to the props, each of which are called as per above.

These callbacks can be used like this:

onImageResponderMove = data => {
  const { evt, gestureState, viewTransformer } = data;
  console.log('onImageResponderMove--------------');
  console.log(viewTransformer.currentTransform());
  return false;
};

I.e. I get full control of the gesture and all information from the current ViewTransformer. If I chose to handle the gesture myself I just return true, which tells Gallery that the event is already handled and the gesture is not acted upon.

I use this for drawing vector graphics on images, but my original question about zoom level can also be handled this way.

The SwipeDown scenario (#40) can also be taken care of via these callbacks without adding more code to Gallery.

Would you like a PR with the new callbacks?

[Exilz]

Great work, I'd gladly accept a PR to add these callbacks.

Maybe you could work with @infostreams since he's already working on the vertical swipe events. Your work may overlap.

[msageryd]

I think it's a matter of taste, i.e. up to you to decide.

Maybe both my callbacks and @infostreams event should coexist. The regular user would probably use the prepackaged onSwipe event and the advanced user might go all in and use the gesture events.

[infostreams]

Hi, I think our work indeed overlaps, but my latest version basically undoes the 'onSwipe' event in favor of a more generic event that just provides me with the transform (containing translateX, translateY and zoom level) of the current image. If your code provides the same information I think we should go with your version, since I had to edit files in the 'libraries' folder to achieve it.

There is still at least one bug fix that I'd like to merge then, and one improvement, but it seems that your code (if you can provide the full code, please) is cleaner and more complete, so if that is indeed the case I'd prefer to just use yours.

[msageryd]

How would we go forward with this in the best way? I suppose there is a "Git way" of solving this when there is a lot going on at the same time? Here is my situation right now:

• I'm waiting for my Rect-fix PR (#45) to be merged
• I have a library-bundling-PR waiting, but I can't post it before the #45 is merged
• Most of my work with Gallery is in a special repo where I have changed a lot (including the gesture callback).
• I also have a solution for the image scale (the origin of this issue thread) that I would like to PR
• I also see interesting stuff in @infostreams fork that somewhat lines up with other changes I have done

[infostreams]

Seems like you have a bunch of different pull requests that need to be accepted before we can move on. But it seems like your work on the Gallery is unrelated to the Rect-fix PR and the library-bundling-PR? Any chance you can make that work available for me to have a look at (in a repository)?

In any case, I think separate issues should be separate pull requests. I have some work to do there too (my PR contains two changes that are unrelated to the original issue). @Exilz?