Usage

Dismiss and observe the keyboard

tsx
import { Box, Button, Text, VStack, keyboard } from 'kuito';

export default function KeyboardState() {
  keyboard.frame.value; // { screenX, screenY, width, height } or null

  // In a component, until it unmounts; elsewhere, until remove().
  keyboard.watch('didShow', (event) => console.log(event.frame.height, event.duration));

  return (
    <VStack>
      <Text>{keyboard.visible.value ? 'typing' : ''}</Text>
      {/* Rides on the keyboard. */}
      <Box translateY={keyboard.height.map((height) => -height)} />
      <Button onPress={() => keyboard.dismiss()}>Done</Button>
    </VStack>
  );
}

Properties and methods 3

NameTypeRequiredDescription
valueKeyboardFrameYesA value moves there now; an animation (timing, spring, decay, ...) moves it there.
follows(source: GestureSource | Readable<KeyboardFrame>) => Motion<KeyboardFrame>YesMoves with source on the UI thread, with no code: a gesture's field (drag.x), another motion value or a derived one. Null stops it.
map<U>(fn: (value: KeyboardFrame) => U) => Derived<U>YesA value computed from this one, on the UI thread.
follows — method signatures

Signatures

ts
(source: GestureSource | Readable<KeyboardFrame>): Motion<KeyboardFrame>

Parameters

NameTypeRequiredDescription
sourceGestureSource | Readable<KeyboardFrame>Yes—

Returns

Motion<KeyboardFrame>

map — method signatures

Signatures

ts
<U>(fn: (value: KeyboardFrame) => U): Derived<U>

Type parameters

NameConstraintDefault
U——

Parameters

NameTypeRequiredDescription
fn(value: KeyboardFrame) => UYes—

Returns

Derived<U>

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.