MultinaireContainer

Flexible layout container with comprehensive styling options.

Basic Usage

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

<MultinaireContainer padding={16} gap={8}>
  {/* Content */}
</MultinaireContainer>

Props

Prop	Type	Default	Description
style	ViewStyle	-	Additional styles
margin	SpacingProps	-	Margin spacing
padding	SpacingProps	-	Padding spacing
width	DimensionValue	-	Container width
height	DimensionValue	-	Container height
borderRadius	BorderRadiusProps	-	Corner radius
backgroundColor	ColorKeys	-	Background color from theme
flex	number	-	Flex value
horizontal	boolean	false	Horizontal flex direction
justifyContent	string	-	Justify content alignment
alignItems	string	-	Align items alignment
gap	number	-	Gap between children
safeAreaEdges	Edges	-	Safe area edges to respect
onLayout	function	-	Layout callback
onPress	() => void	-	Press handler

Examples

Vertical Layout (Default)

<MultinaireContainer gap={16} padding={16}>
  <MultinaireText>Item 1</MultinaireText>
  <MultinaireText>Item 2</MultinaireText>
  <MultinaireText>Item 3</MultinaireText>
</MultinaireContainer>

Horizontal Layout

<MultinaireContainer horizontal gap={8} alignItems="center">
  <MultinaireIcon icon="Star" />
  <MultinaireText>Horizontal items</MultinaireText>
</MultinaireContainer>

Centered Content

<MultinaireContainer
  flex={1}
  justifyContent="center"
  alignItems="center"
>
  <MultinaireText>Centered</MultinaireText>
</MultinaireContainer>

With Background Color

<MultinaireContainer
  backgroundColor="surface"
  padding={16}
  borderRadius={8}
>
  <MultinaireText>Surface background</MultinaireText>
</MultinaireContainer>

Safe Area Support

<MultinaireContainer safeAreaEdges={['top', 'bottom']}>
  {/* Content respects safe areas */}
</MultinaireContainer>

Pressable Container

<MultinaireContainer
  padding={16}
  backgroundColor="surface"
  onPress={() => handlePress()}
>
  <MultinaireText>Tap me</MultinaireText>
</MultinaireContainer>