Components

Keyboard

nsh/ui/mobile has two exports for the software keyboard: the Keyboard module, which hides the keyboard, and the keyboard() accessor, which tells you how much of the screen the keyboard covers.

import { Keyboard, keyboard } from "nsh/ui/mobile";

#Keyboard.dismiss

Keyboard.dismiss(): void

Unfocuses the focused input, which hides the keyboard. It does nothing if no input is focused.

import { mount, signal, View } from "nsh";
import { Button, Keyboard, TextField } from "nsh/ui/mobile";

function App() {
  const name = signal("");
  return (
    <View style={{ flex: 1, padding: 16, paddingTop: 48, gap: 12 }}>
      <TextField label="Name" value={name()} onChange={(v) => name.set(v)} />
      <Button title="Done" onPress={() => Keyboard.dismiss()} />
    </View>
  );
}

mount(App);

#keyboard()

keyboard: Accessor<{ height: number; duration: number }>

keyboard() returns the height of the software keyboard over the nsh surface, in points (0 while it is hidden), and the duration of the keyboard’s show or hide animation, in seconds. It is reactive: an effect or JSX expression that reads it runs again when the keyboard shows, hides or changes height.

import { Input, View } from "nsh";
import { keyboard, useSafeAreaInsets } from "nsh/ui/mobile";

function MessageBar() {
  const insets = useSafeAreaInsets();
  return (
    <View
      style={{
        flexDirection: "row",
        padding: 8,
        // The home indicator's inset only matters while the keyboard is hidden.
        paddingBottom: 8 + (keyboard().height > 0 ? 0 : insets().bottom),
      }}
    >
      <Input placeholder="Message" style={{ flex: 1 }} />
    </View>
  );
}

The height is the part of the keyboard that overlaps the nsh surface. When the window itself shrinks for the keyboard (an Android activity that resizes), or when nsh is embedded in a view that ends above the keyboard, the height is 0.

Edit this page on GitHub View as Markdown