Real image viewer with zoom and swiper

Question

I have an array of images in Swiper where I can swipe through them, and when I click on them, it opens on Modal (using Lightbox). But Lightbox does not have Pinch-to-Zoom or swiping.

So I'm looking for a solution to this. I already have swiper, but when I open the image, I want to continue to scroll through all the images (just like Facebook, you can view all the photos or open them and scroll through them). In addition to this, I need to be able to Pinch-to-Zoom.

Now this is my code:

(Corresponding code)

      <Swiper
        styles={{flex: 1}}
        height={250}
        renderPagination={this.renderPagination}
        paginationStyle={{
          bottom: -23, left: null, right: 10
        }} loop={false}>
          {this.state.imagens.map((item, index) => {
            return(
              <NetworkImage
                source={{uri: `URL/${item.Ficheiro}`, height:250, width: Dimensions.get('window').width}}>
                <Lightbox navigator={this.props.navigator}>
                  <Image
                    style={{ height: 300 }}
                    source={{ uri: `URL/${item.Ficheiro}` }}
                  />
                </Lightbox>
              </NetworkImage>
            );
          })}
      </Swiper>

I use this library for swiper https://github.com/leecade/react-native-swiper and I saw that it has a PhotoView, but I could not get it to work.

Answer 1

- .

react-native-image-zoom-viewer swiper. .

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

, , , ImageViewer , / .

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

, , Swiper :

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

, onPress, , ImageViewer Modal .

openModal :

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

:

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