Expose Sheet expansion state

[ZRunner]

Feature Request

Allow us to know if a BottomSheet is expanded, collapsed or closed in real time, with a state hook.

Why it is needed

This will allow different content to be displayed according to the sheet state. For example, having a data summary when the sheet is at 10% and a longer scrollable content when at 90%.

I am aware animatedIndex and animatedPosition currently exist under the useBottomSheet() hook, but these are not updated when the user drag the sheet by themselves, only when a BottomSheet method is called (like expand()).

Possible implementation

The best way would imo to expose that state into the useBottomSheet hook, like animatedIndex currently is.

Code sample

const BottomSheetText = () => {
  const {currentIndex} = useBottomSheet();
  if (currentIndex <= 0) {
    return <Text>Short text</Text>;
  } else {
    return <Text>'More detailed text'</Text>;
  }
};

Edit: I was originally looking for either a hook or a callback, and just found out that onChange is already a thing. Thus I edited the feature request to get a hook specifically, and will be using some state var in the meantime.

[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.

[ZRunner]

🆙

[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.

[ray-holland-es]

This would be nice. I also noticed when trying your suggested workaround with animatedIndex that you get a render error 'useBottomSheet' cannot be used out of the BottomSheet!