Galeria 📷

The React (Native) Image viewer. The API is simple, and it runs natively.

Features

Shared element transitions
Pinch to zoom
Double tap to zoom
Pan to close
Multi-image support
Modal support
FlashList support
Clean API
Web support (coming soon!)
Remote URLs & local images

This is in beta

Galeria is in beta...🚧 A true release is coming soon.

One Image

import { Galeria } from '@nandorojo/galeria'
import { Image } from 'react-native' // works with ANY image component!

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

Multiple Images

Simply pass an array to urls.

import { Galeria } from '@nandorojo/galeria'
import { Image } from 'react-native' // works with ANY image component!

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

Dark Mode

import { Galeria } from '@nandorojo/galeria'

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

FlashList

import { Galeria } from '@nandorojo/galeria'
import { Image, type ImageAssetSource } from 'react-native' // works with ANY image component!
import { FlashList } from "@shopify/flash-list"

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

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

export const FlashListSupport = () => {
  return (
    <Galeria urls={urls}>
      <FlashList
        data={urls}
        renderItem={({ item, index }) => {
          // you should put this in a memoized component
          return (
            <Galeria.Image index={index}>
              <Image
                style={styles.image}
                source={src(item)}
                recyclingKey={item + index}
              />
            </Galeria.Image>
          )
        }}
        numColumns={3}
        estimatedItemSize={size}
        keyExtractor={(item, i) => item + i}
      />
    </Galeria>
  )
}

const src = (s) => (typeof s === 'string' ? { uri: s } : s) // 🤷‍♂️

Credits

Under the hood, Galeria uses native libraries on iOS and Android.
On Web, Galeria uses Framer Motion.
Thanks to Michael Henry for the iOS Image Viewer
Thanks to iielse for the Android Image Viewer
Thanks to Alan for building the Android integration.

License

This software is free to use for apps or libraries of any size. However, I ask that you don't re-sell it or represent it as yours. If you fork it and make it public, please give credit back to the original GitHub repository.

Consider this the MIT license – just be considerate.

nandorojo / galeria

readme