ThemeTabs

A component that creates a tabbed interface with support for both fixed and scrollable tab layouts, automatic theme adaptation, and animated tab switching.

Import

import ThemeTabs, { ThemeTab } from '@/components/ThemeTabs';

Features

Fixed or scrollable tab header layouts
Smooth animated tab transitions
Support for custom header and footer components
Touch-based tab switching
Automatic theme adaptation
Swipeable tab content

Props

ThemeTabs Props

Prop	Type	Default	Description
`children`	`ReactNode`	Required	ThemeTab components to display
`headerComponent`	`ReactNode`	—	Component to display above tabs
`footerComponent`	`ReactNode`	—	Component to display below tabs
`type`	`'scrollview' \| 'fixed'`	`'fixed'`	Layout type for the tab headers

ThemeTab Props

Prop	Type	Default	Description
`name`	`string`	Required	Label for the tab
`children`	`ReactNode`	Required	Content for the tab

Basic Usage

// Basic tabs with fixed headers
<ThemeTabs>
  <ThemeTab name="Profile">
    <View className="p-4">
      <ThemedText>Profile content here</ThemedText>
    </View>
  </ThemeTab>
  
  <ThemeTab name="Settings">
    <View className="p-4">
      <ThemedText>Settings content here</ThemedText>
    </View>
  </ThemeTab>
  
  <ThemeTab name="Activity">
    <View className="p-4">
      <ThemedText>Activity content here</ThemedText>
    </View>
  </ThemeTab>
</ThemeTabs>

Header Component Example

The headerComponent prop allows you to add a fixed header above the tab navigation. This header will scroll with the content until it reaches the top, then the tab navigation becomes sticky.

// Tabs with a custom header component
<ThemeTabs
  headerComponent={
    <View className="p-4 bg-light-primary dark:bg-dark-primary">
      <View className="mb-3">
        <ThemedText className="text-2xl font-bold">User Profile</ThemedText>
        <ThemedText className="text-light-subtext dark:text-dark-subtext">
          Manage your account details and preferences
        </ThemedText>
      </View>
      
      <View className="flex-row items-center mb-4">
        <Avatar 
          size="lg"
          src="https://example.com/avatar.jpg" 
          className="mr-4" 
        />
        <View>
          <ThemedText className="text-lg font-bold">Jane Smith</ThemedText>
          <ThemedText className="text-light-subtext dark:text-dark-subtext">
            Premium Member
          </ThemedText>
        </View>
      </View>
    </View>
  }
>
  <ThemeTab name="Personal">
    <View className="p-4">
      <ThemedText>Personal information content</ThemedText>
    </View>
  </ThemeTab>
  
  <ThemeTab name="Preferences">
    <View className="p-4">
      <ThemedText>User preferences content</ThemedText>
    </View>
  </ThemeTab>
  
  <ThemeTab name="Security">
    <View className="p-4">
      <ThemedText>Security settings content</ThemedText>
    </View>
  </ThemeTab>
</ThemeTabs>

With the above example:

The header with the profile information will be visible above the tabs
As you scroll down, the header will scroll up until the tabs reach the top
Once tabs reach the top, they will stick there while content continues scrolling
The tabs will remain visible at the top, allowing easy navigation between sections

// Tabs with scrollable headers and custom header component
<ThemeTabs 
  type="scrollview"
  headerComponent={
    <View className="p-4">
      <ThemedText className="text-2xl font-bold">User Dashboard</ThemedText>
    </View>
  }
>
  <ThemeTab name="Today">
    <DailyStats />
  </ThemeTab>
  <ThemeTab name="This Week">
    <WeeklyStats />
  </ThemeTab>
  <ThemeTab name="This Month">
    <MonthlyStats />
  </ThemeTab>
  <ThemeTab name="This Year">
    <YearlyStats />
  </ThemeTab>
</ThemeTabs>

ThemeTabs

On this page