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.

MobileBetaFeedback

Mobile only — React Native, from @krizaka/ui/native. 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: asking for the camera, the location, notifications — in words, before the system dialog.

When to use

Before the camera, the microphone, notifications, the photo library.
When the permission was refused for good: the way to the settings.

When not to use

For a message that needs no permission.Use instead: Empty state

Installation

Install

npx expo install react-native-svg
npm install @krizaka/ui

Import

import { PermissionPrompt } from "@krizaka/ui/native";

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.

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	Default	Description
`allowLabel`required	`string`	—	The button that asks (“Allow the camera”).
`description`required	`string`	—	Why the app needs it, said plainly, before the system asks.
`onAllow`required	`() => void`	—	Asks the system (`requestPermission()` of the module).
`status`required	`PermissionStatus`	—	Where the permission stands (from expo-camera, expo-notifications…): `blocked` = denied and the system will not ask again.
`title`required	`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.

Accessibility

The bird is decorative; the words carry the message.
Once granted it renders its children: the feature itself.

Best practices

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: blocked when the system will not ask again.

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