Permission prompt
Before the system's permission dialog, the app says why: a bird, what it is for, the button that asks — and the way to the settings once refused.
Mobile uniquement — React Native, depuis @krizaka/ui/native. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- Before the camera, the microphone, notifications, the photo library.
- When the permission was refused for good: the way to the settings.
Quand ne pas l’utiliser
- For a message that needs no permission.À la place : Empty state
Installation
Installer
npx expo install react-native-svg
npm install @krizaka/uiImporter
import { PermissionPrompt } 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.
Camera
Why the camera, before the system asks.
Blocked
Notifications refused: the way to the settings.
Props
Before the system's permission dialog, the app says why: a bird, what it is for, the button that asks — and, once the system will not ask again, the way to the settings. Once granted, its children (the camera, the feature) show.
| Prop | Type | Défaut | Description |
|---|---|---|---|
allowLabelrequis | string | — | The button that asks (“Allow the camera”). |
descriptionrequis | string | — | Why the app needs it, said plainly, before the system asks. |
onAllowrequis | () => void | — | Asks the system (requestPermission() of the module). |
statusrequis | PermissionStatus | — | Where the permission stands (from expo-camera, expo-notifications…): blocked = denied and the system will not ask again. |
titlerequis | string | — | What it is for, in a few words (“Film your challenge”) — passed translated. |
blockedDescription | string | — | The words when it is blocked (“The camera is off for Orochia. Turn it on in the settings.”). |
children | ReactNode | — | Rendered once granted: the camera, the screen. Absent: nothing. |
dismissLabel | string | — | A secondary way out (“Not now”), with onDismiss. |
mascot | "falcon" | "owl" | "duck" | "flamingo" | "pigeon" | "lovebird" | "crane" | falcon | The bird above (decorative): the falcon watches (camera), the pigeon delivers (notifications). Default falcon. |
onDismiss | (() => void) | — | Called by the way out. |
onOpenSettings | (() => void) | — | Opens the app's settings (Linking.openSettings()). |
settingsLabel | string | — | The button when the system will not ask again (“Open settings”) — with onOpenSettings. |
style | StyleProp<ViewStyle> | — | Styles merged last. |
Accessibilité
- The bird is decorative; the words carry the message.
- Once granted it renders its children: the feature itself.
Bonnes pratiques
- Ask in context, when the feature is used, never at launch.
- Say what the app does and does not do with it, in one or two sentences.
- Pass the module's status:
blockedwhen the system will not ask again.
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
Mascots
The Krizaka flock: seven birds (falcon, owl, duck, flamingo, pigeon, lovebird, crane) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.
Progress
How far a task or a goal has come: a bar or a ring — with its words and time left, what is buffered ahead, its steps as segments, and a paused or failed state that says where it stopped.