Skip to main content

Handling Text Input

Hosanna UI provides a flexible TextInput component for capturing user input via on-screen or native keyboards. This component supports placeholders, password entry, icons, custom styles, and event handling for text changes.

What is TextInput?

The TextInput component is a core element in Hosanna UI for capturing user text input, supporting both on-screen and native keyboards.

✍️ Basic Usage​

The TextInput component allows you to capture and respond to user input in your TV app.

Tip: Controlled Input

Use the onTextChange handler to keep your app state in sync with the input value.

In this example, the onTextChange handler updates the component's state every time the user types, and you can use this.inputText elsewhere in your view logic.

⚙️ Key Props & Methods​

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

🧪 Advanced Features​

Advanced Usage
  • Validation: Validate input as the user types using the onTextChange handler.
  • Custom Keyboard: Use MiniKeyboard or NativeKeyboard for platform-specific input experiences.
  • Programmatic Focus: You can programmatically focus or blur the input using view methods.

Example: Controlled Input​

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

Learn More​