Container

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

Basic Usage

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

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

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. Cannot be combined with onPress
testID	string	—	Test identifier for UI automation
onLayout	function	—	Callback invoked when the layout changes
onPress	() => void	—	Press handler. Renders as Pressable when provided. Cannot be combined with safeAreaEdges

Examples

Vertical Layout (Default)

<Container gap={16} padding={16}>
  <Typography>Item 1</Typography>
  <Typography>Item 2</Typography>
  <Typography>Item 3</Typography>
</Container>

Horizontal Layout

<Container horizontal gap={8} alignItems="center">
  <Icon icon="Star1" />
  <Typography>Horizontal items</Typography>
</Container>

Centered Content

<Container flex={1} justifyContent="center" alignItems="center">
  <Typography>Centered</Typography>
</Container>

With Background Color

<Container backgroundColor="backgroundVariant" padding={16} borderRadius={8}>
  <Typography>Surface background</Typography>
</Container>

With Border

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

Safe Area Support

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

Pressable Container

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

When onPress is set the container renders as a Pressable and animates its opacity on hover (web/desktop) and press.