tamer-screen

    Screen, SafeArea, and AvoidKeyboard components. Re-exports useInsets and useKeyboard from tamer-insets.

    Overview

    • Screen — Full-screen flex column container
    • SafeArea — Applies safe area insets as padding; provides SafeAreaContext
    • AvoidKeyboard — Adjusts layout when keyboard is visible
    • useSafeAreaContext() — Returns { hasTop, hasRight, hasBottom, hasLeft } when inside SafeArea

    Installation

    t4l add tamer-screen tamer-insets

    Run t4l link after installing.

    API

    Screen

    <Screen style?>{children}</Screen>

    Flex column, full width/height, minHeight 0.

    SafeArea

    <SafeArea edges?: ('top'|'right'|'bottom'|'left')[] style?>{children}</SafeArea>

    Applies useInsets() as padding on specified edges. Default edges is all four. Provides SafeAreaContext to children.

    AvoidKeyboard

    <AvoidKeyboard behavior?: 'padding'|'position' animate?: boolean style?>{children}</AvoidKeyboard>

    When keyboard is visible, adds bottom padding (padding) or bottom offset (position). Requires <Screen> as an ancestor — the default behavior='position' uses position: relative + bottom offset, which has no reference frame without the full-height screen container.

    With SafeArea bottom edge, applies a negative margin while the keyboard is open. animate animates padding-bottom or bottom; animate={false} snaps without transition.

    useSafeAreaContext()

    Returns { hasTop, hasRight, hasBottom, hasLeft } | null. Non-null when inside a SafeArea with that edge enabled.