Consider adding touch support about react-images HOT 15 CLOSED

Resolved in v1 #199

from react-images.

First of all thanks for this nice library. I saw that you removed support for swiping in the source code. I reimplemented swiping and didn't see any errors or warnings. So my question: Is there still any problem with swipe support or could we reimplement it?

from react-images.

I'll confess that I'm a bit of a perfectionist. I wasn't happy with the previous implementation which recognised a swipe left/right interaction and just updated the image index.

I'd like to load the image on either side of the current index and implement properly with a smooth transition.

from react-images.

Ah ok, I can understand that. Perhaps I'll find some time this week to write something down, if that's welcome.

from react-images.

That would be great, looking forward to it :)

from react-images.

Ok, this turned out to be more complicated than I thought.

First I tried to use react-swipeable-views, but then I need to add all images before swiping. So all images will be loaded at the same time, which of course slows down loading of the visible image on slow connection and is problematic when there are a lot of images.

Then I tried to use react-swipeable. I pushed a branch to my fork. You can check it out here. It's not working properly, but perhaps showing a way how to handle swiping without loading all images. When a swipe is occurring, an image is added to the left or right of the current image and left margin is adjusted with animation. I needed to create a container around the images and corresponding footers and position the container absolutely. This brings a problem with the positioning of the close icon. Also swiping is only working properly when you wait for the animation to finish completely. Another swipe before that currently doesn't work, but that shouldn't be a problem to fix. On mobile I also see a flickering when the current image is updated, but perhaps using an array of images instead of left/right and main images could solve that problem.

Have a look and tell me what you think about it. The implementation is not too pretty for now, but I didn't want to spend more time on it for now, if you maybe don't like it anyway ;-)

from react-images.

To avoid the flickering you should add a key with the image index on the img's parent div.

imageLeft ?
                    <div key={currentImage-1}
                      className={css(classes.imageContainer)}
                      style={{ marginLeft: -window.innerWidth + deltaX }}
                    >
                      <img ...               />
                      <Footer ...        />
                    </div>
etc.

This way React will keep the same DOM elements for the same image src.

from react-images.

You can find a reimplementation of swipe support here. It's working pretty fine on my devices. What I did:

I wrapped all images in a container with width of window.innerWidth * numImages. Different images are shown by setting transform: translateX(deltaX). deltaX is recalculated on change of currentImage and during swiping, so we automatically get animations on clicking arrows or setting new currentImage in props, too.

Currently only images that are visible or next to the visible image are assigned a src attribute. Other images will not load until they pass a certain threshold (compare here)

There are still some performance issues (especially on real mobile devices), but I don't know if and how to fix them right now. One is caused by the size of the images in the example. Swiping is not really fluent sometimes. If you use images with smaller sizes (100px for example) the performance is much better. This seems of course reasonable...

Another problem is caused by setting and unsetting image src, especially when the images are not already in the cache.

Finally I think there might be some clean up necessary. But have a look yourself and let me know what you think

from react-images.

That's really cool @jkettmann!

There's a ways to go, but we're on the right track :)

from react-images.

Thanks. Tell me if I should create a pull request or how to continue

from react-images.

I'd like to take what you've done and merge it into a feature/swipe-support branch, rather than master. Is that possible?

from react-images.

Yes of course. Will you create that branch or did you mean feature/touch-swipe

from react-images.

Some time has passed now. Guess you have been busy. Just wanted to know if there is any news on this topic. I'm using my branch in production since more than a month now and don't know about any problems yet.

from react-images.

I'm very very enthusiastic about this feature. I hope you will have time to implement it

from react-images.

@jkettmann let's get this moving again. Please create a PR against feature/swipe-support from your branch swipe_with_transition.

from react-images.