ExpoStartup
Components

Section

A structured container component for organizing content with optional title, subtitle, and icon.

Section

The Section component provides a structured container for organizing content with optional title, subtitle, icon, and footer elements. It's designed to create consistent section layouts throughout your application.

Features

  • Title & Subtitle: Optional heading elements with customizable styling
  • Icon Support: Optional icon to display next to the title
  • Custom Header: Support for custom header content in place of default title/subtitle
  • Footer Support: Optional footer content
  • Customizable Padding: Control vertical spacing with predefined sizes
  • Styling Control: Accepts additional Tailwind classes and style objects
  • Dark Mode Support: Automatically adapts to light/dark mode

Import

import Section from '@/components/layout/Section';

Props

PropTypeDefaultDescription
titlestring—Main title text
subtitlestring—Secondary text displayed below title
iconIconName—Icon displayed next to the title
headerReact.ReactNode—Custom header content (replaces title/subtitle)
footerReact.ReactNode—Content displayed at the bottom of the section
padding'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl''none'Vertical padding size
titleSize'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl''xl'Font size of the title
classNamestring''Additional Tailwind classes
styleViewStyle—Additional style object
childrenReact.ReactNode—Content to display in the section

Usage Examples

Basic Section with Title

<Section title="User Information">
  <View className="py-4">
    <Text>John Doe</Text>
    <Text>john.doe@example.com</Text>
  </View>
</Section>

Section with Title and Subtitle

<Section 
  title="Account Settings" 
  subtitle="Manage your account preferences"
  padding="md"
>
  <View className="py-4">
    <Text>Content goes here</Text>
  </View>
</Section>

Section with Icon

<Section 
  title="Security" 
  subtitle="Configure your security settings"
  icon="Shield"
  padding="lg"
>
  <View className="py-4">
    <Text>Security content</Text>
  </View>
</Section>

Section with Custom Header

<Section
  header={
    <View className="flex-row justify-between items-center">
      <Text className="text-xl font-bold">Notifications</Text>
      <Switch value={notificationsEnabled} onValueChange={toggleNotifications} />
    </View>
  }
  padding="md"
>
  <View className="py-4">
    <Text>Notification settings and preferences</Text>
  </View>
</Section>
<Section
  title="Privacy Settings"
  padding="lg"
  footer={
    <Button title="Save Changes" />
  }
>
  <View className="py-4">
    <Text>Privacy content goes here</Text>
  </View>
</Section>

Profile Screen Example

function ProfileScreen() {
  return (
    <ScrollView className="flex-1">
      <Section
        title="Profile Information"
        subtitle="Your personal details"
        icon="User"
        padding="lg"
      >
        <View className="py-4">
          <Input label="Full Name" value="John Doe" />
          <Spacer size={16} />
          <Input label="Email" value="john.doe@example.com" />
          <Spacer size={16} />
          <Input label="Phone" value="+1 (555) 123-4567" />
        </View>
      </Section>
      
      <Section
        title="Account Settings"
        icon="Settings"
        padding="lg"
      >
        <View className="py-4">
          <View className="flex-row justify-between items-center py-2">
            <Text>Dark Mode</Text>
            <Switch value={true} />
          </View>
          
          <Divider spacing={8} />
          
          <View className="flex-row justify-between items-center py-2">
            <Text>Notifications</Text>
            <Switch value={true} />
          </View>
          
          <Divider spacing={8} />
          
          <View className="flex-row justify-between items-center py-2">
            <Text>Two-Factor Authentication</Text>
            <Switch value={false} />
          </View>
        </View>
      </Section>
      
      <Section
        title="Privacy"
        icon="Lock"
        padding="lg"
        footer={
          <View className="flex-row justify-end">
            <Button title="Save Changes" />
          </View>
        }
      >
        <View className="py-4">
          <Checkbox
            label="Allow usage data collection"
            checked={true}
            onChange={() => {}}
          />
          <Spacer size={12} />
          <Checkbox
            label="Share activity with friends"
            checked={false}
            onChange={() => {}}
          />
          <Spacer size={12} />
          <Checkbox
            label="Receive marketing emails"
            checked={false}
            onChange={() => {}}
          />
        </View>
      </Section>
    </ScrollView>
  );
}

Settings Screen Example

