Image viewer
Images full screen on black: pinch and double tap to zoom, swipe between images, swipe down to close.
Mobile uniquement — React Native, depuis @krizaka/ui/native. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- The photos of a post or a message, opened full screen.
- A creator's gallery.
Quand ne pas l’utiliser
- For a video.À la place : Video player
- To crop an image before upload.À la place : Image cropper
Installation
Installer
npx expo install react-native-svg
npm install @krizaka/uiImporter
import { ImageViewer, prefetchNeighbours } from "@krizaka/ui/native";Enveloppez l’application une fois dans ThemeProvider de @krizaka/ui/native : chaque composant lit ses rôles de couleur.
Exemples
React Native n’a pas d’aperçu en direct sur le web : chaque exemple montre la capture de sa story, testée dans les deux thèmes, et le code à copier.
A gallery
Three photos, the first one open, its caption under it.
Props
Images full screen, on black: pinch to zoom (to 4×), double tap to zoom in and out, drag a zoomed image, swipe left and right between images, swipe down to close. Screen readers get the image's words, its position, and the close button; their swipes move between images (accessibility actions).
| Prop | Type | Défaut | Description |
|---|---|---|---|
closeLabelrequis | string | — | The close button's words (“Close”) — passed translated. |
imagesrequis | readonly ViewerImage[] | — | The images, in order. |
indexrequis | number | null | — | The image open (its index); null closes the viewer. |
onIndexChangerequis | (index: number | null) => void | — | Called when the person moves to another image or closes the viewer (null). |
positionLabel | ((position: number, total: number) => string) | (n, total) => `${n} / ${total}` | The position for screen readers and the counter: (n, total) => "2 of 5". |
Accessibilité
- The image is named by its words and its position (“2 of 5”); swipes of the screen reader move between images.
- The close button is named by
closeLabel; the escape gesture closes it.
Bonnes pratiques
- Give every image its words (
alt); a caption when it adds something. - Call
prefetchNeighboursso the next swipe shows at once.
Composants liés
Générée depuis le code de @krizaka/ui 3.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub
Image cropper
A fixed frame — square, round, 9:16, a banner — over a picture or a video the person drags and zooms; a focus point and a zoom out, cropRect for the pixels.
Media capture
The camera in the page: a photo or a clip, front or back, the permission asked only on a gesture, and a way out every time the camera cannot start.