Skip to content

Latest commit

 

History

History
26 lines (19 loc) · 1.14 KB

README.md

File metadata and controls

26 lines (19 loc) · 1.14 KB
Raw

react-native-scrollable-tab-header

Separate tab header component which gives you relevant callbacks to build your own tab implementation. Very smooth with no frame drops.

import ScrollableTabs from "react-native-scrollable-tab-header";

<ScrollableTabs inactiveTextColor="white"
                backgroundColor={Colors.signatureBlue}
                underlineStyle={{backgroundColor:'gold'}}
                activeTextColor='white'
                ref={(ref)=>{this._scrollTabs = ref}}
                goToPage={(i)=>
                { this._recyclerlistview.scrollToIndex(i, true) }}
                tabs={["FIRST TAB", "SECOND LONG TAB"]} />

To update tabs call updateOffsetExternal(currentOffset, pageWidth) on ref of scrollable tabs. Note: pageWidth is width of one tab scene (mostly screen width), on goToPage callback you're supposed to scroll you container to specified position.

You might also call it as updateOffsetExternal(positionInDecimal, 1)

For additional feature explore props of the component.

This is a modified version of 'ScrollableTabBar' component available at: https://github.com/skv-headless/react-native-scrollable-tab-view