React-Native image viewer with zoom and swiper

I've been trying to implement something similar to this as well.

I'm using react-native-image-zoom-viewer for the zoomed in mode after clicking one of the pictures in the swiper. Within the modal, you can zoom in and out an image while swiping between images.

https://www.npmjs.com/package/react-native-image-zoom-viewer

I haven't fully implemented the solution yet but it seems you can just wrap the ImageViewer component in any Modal that you can open/close it programmatically.

<Modal visible={this.state.isModalOpened} transparent={true}>
   <ImageViewer imageUrls={images} index={this.state.currentImageIndex}/>
</Modal>

And with the modal somewhere sitting in your page, for the Swiper you can map over your images and return clickable images as follows:

<View style={styles.slide} key={index}>
   <TouchableWithoutFeedback onPress={() => {this.openModal(index)}}>
     <Image
       resizeMode="cover"
       style={styles.image}
       source={{ uri: img.url }}
     />
   </TouchableWithoutFeedback>
</View>

As seen above, each image is wrapped by an onPress that opens the modal according to the image index, so it opens the ImageViewer Modal on the right photo.

And openModal should look something like this:

function openModal(index) {
   this.setState({isModalOpened: true, currentImageIndex: index })
}

And the state should be:

this.state={
  isModalOpened: false,  //Controls if modal is opened or closed
  currentImageIndex: 0   //Controls initial photo to show for modal
}