react-native-gallery-preview

GalleryPreview is a flexible modal component for easy gallery previews with full gesture support. Using Reanimated and React Native Gesture Handler, it gives a smooth and simple user experience for both iOS and Android.

Features

• ⚡ Smooth Gesture Interactions and Animations: Experience fluid and responsive animations and gestures for a delightful user interface.
• 🔍 Double Tap and Pinch to zoom: Users can effortlessly zoom in and out of images with simple double-tap and pinch gestures
• 👆 Pull down to close: Intuitive pull-down gesture to close the gallery preview, making navigation seamless.
• 📱 Supports both iOS and Android: Fully compatible with both iOS and Android devices, ensuring a consistent experience across platforms.
• 📱 Compatible with Expo

Get started

Before you can use GalleryPreview, you need to set up react-native-reanimated and react-native-gesture-handler. Follow the links below for detailed installation guides:

• Setting up Reanimated
• Setting up React Native Gesture Handler

Once the dependencies are installed, you can add react-native-gallery-preview to your project:

npm install react-native-gallery-preview
# or
yarn add react-native-gallery-preview

Example

import React, { useState } from 'react';
import { Button, View } from 'react-native';
import GalleryPreview from 'react-native-gallery-preview';

export const App = () => {
  const [isVisible, setIsVisible] = useState(false);

  const images = [
    { uri: 'https://example.com/image1.jpg' },
    { uri: 'https://example.com/image2.jpg' },
    // Add more images here
  ];

  return (
    <View>
      <Button title="Open Gallery Preview" onPress={() => setIsVisible(true)} />
      <GalleryPreview
        isVisible={isVisible}
        onRequestClose={() => setIsVisible(false)}
        images={images}
      />
    </View>
  );
};

Props

Prop Name	Type	Description	Default
isVisible	boolean	Controls the visibility of the image viewer modal.	-
onRequestClose	() => void	Function to close the image viewer modal.	-
images	ImageItemURI[]	Array of image URIs to be displayed.	-
initialIndex	number	The initial index of the image to be displayed when the viewer is opened.	0
gap	number	The gap between images in the viewer.	24
simultaneousRenderedImages	number	The number of images rendered simultaneously for optimization.	6
HeaderComponent	(props: GalleryHeaderProps) => React.ReactNode	Optional header component to be rendered above the image viewer.	-
ImageComponent	(props: GalleryImageComponentProps) => React.JSX.Element	Optional custom component to render each image.	-
springConfig	SpringConfig	Spring configuration for animations.	{ damping: 1000, mass: 1, stiffness: 250, restDisplacementThreshold: 0.02, restSpeedThreshold: 4 }
doubleTabEnabled	boolean	Enable or disable double-tap to zoom functionality.	true
pinchEnabled	boolean	Enable or disable pinch to zoom functionality.	true
swipeToCloseEnabled	boolean	Enable or disable swipe to close functionality.	true