react-native-segmented-tab

A beautiful, customizable, and animated segmented control component for React Native. Perfect for creating tab switchers, category filters, and multi-option selectors with smooth animations.

✨ Features

• 🎨 Fully Customizable - Colors, sizes, shadows, and more
• 🎭 Smooth Animations - Powered by React Native Reanimated
• 📱 Cross-Platform - Works seamlessly on iOS and Android
• 🎯 TypeScript Support - Full type definitions included
• 🪶 Lightweight - Zero dependencies except Reanimated
• 🔧 Flexible API - Easy to integrate and customize

📱 Demo

📦 Installation

npm install react-native-segmented-tab react-native-reanimated

or with yarn:

yarn add react-native-segmented-tab react-native-reanimated

Peer Dependencies

This library requires react-native-reanimated (>= 2.0.0). If you haven't installed it yet, follow the official installation guide.

🚀 Quick Start

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { SegmentedTab, SegmentedItem } from 'react-native-segmented-tab';

export default function App() {
  const [selectedTab, setSelectedTab] = useState('home');

  return (
    <View style={styles.container}>
      <SegmentedTab
        selectedValue={selectedTab}
        onValueChange={setSelectedTab}
      >
        <SegmentedItem value="home">
          <Text style={styles.text}>Home</Text>
        </SegmentedItem>
        <SegmentedItem value="search">
          <Text style={styles.text}>Search</Text>
        </SegmentedItem>
        <SegmentedItem value="profile">
          <Text style={styles.text}>Profile</Text>
        </SegmentedItem>
      </SegmentedTab>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    fontSize: 16,
    fontWeight: '600',
  },
});

📖 API Reference

<SegmentedTab>

The main container component for the segmented control.

Props

| Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | selectedValue | string | - | ✅ | The currently selected segment value | | onValueChange | (value: string) => void | - | ❌ | Callback fired when a segment is pressed | | children | React.ReactElement[] | - | ✅ | Array of SegmentedItem components | | style | ViewStyle | - | ❌ | Additional styles for the container |

Color Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | primaryColor | string | '#FF6B9D' | Background color of the selected segment | | secondaryColor | string | '#FFE5EF' | Background color of the container | | textColor | string | '#FF6B9D' | Text color for unselected segments | | selectedTextColor | string | '#000000' | Text color for the selected segment |

Container Style Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | height | number | 56 | Height of the container | | borderRadius | number | 28 | Border radius of the container and active segment | | borderWidth | number | 1 | Border width of the container | | borderColor | ColorValue | secondaryColor | Border color (defaults to secondaryColor) | | containerWidth | number | windowWidth - 40 | Fixed width of the container | | internalPadding | number | 20 | Internal horizontal padding |

Shadow Props (Active Segment)

| Prop | Type | Default | Description | |------|------|---------|-------------| | shadowColor | ColorValue | 'rgba(0, 0, 0, 0.2)' | Shadow color for the active segment | | shadowOffset | {width: number, height: number} | {width: 0, height: 3} | Shadow offset | | shadowOpacity | number | 0.3 | Shadow opacity (iOS) | | shadowRadius | number | 4 | Shadow blur radius (iOS) | | elevation | number | 2 | Elevation for Android shadow | | activeSegmentHeightPercentage | number | 80 | Height of active segment as percentage of container |

<SegmentedItem>

Individual segment item component.

Props

| Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | value | string | - | ✅ | Unique identifier for this segment | | children | React.ReactNode | - | ✅ | Content to display (usually Text) | | style | ViewStyle | - | ❌ | Additional styles for the item |

🎨 Examples

Basic Usage

import { SegmentedTab, SegmentedItem } from 'react-native-segmented-tab';

<SegmentedTab
  selectedValue={selectedTab}
  onValueChange={setSelectedTab}
>
  <SegmentedItem value="tab1">
    <Text>Tab 1</Text>
  </SegmentedItem>
  <SegmentedItem value="tab2">
    <Text>Tab 2</Text>
  </SegmentedItem>
