Skip to main content

Using a ScrollView

Hosanna UI provides a ScrollView component that allows you to display content that is larger than the visible area, enabling users to scroll vertically or horizontally using their remote control or keyboard. This is especially useful for TV apps where content often exceeds the screen size.

What is ScrollView?

A ScrollView is a container that can hold multiple child components and allows the user to scroll through them if they don't fit on the screen. You can mix text, images, and other components inside a ScrollView.

🔍 Key Features​

  • Mixed Content: A ScrollView can contain a mix of images, text, and other components.
  • Paging: You can implement paging by controlling the scroll position and focus, allowing users to navigate between pages.
  • Performance Consideration: ScrollView renders all its children at once. For very large lists, use CollectionView for better performance.
Performance Tip

Use ScrollView for small to medium sets of content. For large or dynamic lists, prefer CollectionView for optimal performance.

🛠️ Basic Example​

In this example, the ScrollView allows vertical scrolling through its child components.

Horizontal Scrolling

Use HGroup inside a ScrollView to create a horizontally scrollable list.

⚙️ Key Props & Methods​

  • height, width: Set the visible area of the scroll view.
  • children: The content to be scrolled (usually a group of components).
  • scrollTo(index): Programmatically scroll to a specific child/component.
  • onScroll: Callback for scroll events (if supported).

🧪 Advanced Features​

  • Nested ScrollViews: You can nest scroll views for complex layouts, but avoid excessive nesting for performance.
  • Custom Scrollbars: Style the scroll indicator to match your app's design.
  • Focus Management: Hosanna UI handles focus for remote navigation, ensuring the selected item is always visible.

Example: Horizontal ScrollView​

ScrollView([
  HGroup([
    ...Array(10).fill(0).map((_, i) =>
      Rectangle({ width: 120, height: 120, color: i % 2 === 0 ? '#4A90E2' : '#50E3C2' })
    )
  ])
]).height(150).width(900)

⚠️ When to Use ScrollView vs. CollectionView​

  • Use ScrollView: For small numbers of components that won't impact performance.
  • Use CollectionView: For rendering large lists of data efficiently, as it renders items lazily and recycles views to optimize performance.

Learn More​