# ptomasroos/react-native-scrollable-tab-view

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ptomasroos-react-native-scrollable-tab-view).**

6,945 stars · 2,255 forks · JavaScript

## Links

- GitHub: https://github.com/ptomasroos/react-native-scrollable-tab-view
- Homepage: https://www.npmjs.com/package/react-native-scrollable-tab-view
- awesome-repositories: https://awesome-repositories.com/repository/ptomasroos-react-native-scrollable-tab-view.md

## Topics

`animated` `react-native` `swipe` `tabs`

## Description

This project is a React Native UI component for implementing swipeable tab navigation. It organizes mobile app content into category tabs that users navigate through horizontal gestures or direct interaction.

The system synchronizes the movement of the tab indicator with the page scroll offset. It supports the integration of custom tab bars and provides the ability to maintain independent scroll positions for each individual page.

Navigation can be managed programmatically, including the ability to define initial starting pages or disable gesture-based swiping. The component also includes tracking mechanisms to trigger callbacks when users switch tabs or slide pages.

## Tags

### User Interface & Experience

- [Horizontal Navigation Sliders](https://awesome-repositories.com/f/user-interface-experience/horizontal-scrolling-utilities/horizontal-navigation-sliders.md) — Implements a scrollable interface with an animating indicator that tracks the active tab selection.
- [Category-Based Content Organization](https://awesome-repositories.com/f/user-interface-experience/category-based-content-organization.md) — Organizes mobile application content into category tabs navigable by gestures or clicks.
- [Scroll-to-Index Mapping](https://awesome-repositories.com/f/user-interface-experience/dynamic-view-offsetting/scroll-to-index-mapping.md) — Implements the logic that translates raw scroll positions into the active tab index for synchronization.
- [Scroll Restoration](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-restoration.md) — Maintains independent scroll positions for each tab, ensuring users return to their previous place on a page.
- [Tabbed Navigation](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation.md) — Creates a mobile interface where users swipe horizontally between categorized views.
- [Pager Tab Interfaces](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation/pager-tab-interfaces.md) — Couples a tab selection interface with a swipeable view pager for seamless navigation. ([source](https://cdn.jsdelivr.net/gh/ptomasroos/react-native-scrollable-tab-view@master/README.md))
- [Tab Bar Customizers](https://awesome-repositories.com/f/user-interface-experience/tab-bar-customizers.md) — Supports replacing default tab bars with custom components that maintain animation synchronization. ([source](https://cdn.jsdelivr.net/gh/ptomasroos/react-native-scrollable-tab-view@master/README.md))
- [Programmatic Controls](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation/programmatic-controls.md) — Provides API methods to programmatically change active tabs and lock gesture-based swiping. ([source](https://www.npmjs.com/package/react-native-scrollable-tab-view))
- [Tab Navigation Settings](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation/tab-navigation-settings.md) — Offers configurable settings for initial page selection, animation toggles, and tab rendering. ([source](https://cdn.jsdelivr.net/gh/ptomasroos/react-native-scrollable-tab-view@master/README.md))
- [Gesture Disabling](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-handlers/swipe-to-scroll-handlers/gesture-disabling.md) — Provides a mechanism to disable horizontal swipe gestures between pages via a configuration flag.

### Graphics & Multimedia

- [Gesture-Driven Page Switching](https://awesome-repositories.com/f/graphics-multimedia/custom-animation-effects/interactive-gesture-driven-animations/gesture-driven-snap-animations/gesture-driven-page-switching.md) — Enables users to switch between content pages using horizontal swipe gestures.

### Mobile Development

- [React Native Components](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-components.md) — Provides a specialized user interface component for tabbed navigation specifically for React Native.
- [Tab Bar Animation Toolkits](https://awesome-repositories.com/f/mobile-development/ios-animation-frameworks/tab-bar-animation-toolkits.md) — Coordinates the tab indicator animation to move in sync with the page scroll offset.