@duocvo/react-native-gesture-image

This library provides a highly customizable and performant image viewer component for React Native applications. It supports advanced gestures such as pinch-to-zoom, panning, and double-tap to zoom in and out, making it ideal for creating rich, interactive image viewing experiences. Built with react-native-gesture-handler for handling advanced touch gestures like pinch and pan, and react-native-reanimated for providing smooth animations for zooming and panning.

Prerequisites

This library relies on the following dependencies to enable gesture and animation support (you need to setup these library below)

• react-native-gesture-handler: Handles advanced touch gestures like pinch and pan.
• react-native-reanimated: Provides smooth animations for zooming and panning.

Installation

1npm install @duocvo/react-native-gesture-image
2#or
3yarn add @duocvo/react-native-gesture-image

Usage

1import React, { useRef } from 'react';
2import { View, StyleSheet, TouchableOpacity, Image } from 'react-native';
3import Gallery from '@duocvo/react-native-gesture-image';
4
5export default function App() {
6  const galleryRef = useRef(null);
7  
8  const images = [
9    { uri: 'https://picsum.photos/200/300' },
10    { uri: 'https://picsum.photos/200/300' },
11    { uri: 'https://picsum.photos/200/300' },
12  ];
13  
14  return (
15    <View style={styles.container}>
16      {/* Thumbnail images that open the gallery when tapped */}
17      <View style={styles.thumbnails}>
18        {images.map((image, index) => (
19          <TouchableOpacity 
20            key={index} 
21            onPress={() => galleryRef.current?.show(index)}
22          >
23            <Image source={image} style={styles.thumbnail} />
24          </TouchableOpacity>
25        ))}
26      </View>
27      
28      {/* Gallery component */}
29      <Gallery 
30        ref={galleryRef}
31        data={images} 
32      />
33    </View>
34  );
35}
36
37const styles = StyleSheet.create({
38  container: {
39    flex: 1,
40  },
41  thumbnails: {
42    flexDirection: 'row',
43    flexWrap: 'wrap',
44    padding: 10,
45  },
46  thumbnail: {
47    width: 100,
48    height: 100,
49    margin: 5,
50  },
51});

Props

Gallery

Prop	Type	Default	Description	Required
data	array	[]	Array of image sources	Yes
style	object		Custom style for the gallery container	No
imageStyle	object		Custom style for each image	No
containerStyle	object		Custom style for the gallery container	No
contentContainerStyle	object		Custom style for the content container	No
backdropColor	string	black	Background color of the gallery	No
initialIndex	number	0	Initial index of the image to display	No
enablePanDownToClose	boolean	false	Enable closing the gallery by panning down	No
renderHeader	function		Custom header component	No
renderFooter	function		Custom footer component	No

Gallery Ref Methods

Method	Parameters	Description
show	index?: number	Show the gallery, optionally at a specific index
hide	-	Hide the gallery

Examples

Basic Usage with Header and Footer

1import React, { useRef } from 'react';
2import { View, StyleSheet, TouchableOpacity, Image, Text } from 'react-native';
3import Gallery from '@duocvo/react-native-gesture-image';
4
5export default function App() {
6  const galleryRef = useRef(null);
7  
8  const images = [
9    { uri: 'https://picsum.photos/200/300' },
10    { uri: 'https://picsum.photos/200/300' },
11    { uri: 'https://picsum.photos/200/300' },
12  ];
13  
14  return (
15    <View style={styles.container}>
16      {/* Thumbnail images that open the gallery when tapped */}
17      <View style={styles.thumbnails}>
18        {images.map((image, index) => (
19          <TouchableOpacity 
20            key={index} 
21            onPress={() => galleryRef.current?.show(index)}
22          >
23            <Image source={image} style={styles.thumbnail} />
24          </TouchableOpacity>
25        ))}
26      </View>
27      
28      {/* Gallery component with custom header and footer */}
29      <Gallery 
30        ref={galleryRef}
31        data={images}
32        renderHeader={() => (
33          <View style={styles.header}>
34            <TouchableOpacity onPress={() => galleryRef.current?.hide()}>
35              <Text style={styles.headerText}>Close</Text>
36            </TouchableOpacity>
37          </View>
38        )}
39        renderFooter={() => (
40          <View style={styles.footer}>
41            <Text style={styles.footerText}>Image Caption</Text>
42          </View>
43        )}
44      />
45    </View>
46  );
47}
48
49const styles = StyleSheet.create({
50  container: {
51    flex: 1,
52  },
53  thumbnails: {
54    flexDirection: 'row',
55    flexWrap: 'wrap',
56    padding: 10,
57  },
58  thumbnail: {
59    width: 100,
60    height: 100,
61    margin: 5,
62  },
63  header: {
64    padding: 16,
65    flexDirection: 'row',
66    justifyContent: 'space-between',
67  },
68  headerText: {
69    color: 'white',
70    fontSize: 16,
71  },
72  footer: {
73    padding: 16,
74  },
75  footerText: {
76    color: 'white',
77    fontSize: 14,
78  },
79});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library