# Collapsible Tab View
[](https://www.npmjs.com/package/@mstfmedeni/collapsible-tab-view)
[](https://www.npmjs.com/package/@mstfmedeni/collapsible-tab-view)
[](https://github.com/mstfmedeni/showtime-tab-view/blob/main/LICENSE)
A React Native component that supports a collapsible header and custom refresh control, powered by [Reanimated v4](https://docs.swmansion.com/react-native-reanimated/) and [GestureHandler v2](https://docs.swmansion.com/react-native-gesture-handler/docs/).
[
](https://user-images.githubusercontent.com/37520667/212389901-764422ef-cf1b-48fc-87af-cfbe7ad1f6e2.mp4)
> **Note:** This is a fork of [@showtime-xyz/tab-view](https://github.com/showtime-xyz/showtime-tab-view) with additional features and improvements, including:
> - ✅ **TabFlashList** component with FlashList v2 support
> - ✅ **TypeScript 5.9** with improved type safety
> - ✅ **ESLint 9** with modern flat config
> - ✅ **Reanimated v4** compatibility
> - ✅ **Enhanced documentation** and examples
## What
This is a React Native tab view component that wraps gestures and animations on top of [react-native-tab-view](https://github.com/react-navigation/react-navigation/tree/main/packages/react-native-tab-view#readme).
**Original Repository:** [@showtime-xyz/tab-view](https://github.com/showtime-xyz/showtime-tab-view)
**Original Author:** [@alantoa](https://github.com/alantoa)
## Features
- 🎯 **Collapsible header** - Smooth collapsing animation powered by Reanimated v4
- ⚡ **High Performance** - Built with Reanimated v4 for 60fps+ animations
- 📜 **FlashList Support** - Optional integration with [FlashList v2](https://shopify.github.io/flash-list/) for optimal list performance
- 🔄 **Custom Refresh Control** - Pull-to-refresh with customizable animations
- 👆 **Header Scroll Gesture** - Scroll page content by dragging on the header area
- 📱 **Cross-Platform** - Full support for iOS, Android, and Web
- 🎨 **Customizable** - Extensive styling and behavior customization options
- 🌊 **Bounce Effect** - Natural iOS-style bounce animations
- 🔍 **Zoom Header** - Optional zoom effect on pull-to-refresh ([see example](https://github.com/showtime-xyz/showtime-frontend/discussions/1471))
- 📦 **TypeScript** - Full TypeScript support with comprehensive type definitions
## Installation
### Prerequisites
This package requires the following peer dependencies to be installed in your project:
**Required:**
- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) (>= 4.0.0)
- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/) (>= 2.0.0)
- [react-native-pager-view](https://github.com/callstack/react-native-pager-view) (>= 5.0.0)
- [react-native-tab-view](https://github.com/react-navigation/react-navigation/tree/main/packages/react-native-tab-view) (> 3.3.0)
**Optional (for TabFlashList):**
- [@shopify/flash-list](https://shopify.github.io/flash-list/docs/) - For high-performance lists
```sh
# Install required dependencies
yarn add react-native-reanimated react-native-gesture-handler react-native-pager-view react-native-tab-view
# Optional: Install FlashList for better performance
yarn add @shopify/flash-list
```
> **Note:** Make sure to follow the setup instructions for [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) and [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation) as they require additional native configuration.
### Install Package
```sh
# Using yarn
yarn add @mstfmedeni/collapsible-tab-view
# Using npm
npm install @mstfmedeni/collapsible-tab-view
```
## Examples
- [Basic Example](./example//src/example.tsx)
- [Zoom Effect with Pull-To-Refresh](https://github.com/Daavidaviid/showtime-scrollview-with-zoom-pull-to-refresh)
- [Showtime Profile Example](https://github.com/showtime-xyz/showtime-frontend/tree/staging/packages/app/components/profile)
- ...more to come!
## Usage
The API for this package is similar to [react-native-tab-view](https://github.com/react-navigation/react-navigation/tree/main/packages/react-native-tab-view#readme), with extended props. A basic usage example is shown below:
```tsx
import React, { useCallback, useState } from "react";
import { StatusBar, Text, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import {
CollapsibleTabView,
Route,
TabFlashList,
TabFlatList,
TabScrollView,
TabSectionList,
} from "@mstfmedeni/collapsible-tab-view";
const StatusBarHeight = StatusBar.currentHeight ?? 0;
const TabScene = ({ route }: any) => {
return (
{
return (
{`${route.title}-Item-${index}`}
);
}}
/>
);
};
export function Example() {
const [isRefreshing, setIsRefreshing] = useState(false);
const [routes] = useState([
{ key: "like", title: "Like", index: 0 },
{ key: "owner", title: "Owner", index: 1 },
{ key: "created", title: "Created", index: 2 },
]);
const [index, setIndex] = useState(0);
const animationHeaderPosition = useSharedValue(0);
const animationHeaderHeight = useSharedValue(0);
const renderScene = useCallback(({ route }: any) => {
switch (route.key) {
case "like":
return ;
case "owner":
return ;
case "created":
return ;
default:
return null;
}
}, []);
const onStartRefresh = async () => {
setIsRefreshing(true);
setTimeout(() => {
console.log("onStartRefresh");
setIsRefreshing(false);
}, 300);
};
const renderHeader = () => (
);
return (
);
}
```
## API
### Components
#### `CollapsibleTabView`
The main component that provides a tab view with a collapsible header. All props from [react-native-tab-view](https://github.com/react-navigation/react-navigation/tree/main/packages/react-native-tab-view#readme) are supported, plus additional props for header behavior.
#### Scrollable Components
All scrollable components require an `index` prop to identify the tab.
##### `TabScrollView`
A wrapper around React Native's `ScrollView` with collapsible header support.
```tsx
import { TabScrollView } from "@mstfmedeni/collapsible-tab-view";
{/* Your content */};
```
##### `TabFlatList`
A wrapper around React Native's `FlatList` with collapsible header support.
```tsx
import { TabFlatList } from "@mstfmedeni/collapsible-tab-view";