@duocvo/react-native-gesture-image NPM

@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

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

Usage

import React, { useRef } from 'react';
import { View, StyleSheet, TouchableOpacity, Image } from 'react-native';
import Gallery from '@duocvo/react-native-gesture-image';

export default function App() {
  const galleryRef = useRef(null);
  
  const images = [
    { uri: 'https://picsum.photos/200/300' },
    { uri: 'https://picsum.photos/200/300' },
    { uri: 'https://picsum.photos/200/300' },
  ];
  
  return (
    <View style={styles.container}>
      {/* Thumbnail images that open the gallery when tapped */}
      <View style={styles.thumbnails}>
        {images.map((image, index) => (
          <TouchableOpacity 
            key={index} 
            onPress={() => galleryRef.current?.show(index)}
          >
            <Image source={image} style={styles.thumbnail} />
          </TouchableOpacity>
        ))}
      </View>
      
      {/* Gallery component */}
      <Gallery 
        ref={galleryRef}
        data={images} 
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  thumbnails: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 10,
  },
  thumbnail: {
    width: 100,
    height: 100,
    margin: 5,
  },
});

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

import React, { useRef } from 'react';
import { View, StyleSheet, TouchableOpacity, Image, Text } from 'react-native';
import Gallery from '@duocvo/react-native-gesture-image';

export default function App() {
  const galleryRef = useRef(null);
  
  const images = [
    { uri: 'https://picsum.photos/200/300' },
    { uri: 'https://picsum.photos/200/300' },
    { uri: 'https://picsum.photos/200/300' },
  ];
  
  return (
    <View style={styles.container}>
      {/* Thumbnail images that open the gallery when tapped */}
      <View style={styles.thumbnails}>
        {images.map((image, index) => (
          <TouchableOpacity 
            key={index} 
            onPress={() => galleryRef.current?.show(index)}
          >
            <Image source={image} style={styles.thumbnail} />
          </TouchableOpacity>
        ))}
      </View>
      
      {/* Gallery component with custom header and footer */}
      <Gallery 
        ref={galleryRef}
        data={images}
        renderHeader={() => (
          <View style={styles.header}>
            <TouchableOpacity onPress={() => galleryRef.current?.hide()}>
              <Text style={styles.headerText}>Close</Text>
            </TouchableOpacity>
          </View>
        )}
        renderFooter={() => (
          <View style={styles.footer}>
            <Text style={styles.footerText}>Image Caption</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  thumbnails: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 10,
  },
  thumbnail: {
    width: 100,
    height: 100,
    margin: 5,
  },
  header: {
    padding: 16,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  headerText: {
    color: 'white',
    fontSize: 16,
  },
  footer: {
    padding: 16,
  },
  footerText: {
    color: 'white',
    fontSize: 14,
  },
});