MultinaireScrollView

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

Basic Usage

import { MultinaireScrollView } from '@multinaire/multinaire-design';

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

Props

Prop	Type	Default	Description
flex	number	-	Flex value
margin	SpacingProps	-	Margin spacing
padding	SpacingProps	-	Content padding
gap	number	-	Gap between children

All React Native ScrollView props are also supported.

Examples

Basic Scroll View

<MultinaireScrollView padding={16} gap={16}>
  <MultinaireCard>
    <MultinaireText>Card 1</MultinaireText>
  </MultinaireCard>
  <MultinaireCard>
    <MultinaireText>Card 2</MultinaireText>
  </MultinaireCard>
  <MultinaireCard>
    <MultinaireText>Card 3</MultinaireText>
  </MultinaireCard>
</MultinaireScrollView>

With Flex

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

Horizontal Scroll

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

Form Layout

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