Layout Components

Structural components for page composition, safe area management, and visual separation.


import { ScreenContainer, Divider } from '@/common/components';

ScreenContainer

A safe area wrapper that serves as the foundation for every screen in the app. Handles safe area insets, optional scrolling, and consistent padding.

Basic Usage


<ScreenContainer>
  <Text variant="h1">Welcome</Text>
  <Text>Your screen content goes here.</Text>
</ScreenContainer>

Scrollable Screen


<ScreenContainer scrollable>
  <Text variant="h1">Long Content</Text>
  {items.map((item) => (
    <Card key={item.id}>
      <Text>{item.title}</Text>
    </Card>
  ))}
</ScreenContainer>

Without Padding


<ScreenContainer padded={false}>
  <Image source={heroImage} style={{ width: '100%', height: 200 }} />
</ScreenContainer>

Custom Safe Area Edges

By default, only the top edge is respected. You can add the bottom edge or customize as needed.


<ScreenContainer edges={['top', 'bottom']}>
  <Text>Protected from both top and bottom insets</Text>
</ScreenContainer>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	required	Content to render
`scrollable`	`boolean`	`false`	Wrap content in a ScrollView
`padded`	`boolean`	`true`	Apply horizontal and vertical padding
`edges`	`('top' \| 'bottom')[]`	`['top']`	Safe area edges to respect
`style`	`ViewStyle`	—	Additional styles applied to the container

ScreenContainer uses react-native-safe-area-context under the hood. The edges prop controls which system bars (status bar, home indicator) are accounted for in the layout.

Divider

A thin separator line for visually dividing content sections. Supports horizontal and vertical orientations.

Horizontal (Default)


<Text>Section A</Text>
<Divider />
<Text>Section B</Text>

Vertical

Useful for separating inline elements like toolbar buttons.


<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
  <IconButton icon="copy-outline" accessibilityLabel="Copy" />
  <Divider orientation="vertical" />
  <IconButton icon="share-outline" accessibilityLabel="Share" />
</View>

Bold

A thicker divider for stronger visual separation.


<Divider bold />

Inset

Adds horizontal margin to the divider — useful inside lists to align with content that has left icons or avatars.


<ListItem title="First Item" />
<Divider inset />
<ListItem title="Second Item" />

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction of the divider line
`bold`	`boolean`	`false`	Render a thicker divider
`inset`	`boolean`	`false`	Add horizontal margin (inset)