A first launch in a few slides: swipe or tap Next, Skip at any time, dots that say where you are.

MobileBêtaMise en page

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

Quand l’utiliser

The first launch of an app: three promises, then the sign-in.

Quand ne pas l’utiliser

To explain a single feature in place.À la place : Permission prompt

Installation

Installer

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

Importer

import { Onboarding } 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.

First launch

Orochia's three promises.

Props

A first launch in a few slides: swipe or tap Next, Skip at any time, dots that say where you are, the safe areas kept. Each slide is announced with its position; the buttons do everything a swipe does.

Prop	Type	Défaut	Description
`labels`requis	`{ next: string; done: string; skip: string; position: (n: number, total: number) => string; }`	—	The words of the buttons — passed translated.
`onDone`requis	`() => void`	—	Called by “Get started” and “Skip”: remember it and leave.
`slides`requis	`readonly OnboardingSlide[]`	—	The slides, three or four.
`style`	`StyleProp<ViewStyle>`	—	Styles merged last.

Accessibilité

Each slide is announced with its position; the buttons do everything a swipe does.
The safe areas are kept.

Bonnes pratiques

Three slides, one promise each, a bird each.
Remember that it was seen in onDone; never show it twice.

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

Onboarding