LUN-130: Zoom in photo with react-native-image-zoom-viewer

[ztefanie]

This pull request belongs to an issue on our bugtracker.
You can find it there by looking for an issue with the key which is mentioned in the title of this pull request.
It starts with the keyword LUN.

[ztefanie]

@Taggotty @klinzo

I have a problem with this feature and would appreciate if you can help me, as i tried to fix it for hours and are out of ideas.

Problem is: If going to VocabularyList and click on a item the modal opens, but has several bugs when using the go-to-next-word-button.
a) If opening a word with two images, swipe in the carousel to the second image and click the next-word-button, the currentIndex of the carousel is not resettet and no image is displayed
b) If opening the modal of a word with only one image and click on go-next-button and this word has to images, the second image is not displayed in the carousel.

I added a video of the Problem

output.mp4

[steffenkleinle]

I can't view your video.

Seems like this is not really supported but there is an open PR:
ascoders/react-native-image-viewer#477

A relatively simple workaround would be adding a key property that changes whenever imageUrls updates. A (maybe too) simple version would be to just use the id of the first image in the array, I guess it should change whenever imageUrls if always the whole array is replaced.

      <ImageViewer
        key={images[0].id}
        imageUrls={imagesUrls}
        renderImage={renderItem}
        renderIndicator={renderIndicator}
        backgroundColor={COLORS.lunesWhite}
      />

A more robust solution would probably be to somehow hash/add all image urls together, perhaps by concatenating all stringified image ids.

[sarahsporck]

I personally think the caroussel is sometimes barely visible. Maybe it is better to display the dots below the images. But that can also be an issue for later.

• Tested on Android Emulator

[steffenkleinle]

Tested on Android