CollapsingHeaderUse CollapsingHeader to create a Cover photo or hero header on your screen. On scroll, the header contents will fade-out, leaving only the TopBar visible.

UX Guidelines

Background Type

Property	Image background	Color background
Theme Dark
Theme Light

Header Properties

Property	Expanded	Collapsed
Background only
Background + Title
Background + Title + Subtitle
Background + Title + Subtitle + Tabs

Usage Examples

Wix Owner App (Default Style)

Style Configurations

White Style (default)

BG color: $backgroundElevated Title style: Heading, $textDefault TopBar: Transparent TopBar Icons: $iconDefault Image Overlay (optional): White, Medium Intensity

Inverted StyleBG color: $backgroundPrimaryHeavy Title text: Heading, $textDefaultLight TopBar: Transparent TopBar Icons: $iconDefaultLight Image Overlay (optional): Black, Low Intensity

Spaces

Style Configurations

BG color: $backgroundPrimaryLight Title text: Heading, $textDefault TopBar: Transparent TopBar Icons: $iconDefault

Content Variations

Same as in Owner App

Fit

Style Configurations

BG color: $backgroundElevated Title text: Heading, $textDefault TopBar: Transparent TopBar Icons: $iconDefault

Content Variations

Same as in Owner App

Dine

Style Configurations

BG color: $backgroundElevated Title text: Heading, $textDefault TopBar: Transparent TopBar Icons: $iconDefault

Content Variations

Same as in Owner App

Members Apps (Theme Color)

Style Configurations

Dark Theme

BG color: $backgroundElevated Title style: Heading, $textDefault TopBar: Transparent TopBar Icons: $iconDefault Image Overlay (optional): White, Medium Intensity

Bright ThemeBG color: $backgroundElevated Title style: Heading, $textDefault TopBar: Transparent TopBar Icons: $iconDefault Image Overlay (optional): White, Medium Intensity

Structure

Tablet

Dev

UsageCode Example

<CollapsingHeader {...collapsingHeaderProps} ref={collapsingHeaderRef}>
  {renderContent()}
</CollapsingHeader>

APIThis is the list of additional props for the component

animateEntrance

boolean

Should header will have entrance animation

backgroundColor

string

If you want your screen to have a background color different than transparent/white please use this prop. Default is Colors.white

collapsingChildContainerStyle

ViewStyle

Container style to pass to all collapsing children

containerWidth

number

For custom container width (default is screen width)

contentBeforeHeader

boolean

should content render on top of the header. Default is true

contentBottomPadding

number

extra bottom content padding

contentOffset

number

extra content offset. Default is 0

currentChildId

string

Pass only When having multiple collapsing children at the same time (e.g. when used with PageCarousel)

diagonalColor

string

The collapsing header color

drawBehind

boolean

Pass if using Navigation drawBehind (for status bar and top bar)

enableStickyShadow

boolean

Pass to add/remove sticky header shadow. Default is true

headerContentHeight

number

Height to add for custom header content. Default is 0

headerHeight

number

The total header height. Default is 180

isModal

boolean

Should CollapsingHeader header color use modal (white) color logic or screen (primary)

onChangeState

(state: ExpandState, isCollapsed: boolean) => void

Callback for state changes (COLLAPSED | OPEN)

onScroll

() => void

Callback for scroll event (e.g. (currentOffsetY, prevOffsetY) => {})

renderHeaderContent

(props: {scrollOffset: Animated.AnimatedSubtraction}) => React.ReactNode

Render custom header content

stickyHeader

React.ReactElement

A sticky header element that scrolls with the header but sticks to the top of the screen

stickyHeaderHeight

number

The sticky header height. Default is 0

testID

string

Component Test id

useDiagonalGradient

boolean

Should the diagonal have gradient

useFixedHeaderContent

boolean

Whether the header content should be fixed or scroll with the rest of the content. Default is true