</SegmentedTab>

Custom Colors (Green Theme)

<SegmentedTab
  selectedValue={selectedTab}
  onValueChange={setSelectedTab}
  primaryColor="#4CAF50"
  secondaryColor="#E8F5E9"
  textColor="#4CAF50"
  selectedTextColor="#FFFFFF"
>
  <SegmentedItem value="active">
    <Text>Active</Text>
  </SegmentedItem>
  <SegmentedItem value="completed">
    <Text>Completed</Text>
  </SegmentedItem>
</SegmentedTab>

Custom Size and Shadow

<SegmentedTab
  selectedValue={selectedTab}
  onValueChange={setSelectedTab}
  height={64}
  borderRadius={32}
  containerWidth={350}
  shadowColor="#000000"
  shadowOpacity={0.5}
  shadowRadius={6}
  elevation={4}
  activeSegmentHeightPercentage={85}
>
  <SegmentedItem value="small">
    <Text>Small</Text>
  </SegmentedItem>
  <SegmentedItem value="large">
    <Text>Large</Text>
  </SegmentedItem>
</SegmentedTab>

With Icons (using react-native-vector-icons)

import Icon from 'react-native-vector-icons/Ionicons';

<SegmentedTab
  selectedValue={selectedTab}
  onValueChange={setSelectedTab}
  primaryColor="#007AFF"
  secondaryColor="#E3F2FD"
>
  <SegmentedItem value="grid">
    <Icon name="grid-outline" size={20} />
  </SegmentedItem>
  <SegmentedItem value="list">
    <Icon name="list-outline" size={20} />
  </SegmentedItem>
  <SegmentedItem value="map">
    <Icon name="map-outline" size={20} />
  </SegmentedItem>
</SegmentedTab>

Dark Mode Support

import { useColorScheme } from 'react-native';

const isDark = useColorScheme() === 'dark';

<SegmentedTab
  selectedValue={selectedTab}
  onValueChange={setSelectedTab}
  primaryColor={isDark ? '#BB86FC' : '#6200EE'}
  secondaryColor={isDark ? '#1F1B24' : '#F5F5F5'}
  textColor={isDark ? '#BB86FC' : '#6200EE'}
  selectedTextColor={isDark ? '#000000' : '#FFFFFF'}
>
  <SegmentedItem value="light">
    <Text>Light</Text>
  </SegmentedItem>
  <SegmentedItem value="dark">
    <Text>Dark</Text>
  </SegmentedItem>
</SegmentedTab>

Four Segments

<SegmentedTab
  selectedValue={selectedTab}
  onValueChange={setSelectedTab}
>
  <SegmentedItem value="all">
    <Text>All</Text>
  </SegmentedItem>
  <SegmentedItem value="work">
    <Text>Work</Text>
  </SegmentedItem>
  <SegmentedItem value="personal">
    <Text>Personal</Text>
  </SegmentedItem>
  <SegmentedItem value="urgent">
    <Text>Urgent</Text>
  </SegmentedItem>
</SegmentedTab>

Controlled with Content

function TabExample() {
  const [selectedTab, setSelectedTab] = useState('home');

  return (
    <View>
      <SegmentedTab
        selectedValue={selectedTab}
        onValueChange={setSelectedTab}
      >
        <SegmentedItem value="home">
          <Text>Home</Text>
        </SegmentedItem>
        <SegmentedItem value="settings">
          <Text>Settings</Text>
        </SegmentedItem>
      </SegmentedTab>

      <View style={styles.content}>
        {selectedTab === 'home' && <HomeContent />}
        {selectedTab === 'settings' && <SettingsContent />}
      </View>
    </View>
  );
}

⚙️ Requirements

• React Native >= 0.64
• React >= 16.8
• react-native-reanimated >= 2.0.0

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

See CONTRIBUTING.md for more details.

⭐ Show Your Support

Give a ⭐️ if this project helped you!

Made with ❤️ and React Native