React Native Segmented Tab Wrapper

A customizable and animated segmented tab wrapper component for React Native, built with react-native-reanimated for smooth performance. This package provides a wrapper-based approach using children components.

Features

• 🎨 Fully customizable appearance
• 🚀 Smooth animations powered by react-native-reanimated
• 📱 Works on both iOS and Android
• 🎯 TypeScript support
• 🎪 Children-based API for flexible content
• 🎛️ Controlled and uncontrolled modes
• ♿ Accessibility friendly
• 🎨 Default styling similar to iOS segmented control

Installation

npm install react-native-segmented-tab-wrapper

Dependencies

This package requires the following peer dependencies:

npm install react-native-reanimated

Follow the react-native-reanimated installation guide for platform-specific setup.

Basic Usage

import React from "react";
import { View, Text } from "react-native";
import { SegmentedTabWrapper, SegmentedTab } from "react-native-segmented-tab-wrapper";

const App = () => {
  return (
    <View style={{ flex: 1, paddingTop: 50, paddingHorizontal: 20 }}>
      <SegmentedTabWrapper onTabChange={(index) => console.log("Tab changed to:", index)}>
        <SegmentedTab title="First">
          <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text>First Tab Content</Text>
          </View>
        </SegmentedTab>

        <SegmentedTab title="Second">
          <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text>Second Tab Content</Text>
          </View>
        </SegmentedTab>

        <SegmentedTab title="Third">
          <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text>Third Tab Content</Text>
          </View>
        </SegmentedTab>
      </SegmentedTabWrapper>
    </View>
  );
};

export default App;

Advanced Usage

Custom Styling

<SegmentedTabWrapper
  colors={{
    activeBackground: "#FF6B6B",
    activeText: "#FFFFFF",
    inactiveText: "#666666",
    containerBackground: "#F0F0F0",
  }}
  borderRadius={12}
  padding={6}
  margin={8}
  fontSize={14}
  fontFamily="CustomFont-Regular"
  containerStyle={{
    marginVertical: 20,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  }}
  tabTextStyle={{
    fontWeight: "600",
  }}
  activeTabTextStyle={{
    fontWeight: "bold",
  }}
  animationDuration={400}
>
  <SegmentedTab title="Tab 1">
    <YourContent />
  </SegmentedTab>

  <SegmentedTab title="Tab 2">
    <YourOtherContent />
  </SegmentedTab>
</SegmentedTabWrapper>

Controlled Mode

const [activeTab, setActiveTab] = useState(0);

<SegmentedTabWrapper activeIndex={activeTab} onTabChange={setActiveTab}>
  <SegmentedTab title="Controlled 1">
    <Content1 />
  </SegmentedTab>

  <SegmentedTab title="Controlled 2">
    <Content2 />
  </SegmentedTab>
</SegmentedTabWrapper>;

Dynamic Content

const [tabs, setTabs] = useState([
  { title: "Dynamic 1", content: <Content1 /> },
  { title: "Dynamic 2", content: <Content2 /> },
]);

<SegmentedTabWrapper>
  {tabs.map((tab, index) => (
    <SegmentedTab key={index} title={tab.title}>
      {tab.content}
    </SegmentedTab>
  ))}
</SegmentedTabWrapper>;

Components

SegmentedTabWrapper

The main wrapper component that handles the tab navigation and animations.

Props

| Prop | Type | Default | Description | | ----------------------- | ------------------------- | ----------------------- | -------------------------------------------- | | children | SegmentedTab[] | Required | Array of SegmentedTab components | | activeIndex | number | 0 | Currently active tab index (controlled mode) | | onTabChange | (index: number) => void | undefined | Callback when tab changes | | containerStyle | ViewStyle | {} | Style for the main container | | tabContainerStyle | ViewStyle | {} | Style for the tab button container | | activeTabStyle | ViewStyle | {} | Style for the active tab indicator | | tabButtonStyle | ViewStyle | {} | Style for individual tab buttons | | tabTextStyle | TextStyle | {} | Style for tab text | | activeTabTextStyle | TextStyle | {} | Style for active tab text | | contentContainerStyle | ViewStyle | {} | Style for the content area | | animationDuration | number | 300 | Animation duration in milliseconds | | colors | ColorsConfig | See below | Color configuration object | | borderRadius | number | 8 | Border radius for the active tab | | padding | number | 4 | Padding for the container | | margin | number | 5 | Margin for the active tab indicator | | disabled | boolean | false | Disable tab interactions | | fontFamily | string | 'IBMPlexSans-Regular' | Font family for tab text | | fontSize | number | 16 | Font size for tab text |

SegmentedTab

Individual tab component that wraps the content.

Props

| Prop | Type | Default | Description | | ---------- | ----------- | ------------ | -------------------- | | title | string | Required | Tab title to display | | children | ReactNode | Required | Tab content |

Default Colors

{
  activeBackground: '#ec1d23',
  activeText: '#fff',
  inactiveText: '#ec1d23',
  containerBackground: 'transparent',
}

ColorsConfig

{
  activeBackground?: string;    // Active tab background color
  activeText?: string;          // Active tab text color
  inactiveText?: string;        // Inactive tab text color
  containerBackground?: string; // Main container background
}

Requirements

• React Native >= 0.80.0
• React >= 19.0.0
• react-native-reanimated >= 4.0.0
• react-native-worklets >= 0.4.0"

Migration from Original Code

If you're migrating from the original component, here are the main changes:

1. Import both components:

   import { SegmentedTabWrapper, SegmentedTab } from "react-native-segmented-tab-wrapper";

2. Wrap content in SegmentedTab components:

   // Before
   <SegmentedTabWrapper children={[/* content array */]} />
   
   // After
   <SegmentedTabWrapper>
     <SegmentedTab title="Tab 1">
       <YourContent />
     </SegmentedTab>
   </SegmentedTabWrapper>

3. New customization options:

   • fontFamily and fontSize props
   • colors object for theming
   • contentContainerStyle for content area styling
   • margin prop for active tab spacing

License

MIT

Contributing

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

Support

If you like this package, please consider giving it a ⭐ on GitHub!