Skip to main content
LazyHStack(children: Component): Component;
LazyHStack(children: Component[]): Component;
LazyHStack(props: { spacing?: number; alignment?: VerticalAlignment; pinnedViews?: PinnedScrollableViews }, children: Component[]): Component;
​
children
Component | Component[]
required
A single component or array of components to arrange horizontally with lazy rendering.
​
props
object
Configuration options for the lazy stack.

​
Support

​
Usage

Use inside a horizontal ScrollView for efficient rendering: 
ScrollView({ axis: "horizontal", showsIndicators: false }, [
    LazyHStack({ spacing: 16 }, [
        ForEach(cards, (card) =>
            VStack([
                Image({ url: card.imageUrl })
                    .frame({ width: 200, height: 150 })
                    .cornerRadius(12),
                Text(card.title).font("caption")
            ])
        )
    ])
])

​
With alignment

ScrollView({ axis: "horizontal" }, [
    LazyHStack({ spacing: 8, alignment: "top" }, [
        ForEach(items, (item) =>
            VStack({ alignment: "leading" }, [
                Text(item.title).font("headline"),
                Text(item.subtitle).font("subheadline")
            ])
            .frame({ width: 120 })
        )
    ])
])

​
Notes

  • LazyHStack only creates views for children that are currently visible. This is critical for performance with large data sets.
  • Always place LazyHStack inside a horizontal ScrollView. Without a scrollable parent, there is no viewport boundary to drive lazy rendering.
  • For non-lazy horizontal layout, use HStack.

​
See Also