Skip to main content

Keyboard

Overview

Hosanna UI provides flexible and powerful keyboard input components for capturing user text input, supporting both on-screen and native keyboards. These components are designed for TV, web, and cross-platform apps, and support a variety of use cases from simple text entry to PIN pads and custom dialogs.

TextInput​

The TextInput component is the primary way to capture user text input. It supports placeholders, password entry, icons, custom styles, and event handling for text changes and submission.

Example: Basic TextInput​

TextInput({
  placeholderText: 'Enter your name',
  width: 600
}).onTextChange((event) => {
  this.name = event.text;
})

Key Props & Methods​

  • placeholderText: String shown when the input is empty.
  • onTextChange: Function called whenever the text changes.
  • password: If true, input is obscured (for passwords).
  • onSubmit: Function called when the user submits the input (e.g., presses OK/Enter).
  • iconUri: Show an icon inside the input.
  • height, width: Set the size of the input field.

MiniKeyboard & NativeMiniKeyboard​

Hosanna UI provides compact on-screen keyboards for quick text entry, such as PINs or short codes.

Example: MiniKeyboard​

MiniKeyboard({ domain: 'generic' })
  .onTextChange((event) => {
    console.log('MiniKeyboard text:', event.text);
  })

Example: NativeMiniKeyboard​

NativeMiniKeyboard({ placeholderText: 'Type here...' })
  .onTextChange((event) => {
    console.info(event.text);
  })
  • Supports domain configuration (e.g., 'generic', 'email').
  • Emits text change events.

NativeKeyboard​

The NativeKeyboard component displays a full native on-screen keyboard, suitable for longer text input.

Example: NativeKeyboard​

NativeKeyboard()
  .placeholderText('Enter text...')
  .onTextChange(event => {
    console.log('Text changed:', event.text);
  })
  • Supports placeholder text and text change events.
  • Can receive native focus for direct input.

Keyboard Dialogs & Utilities​

Hosanna UI also provides utilities for showing keyboard dialogs, handling PIN pads, and managing keyboard events programmatically. You can use the KeyboardDialogUtil for advanced scenarios, such as custom dialogs or PIN entry.

Best Practices​

  • Use TextInput for most text entry needs.
  • Use MiniKeyboard or NativeMiniKeyboard for compact or PIN-style input.
  • Use NativeKeyboard for full text entry, especially on platforms with native keyboard support.
  • Listen to onTextChange events to update your app state in real time.
  • Use placeholder text to guide users.