Galeria

Install the package using your preferred package manager.

Requirements:

• New Architecture (Fabric): Required. This means Expo SDK 54+ or React Native 0.79+.
• iOS 16.4+: Ensure your deployment target is set to iOS 16.4 or higher.

Platform Specific Setup:

• Next.js / Solito: Add @nandorojo/galeria to transpilePackages in your next.config.js.
• Expo: Galeria requires a development client (it does not work with Expo Go). After installation, run npx expo prebuild and then npx expo run:ios or npx expo run:android to rebuild native code.

yarn add @nandorojo/galeria

# or

npm i @nandorojo/galeria

On the web, Galeria is a pure React component library that uses Framer Motion and does not rely on React Native code. You can use standard HTML <img> tags as your image component.

Note: Web support currently only supports viewing a single image at a time.

import { Galeria } from '@nandorojo/galeria'

const urls = ['https://my-image.com/image.jpg']

export const WebSupport = () => (
  <Galeria urls={urls}>
    <Galeria.Image>
      <img src={urls[0]} width={100} height={100} />
    </Galeria.Image>
  </Galeria>
)

For multiple images, pass an array of URLs to the urls prop. You must map through the URLs and provide a Galeria.Image component for each, passing the corresponding index to ensure correct synchronization.

import { Galeria } from '@nandorojo/galeria'
import { Image } from 'react-native'

import localImage from './assets/local-image.png'

const urls = ['https://my-image.com/image.jpg', localImage]

export const MutliImage = ({ style }) => (
  <Galeria urls={urls}>
    {urls.map((url, index) => (
       <Galeria.Image index={index} key={...}>
         <Image source={typeof url === 'string' ? { uri: url } : url} style={style} />
       </Galeria.Image>
     ))}
  </Galeria>
)

Set the theme prop on the Galeria component to 'dark' to enable dark mode styling.

import { Galeria } from '@nandorojo/galeria'

export const DarkMode = () => (
  <Galeria urls={urls} theme="dark">
    ...
  </Galeria>
)

To display a single image, wrap your image component with Galeria.Image inside a Galeria provider. Pass the image URL(s) as an array to the urls prop of Galeria.

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>
)

The expo-module.config.json file defines the platform support and native module entry points for the Galeria library. This configuration allows the library to be integrated into Expo projects by specifying the native module classes for iOS and Android, and declaring support for web.

{
  "platforms": ["ios", "android", "web"],
  "ios": {
    "modules": ["GaleriaModule"]
  },
  "android": {
    "modules": ["nandorojo.modules.galeria.GaleriaModule"]
  }
}

When using Galeria on iOS, you can use the following props on Galeria.Image to customize the viewer UI:

• hideBlurOverlay: Hides the blur overlay that appears behind the image viewer.
• hidePageIndicators: Hides the page indicator dots when viewing multiple images.

// Hide Blur Overlay
<Galeria.Image hideBlurOverlay>
  <Image source={{ uri: url }} style={style} />
</Galeria.Image>

// Hide Page Indicators
<Galeria.Image hidePageIndicators>
  <Image source={{ uri: url }} style={style} />
</Galeria.Image>

Galeria provides several event handlers to respond to user interactions:

• onIndexChange: Fired when the currently viewed image changes. The event payload contains currentIndex.
• onLongPress: Fired when the inline trigger image is long-pressed (before the viewer opens).
• onPressRightNavItemIcon: Fired when the right navigation item icon is pressed. The event payload contains the index of the pressed item.
• onDismiss: Fired when the gallery viewer is dismissed.

interface GaleriaViewProps {
  onIndexChange?: (event: GaleriaIndexChangedEvent) => void;
  onLongPress?: (event: GaleriaLongPressEvent) => void;
  onPressRightNavItemIcon?: (event: GaleriaRightNavItemPressedEvent) => void;
  onDismiss?: (event: GaleriaDismissEvent) => void;
}