SplashScreen
Match the native launch screen with an animated view. Use it to transition the launch artwork into your first screen.
Animate the launch logo into the app
import { Box, Show, SplashScreen, Text, motion, signal, timing } from 'kuito';
export default function App() {
const splash = signal(true);
const scale = motion(1);
const opacity = motion(1);
return (
<Box flex={1}>
<Text padding={16}>Home</Text>
<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>
</Box>
);
}Behavior
Wait for onReady before beginning the handoff animation. Configure the source artwork in kuito.config.ts. Remove the overlay after the animation so it no longer covers the app.
Continue
Read Splash for a complete workflow. See the complete prop reference for types and documented defaults.
Reference
Signatures
({ logo, brand, onReady, children, ...props }: SplashScreenProps): React.JSX.ElementParameters
| Name | Type | Required | Description |
|---|---|---|---|
__0 | SplashScreenProps | Yes | — |
Returns
React.JSX.Element
Props: SplashScreenProps
Props (including inherited props) 99
| Name | Type | Required | Description |
|---|---|---|---|
children | KuitoNode | No | Live content, drawn over the launch screen in the same window. |
id | string | No | — |
ref | ElementRef<ElementHandle> | No | — |
class | Prop<ClassNames> | No | Class names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads. |
style | StyleDeclarations | No | Styles of this view alone, compiled at build time: CSS properties in
camelCase. A value that changes must set a native prop (opacity). |
onPress | (event: PressEvent) => void | No | — |
onPressCapture | (event: PressEvent) => void | No | — |
key | string | number | No | — |
padding | Prop<LengthPercentage> | No | — |
paddingTop | Prop<LengthPercentage> | No | — |
paddingRight | Prop<LengthPercentage> | No | — |
paddingBottom | Prop<LengthPercentage> | No | — |
paddingLeft | Prop<LengthPercentage> | No | — |
width | Animatable<SizeValue> | No | — |
height | Animatable<SizeValue> | No | — |
minWidth | Prop<SizeValue> | No | — |
maxWidth | Prop<SizeValue> | No | — |
minHeight | Prop<SizeValue> | No | — |
maxHeight | Prop<SizeValue> | No | — |
aspectRatio | Prop<number> | No | Width divided by height; sizes the missing side from the other. |
position | Prop<"relative" | "absolute"> | No | — |
top | Prop<LengthPercentageAuto> | No | — |
right | Prop<LengthPercentageAuto> | No | — |
bottom | Prop<LengthPercentageAuto> | No | — |
left | Prop<LengthPercentageAuto> | No | — |
margin | Prop<LengthPercentageAuto> | No | — |
marginTop | Prop<LengthPercentageAuto> | No | — |
marginRight | Prop<LengthPercentageAuto> | No | — |
marginBottom | Prop<LengthPercentageAuto> | No | — |
marginLeft | Prop<LengthPercentageAuto> | No | — |
flexGrow | Prop<number> | No | — |
flexShrink | Prop<number> | No | — |
flexBasis | Prop<SizeValue | "content"> | No | — |
flex | Prop<number> | No | A grow factor from a zero basis, as CSS flex: n; 0 is inflexible. |
alignSelf | Prop<"auto" | SelfAlignment> | No | — |
direction | Prop<"ltr" | "rtl"> | No | The way lines run; unset, the parent's, and the app's first language's at the root. |
boxSizing | Prop<"border-box" | "content-box"> | No | — |
paddingInlineStart | Prop<LengthPercentage> | No | Padding on the side lines start from: the left in ltr, the right in rtl. |
paddingInlineEnd | Prop<LengthPercentage> | No | Padding on the side lines end at: the right in ltr, the left in rtl. |
marginInlineStart | Prop<LengthPercentageAuto> | No | Margin on the side lines start from: the left in ltr, the right in rtl. |
marginInlineEnd | Prop<LengthPercentageAuto> | No | Margin on the side lines end at: the right in ltr, the left in rtl. |
insetInlineStart | Prop<LengthPercentageAuto> | No | left in ltr, right in rtl. |
insetInlineEnd | Prop<LengthPercentageAuto> | No | right in ltr, left in rtl. |
role | Prop<Role> | No | — |
onAction | (event: AccessibilityActionEvent) => void | No | The screen reader action taken, by name. |
accessible | Prop<boolean> | No | Makes the view one screen reader element, read as its label or its children's text. |
label | Prop<string> | No | What a screen reader says for the view. |
hint | Prop<string> | No | What happens when the view is activated, read after the label. |
actions | Prop<readonly AccessibilityAction[]> | No | Actions a screen reader offers; onAction receives the one taken. |
live | Prop<"off" | "polite" | "assertive"> | No | ARIA's aria-live: announces changes to the view's content, on iOS too. |
aria-disabled | Prop<boolean> | No | — |
aria-selected | Prop<boolean> | No | — |
aria-checked | Prop<boolean | "mixed"> | No | — |
aria-busy | Prop<boolean> | No | — |
aria-expanded | Prop<boolean> | No | — |
aria-valuemin | Prop<number> | No | — |
aria-valuemax | Prop<number> | No | — |
aria-valuenow | Prop<number> | No | — |
aria-valuetext | Prop<string> | No | — |
gestures | readonly Composable[] | No | The view's gestures; several race unless composed with together or orElse. |
opacity | Animatable<number> | No | — |
backgroundColor | Animatable<string> | No | — |
translateX | Animatable<number> | No | — |
translateY | Animatable<number> | No | — |
scale | Animatable<number> | No | — |
scaleX | Animatable<number> | No | — |
scaleY | Animatable<number> | No | — |
rotate | Animatable<number> | No | Degrees. |
transition | Partial<Record<"opacity" | "backgroundColor" | "transform" | "borderRadius" | "borderColor" | "shadow" | "width" | "height" | "all", Animation<unknown> | AnimationSpec>> | No | How the animatable props move when they change, enter or leave, by group; a CSS transition compiles to it. |
animate | Partial<Record<AnimatableProps, string | number>> | No | Animatable props whose every change moves as transition says; the first value applies at once. |
enter | Effect | No | Where the view enters from: fade.and(slide.up(12)). |
exit | Prop<Effect> | No | Where the view leaves to; it stays on screen until it is there. The renderer gets true, and keeps the view until exited. |
layout | Animation<number> | No | How the view moves to a new frame the layout gives it: layout={spring()}. |
borderRadius | Animatable<number> | No | — |
overflow | Prop<"visible" | "hidden" | "clip" | "scroll"> | No | hidden and scroll clip; as in CSS, either lets a flex item shrink below its content. |
borderWidth | Prop<number> | No | — |
borderColor | Animatable<string> | No | — |
shadowColor | Animatable<string> | No | — |
shadowRadius | Animatable<number> | No | — |
shadowOffsetX | Animatable<number> | No | — |
shadowOffsetY | Animatable<number> | No | — |
backgroundGradient | { angle: number; colors: string[];} | No | — |
color | Prop<string> | No | — |
sharedId | Prop<string> | No | A view the navigation stack flies to the view with the same sharedId on the screen it pushes or pops to (docs/navigation.md#shared-elements). |
alignItems | Prop<SelfAlignment> | No | — |
justifyContent | Prop<ContentAlignment> | No | — |
gap | Prop<LengthPercentage> | No | — |
rowGap | Prop<LengthPercentage> | No | — |
columnGap | Prop<LengthPercentage> | No | — |
flexDirection | Prop<"row" | "column" | "row-reverse" | "column-reverse"> | No | — |
flexWrap | Prop<"nowrap" | "wrap" | "wrap-reverse" | "balance"> | No | — |
flexLineCount | Prop<number> | No | The minimum number of lines a wrapping container breaks into (CSS Flexbox 2). |
alignContent | Prop<ContentAlignment> | No | — |
keyboard | Prop<{ avoid?: "none" | "padding" | "position";}> | No | — |
logo | SplashPartProps | No | — |
brand | SplashPartProps | No | — |
onReady | () => void | No | Runs once the native splash is gone and this view is what shows. |
onPress — method signatures
Signatures
onPressCapture — method signatures
Signatures
onAction — method signatures
Signatures
(event: AccessibilityActionEvent): voidParameters
| Name | Type | Required | Description |
|---|---|---|---|
event | AccessibilityActionEvent | Yes | — |
Returns
void
backgroundGradient — nested fields
backgroundGradient fields
| Name | Type | Required | Description |
|---|---|---|---|
angle | number | Yes | — |
colors | string[] | Yes | — |
onReady — method signatures
Signatures
(): voidParameters
No parameters.
Returns
void
Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.