Double tap to zoom does not work

On touch screens in certain browsers, double tapping does not zoom images the way double clicking does:

• Firefox (Android and Windows): does not work
• Chrome (Android and Windows): does not work
• Samsung Internet on Android: does not work
• Edge: works
• IE11: works

Most end users will expect that double-tapping will zoom the image because that is the way nearly all image viewers with touch-enabled interfaces work (see the stock image viewer on Windows/iOS, for example).

In theory, this should be covered by the onDoubleClick event handler that is attached to the image div, but the touch handlers seem to prevent this from happening. Removing

onTouchStart={this.handleTouchStart}

from the ril-outer div confirms that double tap to zoom otherwise seems to works fine on Firefox, but there is no change in Chrome or Samsung Internet (pinch to zoom and swipe still work for some unknown-to-me reason, even without any of the touch handlers).

Different operating systems interpret double clicks slightly differently, and some systems such as Windows allow the user to change the double click speed. I don’t know if all browsers actually respect that setting for taps, but I don’t think it makes sense to implement double tap functionality ourselves if the onDoubleClick event can handle it.

However, I don’t know the best way to fix this, even after looking at the code for several hours. Any thoughts?

---

On an unrelated note, at over 1800 lines this component is very large and as a result is fairly difficult to decipher. Perhaps some functionality should be broken off into separate components?

[Shashank2406]

Fixed in my fork, also added some new props https://github.com/Shashank2406/lightbox-react

[Slapbox]

@Shashank2406 very cool! I’m excited to give it a try!