Lock the Sheet at a Specific Index

[calebpanza]

Feature Request

Why it is needed

One of the ways that I use the Bottom Sheet (specifically the Modal) is to keep it open all the time with gestures enabled. It's been awesome to get a really cool effect where as you drag up on the sheet, the UI inside of the sheet becomes visible (I know I'm not the first, it's basically what Apple Maps does. Lol)

One scenario that I recently came across, though, was that I needed to keep the modal locked in the 0 index based on what information was presented inside the sheet. And this got me thinking, could there be a way to lock/unlock the Bottom Sheet to a specific index from within a child of the Bottom Sheet?

Possible implementation

Using the useBottomSheet, I could see there being a new function passed in called lockToIndex(number|null).

Passing in a number would expand/collapse the sheet to the index specified and would not allow the user to expand/collapse outside of that index.

To unlock the sheet again, pass in null (or -1 if you wanted all numeric values)

Considerations ::

• While I think that forceClose should always close the sheet regardless of the locked state, I don't think that collapse, expand nor close should function when the sheet is locked. Instead, a warning could be thrown while developing informing that You cannot collapse a sheet while it's locked and so on
• If my sheet is currently opened to the 0 index and I call lockToIndex(2), the sheet should expand to the second index. In the same way, if I then call lockToIndex(0), the sheet would collapse to the 0 index and stay locked there
• In order to allow for other components to respond to lock state, there might be a lockedIndex that also gets passed down through useBottomSheet so that side effects can run on sibling components.
• The main <BottomSheet> component could also be rendered with an index locked in by passing in initialLockedIndex at render

Code sample

This is how I would imagine using it in a code example:

const ComponentRenderedInBottomSheet = () => {
    const { lockToIndex } = useBottomSheet()

    function lockSheetToOpen() {
        lockToIndex(1)
    }

    function unlockSheet() {
        lockToIndex(null)
    }

    return <View>
        <Button onPress={lockSheetToOpen}>Lock the User to an Index</Button>
        <Button onPress={unlockSheet}>Unlock the sheet</Button>
    </View>
}

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[calebpanza]

Hey I'm still really interested in this functionality! Just wanted to comment this so that it's not auto-closed

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[calebpanza]

...still interested! Lol. Any chance of this getting looked at?

[zealmurapa]

Have you tried snapToIndex?

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[calebpanza]

@zealmurapa yeah I've used snapToIndex, but the user still has the ability to jump to other indices.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[mishkaloven]

would love this feature as well! 😍

[calebpanza]

Any chance we could get this re-opened?

[mhosman]

I want this too

[kepegram]

I would like this as well