function SettingsScreen() {
  return (
    <ScrollView className="flex-1 p-4">
      <Section
        title="Appearance"
        icon="Eye"
        padding="md"
      >
        <View className="py-2">
          <Text className="font-medium mb-4">Theme</Text>
          <View className="flex-row space-x-4">
            <Pressable className="items-center">
              <View className="w-16 h-16 rounded-lg bg-white border border-gray-300 mb-2" />
              <Text>Light</Text>
            </Pressable>
            
            <Pressable className="items-center">
              <View className="w-16 h-16 rounded-lg bg-gray-800 border border-gray-300 mb-2" />
              <Text>Dark</Text>
            </Pressable>
            
            <Pressable className="items-center">
              <View className="w-16 h-16 rounded-lg bg-gradient-to-b from-white to-gray-800 border border-gray-300 mb-2" />
              <Text>System</Text>
            </Pressable>
          </View>
        </View>
      </Section>
      
      <Section
        title="Notifications"
        icon="Bell"
        padding="md"
      >
        <View className="py-2">
          <View className="flex-row justify-between items-center py-2">
            <View>
              <Text className="font-medium">Push Notifications</Text>
              <Text className="text-sm text-gray-500">Receive alerts on your device</Text>
            </View>
            <Switch value={true} />
          </View>
          
          <Divider spacing={8} />
          
          <View className="flex-row justify-between items-center py-2">
            <View>
              <Text className="font-medium">Email Notifications</Text>
              <Text className="text-sm text-gray-500">Receive alerts via email</Text>
            </View>
            <Switch value={true} />
          </View>
        </View>
      </Section>
      
      <Section
        title="About"
        icon="Info"
        padding="md"
      >
        <View className="py-2">
          <Text className="font-medium">Version</Text>
          <Text className="text-sm text-gray-500">1.0.0 (Build 123)</Text>
          <Spacer size={16} />
          
          <Button 
            title="Terms of Service" 
            variant="ghost"
            className="justify-start px-0"
          />
          
          <Button 
            title="Privacy Policy" 
            variant="ghost"
            className="justify-start px-0"
          />
          
          <Button 
            title="Licenses" 
            variant="ghost"
            className="justify-start px-0"
          />
        </View>
      </Section>
    </ScrollView>
  );
}

Best Practices

Consistent Section Structure

Use Sections consistently to create a cohesive user interface:

// Good: Consistent section structure
<ScrollView>
  <Section title="Section 1" padding="lg">
    {/* Content */}
  </Section>
  
  <Section title="Section 2" padding="lg">
    {/* Content */}
  </Section>
  
  <Section title="Section 3" padding="lg">
    {/* Content */}
  </Section>
</ScrollView>
 
// Avoid: Inconsistent section structure
<ScrollView>
  <View className="p-4">
    <Text className="text-xl font-bold">Section 1</Text>
    {/* Content */}
  </View>
  
  <Section title="Section 2" padding="lg">
    {/* Content */}
  </Section>
  
  <View className="mt-4">
    <Text className="text-xl font-bold mb-2">Section 3</Text>
    {/* Content */}
  </View>
</ScrollView>

Choose Appropriate Padding

Select the appropriate padding size based on content density:

// For dense content
<Section title="Quick Actions" padding="sm">
  {/* Dense content */}
</Section>
 
// For regular content
<Section title="User Details" padding="md">
  {/* Standard content */}
</Section>
 
// For more spacious layout
<Section title="Welcome" padding="xl">
  {/* Spacious, prominent content */}
</Section>

Use Icons for Visual Consistency

Add icons to sections for better visual hierarchy and scannability:

<Section title="Profile" icon="User" padding="md">
  {/* Profile content */}
</Section>
 
<Section title="Security" icon="Shield" padding="md">
  {/* Security content */}
</Section>
 
<Section title="Notifications" icon="Bell" padding="md">
  {/* Notification content */}
</Section>

Implementation Details

The Section component uses React Native's View component to create a structured container with optional header and footer elements. The header can be either a combination of title, subtitle, and icon, or a completely custom header provided through the header prop.

The padding is applied vertically (top and bottom) and is controlled through the padding prop, which maps to predefined Tailwind CSS classes. The title size is similarly mapped to Tailwind text size classes through the titleSize prop.

The component uses the ThemedText component for text elements, ensuring proper appearance in both light and dark modes.

Notes

  • The Section component is typically used to organize content in scrollable screens
  • For simple sections with just a title, you might not need padding, as the content itself can define appropriate spacing
  • When using custom headers, you have complete control over the header's layout and content
  • The footer is positioned at the bottom of the section and is typically used for action buttons
  • All text elements automatically adapt to dark mode through the ThemedText component

Placeholder

A component for displaying empty states or loading content.

Select

A customizable select/dropdown component for choosing from multiple options.

On this page