Skip to main content
Version: 0.4.x

Details Header

Details Header Gif

PropertyTypeOptionalDefaultDescription
headerTypeDetailsHeaderYesTabbedHeaderSet header type to TabbedHeader
backgroundColorstringYes'#1ca75d'Header background color
backgroundImageImageSourcePropTypeYesHeader background image source
bouncesbooleanYestrueAllow scroll view bounces (IOS)
tagstringYesSets header tag name
titlestringYesSets header title
childrenReactNodeYesRender content inside ScrollView
contentContainerStylesStyleProp<ViewStyle>YesSet scroll view body styles
contentIconImageSourcePropTypeYesSets content icon
contentIconNumbernumberYesSets amount of cards shown on content icon
hasBorderRadiusbooleanYestrueAdds radius to header's right bottom border
headerHeightnumberYesifIphoneX(92, constants.responsiveHeight(13))Set header height
headerSize(h: LayoutRectangle) => voidYesHandler that is called when header's size changes
imageImageSourcePropTypeYesSets header image
keyboardShouldPersistTapsboolean, "always", "never", "handled"YesSet keyboard persist taps method
leftTopIcon() => ReactElement | ImageSourcePropTypeYesSet icon for left top button
leftTopIconOnPress() => voidYesDefine action on left top button press
rightTopIcon() => ReactElement | ImageSourcePropTypeYesSet icon for right top button
rightTopIconOnPress() => voidYesDefine action on right top button press
onMomentumScrollBegin(event: NativeSyntheticEvent<NativeScrollEvent>) => voidYesCalled when the momentum scroll starts (scroll which occurs as the ScrollView starts gliding)
onMomentumScrollEnd(event: NativeSyntheticEvent<NativeScrollEvent>) => voidYesCalled when the momentum scroll ends (scroll which occurs as the ScrollView glides to a stop)
onRef(t: null, StickyParallaxHeaderComponent) => voidYesObtain ref for StickyParallaxHeaderComponent
parallaxHeightnumberYesifIphoneX(constants.responsiveHeight(38),constants.responsiveHeight(48))Set parallax header height
refreshControlelementYesA RefreshControl component, used to provide pull-to-refresh functionality
scrollEvent (event: NativeSyntheticEvent<NativeScrollEvent>) => voidYesFires at most once per frame during scrolling (Used in custom animations)
scrollRef(t: ScrollView) => void | MutableRefObject<ScrollView>YesGet inner ScrollView ref
snapStartThresholdnumberYesSet start value Threshold of snap
snapStopThresholdnumberYesSet stop value Threshold of snap
snapToEdgebooleanYestrueShould snap header to edge when snap value is exceeded
snapValuebooleanYesparralax header heightSet value where header is closed