react-native-gallery-preview v1.3.2

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.
• ↔️ RTL Support
• 📱 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