npm package: @shar25111996/react-native-tab-view
Description: A customizable tab view component for React Native.
Author: Sunil Kumar
Latest version: 1.1.3


# `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.

![TabView Demo](https://i.imghippo.com/files/lpSy6196Dr.gif)

## Installation

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

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

OR

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

## Importing the Component

```tsx
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:

```tsx
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:

```tsx
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:

```tsx
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](./LICENSE) for details.