brentvatne/react-native-scrollable-tab-view
React Native Scrollable Tab View
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.
Features
- React Native Navigation Frameworks - Provides a comprehensive tabbed navigation framework specifically designed for React Native applications.
- Custom Component Injection - Provides a prop-based interface for replacing the default tab navigation bar with custom components.
- Paging Containers - Uses a horizontal scroll view to organize tab screens side-by-side for seamless swiping.
- Scroll Restoration - Ensures each individual tab page maintains its own vertical scroll position when switching views.
- Tab Bar Customizers - Offers a flexible navigation header that can be styled or replaced with custom components.
- Pager Tab Interfaces - Ships a tabbed navigation component synchronized with a swipable view pager for cross-platform mobile apps.
- View Switchers - Provides an animated system to manage and transition between different tabbed content areas.
- View Transitions - Implements horizontal swipe gestures for navigating between content screens with hardware-accelerated animations.
- Bi-Directional State Synchronizations - Synchronizes the active tab index between the navigation bar and paging container via event mapping.
- Adjacent View Pre-rendering - Implements adjacent page pre-rendering to eliminate flicker and ensure smooth transitions between tab screens.
- Navigation Headers - Supports the creation of tailored navigation headers and tab bars to match brand styles.
- Scroll Progress Mapping - Maps the horizontal scroll offset to UI transitions for fluid movement between tabs.
- UI Components - Scrollable tab navigation for mobile interfaces.
