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.

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: the launch screen that dissolves into the product mark (krizaka-ui#137).

When to use

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.

When not to use

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

Installation

Install

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

Import

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

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	Default	Description
`label`required	`string`	—	The words a screen reader hears while it waits (“Orochia is opening”) — passed translated.
`product`required	`BrandId`	—	The product whose animated mark holds the screen.
`ready`required	`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.

Accessibility

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.

Best practices

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.

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