📸 React Native Zoomable Image Viewer

A lightweight React Native component that allows pinch-to-zoom on images without panning — just like product image zoom in e-commerce apps.

---

✨ Features

• 🔍 Pinch to zoom (no pan)
• 🎨 Customizable styles
• 📏 Minimum scale: 1.0
• 🖼️ Resize modes: 'contain', 'cover', 'stretch', etc.

---

📦 Installation

1npm install react-native-zoomable-image-viewer

---

🚀 Usage

🔹 Basic Example

1import { ImageZoomView } from 'react-native-image-zoom-view';
2
3<ImageZoomView
4  imageUrl="https://yourdomain.com/image.jpg"
5/>

---

🔹 Set Resize Mode

1import { ImageZoomView } from 'react-native-image-zoom-view';
2
3<ImageZoomView
4  imageUrl="https://yourdomain.com/image.jpg"
5  resizeMode="contain" // or "cover", "stretch", etc.
6/>

---

🔹 With Custom Styles

1import { ImageZoomView } from 'react-native-image-zoom-view';
2
3<ImageZoomView
4  imageUrl="https://yourdomain.com/image.jpg"
5  containerStyle={{ backgroundColor: '#fff' }}
6  imageContainerStyle={{ borderRadius: 10 }}
7  imageStyle={{ borderWidth: 2, borderColor: '#ccc' }}
8/>

---

🔹 Fullscreen Image Zoom

1import { ImageZoomView } from 'react-native-image-zoom-view';
2import { Dimensions } from 'react-native';
3
4const { width, height } = Dimensions.get('window');
5
6<ImageZoomView
7  imageUrl="https://yourdomain.com/fullscreen.jpg"
8  imageContainerStyle={{ width, height }}
9/>

---

🧩 Props

Prop	Type	Default	Description
imageUrl	string	required	URL of the image to display
resizeMode	ImageResizeMode	'contain'	Image resize mode (contain, etc.)
containerStyle	ViewStyle	undefined	Style for the outermost container
imageContainerStyle	ViewStyle	undefined	Style for the image wrapper
imageStyle	ImageStyle	undefined	Style for the image itself

---

🛡️ Requirements

• react-native >= 0.60
• react >= 16.8