Cursor rule

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