Advanced Image Viewer for React Native Apps - Galeria

Description:

Galeria is a stylish image viewer component for React Native applications.

It enables developers to easily implement advanced image viewing features, enhancing the user experience in mobile applications.

Features

Shared Element Transitions: Create visually appealing transitions between image previews and full-screen views.
Pinch to Zoom: Allows users to zoom in and out of images with a simple pinch gesture.
Double Tap to Zoom: Offers a quick way to zoom in on image details with a double tap.
Pan to Close: Enables users to dismiss the image viewer by panning down.
Multi-Image Support: Display multiple images in a gallery format.
Modal Support: Present images in a modal for a focused viewing experience.
FlashList Support: Integrate seamlessly with FlashList for optimized performance with large image sets.
Clean API: Easy to integrate and customize within your React Native projects.
Web Support: Web support is on the horizon, expanding Galeria’s reach.
Remote URLs & Local Images: Supports displaying images from both remote URLs and local file paths.

Use Cases

E-commerce Product Galleries: Showcase product images with smooth transitions and zoom capabilities, enhancing the browsing experience. Imagine a user browsing clothing items; Galeria allows them to zoom in on fabric details and different angles of the product.
Social Media Image Sharing: Display shared images in an attractive and interactive format. Think of a user tapping on an image in their feed; Galeria presents the image beautifully with options to zoom and pan.
Portfolio Showcases: Present creative works, such as photography or design projects, with a polished and professional look. A photographer could use Galeria to display their portfolio, allowing potential clients to examine their work in detail.
Travel Apps: Display stunning destination photos, allowing users to immerse themselves in the scenery. A travel app could use Galeria to showcase breathtaking landscapes, enticing users to explore new places.
Real Estate Listings: Present property photos with clarity and detail, enabling potential buyers to visualize the space. Users can zoom in on features like kitchen appliances or architectural details, getting a better feel for the property.

Installation

Install Galeria using npm or yarn:

npm install @nandorojo/galeria
# or
yarn add @nandorojo/galeria

Usage

Here’s a basic example of displaying a single image:

import { Galeria } from '@nandorojo/galeria';
import { Image } from 'react-native';
const url = 'https://my-image.com/image.jpg';
export const SingleImage = ({ style }) => (
  <Galeria urls={[url]}>
    <Galeria.Image>
      <Image source={{ uri: url }} style={style} />
    </Galeria.Image>
  </Galeria>
);

For multiple images, simply pass an array of URLs:

import { Galeria } from '@nandorojo/galeria';
import { Image } from 'react-native';
const urls = ['https://my-image.com/image.jpg', 'https://another-image.com/image.png'];
export const MultiImage = ({ style }) => (
  <Galeria urls={urls}>
    {urls.map((url, index) => (
      <Galeria.Image key={index} index={index}>
        <Image source={{ uri: url }} style={style} />
      </Galeria.Image>
    ))}
  </Galeria>
);