NavigationReact Native

Collapsible navigation bar

Animate a React Native destination bar in response to native vertical scroll travel.

Public APILumenCollapsibleNavigationBarReact Native

Native example

Use Collapsible navigation bar

Use with the visibility hook when more content space is valuable during deliberate vertical scrolling. Keep safe areas, virtualization, and routing in application code.

View verified React Native runtime capture

Collapsible navigation bar rendered in the Expo web renderer Lumen playground — Verified runtime captureExpo web renderer

const navigation = useLumenNavigationBarVisibility()

<FlatList
  data={items}
  onScroll={navigation.onScroll}
  scrollEventThrottle={16}
  renderItem={renderItem}
/>
<LumenCollapsibleNavigationBar
  items={destinations}
  value={destination}
  visible={navigation.visible}
  onValueChange={setDestination}
/>

Reference

Public API

The primary shared and platform-specific options exposed by LumenCollapsibleNavigationBar.

API	Values or type	Default	Description
visible	`boolean`	`Required`	Controls the animated expanded or collapsed state.
items	`readonly LumenNavigationItem[]`	`Required`	Defines peer destinations.
value	`string`	`Required`	Identifies the selected destination.
onValueChange	`(value: string) => void`	`Required`	Requests destination selection.
containerStyle	`StyleProp<ViewStyle>`	`undefined`	Styles the animated outer container without replacing its collapse dimensions.
accessory	`ReactNode`	`undefined`	Adds compact application-owned content that collapses with the navigation bar.

Native behavior

Design and accessibility

When to use it

Use with the visibility hook when more content space is valuable during deliberate vertical scrolling. Keep safe areas, virtualization, and routing in application code.

Accessibility

Hidden destinations stop receiving pointer input and are removed from the accessibility tree. The application keeps native list and router ownership.