Splash hand-off

The static native splash dissolves into the product's animated mark until the first screen is ready — same place, same size, same background, no flash.

MobileBêtaRetours

Mobile uniquement — React Native, depuis @krizaka/ui/native. 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: the launch screen that dissolves into the product mark (krizaka-ui#137).

Quand l’utiliser

The start of an app: from the launch image to the first screen, while the session and the fonts load.
Any cold start that takes longer than the blink of an eye.

Quand ne pas l’utiliser

A wait inside the app, once a screen is showing.À la place : Loader
A refresh the person asked for.À la place : Pull to refresh

Installation

Installer

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

Importer

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

Opening

Orochia's animated mark on the splash's background while the app gets ready.

Props

The splash hand-off: the app's first frame is the static native splash; this puts the product's animated mark at the same place and size over the same background, then dissolves it away once ready. Render it above the app's root (absolute, full screen) and unmount nothing yourself: it removes its own content when the dissolve ends. Reduced motion: the mark stands still and the splash leaves without fading.

Prop	Type	Défaut	Description
`label`requis	`string`	—	The words a screen reader hears while it waits (“Orochia is opening”) — passed translated.
`product`requis	`BrandId`	—	The product whose animated mark holds the screen.
`ready`requis	`boolean`	—	`true` once the first screen is ready to show: the splash dissolves into it.
`background`	`string`	—	The background. Default: the theme's page colour, the one `app.json` gives the native splash.
`duration`	`number`	`320`	The dissolve, in milliseconds. Default 320; none under reduced motion.
`onDone`	`(() => void)`	—	Called when the dissolve is over and the splash has left.
`onShown`	`(() => void)`	—	Called once the splash is on screen and painted — hide the native splash here (`SplashScreen.hideAsync()` of expo-splash-screen), so the static image dissolves into this one with no flash.
`size`	`number`	`96`	The mark's side, in points. Default 96 — the size of the native splash icon, so nothing jumps.
`style`	`StyleProp<ViewStyle>`	—	Styles merged last.

Accessibilité

A progressbar named by label (“Orochia is opening”), busy until it leaves; the first screen takes the reading order after it.
Reduced motion: the mark stands still and the splash leaves without fading.

Bonnes pratiques

Give app.json's splash the same background and the mark's size (96 by default), so the hand-off does not jump.
Hide the native splash in onShown (SplashScreen.hideAsync()): the animated mark is already under it.
Set ready when the session and the fonts are there, not on a timer.

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