# brentvatne/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/brentvatne-react-native-scrollable-tab-view).**

6,944 stars · 2,255 forks · JavaScript

## Links

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

## Description

This project is a cross-platform mobile tab navigator for React Native. It provides a swipable tab interface and an animated view switcher that allows users to move between different content areas using horizontal swipe gestures.

The system features a customizable tab bar component that can be styled or replaced with custom components to control the visual layout. It supports independent scroll state management, ensuring each individual page maintains its own vertical scroll position when switching views.

The navigation framework handles tab transition control and adjacent page pre-rendering to manage how screens enter the viewport. It also includes capabilities for tab bar layout configuration and bi-directional event synchronization between the navigation bar and the paging container.

## Tags

### Mobile Development

- [React Native Navigation Frameworks](https://awesome-repositories.com/f/mobile-development/react-native-navigation-frameworks.md) — Provides a comprehensive tabbed navigation framework specifically designed for React Native applications.

### User Interface & Experience

- [Custom Component Injection](https://awesome-repositories.com/f/user-interface-experience/custom-element-renderers/custom-component-injection.md) — Provides a prop-based interface for replacing the default tab navigation bar with custom components.
- [Paging Containers](https://awesome-repositories.com/f/user-interface-experience/horizontal-arrangements/paging-containers.md) — Uses a horizontal scroll view to organize tab screens side-by-side for seamless swiping.
- [Scroll Restoration](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-restoration.md) — Ensures each individual tab page maintains its own vertical scroll position when switching views.
- [Tab Bar Customizers](https://awesome-repositories.com/f/user-interface-experience/tab-bar-customizers.md) — Offers a flexible navigation header that can be styled or replaced with custom components.
- [Pager Tab Interfaces](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation/pager-tab-interfaces.md) — Ships a tabbed navigation component synchronized with a swipable view pager for cross-platform mobile apps.
- [View Switchers](https://awesome-repositories.com/f/user-interface-experience/view-switchers.md) — Provides an animated system to manage and transition between different tabbed content areas.
- [View Transitions](https://awesome-repositories.com/f/user-interface-experience/view-transitions.md) — Implements horizontal swipe gestures for navigating between content screens with hardware-accelerated animations.
- [Adjacent View Pre-rendering](https://awesome-repositories.com/f/user-interface-experience/adjacent-view-pre-rendering.md) — Implements adjacent page pre-rendering to eliminate flicker and ensure smooth transitions between tab screens.
- [Navigation Headers](https://awesome-repositories.com/f/user-interface-experience/navigation-headers.md) — Supports the creation of tailored navigation headers and tab bars to match brand styles.
- [Scroll Progress Mapping](https://awesome-repositories.com/f/user-interface-experience/scroll-animations/scroll-progress-mapping.md) — Maps the horizontal scroll offset to UI transitions for fluid movement between tabs.

### Networking & Communication

- [Bi-Directional State Synchronizations](https://awesome-repositories.com/f/networking-communication/bi-directional-state-synchronizations.md) — Synchronizes the active tab index between the navigation bar and paging container via event mapping.

### Part of an Awesome List

- [UI Components](https://awesome-repositories.com/f/awesome-lists/devtools/ui-components.md) — Scrollable tab navigation for mobile interfaces.