managarten/apps/picture/packages/mobile-ui/components/ui/Container

Container

Safe area container component with flexible padding and background color options.

Features

• ✅ Safe area handling (respects notch, status bar, etc.)
• ✅ Optional padding
• ✅ Custom background color
• ✅ NativeWind/Tailwind support
• ✅ TypeScript support

Installation

npx @memoro/ui add container

Usage

Basic Container

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

<Container>
  <Text>Your content here</Text>
</Container>

Custom Background Color

<Container backgroundColor="#F3F4F6">
  <Text>Gray background</Text>
</Container>

<Container backgroundColor="#1F2937">
  <Text style={{ color: '#FFF' }}>Dark background</Text>
</Container>

Without Padding

<Container padding={false}>
  <Image source={{ uri: '...' }} style={{ width: '100%' }} />
</Container>

Custom Padding

<Container paddingValue={16}>
  <Text>Custom 16px padding</Text>
</Container>

<Container paddingValue={32}>
  <Text>Larger 32px padding</Text>
</Container>

With Tailwind Classes

<Container className="bg-gray-100">
  <Text>Using Tailwind classes</Text>
</Container>

Full Example

function MyScreen() {
  return (
    <Container backgroundColor="#FFFFFF" paddingValue={20}>
      <Text variant="h1">Screen Title</Text>
      <Text variant="body" style={{ marginTop: 16 }}>
        Screen content goes here
      </Text>
    </Container>
  );
}

Props

Prop	Type	Default	Description
children	ReactNode	-	Content to render inside container
backgroundColor	string	'#FFFFFF'	Background color (hex, rgb, etc.)
padding	boolean	true	Apply default padding
paddingValue	number	24	Custom padding in pixels
style	ViewStyle	-	Additional styles
className	string	''	CSS class names (NativeWind)

Default Behavior

• Padding: 24px (Tailwind p-6)
• Background: White (#FFFFFF)
• Safe Area: Automatically handled for all edges

With Theme Integration

import { useTheme } from '~/contexts/ThemeContext';
import { Container } from '@/components/ui/Container';

function ThemedScreen() {
  const { theme } = useTheme();

  return (
    <Container backgroundColor={theme.colors.background}>
      <Text color={theme.colors.text.primary}>
        Themed content
      </Text>
    </Container>
  );
}

Common Patterns

Full-Width Images

<Container padding={false}>
  <Image
    source={{ uri: 'https://...' }}
    style={{ width: '100%', height: 200 }}
  />
  <View className="p-6">
    <Text variant="h2">Image Title</Text>
  </View>
</Container>

Form Layout

<Container paddingValue={16}>
  <Text variant="h3">Login</Text>
  <Input label="Email" />
  <Input label="Password" secureTextEntry />
  <Button title="Sign In" fullWidth />
</Container>

Scrollable Content

<Container padding={false}>
  <ScrollView className="p-6">
    {/* Content */}
  </ScrollView>
</Container>

Dependencies

• react-native-safe-area-context

Notes

• Uses SafeAreaView from react-native-safe-area-context
• Automatically applies flex: 1 to fill screen
• Padding defaults to Tailwind's p-6 (24px)
• Safe area is respected on all edges (top, bottom, left, right)
• Works with both light and dark backgrounds