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.

Collapsing to the Header

Use the "peek" detent to collapse the sheet down to just the header (plus 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 />}
      scrollable
    >
      <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.