Skip to main content

Core Components and Native Components

What are Components?

Hosanna UI components are reusable building blocks for multi-platform app UIs, similar to React Native, but optimized for TV remotes, touch surfaces, and platform-native rendering.

Hosanna UI is a modern, cross-platform framework for building applications using TypeScript and a declarative, component-based approach. It enables developers to create apps for Roku, Apple TV, Android TV, Samsung TV, iOS, Android, and Web from a single codebase while leveraging native platform capabilities.

🧱 What Are Components?​

In Hosanna app development, a component is the fundamental building block of the user interface: a reusable unit that can display text, images, handle user input, or contain other components. Components can be composed and nested to create complex layouts and interactive experiences.

Hosanna UI components encapsulate UI, logic, and behavior, and can be customized via properties and children. This approach is similar to React Native, but optimized for device targets that need consistent TV remote, keyboard, pointer, touch, and native-rendering behavior.

🧩 Native Components​

Native Components

Hosanna UI lets you describe your UI in TypeScript, and at runtime, it creates the corresponding native or platform-rendered views for each platform.

On device platforms, UI elements are often written in platform-specific languages (e.g., BrightScript for Roku, Java/Kotlin for Android TV). Hosanna UI allows you to describe your UI in TypeScript, and at runtime, it creates the corresponding native or platform-rendered views for each target.

Because Hosanna UI components are backed by native views, your apps look, feel, and perform like true native TV apps. You can also extend Hosanna UI with your own native components if needed.

🔧 Core Components Overview​

Tip: Use Core Components

Start building your app with Hosanna UI's core components for layout, input, display, and interaction. They are cross-platform and highly customizable.

Hosanna UI provides a comprehensive set of Core Components for layout, input, display, and interaction. These are ready-to-use building blocks for your app:

Hosanna UI ComponentRoku AnalogAndroid TV AnalogWeb AnalogDescription
VGroup, HGroup, GroupGroupViewGroup<div>Flexible containers for vertical, horizontal, or generic grouping
LabelLabelTextView<p>Displays and styles text
ImagePoster, ImageImageView<img>Displays images from local or remote sources
Button, ButtonGroupButtonButton<button>Interactive buttons for user actions
ScrollViewRowListScrollView<div> (scrollable)Scrollable container for overflowing content
TextInputTextEditBoxEditText<input type="text">Allows user text entry
CheckBoxCheckBoxCheckBox<input type="checkbox">Toggleable checkbox input
RectangleRectangleView<div> (styled)Draws colored rectangles, backgrounds, or highlights
Popup, DialogManagerDialogDialog<dialog>Modal dialogs and popups
TabSelector, TabControllerTabBarTabLayout<nav>/<ul>Tabbed navigation interfaces
MiniKeyboard, NativeKeyboardKeyboardKeyboardOn-screen keyboardOn-screen or native keyboard components for text input

List and Collection Components​

Hosanna UI also provides advanced components for displaying and managing lists and collections:

  • CollectionView: Highly customizable list/grid for displaying collections of items.
  • BaseCell / DynamicCell: Base classes for custom list item rendering.
  • GridGroup / GridRow / HorizontalRow / ListRow: Layout helpers for arranging items in grids or rows.
Advanced Lists

For large or dynamic data sets, use CollectionView and custom cell components for best performance and flexibility.

Native Components​

Native Features

Hosanna UI uses the best available renderer for each platform. Roku uses SceneGraph nodes; Web and Samsung TV use the browser target; Apple TV, Android TV, iOS, and Android use their platform targets.

On Roku, anything you can create using regular BrightScript code—such as CreateObject('roSGNode', 'Rectangle')—can also be created in a Hosanna UI app. All built-in BrightScript and SceneGraph nodes are available on-device, and Hosanna UI supports many of these out-of-the-box.

On platforms like Web, Samsung TV, Android TV, Apple TV, iOS, and Android, Hosanna UI provides platform implementations for the shared view model. If you need to use a feature that is not yet available in the shared layer, you can create a platform-specific implementation for it. The workflow for creating and registering native libraries is documented in workflow-using-native-libraries.mdx

This architecture lets your app use platform-native capability while maintaining cross-platform compatibility through the shared Hosanna view model.

Example: Using Core Components​

Try it Yourself!

Experiment with the example below to see how core components work together in a Hosanna UI view.

// Code Viewer "the-basics-core-components-and-native-components"

@view('SimpleLayout')
export class SimpleLayoutView extends BaseExampleScreenView {
  protected getViews(): ViewStruct<ViewState>[] {
    return [
      VGroup([
        Label({ text: 'Welcome to Hosanna UI!' }),
        HGroup([
          Button({ text: 'OK'}),
          Button({ text: 'Cancel'})
        ]).itemSpacing(20),
        Image({ src: 'https://example.com/logo.png', width: 200, height: 100 }),
        Rectangle({ width: 400, height: 2, color: '#ccc' }),
        ScrollView([
          Label({ text: 'Scrollable content goes here...' })
        ])
      ]).itemSpacing(30)
    ];
  }
}

Learn More​