Media picker
Photos and videos picked from the library or the camera, as a grid of tiles with a remove button and a count.
Mobile uniquement — React Native, depuis @krizaka/ui/native/media-picker. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- The photos of a story, a post, a profile.
- A proof of delivery for a challenge.
Quand ne pas l’utiliser
- To film in the app itself.À la place : Media capture
- For files on the web.À la place : File upload
Installation
Installer
npx expo install react-native-svg
npm install @krizaka/uiImporter
import { MediaPicker } from "@krizaka/ui/native/media-picker";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 story's photos
Up to four photos, from the library or the camera.
Props
Photos and videos picked from the library or the camera, as a grid of square tiles: an add tile (the system's
picker, or a sheet to choose library or camera), a remove button on each tile, a count against max.
| Prop | Type | Défaut | Description |
|---|---|---|---|
labelsrequis | MediaPickerLabels | — | The words, passed translated. |
onValueChangerequis | (media: PickedMedia[]) => void | — | Called with the new list. |
valuerequis | readonly PickedMedia[] | — | The media picked (controlled). |
accept | "all" | "images" | "videos" | images | What can be picked. Default images. |
camera | boolean | true | Offer the camera beside the library. Default true. |
max | number | 1 | The most that can be picked. Default 1. |
onPermissionDenied | (() => void) | — | Called when the camera is refused (show a PermissionPrompt). |
style | StyleProp<ViewStyle> | — | Styles merged last. |
Accessibilité
- The add tile and each remove button are named (
labels). - Refused camera:
onPermissionDeniedshows aPermissionPrompt.
Bonnes pratiques
- Set
max, andacceptto what the feature takes. - Upload from the
uriof each picked item (aDropzoneon the web).
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
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.
Photo grid
A profile's photos in slots: the first is the main one, empty slots invite to add, photos reorder by drag (web), by their menu (React Native) or by buttons — every move announced.