Skip to main content

Core Components and Native Components

What are Components?

Hosanna UI components are reusable building blocks for TV app UIs, similar to React Native, but optimized for TV platforms and remote navigation.

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

🧱 What Are Components?​

In TV 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 TV platforms and remote control navigation.

🧩 Native Components​

Native Components

Hosanna UI lets you describe your UI in TypeScript, and at runtime, it creates the corresponding native views for each platform (Roku, Android TV, Apple TV, Web).

On traditional TV platforms, UI elements are 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 views for each platform.

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 TV 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 Roku SceneGraph nodes under the hood to render everything natively on Roku devices. On other platforms, Hosanna UI emulates these nodes to provide a consistent experience.

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, Android TV, and Apple TV, Hosanna UI provides emulated versions of these nodes. If you need to use a node that is not yet emulated, you can create a platform-specific implementation for it. The workflow for creating and registering new emulated nodes is documented in workflow-using-native-libraries.mdx

This architecture ensures that your TV app can leverage the full power of native Roku SceneGraph nodes, while maintaining cross-platform compatibility through emulation.

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​