Programmatically change the current detent of an already-open formSheet

[edding-3000]

Summary

With presentation: 'formSheet', I can't find a supported way to change the sheet's current detent from JS once it's already presented. Both sheetInitialDetentIndex and sheetAllowedDetents seem to only be evaluated at presentation time / on mount, not reactively while the sheet is open.

What I've tried

1. Updating sheetInitialDetentIndex via state after presentation.

2. Narrowing sheetAllowedDetents to a single value, then restoring the full array. This does force the sheet to jump to the remaining detent (likely because the current selectedDetentIdentifier becomes invalid), but restoring the array afterward snaps the sheet straight back to its original position. My guess: the selected detent is tracked by array index rather than by value, so index 0 reverts to its old meaning once the array is widened again.

Use case

A button inside the sheet expands it to the largest detent (e.g. "show more"), while the user should still be able to freely drag between all detents afterward.

Question

Is this achievable already and I'm missing something? If not, would an imperative API be feasible e.g. wrapping iOS's animateChanges { selectedDetentIdentifier = ... } behind a ref method or a command, paired with the existing sheetDetentChange event on the JS side?

Thanks for any help

[barry166]

From the current FormSheet source, there is no supported imperative API for selecting a new detent after the sheet is already open. initialDetentIndex is only applied on the closed → open transition, and onDetentChanged is a notification callback; changing that prop (or temporarily narrowing detents) is not a stable way to select a detent while preserving the full set.

For now, the reliable options are to let the user drag/select the detent, or close and reopen with the desired initialDetentIndex (which may not be suitable if you must preserve the presentation). An imperative ref/command that maps to iOS selectedDetentIdentifier (and the Android equivalent) would require a library change.

References: FormSheet props and the current component implementation.

[edding-3000]

All right, thanks for the quick reply!

[Bram-dc]

I would also like this feature very much. I have an app which combines sheets with an expo-maps background, which needs to shrink the sheet once the user interacts with the map.

I opened a PR for this: #4793

It adds a selectDetent command to the new FormSheet component, exposed through its ref. The command moves a sheet that's already open to another detent:

const sheetRef = useRef<FormSheetCommands>(null);

<FormSheet ref={sheetRef} isOpen={isOpen} detents={[0.3, 0.6, 1.0]}>
  <Button title="Show more" onPress={() => sheetRef.current?.selectDetent('last')} />
</FormSheet>

Afterwards the sheet can still be dragged between all detents, and onDetentChanged fires for the programmatic change as well.

Note that this targets the new FormSheet component, not react-navigation's presentation: 'formSheet' (which uses the legacy Screen), so it isn't usable from native-stack yet...

[Bram-dc]

@barry166 Was there a reason this feature was not implemented?