ScrollContainer

Enhanced scrollable container with padding, gap, and flex support.

Basic Usage

import { ScrollContainer } from '@multinaire/ui';

<ScrollContainer padding={16}>
  {/* Scrollable content */}
</ScrollContainer>

Props

Prop	Type	Default	Description
flex	number	—	Flex grow value
margin	SpacingProps	—	Outer margin
padding	SpacingProps	—	Inner padding
gap	number	—	Gap between children in pixels

All React Native ScrollView props are also supported.

Examples

Basic Scroll View

<ScrollContainer padding={16} gap={16}>
  <Card>
    <Typography>Card 1</Typography>
  </Card>
  <Card>
    <Typography>Card 2</Typography>
  </Card>
  <Card>
    <Typography>Card 3</Typography>
  </Card>
</ScrollContainer>

With Flex

<Container flex={1}>
  <Header />
  <ScrollContainer flex={1} padding={16}>
    {/* Content fills remaining space */}
  </ScrollContainer>
</Container>

Horizontal Scroll

<ScrollContainer
  horizontal
  padding={{ horizontal: 16 }}
  gap={12}
  showsHorizontalScrollIndicator={false}
>
  {items.map((item) => (
    <ItemCard key={item.id} data={item} />
  ))}
</ScrollContainer>

Form Layout

<ScrollContainer
  flex={1}
  padding={16}
  gap={16}
  keyboardShouldPersistTaps="handled"
>
  <Input title="Name" {...nameProps} />
  <Input title="Email" {...emailProps} />
  <Input title="Message" multiline {...messageProps} />
  <Button title="Submit" onPress={submit} />
</ScrollContainer>