MultinaireContainer

Flexible layout container with comprehensive styling, border, and safe area support.

Basic Usage

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

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

Props

Prop	Type	Default	Description
style	ViewStyle	—	Additional styles applied to the container
margin	SpacingProps	—	Outer margin. Accepts a number for uniform margin, or an object for per-side control
padding	SpacingProps	—	Inner padding. Accepts a number for uniform padding, or an object for per-side control
width	DimensionValue	—	Fixed width of the container
height	DimensionValue	—	Fixed height of the container
borderRadius	BorderRadiusProps	—	Border radius. Accepts a number for uniform radius or an object for per-corner control
backgroundColor	ColorKeys	—	Background color key from the active theme palette
border	number	—	Border width in pixels. Use together with borderColor for a visible border
borderColor	ColorKeys	—	Border color key from the active theme palette
flex	number	—	Flex grow value
horizontal	boolean	false	Set to true to lay out children in a row (horizontal). Defaults to column
justifyContent	string	—	Justify content along the main axis
alignItems	string	—	Align items along the cross axis
gap	number	—	Gap between children in pixels
safeAreaEdges	Edges	—	Safe area edges to inset. Renders as SafeAreaView when provided
onLayout	function	—	Callback invoked when the layout changes
onPress	() => void	—	Press handler. Renders as Pressable when provided

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="Star1" />
  <MultinaireText>Horizontal items</MultinaireText>
</MultinaireContainer>

Centered Content

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

With Background Color

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

With Border

<MultinaireContainer border={1} borderColor="primary" padding={16} borderRadius={8}>
  <MultinaireText>Outlined container</MultinaireText>
</MultinaireContainer>

Safe Area Support

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

Pressable Container

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