Scroll area

<ScrollArea scrollbarDisplay="visible" height="100px"><View backgroundColor="neutral-faded" height="200px" aspectRatio={1} /></Text>

ScrollArea works with any type of content and, by default, stretches to the full size of the parent element. Depending on the size of the children, ScrollArea displays horizontal and/or vertical scrollbars.

<Card height="200px" padding={0}>
  <ScrollArea scrollbarDisplay="visible">
    <View height="300px" width="150%" align="center" justify="center">
      Text content
    </View>
  </ScrollArea>
</Card>

You can control the height and maxHeight values on the ScrollArea itself when its parent doesn't have a predefined size. Notice how the height property is moved to the ScrollArea in the following example.

<Card padding={0}>
  <ScrollArea scrollbarDisplay="visible" height="200px">
    <View height="300px" width="150%" align="center" justify="center">
      Text content
    </View>
  </ScrollArea>
</Card>

ScrollArea supports multiple display types for the scrollbars: visible, hover, and hidden. By default, it uses the hover display type, which only displays the scrollbars when the user hovers over the area. The hidden display type hides the scrollbar completely, which is useful for smaller components that might be scrollable but don't have space to display the scrollbar.

<Card padding={0}>
  <ScrollArea height="200px">
    <View height="300px" width="150%" align="center" justify="center">
      Text content
    </View>
  </ScrollArea>
</Card>