A customizable tabs component with support for scrollable and fixed tabs, animations, and sticky headers.

ThemeTabs

ThemeTabs is a flexible tab navigation component that supports both scrollable and fixed tabs, with optional header and footer components. It includes smooth animations and supports both swipeable and button-only navigation.

Import

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

Features

Flexible Tab Types: Choose between fixed tabs or scrollable tabs for larger sets
Sticky Headers: Tab bar remains fixed while content scrolls
Custom Components: Add optional header and footer components
Animated Transitions: Smooth animations when switching tabs
Navigation Options: Support for both swipe and button navigation
Back Button Support: Native back button integration for Android
Dark Mode: Automatic dark mode support
Customizable: Style with className and style props

Props

ThemeTabs Props

Prop	Type	Default	Description
`type`	`'scrollview' \| 'fixed'`	`'fixed'`	Type of tab bar. Use 'scrollview' for many tabs that need horizontal scrolling
`headerComponent`	`ReactNode`	—	Optional component to render above the tabs
`footerComponent`	`ReactNode`	—	Optional component to render below the tabs
`className`	`string`	—	Additional classes for the container
`style`	`ViewStyle`	—	Additional styles for the container
`scrollEnabled`	`boolean`	`true`	Enable/disable horizontal swipe navigation between tabs

ThemeTab Props

Prop	Type	Default	Description
`name`	`string`	Required	The name displayed in the tab bar
`children`	`ReactNode`	Required	Content to display in the tab
`type`	`'scrollview' \| 'flatlist' \| 'view'`	—	Type of content container

ThemeTabs supports multiple ways to navigate between tabs:

Tab Buttons: Tap the tab headers to switch tabs
Swipe Navigation: Swipe left/right to move between tabs (can be disabled with scrollEnabled={false})
Back Button: On Android, pressing the device back button will navigate to the previous tab if available

The back button behavior works as follows:

When on the first tab, the back button performs its default action (e.g., navigating back in the app)
When on any other tab, the back button navigates to the previous tab
Back button navigation triggers the same smooth animations as other navigation methods

Basic Usage

<ThemeTabs>
  <ThemeTab name="Tab 1">
    <Text>Content for Tab 1</Text>
  </ThemeTab>
  <ThemeTab name="Tab 2">
    <Text>Content for Tab 2</Text>
  </ThemeTab>
</ThemeTabs>

With Scrollable Tabs

For many tabs that need horizontal scrolling:

<ThemeTabs type="scrollview">
  <ThemeTab name="Tab 1">
    <Text>Content 1</Text>
  </ThemeTab>
  <ThemeTab name="Tab 2">
    <Text>Content 2</Text>
  </ThemeTab>
  <ThemeTab name="Tab 3">
    <Text>Content 3</Text>
  </ThemeTab>
  {/* Add more tabs as needed */}
</ThemeTabs>

With Header and Footer

<ThemeTabs
  headerComponent={
    <View className="p-4">
      <Text>Header Content</Text>
    </View>
  }
  footerComponent={
    <View className="p-4">
      <Text>Footer Content</Text>
    </View>
  }
>
  <ThemeTab name="Tab 1">
    <Text>Content 1</Text>
  </ThemeTab>
  <ThemeTab name="Tab 2">
    <Text>Content 2</Text>
  </ThemeTab>
</ThemeTabs>

You can disable horizontal swipe navigation while keeping animated tab transitions:

<ThemeTabs scrollEnabled={false}>
  <ThemeTab name="Tab 1">
    <Text>Navigate using tab buttons only</Text>
  </ThemeTab>
  <ThemeTab name="Tab 2">
    <Text>Content animates when switching tabs</Text>
  </ThemeTab>
</ThemeTabs>

Notes

The tab bar automatically sticks to the top while scrolling
When scrollEnabled={false}, content transitions use a slide animation
Header components will scroll with content while the tab bar remains fixed
Tab content width automatically adjusts to screen width
Supports both light and dark themes out of the box

// 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

ThemeTabs

Import

Features

Props

ThemeTabs Props

ThemeTab Props

Navigation

Basic Usage

With Scrollable Tabs

With Header and Footer

Disable Swipe Navigation

Notes

On this page