Tabs Component

A customizable tabs component for React Native that supports tailwind/nativewind colors and Lucide icons.

Features

• Support for tailwind colors
• Uses Lucide icons
• Dark mode support
• Customizable tab headers
• Badge support
• Responsive design

Usage

1import { Tabs, TabScreen, TabsProvider } from '@/components/_tabs';
2import { Home, User, Bell, Settings } from 'lucide-react-native';
3
4export default function MyScreen() {
5  const isDark = false; // Use your own theme system
6
7  return (
8    <TabsProvider defaultIndex={0}>
9      <Tabs
10        dark={isDark}
11        style={{
12          backgroundColor: isDark ? '#1f2937' : '#f8fafc'
13        }}
14        theme={{
15          colors: {
16            primary: isDark ? '#3b82f6' : '#2563eb',
17            surface: isDark ? '#111827' : '#ffffff',
18            onSurface: isDark ? '#f3f4f6' : '#1f2937',
19          }
20        }}
21        tabLabelStyle={{
22          color: isDark ? '#e2e8f0' : '#374151',
23          fontSize: 14,
24          fontWeight: '500',
25        }}
26        fontSize={14}
27        iconSize={20}
28      >
29        <TabScreen label="Home" icon={Home}>
30          <HomeScreen />
31        </TabScreen>
32        <TabScreen label="Profile" icon={User}>
33          <ProfileScreen />
34        </TabScreen>
35        <TabScreen label="Notifications" icon={Bell} badge={5}>
36          <NotificationsScreen />
37        </TabScreen>
38        <TabScreen label="Settings" icon={Settings}>
39          <SettingsScreen />
40        </TabScreen>
41      </Tabs>
42    </TabsProvider>
43  );
44}

Props

Tabs

Prop	Type	Description
theme	Object	Theme object with colors.primary etc.
dark	boolean	Whether to use dark mode
style	ViewStyle	Style for the tabs container
mode	'fixed' | 'scrollable'	Tab header layout mode
iconPosition	'leading' | 'top'	Position of the icon
showTextLabel	boolean	Whether to show text labels
uppercase	boolean	Whether to uppercase labels
tabHeaderStyle	ViewStyle	Style for the tab header
tabLabelStyle	TextStyle	Style for the tab labels
fontSize	number	Font size for tab labels
iconSize	number	Size for tab icons

TabScreen

Prop	Type	Description
label	string	Tab label text
icon	Component	Lucide icon component (e.g., Home from lucide-react-native)
badge	string | number | boolean	Badge content
disabled	boolean	Whether the tab is disabled
onPress	function	Callback when tab is pressed

TabsProvider

Prop	Type	Description
defaultIndex	number	Initial tab index
forcedIndex	number	Externally controlled tab index
onChangeIndex	function	Callback when tab changes