react-native-scrollable-tab-view
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
A React Native component that adds a swipeable tab navigation bar to your iOS and Android app, users swipe between screens, each screen scrolls independently and remembers its scroll position.
This is a JavaScript component for React Native apps that adds a swipeable tab navigation bar. Users can swipe left and right between screens, each of which sits under its own labeled tab. Each screen can independently scroll its own content and remembers its scroll position when you swipe away and come back. The transition between tabs is animated.
React Native is a framework for building mobile apps using JavaScript that run on both iOS and Android. This component drops into a React Native project as a single dependency and wraps your existing screens with a few lines of code. You assign each screen a tab label, and the component takes care of rendering the tab bar and handling swipe gestures.
The tab bar itself can be replaced with a custom design. The library ships with a default tab bar that shows text labels with an underline indicator, and you can customize its colors and text styles through props. For a fully different look, you write your own tab bar component and pass it in.
Configuration options let you position the tab bar at the top or bottom of the screen, disable swiping so tabs can only be changed by tapping, set which tab opens first, and pre-render nearby tabs in the background to reduce visual delays. The library also exposes callbacks for when the active tab changes and when the user is mid-swipe between tabs.
Installation is a single npm command, and the README includes code examples and links to several example files. The project is MIT licensed and open to contributions.
Where it fits
- Add swipeable screen-to-screen navigation to an existing React Native app with a few lines of code.
- Replace the default tab bar with a fully custom design component for a branded mobile app.
- Build a mobile dashboard with multiple independently scrollable sections users can swipe between.
- Disable swiping on sensitive screens while keeping tap-based tab navigation active.