Skip to main content
The Detent object provides methods for creating presentation detent configurations that control how sheets can be sized and positioned on screen. Detents define the snap points where a sheet will rest when presented. 
Detent.medium
Detent.large
Detent.fraction(value)
Detent.height(value)

​
Properties and Methods

​
Detent.medium

A standard medium-sized detent, typically around half the screen height. 
const detent = Detent.medium
Returns: { detentType: 'medium' }

​
Detent.large

A large detent that typically fills most or all of the available screen space. 
const detent = Detent.large
Returns: { detentType: 'large' }

​
Detent.fraction(value: number)

Creates a custom detent at a fractional position of the screen height. Parameters:
  • value - A number between 0 and 1 representing the fraction of screen height (e.g., 0.5 for half screen)
Returns: { detentType: 'fraction', value: number } 
const halfScreen = Detent.fraction(0.5)
const threeQuarters = Detent.fraction(0.75)

​
Detent.height(value: number)

Creates a custom detent with a fixed height in points. Parameters:
  • value - The fixed height in points
Returns: { detentType: 'height', value: number } 
const fixedHeight = Detent.height(300)
const tallSheet = Detent.height(600)

​
Usage

Detents are used with the presentationDetents modifier to configure sheet presentations:

​
Single detent

const body = () => {
  const [isPresented, setIsPresented] = useState(false)

  return VStack([
    Button("Show Sheet", () => setIsPresented(true))
  ])
    .sheet({
      isPresented,
      setIsPresented,
      content: () => Text("Sheet content")
    })
    .presentationDetents([Detent.medium])
}

​
Multiple detents

const body = () => {
  const [isPresented, setIsPresented] = useState(false)

  return VStack([
    Button("Show Sheet", () => setIsPresented(true))
  ])
    .sheet({
      isPresented,
      setIsPresented,
      content: () => Text("Resizable sheet content")
    })
    .presentationDetents([
      Detent.medium,
      Detent.large
    ])
}

​
Custom fractional detent

const body = () => {
  const [isPresented, setIsPresented] = useState(false)

  return VStack([
    Button("Show Sheet", () => setIsPresented(true))
  ])
    .sheet({
      isPresented,
      setIsPresented,
      content: () => VStack([
        Text("Custom sized sheet"),
        Text("Fills 60% of screen")
      ])
    })
    .presentationDetents([
      Detent.fraction(0.6)
    ])
}

​
Fixed height sheet

const body = () => {
  const [isPresented, setIsPresented] = useState(false)

  return VStack([
    Button("Show Sheet", () => setIsPresented(true))
  ])
    .sheet({
      isPresented,
      setIsPresented,
      content: () => Text("Fixed 400pt height sheet")
    })
    .presentationDetents([
      Detent.height(400)
    ])
}

​
Combining different detent types

const body = () => {
  const [isPresented, setIsPresented] = useState(false)

  return VStack([
    Button("Show Sheet", () => setIsPresented(true))
  ])
    .sheet({
      isPresented,
      setIsPresented,
      content: () => VStack([
        Text("Resizable sheet"),
        Text("Drag to resize between snap points")
      ])
    })
    .presentationDetents([
      Detent.height(200),
      Detent.fraction(0.5),
      Detent.large
    ])
}

​
Notes

  • Detents define the positions where a sheet will snap when dragged by the user
  • Multiple detents allow users to resize the sheet by dragging between defined sizes
  • The order of detents in the array doesn’t matter - the sheet will snap to the closest detent
  • On platforms that don’t support detents, sheets typically default to full screen
  • Detent.medium and Detent.large are semantic and adapt to platform conventions
  • Fraction values should be between 0 and 1 (values outside this range may behave unpredictably)
  • Height values are in points and should account for safe area insets
  • When no detents are specified, sheets typically default to [Detent.large]