Skip to main content
Version: Next

Tabbed Header Pager

Tabbed Header Gif

Example usage

Full source code can be found in example repo.

const TabbedHeaderPagerExample: React.FC = () => {
const isDarkTheme = useColorScheme() === 'dark';

return (
<>
<TabbedHeaderPager
contentContainerStyle={[
isDarkTheme ? screenStyles.darkBackground : screenStyles.lightBackground,
]}
containerStyle={screenStyles.stretchContainer}
backgroundColor={colors.primaryGreen}
foregroundImage={photosPortraitMe}
rememberTabScrollPosition
logo={logo}
title={"Mornin' Mark! \nReady for a quiz?"}
titleStyle={screenStyles.text}
tabs={TABBED_SECTIONS.map((section) => ({
title: section.title,
}))}
tabTextStyle={screenStyles.text}
showsVerticalScrollIndicator={false}>
<View style={styles.content}>
{Brandon.cards.map((data, i, arr) => (
<QuizCard data={data} num={i} key={data.question} cardsAmount={arr.length} />
))}
</View>
<View style={styles.content}>
{Ewa.cards.map((data, i, arr) => (
<QuizCard data={data} num={i} key={data.question} cardsAmount={arr.length} />
))}
</View>
<View style={styles.content}>
{Jennifer.cards.map((data, i, arr) => (
<QuizCard data={data} num={i} key={data.question} cardsAmount={arr.length} />
))}
</View>
<View style={styles.content}>
{Brandon.cards.map((data, i, arr) => (
<QuizCard data={data} num={i} key={data.question} cardsAmount={arr.length} />
))}
</View>
<View style={styles.content}>
{Ewa.cards.map((data, i, arr) => (
<QuizCard data={data} num={i} key={data.question} cardsAmount={arr.length} />
))}
</View>
<View style={styles.content}>
{Jennifer.cards.map((data, i, arr) => (
<QuizCard data={data} num={i} key={data.question} cardsAmount={arr.length} />
))}
</View>
</TabbedHeaderPager>
<StatusBar barStyle="light-content" backgroundColor={colors.primaryGreen} translucent />
</>
);
};

Props

Inherits ScrollViewProps

PropTypeDefault value
backgroundColorcolor - ColorValue-
backgroundImageimage source - ImageSourcePropType-
containerStylestyle - StyleProp<ViewStyle>-
disableScrollToPositionboolean-
enableSafeAreaTopInsetbooleantrue
foregroundImageimage source - ImageSourcePropType-
hasBorderRadiusboolean-
headerHeightnumber100
initialPagenumber0
logoimage source - ImageSourcePropType-
logoContainerStylestyle - StyleProp<ViewStyle>-
logoResizeModeimage resize mode - ImageResizeMode-
logoStylestyle - StyleProp<ImageStyle>-
onChangeTabfunction - (prevPage: number, newPage: number) => void-
onHeaderLayoutfunction - (e: LayoutChangeEvent) => void-
onMomentumScrollBeginworklet function - (e: NativeScrollEvent) => void-
onMomentumScrollEndworklet function - (e: NativeScrollEvent) => void-
onScrollworklet function - (e: NativeScrollEvent) => void-
onScrollBeginDragworklet function - (e: NativeScrollEvent) => void-
onScrollEndDragworklet function - (e: NativeScrollEvent) => void-
onTabsLayoutfunction - (e: LayoutChangeEvent) => void-
onTopReachedfunction - () => void-
pageContainerStylestyle - StyleProp<ViewStyle>-
pagerPropspager props - PagerProps-
parallaxHeightnumber53% of screen's height
rememberTabScrollPositionboolean-
renderHeaderBarrender function-
snapStartThresholdnumber-
snapStopThresholdnumber-
snapToEdgebooleantrue
stickyTabsbooleantrue
tabTextActiveStylestyle - StyleProp<TextStyle>-
tabTextContainerStylestyle - StyleProp<ViewStyle>-
tabTextContainerActiveStylestyle - StyleProp<ViewStyle>-
tabTextStylestyle - StyleProp<TextStyle>-
tabUnderlineColorcolor - ColorValue-
tabWrapperStylestyle - StyleProp<ViewStyle>-
tabsTabs array - Tab[]-
tabsContainerBackgroundColorcolor - ColorValue-
tabsContainerHorizontalPaddingnumber20
tabsContainerStylestyle - StyleProp<ViewStyle>-
titlestring-
titleStylestyle = StyleProp<TextStyle>-
titleTestIDstring-

Tab

PropTypeDefault value
titlestring-
iconReact Element or render function with isActive param-
testIDstring-

PagerProps

Inherits ScrollViewProps

PropTypeDefault value
onMomentumScrollBeginworklet function - (e: NativeScrollEvent) => void-
onMomentumScrollEndworklet function - (e: NativeScrollEvent) => void-
onScrollworklet function - (e: NativeScrollEvent) => void-
onScrollBeginDragworklet function - (e: NativeScrollEvent) => void-
onScrollEndDragworklet function - (e: NativeScrollEvent) => void-

Methods:

FunctionType
goToPagefunction - (pageNumber: number) => void