Tabbed Header Pager
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
Prop | Type | Default value |
---|---|---|
backgroundColor | color - ColorValue | - |
backgroundImage | image source - ImageSourcePropType | - |
containerStyle | style - StyleProp<ViewStyle> | - |
disableScrollToPosition | boolean | - |
enableSafeAreaTopInset | boolean | true |
foregroundImage | image source - ImageSourcePropType | - |
hasBorderRadius | boolean | - |
headerHeight | number | 100 |
initialPage | number | 0 |
logo | image source - ImageSourcePropType | - |
logoContainerStyle | style - StyleProp<ViewStyle> | - |
logoResizeMode | image resize mode - ImageResizeMode | - |
logoStyle | style - StyleProp<ImageStyle> | - |
onChangeTab | function - (prevPage: number, newPage: number) => void | - |
onHeaderLayout | function - (e: LayoutChangeEvent) => void | - |
onMomentumScrollBegin | worklet function - (e: NativeScrollEvent) => void | - |
onMomentumScrollEnd | worklet function - (e: NativeScrollEvent) => void | - |
onScroll | worklet function - (e: NativeScrollEvent) => void | - |
onScrollBeginDrag | worklet function - (e: NativeScrollEvent) => void | - |
onScrollEndDrag | worklet function - (e: NativeScrollEvent) => void | - |
onTabsLayout | function - (e: LayoutChangeEvent) => void | - |
onTopReached | function - () => void | - |
pageContainerStyle | style - StyleProp<ViewStyle> | - |
pagerProps | pager props - PagerProps | - |
parallaxHeight | number | 53% of screen's height |
rememberTabScrollPosition | boolean | - |
renderHeaderBar | render function | - |
snapStartThreshold | number | - |
snapStopThreshold | number | - |
snapToEdge | boolean | true |
stickyTabs | boolean | true |
tabTextActiveStyle | style - StyleProp<TextStyle> | - |
tabTextContainerStyle | style - StyleProp<ViewStyle> | - |
tabTextContainerActiveStyle | style - StyleProp<ViewStyle> | - |
tabTextStyle | style - StyleProp<TextStyle> | - |
tabUnderlineColor | color - ColorValue | - |
tabWrapperStyle | style - StyleProp<ViewStyle> | - |
tabs | Tabs array - Tab[] | - |
tabsContainerBackgroundColor | color - ColorValue | - |
tabsContainerHorizontalPadding | number | 20 |
tabsContainerStyle | style - StyleProp<ViewStyle> | - |
title | string | - |
titleStyle | style = StyleProp<TextStyle> | - |
titleTestID | string | - |
Tab
Prop | Type | Default value |
---|---|---|
title | string | - |
icon | React Element or render function with isActive param | - |
testID | string | - |
PagerProps
Inherits ScrollViewProps
Prop | Type | Default value |
---|---|---|
onMomentumScrollBegin | worklet function - (e: NativeScrollEvent) => void | - |
onMomentumScrollEnd | worklet function - (e: NativeScrollEvent) => void | - |
onScroll | worklet function - (e: NativeScrollEvent) => void | - |
onScrollBeginDrag | worklet function - (e: NativeScrollEvent) => void | - |
onScrollEndDrag | worklet function - (e: NativeScrollEvent) => void | - |
Methods:
Function | Type |
---|---|
goToPage | function - (pageNumber: number) => void |