Support auto-resizing when scrollable enabled

[christophby]

Currently, auto-resizing is not supported as long as scrollable is enabled.
When scrollable is enabled, the default detent is set to 1, even when the content is smaller.

This prevents us from using this library because the height of the content in our bottom sheets varies.

It would be great if auto-resizing were supported for scrollable content too (e.g. when the scrollable content is only half the screen height).

[lodev09]

This will be supported on future version of TrueSheet. This is currently a limitation on RN Fabric itself, they've introduced support for this but it's not yet stable.

[birkir]

Wanted to surface this, its a very important feature for so many use cases.

I use scrollview all the time with alwaysBounceVertical={false} so that smaller devices or people with larger text via accessibility settings can actually see the content if it overlaps the visible viewport.

This leaves me with either doing a fixed detent e.g. 0.5 or not use scrollview at all.

If anyone has a recipe making this work with the current version of TrueSheet, please share.

Can you go into detail @lodev09 what the fabric limitations are here? I may give it a go.

[birkir]

My hacky recipe around this for now is something like this

const FOOTER_HEIGHT = 70;

export function TrueSheetDemo() {
  const [detent, setDetent] = useState(0.6);
  return (
    <TrueSheet
      detents={[detent]}
      footer={<View style={{ height: FOOTER_HEIGHT }} />}
    >
      <ScrollView
        alwaysBounceVertical={false}
        nestedScrollEnabled
        style={{ flex: 1 }}
        contentContainerStyle={{
          paddingBottom: detent >= 1 ? FOOTER_HEIGHT : 0,
        }}
        onContentSizeChange={(w, h) => {
          const wh = Dimensions.get("window").height;

          // @note this needs a PROPER calculation
          // @note the +0.1 is just roomy enough to trigger vertical bouncing off.
          setDetent(Math.min(1, h / wh + 0.1));
        }}
      />
    </TrueSheet>
  );
}

[mefjuu]

Dynamic sizing is the only missing feature that stopping us from migrating to the library from Gorhom bottom-sheet

[zollipaul]

I’m using this workaround for auto-height + scrollable content:

const maxHeight = useWindowDimensions().height * 0.65

<TrueSheet ref={sheet} detents={['auto']}>
  <ScrollView style={{ maxHeight }} nestedScrollEnabled>
    {/* content */}
  </ScrollView>
</TrueSheet>

This gives me the UX I want:

• short content opens only as tall as needed
• long content is capped
• content scrolls after reaching the cap

It seems to work on our side, and we haven’t run into issues yet. But it bypasses the documented scrollable TrueSheet path, because scrollable does not support auto detents.

Would this be safe enough to mention as a temporary workaround in the docs, or are there known problems with this approach that I’m missing?

[believer]

This does seem to work quite well! We made one addition of setting the sheet's scrollable prop to true when the font scaling is above AX1 otherwise it would clip the bottom of the content.