Media picker

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

MobileBêtaMédias

Mobile uniquement — React Native, depuis @krizaka/ui/native/media-picker. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. the native apps: Yasakia (PY4), Yororis (PYO2), Orochia mobile (PS6), Orazaka mobile: choosing or taking a photo.

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

Importer

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

Bonnes pratiques

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

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub