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 only — React Native, from @krizaka/ui/native/media-picker. Beta: its API may still change in a minor version.
When to use
- The photos of a story, a post, a profile.
- A proof of delivery for a challenge.
When not to use
- To film in the app itself.Use instead: Media capture
- For files on the web.Use instead: File upload
Installation
Install
npx expo install react-native-svg
npm install @krizaka/uiImport
import { MediaPicker } from "@krizaka/ui/native/media-picker";Wrap the app once in ThemeProvider from @krizaka/ui/native: every component reads its colour roles.
Examples
React Native has no live preview on the web: each example shows the screenshot of its story, tested in both themes, and the code to copy.
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 | Default | Description |
|---|---|---|---|
labelsrequired | MediaPickerLabels | — | The words, passed translated. |
onValueChangerequired | (media: PickedMedia[]) => void | — | Called with the new list. |
valuerequired | 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. |
Accessibility
- The add tile and each remove button are named (
labels). - Refused camera:
onPermissionDeniedshows aPermissionPrompt.
Best practices
- Set
max, andacceptto what the feature takes. - Upload from the
uriof each picked item (aDropzoneon the web).
Related components
Generated from the code of @krizaka/ui 3.5.0: its meta.ts, its examples and its types.Edit this documentation on 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.