react-native-scrollable-tab-view
A React Native component for swipeable tab navigation with independent scrollable content per tab.
What is react-native-scrollable-tab-view?
react-native-scrollable-tab-view is a React Native library that provides a tabbed navigation component where users can swipe between tabs. Each tab can host its own scrollable content, and the component maintains scroll positions independently across tabs. It solves the need for a fluid, animated tab navigation pattern commonly seen in Android apps, now available for both iOS and Android in React Native.
React Native developers building mobile apps that require tab-based navigation with swipe gestures and scrollable content per tab, such as social media feeds, news readers, or settings screens.
Developers choose this library because it offers a simple, JavaScript-only implementation with smooth animations, independent scroll management per tab, and high customizability—allowing tailored tab bars and flexible positioning without native module complications.
Overview
Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar
Use Cases
Best For
- Implementing swipeable tab navigation in React Native apps
- Building news or social media apps with multiple scrollable feeds per tab
- Creating settings or profile screens with categorized, scrollable sections
- Developing onboarding or tutorial flows with horizontal page swipes
- Adding customizable tab bars with overlay or bottom positioning
- Maintaining scroll state across tab switches in data-heavy interfaces
Not Ideal For
- Apps requiring deep integration with React Navigation or other routing libraries for unified state management
- Projects needing complex tab behaviors like nested tabs, dynamic tab updates, or vertical layouts
- Teams wanting a fully styled, production-ready tab bar without extensive custom CSS or component development
Pros & Cons
Pros
Uses Rebound for fluid transitions between tabs, providing a native-like feel as demonstrated in the demo GIFs.
Each tab maintains its own ScrollView scroll position, crucial for data-heavy interfaces like social media feeds.
Supports injecting custom tab bar components or styling the default one with colors, text styles, and underline positioning.
Tab bar can be placed at top, bottom, or as an overlay over content, adapting to various design requirements.
Cons
The 'page' prop for setting selected tabs is acknowledged as buggy in issue #126, limiting reliable external tab management.
Lacks native module optimizations, which may lead to performance issues with many tabs or complex animations compared to hybrid solutions.
Links to old React Native animation guides and lacks updates, risking compatibility with newer React Native versions and best practices.
Frequently Asked Questions
Related Projects
react-native-vector-iconsCustomizable Icons for React Native with support for image source and full styling.
lottie-react-nativeLottie wrapper for React Native.
react-native-mapsReact Native Mapview component for iOS + Android
react-native-gifted-chat💬 The most complete chat UI for React Native
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.