TabView Component for React Native

A customizable, animated tab view component for React Native that supports horizontal scrolling, custom styles, and programmatic tab control using ref. Perfect for creating dynamic tab-based interfaces.

Installation

To install the TabView component, run one of the following commands:

npm install @shar25111996/react-native-tab-view

OR

yarn add @shar25111996/react-native-tab-view

Importing the Component

import TabView from '@shar25111996/react-native-tab-view';

Example with ref for Programmatic Tab Control

Here's an example demonstrating how to use the ref to control the active tab programmatically and apply custom styles:

import React, { useRef } from 'react';
import { View, Text, Button } from 'react-native';
import TabView from '@shar25111996/react-native-tab-view';

const MyTabViewWithRef = () => {
  const tabViewRef = useRef(null);

  const tabs = [
    { key: 'tab1', title: 'Tab 1', component: <Text style={{ padding: 20 }}>Content of Tab 1</Text> },
    { key: 'tab2', title: 'Tab 2', component: <Text style={{ padding: 20 }}>Content of Tab 2</Text> },
    { key: 'tab3', title: 'Tab 3', component: <Text style={{ padding: 20 }}>Content of Tab 3</Text> },
  ];

  const goToTab2 = () => {
    if (tabViewRef.current) {
      tabViewRef.current.scrollToIndex(1); // Move to Tab 2
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <TabView ref={tabViewRef} tabs={tabs} isScrollable={true} containerStyle={{ paddingTop: 20 }} />
      <View style={{ padding: 10 }}>
        <Button title="Go to Tab 2" onPress={goToTab2} />
      </View>
    </View>
  );
};

export default MyTabViewWithRef;

In this example, the scrollToIndex method is used with a ref to programmatically switch to Tab 2.

Props

tabs (required)

• Type: Array<{ key: string; title: string; component: React.ReactNode }>
• Description: Defines the tabs and their content.
  • key: A unique identifier for each tab (string).
  • title: The title that appears on the tab button (string).
  • component: The content to render when the tab is selected (React element or node).

containerStyle (optional)

• Type: object
• Description: Styles for the container wrapping the entire TabView, including both tab headers and content. You can use this prop to control layout, padding, margins, and more.

tabHeaderStyle (optional)

• Type: object
• Description: Styles for the tab header (the tab bar itself). This allows you to customize the appearance of the tab bar, such as background color, borders, or padding.

tabButtonStyle (optional)

• Type: object
• Description: Styles for each individual tab button. Customize padding, margin, background color, and more for the tabs.

tabTextStyle (optional)

• Type: object
• Description: Styles for the text inside each tab button when the tab is not active. Use this to adjust text properties such as font size, color, weight, etc.

activeTabTextStyle (optional)

• Type: object
• Description: Styles for the text inside the active tab button. This can be used to highlight the active tab text by adjusting font size, color, and weight.

underlineStyle (optional)

• Type: object
• Description: Styles for the animated underline that appears beneath the active tab. You can customize the underline’s height, background color, or animation duration.

activeTabIndexStyle (optional)

• Type: object
• Description: Styles for the content area corresponding to the active tab. Customize properties like padding, background color, etc., for the active tab’s content.

isScrollable (optional)

• Type: boolean
• Default: true
• Description: Determines whether the tab header should be scrollable. Set to true for horizontally scrollable tabs; set to false for fixed tabs that don’t scroll.

onIndexChange (optional)

• Type: (index: number) => void
• Description: Callback function triggered whenever the active tab index changes. The function receives the new index of the active tab, allowing you to perform custom actions based on tab changes.

Programmatic Tab Control with ref

You can programmatically control the tab selection by accessing the TabView methods via a ref. The following method is available:

• scrollToIndex(index: number): void
  Scrolls to the tab at the specified index.

Example:

tabViewRef.current.scrollToIndex(2); // Switches to the 3rd tab (index starts at 0)

This allows you to control the active tab dynamically, making it easy to implement navigation logic based on user actions or other events.

Full Example with All Props

Here’s an example that demonstrates how to use all the props for full customization:

import React from 'react';
import { View, Text } from 'react-native';
import TabView from '@shar25111996/react-native-tab-view';

const MyCustomTabs = () => {
  const tabs = [
    { key: 'tab1', title: 'Tab 1', component: <Text style={{ padding: 20 }}>Content of Tab 1</Text> },
    { key: 'tab2', title: 'Tab 2', component: <Text style={{ padding: 20 }}>Content of Tab 2</Text> },
    { key: 'tab3', title: 'Tab 3', component: <Text style={{ padding: 20 }}>Content of Tab 3</Text> },
  ];

  return (
    <TabView
      tabs={tabs}
      containerStyle={{ flex: 1, backgroundColor: '#f9f9f9' }}
      tabHeaderStyle={{ backgroundColor: '#e0e0e0', paddingVertical: 10 }}
      tabButtonStyle={{ paddingVertical: 10 }}
      tabTextStyle={{ color: '#757575' }}
      activeTabTextStyle={{ color: '#007AFF', fontWeight: 'bold' }}
      underlineStyle={{ height: 3, backgroundColor: '#007AFF' }}
      activeTabIndexStyle={{ backgroundColor: '#fff' }}
      isScrollable={true}
      onIndexChange={(index) => console.log(`Tab changed to index: ${index}`)}
    />
  );
};

export default MyCustomTabs;

In this example:

• Tab styles are fully customized, including the tab text and the active tab text.
• Custom underline is used for the active tab.
• Scrollable tabs are enabled.

Features

1. Animated Tab Transitions: Smooth underline transitions powered by react-native-reanimated.
2. Programmatic Control: Easily switch tabs programmatically using ref and the scrollToIndex method.
3. Customizable Styles: Customize every part of the TabView to match your app’s theme.
4. Responsive Design: Automatically adapts to orientation changes for a seamless experience.

Notes

• The TabView component uses react-native-reanimated for smooth animations.
• Performance: Leverages FlatList for rendering tabs, ensuring smooth performance even with a large number of tabs.

License

MIT License. See LICENSE for details.