Media picker

Photos and videos picked from the library or the camera, as a grid of tiles with a remove button and a count.

MobileBetaMedia

Mobile only — React Native, from @krizaka/ui/native/media-picker. Beta: its API may still change in a minor version.

Why it is here. the native apps: Yasakia (PY4), Yororis (PYO2), Orochia mobile (PS6), Orazaka mobile: choosing or taking a photo.

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/ui

Import

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
`labels`required	`MediaPickerLabels`	—	The words, passed translated.
`onValueChange`required	`(media: PickedMedia[]) => void`	—	Called with the new list.
`value`required	`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: onPermissionDenied shows a PermissionPrompt.

Best practices

Set max, and accept to what the feature takes.
Upload from the uri of each picked item (a Dropzone on the web).

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub