Adding Header

Need a fixed header above your scrollable content? A title bar, search input, or navigation controls? TrueSheet makes it simple with the header prop!

Using the header Prop

The recommended way to add a header is using the header prop. This creates a native header view that is properly accounted for in layout calculations, ensuring your scrollable content gets the correct available height.

const App = () => {
  return (
    <TrueSheet
      ref={sheet}
      header={
        <View style={styles.header}>
          <Text>My Header</Text>
        </View>
      }
    >
      <ScrollView>
        <View>{/* Your scrollable content */}</View>
      </ScrollView>
    </TrueSheet>
  )
}

const styles = StyleSheet.create({
  header: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
})

With Search Input

A common use case is adding a search bar in the header:

const App = () => {
  return (
    <TrueSheet
      ref={sheet}
      header={
        <View style={styles.header}>
          <TextInput placeholder="Search..." style={styles.input} />
        </View>
      }
    >
      <FlatList
        data={items}
        renderItem={({ item }) => <ItemRow item={item} />}
      />
    </TrueSheet>
  )
}

tip

When using header with FlatList or ScrollView, the content area height is automatically adjusted to account for the header height. This ensures proper scrolling behavior on both iOS and Android.

Floating Header

By default, the header takes up space above the content and its height is included in the auto detent calculation. Set headerOptions.position to 'absolute' to float the header over the content instead — it gets pinned to the top edge and no longer adds to the auto detent height.

const App = () => {
  return (
    <TrueSheet
      detents={['auto']}
      headerOptions={{ position: 'absolute' }}
      header={<SearchBar />}
    >
      <FlatList
        data={items}
        contentContainerStyle={{ paddingTop: HEADER_HEIGHT }}
        renderItem={({ item }) => <ItemRow item={item} />}
      />
    </TrueSheet>
  )
}

tip

Since the header overlaps the content, add top padding to your content (e.g. contentContainerStyle) so it starts below the header.

Collapsing to the Header

Use the "peek" detent to collapse the sheet down to just the header (plus an absolute footer, if provided). Great for map-style sheets with a compact summary that expands into full content.

const App = () => {
  return (
    <TrueSheet
      detents={['peek', 0.9]}
      initialDetentIndex={0}
      header={<BookingSummary />}
      footer={<SheetActions />}
      footerOptions={{ position: 'absolute' }}
    >
      <BookingDetails />
    </TrueSheet>
  )
}

The peek height automatically follows the measured header and footer sizes — no onLayout juggling needed. You can also include part of the content via the TrueSheetPeek component — see Peeking Content for the full guide.

Platform Support

The header prop is supported on both iOS and Android.