splash
Set launch artwork in configuration, then let it hand off to your first screen. Hold it only for work required before the app can display useful content.
Set light and dark artwork
Configure a logo, width and background. Optional brand artwork and dark variants are bundled into the native shell; changes need a native rebuild.
import type { KuitoConfig } from 'kuito/config';
export default {
name: 'MyApp',
ios: { bundleIdentifier: 'com.example.myapp' },
android: { applicationId: 'com.example.myapp' },
splash: {
logo: './assets/splash.png',
logoWidth: 120,
background: '#7B5BEA',
brand: './assets/brand.png',
dark: { background: '#21164A' },
},
} satisfies KuitoConfig;Wait for required startup work
Hold the splash before the first content frame and release it after startup work settles. Ensure failures also release it so the app can show a recovery screen.
import { signal, splash } from 'kuito';
const screen = signal<'loading' | 'home'>('loading');
const loadSession = () => fetch('https://example.com/session');
splash.hold(); // before the first render: keep it up
async function start() {
await loadSession();
screen.value = 'home';
await splash.hide({ fade: true }); // after the home screen is drawn
}Animate the handoff
SplashScreen recreates the configured artwork in the app. Start motion from onReady, then remove the overlay. SplashPart allows separate logo, brand and background composition.
import { motion, signal, timing, Show, SplashScreen } from 'kuito';
const splash = signal(true);
const scale = motion(1);
const opacity = motion(1);
<Show when={splash.value}>
<SplashScreen
opacity={opacity}
logo={{ scale }}
onReady={() => {
scale.value = timing(450).to(6);
opacity.value = timing({ duration: 450, onEnd: () => (splash.value = false) }).to(0);
}}
/>
</Show>;Choose the next-launch variant
splash.variant selects a configured variant for a future launch. It does not restyle the currently displayed native launch screen. Platform support differs; verify Android version requirements when using variants.
Continue
See SplashScreen, SplashPart, and app configuration.
Referenz
Exporte 7
Methoden, Konstanten und Typen, die dieser native Namespace bereitstellt.
layoutWhere the splash draws its logo and brand; null when the app has no splash.typeSplashFrameA rectangle of the window, in points (iOS) and dp (Android).typeSplashLayoutWhere the launch screen draws its logo and brand.functionholdKeeps the splash up after the first screen, until hide.functionhideHides the splash once the views the app rendered so far are on screen,
at once or with a fade.valuevisibleWhether the native splash is still up; watched, it turns false once it is gone.valuevariantThe variant the next launch shows, or null for the default look; it starts
as the one this launch showed.