I have an array of images in a Swiper, where I can swipe through them, and when I click in on of them it open on a Modal (using Lightbox). But Lightbox doesn't have Pinch-to-Zoom or swiping.
So im looking for a solution to this. I already have a swiper, but when I open an image, I want to still be able to swipe through all the images (just like Facebook, you can view all the photos, or open one and swipe through them). In addition to this I need to be able to Pinch-to-Zoom.
Right now this is my code:
(Relevant 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>
Im using this library for the swiper https://github.com/leecade/react-native-swiper and I saw it has a PhotoView, but I couldn't get it to work.
A view component for react-native with pinch to zoom, tap to move and double tap to zoom capability. You can zoom everything, from normal images, text and more complex nested views.
React Pinch Zoom PanOn touch you can pinch-zoom and pan the zoomed image. On desktop you can 'pinch' by holding down your ALT-key and do a mousedown from center of inner content onto the edges.
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
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With