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

tsx
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

ts
({ logo, brand, onReady, children, ...props }: SplashScreenProps): React.JSX.Element

Parameters

NameTypeRequiredDescription
__0SplashScreenPropsYes—

Returns

React.JSX.Element

Props: SplashScreenProps

Props (including inherited props) 99

NameTypeRequiredDescription
childrenKuitoNodeNoLive content, drawn over the launch screen in the same window.
idstringNo—
refElementRef<ElementHandle>No—
classProp<ClassNames>NoClass names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
styleStyleDeclarationsNoStyles 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) => voidNo—
onPressCapture(event: PressEvent) => voidNo—
keystring | numberNo—
hiddenProp<boolean>NoTakes the view out of layout and off screen, as CSS display: none.
paddingProp<LengthPercentage>No—
paddingTopProp<LengthPercentage>No—
paddingRightProp<LengthPercentage>No—
paddingBottomProp<LengthPercentage>No—
paddingLeftProp<LengthPercentage>No—
widthAnimatable<SizeValue>No—
heightAnimatable<SizeValue>No—
minWidthProp<SizeValue>No—
maxWidthProp<SizeValue>No—
minHeightProp<SizeValue>No—
maxHeightProp<SizeValue>No—
aspectRatioProp<number>NoWidth divided by height; sizes the missing side from the other.
positionProp<"relative" | "absolute">No—
topProp<LengthPercentageAuto>No—
rightProp<LengthPercentageAuto>No—
bottomProp<LengthPercentageAuto>No—
leftProp<LengthPercentageAuto>No—
marginProp<LengthPercentageAuto>No—
marginTopProp<LengthPercentageAuto>No—
marginRightProp<LengthPercentageAuto>No—
marginBottomProp<LengthPercentageAuto>No—
marginLeftProp<LengthPercentageAuto>No—
flexGrowProp<number>No—
flexShrinkProp<number>No—
flexBasisProp<SizeValue | "content">No—
flexProp<number>NoA grow factor from a zero basis, as CSS flex: n; 0 is inflexible.
alignSelfProp<"auto" | SelfAlignment>No—
directionProp<"ltr" | "rtl">NoThe way lines run; unset, the parent's, and the app's first language's at the root.
boxSizingProp<"border-box" | "content-box">No—
paddingInlineStartProp<LengthPercentage>NoPadding on the side lines start from: the left in ltr, the right in rtl.
paddingInlineEndProp<LengthPercentage>NoPadding on the side lines end at: the right in ltr, the left in rtl.
marginInlineStartProp<LengthPercentageAuto>NoMargin on the side lines start from: the left in ltr, the right in rtl.
marginInlineEndProp<LengthPercentageAuto>NoMargin on the side lines end at: the right in ltr, the left in rtl.
insetInlineStartProp<LengthPercentageAuto>Noleft in ltr, right in rtl.
insetInlineEndProp<LengthPercentageAuto>Noright in ltr, left in rtl.
roleProp<Role>No—
onAction(event: AccessibilityActionEvent) => voidNoThe screen reader action taken, by name.
accessibleProp<boolean>NoMakes the view one screen reader element, read as its label or its children's text.
labelProp<string>NoWhat a screen reader says for the view.
hintProp<string>NoWhat happens when the view is activated, read after the label.
aria-hiddenProp<boolean>NoScreen readers skip the view and its subtree.
actionsProp<readonly AccessibilityAction[]>NoActions a screen reader offers; onAction receives the one taken.
liveProp<"off" | "polite" | "assertive">NoARIA's aria-live: announces changes to the view's content, on iOS too.
aria-disabledProp<boolean>No—
aria-selectedProp<boolean>No—
aria-checkedProp<boolean | "mixed">No—
aria-busyProp<boolean>No—
aria-expandedProp<boolean>No—
aria-valueminProp<number>No—
aria-valuemaxProp<number>No—
aria-valuenowProp<number>No—
aria-valuetextProp<string>No—
gesturesreadonly Composable[]NoThe view's gestures; several race unless composed with together or orElse.
opacityAnimatable<number>No—
backgroundColorAnimatable<string>No—
translateXAnimatable<number>No—
translateYAnimatable<number>No—
scaleAnimatable<number>No—
scaleXAnimatable<number>No—
scaleYAnimatable<number>No—
rotateAnimatable<number>NoDegrees.
transitionPartial<Record<"opacity" | "backgroundColor" | "transform" | "borderRadius" | "borderColor" | "shadow" | "width" | "height" | "all", Animation<unknown> | AnimationSpec>>NoHow the animatable props move when they change, enter or leave, by group; a CSS transition compiles to it.
animatePartial<Record<AnimatableProps, string | number>>NoAnimatable props whose every change moves as transition says; the first value applies at once.
enterEffectNoWhere the view enters from: fade.and(slide.up(12)).
exitProp<Effect>NoWhere the view leaves to; it stays on screen until it is there. The renderer gets true, and keeps the view until exited.
layoutAnimation<number>NoHow the view moves to a new frame the layout gives it: layout={spring()}.
borderRadiusAnimatable<number>No—
overflowProp<"visible" | "hidden" | "clip" | "scroll">Nohidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
borderWidthProp<number>No—
borderColorAnimatable<string>No—
shadowColorAnimatable<string>No—
shadowRadiusAnimatable<number>No—
shadowOffsetXAnimatable<number>No—
shadowOffsetYAnimatable<number>No—
backgroundGradient{ angle: number; colors: string[];}No—
colorProp<string>No—
sharedIdProp<string>NoA 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).
alignItemsProp<SelfAlignment>No—
justifyContentProp<ContentAlignment>No—
gapProp<LengthPercentage>No—
rowGapProp<LengthPercentage>No—
columnGapProp<LengthPercentage>No—
flexDirectionProp<"row" | "column" | "row-reverse" | "column-reverse">No—
flexWrapProp<"nowrap" | "wrap" | "wrap-reverse" | "balance">No—
flexLineCountProp<number>NoThe minimum number of lines a wrapping container breaks into (CSS Flexbox 2).
alignContentProp<ContentAlignment>No—
keyboardProp<{ avoid?: "none" | "padding" | "position";}>No—
brandSplashPartPropsNo—
onReady() => voidNoRuns once the native splash is gone and this view is what shows.
onPress — method signatures

Signatures

ts
(event: PressEvent): void

Parameters

NameTypeRequiredDescription
eventPressEventYes—

Returns

void

onPressCapture — method signatures

Signatures

ts
(event: PressEvent): void

Parameters

NameTypeRequiredDescription
eventPressEventYes—

Returns

void

onAction — method signatures

Signatures

ts
(event: AccessibilityActionEvent): void

Parameters

NameTypeRequiredDescription
eventAccessibilityActionEventYes—

Returns

void

backgroundGradient — nested fields

backgroundGradient fields

NameTypeRequiredDescription
anglenumberYes—
colorsstring[]Yes—
onReady — method signatures

Signatures

ts
(): void

Parameters

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.