Lightbox
Lightbox displays images in a full-screen viewer with navigation and optional metadata.
Source
LLM docs
Package
Examples
2
Properties
41
Playground
Basics
Basic lightbox with navigation and metadata.
Loading demo…
import { useState } from 'react';
import { TouchableOpacity } from 'react-native';
import { Block, Lightbox, Image, Row } from '@plocks/ui';
import { SAMPLE_IMAGES } from './data';
export function Demo() {
// `null` closes the lightbox; any index opens it on that image.
const [openIndex, setOpenIndex] = useState<number | null>(null);
return (
<Block>
<Row gap="sm" wrap="wrap">
{SAMPLE_IMAGES.map((image, index) => (
<TouchableOpacity key={image.id} onPress={() => setOpenIndex(index)}>
<Image src={image.uri} w={120} h={90} rounded resizeMode="cover" />
</TouchableOpacity>
))}
</Row>
<Lightbox
opened={openIndex !== null}
images={SAMPLE_IMAGES}
initialIndex={openIndex ?? 0}
onClose={() => setOpenIndex(null)}
showMetadata
/>
</Block>
);
}Advanced
Advanced lightbox configurations with custom handlers.
Loading demo…
import { useState } from 'react';
import { Block, Button, Lightbox, Row, Text } from '@plocks/ui';
import type { LightboxItem } from '@plocks/ui';
import { SAMPLE_IMAGES } from './data';
export function Demo() {
const [active, setActive] = useState<'minimal' | 'custom' | null>(null);
const [downloaded, setDownloaded] = useState<string | null>(null);
return (
<Block>
<Row gap="sm" wrap="wrap">
<Button variant="outline" onPress={() => setActive('minimal')}>
Minimal
</Button>
<Button variant="outline" onPress={() => setActive('custom')}>
Custom download
</Button>
</Row>
{/* Chrome stripped back to the image itself — swipe and arrow keys still navigate. */}
<Lightbox
opened={active === 'minimal'}
images={SAMPLE_IMAGES}
onClose={() => setActive(null)}
showThumbnails={false}
showDownloadButton={false}
/>
{/* `onDownload` replaces the built-in behaviour, so the host app decides what saving means. */}
<Lightbox
opened={active === 'custom'}
images={SAMPLE_IMAGES}
onClose={() => setActive(null)}
onDownload={(image: LightboxItem) => setDownloaded(image.title ?? image.id)}
showMetadata
/>
{downloaded ? (
<Text size="sm" c="secondary">
Downloaded {downloaded}
</Text>
) : null}
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources