1---
2title: Use Galeria for Image Galleries and Lightbox
3impact: MEDIUM
4impactDescription:
5  native shared element transitions, pinch-to-zoom, pan-to-close
6tags: images, gallery, lightbox, expo-image, ui
7---
8 
9## Use Galeria for Image Galleries and Lightbox
10 
11For image galleries with lightbox (tap to fullscreen), use `@nandorojo/galeria`.
12It provides native shared element transitions with pinch-to-zoom, double-tap
13zoom, and pan-to-close. Works with any image component including `expo-image`.
14 
15**Incorrect (custom modal implementation):**
16 
17```tsx
18function ImageGallery({ urls }: { urls: string[] }) {
19  const [selected, setSelected] = useState<string | null>(null)
20 
21  return (
22    <>
23      {urls.map((url) => (
24        <Pressable key={url} onPress={() => setSelected(url)}>
25          <Image source={{ uri: url }} style={styles.thumbnail} />
26        </Pressable>
27      ))}
28      <Modal visible={!!selected} onRequestClose={() => setSelected(null)}>
29        <Image source={{ uri: selected! }} style={styles.fullscreen} />
30      </Modal>
31    </>
32  )
33}
34```
35 
36**Correct (Galeria with expo-image):**
37 
38```tsx
39import { Galeria } from '@nandorojo/galeria'
40import { Image } from 'expo-image'
41 
42function ImageGallery({ urls }: { urls: string[] }) {
43  return (
44    <Galeria urls={urls}>
45      {urls.map((url, index) => (
46        <Galeria.Image index={index} key={url}>
47          <Image source={{ uri: url }} style={styles.thumbnail} />
48        </Galeria.Image>
49      ))}
50    </Galeria>
51  )
52}
53```
54 
55**Single image:**
56 
57```tsx
58import { Galeria } from '@nandorojo/galeria'
59import { Image } from 'expo-image'
60 
61function Avatar({ url }: { url: string }) {
62  return (
63    <Galeria urls={[url]}>
64      <Galeria.Image>
65        <Image source={{ uri: url }} style={styles.avatar} />
66      </Galeria.Image>
67    </Galeria>
68  )
69}
70```
71 
72**With low-res thumbnails and high-res fullscreen:**
73 
74```tsx
75<Galeria urls={highResUrls}>
76  {lowResUrls.map((url, index) => (
77    <Galeria.Image index={index} key={url}>
78      <Image source={{ uri: url }} style={styles.thumbnail} />
79    </Galeria.Image>
80  ))}
81</Galeria>
82```
83 
84**With FlashList:**
85 
86```tsx
87<Galeria urls={urls}>
88  <FlashList
89    data={urls}
90    renderItem={({ item, index }) => (
91      <Galeria.Image index={index}>
92        <Image source={{ uri: item }} style={styles.thumbnail} />
93      </Galeria.Image>
94    )}
95    numColumns={3}
96    estimatedItemSize={100}
97  />
98</Galeria>
99```
100 
101Works with `expo-image`, `SolitoImage`, `react-native` Image, or any image
102component.
103 
104Reference: [Galeria](https://github.com/nandorojo/galeria)
105