ScrollArea

Custom scrollable container component.

ScrollArea

ScrollArea is a utility component for creating custom scrollable containers with consistent styling.

Import

import { ScrollArea } from 'radix-native-ui';

Usage

import { ScrollArea, Text, Flex } from 'radix-native-ui';

<ScrollArea style={{ height: 200 }}>
  <Flex direction="column" gap={2}>
    <Text>Item 1</Text>
    <Text>Item 2</Text>
    <Text>Item 3</Text>
    {/* More items... */}
  </Flex>
</ScrollArea>

Props

ScrollArea is a thin wrapper around React Native’s ScrollView. It accepts all ScrollView props in addition to Box/Flex native props.

Examples

Basic ScrollArea

<ScrollArea height={200}>
  <Flex direction="column" gap={2} padding={3}>
    {items.map(item => (
      <Card key={item.id}>
        <Text>{item.title}</Text>
      </Card>
    ))}
  </Flex>
</ScrollArea>

Horizontal Scroll

<ScrollArea horizontal width="100%">
  <Flex direction="row" gap={3} padding={3}>
    {images.map(image => (
      <AspectRatio ratio={1} key={image.id} width={38}>
        <Image source={{ uri: image.url }} />
      </AspectRatio>
    ))}
  </Flex>
</ScrollArea>

Both Scroll Directions

<ScrollArea horizontal height={300} width="100%">
  <Box width={200}>
    {/* Wide content */}
  </Box>
</ScrollArea>

Chat Messages

<Card height={400}>
  <Flex direction="column" height="100%">
    <ScrollArea flex={1}>
      <Flex direction="column" gap={2} padding={3}>
        {messages.map(message => (
          <Flex
            key={message.id}
            direction="column"
            gap={1}
            align={message.isMe ? 'flex-end' : 'flex-start'}
          >
            <Text size={1} color="gray">{message.sender}</Text>
            <Card size={1} maxWidth="80%">
              <Text>{message.text}</Text>
            </Card>
          </Flex>
        ))}
      </Flex>
    </ScrollArea>

    <Flex direction="row" gap={2} padding={2}>
      <TextField flex={1} placeholder="Type a message..." />
      <Button>Send</Button>
    </Flex>
  </Flex>
</Card>

File List

<Card>
  <Flex direction="column" gap={2}>
    <Heading size={3}>Files</Heading>
    <ScrollArea height={250}>
      <Flex direction="column" gap={1}>
        {files.map(file => (
          <Flex
            key={file.id}
            direction="row"
            gap={2}
            align="center"
            padding={2}
          >
            <Icon name="file" />
            <Flex direction="column" flex={1}>
              <Text size={2}>{file.name}</Text>
              <Text size={1} color="gray">{file.size}</Text>
            </Flex>
            <IconButton size={1} variant="ghost">
              <Icon name="download" />
            </IconButton>
          </Flex>
        ))}
      </Flex>
    </ScrollArea>
  </Flex>
</Card>

Log Viewer

<Card>
  <Flex direction="column" gap={2}>
    <Flex direction="row" justify="between" align="center">
      <Heading size={3}>Logs</Heading>
      <Button size={1} variant="soft">Clear</Button>
    </Flex>
    <ScrollArea
      height={200}
      showsVerticalScrollIndicator={true}
    >
      <Box padding={2} backgroundColor="gray.2">
        {logs.map((log, index) => (
          <Text
            key={index}
            size={1}
            style={{ fontFamily: 'monospace' }}
          >
            {log}
          </Text>
        ))}
      </Box>
    </ScrollArea>
  </Flex>
</Card>

Nested ScrollAreas

<Flex direction="row" gap={3} height={400}>
  <Card flex={1}>
    <Heading size={3}>Categories</Heading>
    <ScrollArea flex={1}>
      <Flex direction="column" gap={1}>
        {categories.map(cat => (
          <Button key={cat.id} variant="ghost" justify="start">
            {cat.name}
          </Button>
        ))}
      </Flex>
    </ScrollArea>
  </Card>

  <Card flex={2}>
    <Heading size={3}>Products</Heading>
    <ScrollArea flex={1}>
      <Flex direction="column" gap={2}>
        {products.map(product => (
          <Card key={product.id}>
            <Text>{product.name}</Text>
          </Card>
        ))}
      </Flex>
    </ScrollArea>
  </Card>
</Flex>

Related

• Box - Box component
• Flex - Flexbox layout