Skip to content

Auto snap to dynamic content sections #1024

Open
@AnatoleLucet

Description

@AnatoleLucet

Feature Request

It'd be nice to have a way to automatically snap to content sections.

image

Not sure if there's a way to do this currently (if there's, I'd be glad to know how 🙂)

Why it is needed

Let's take Google Map's bottom sheet as an example:

image

By default, this bottom sheet snaps to a preview view (the one we can see on the screenshot) that can be extended to show more info.
While it could be possible to hard code the preview view's snap point, it'd be way better to be able to do this dynamically.

Possible implementation

Sorry, I don't know enough about this lib or React Native in general to advocate anything.

Code sample

Maybe:

const App = () => {
  const {
    animatedHandleHeight,
    animatedSnapPoints,
    animatedContentHeight,
    handleContentLayout,
  } = useBottomSheetDynamicSectionsSnapPoints();

  return (
    <BottomSheet
      snapPoints={animatedSnapPoints}
      handleHeight={animatedHandleHeight}
      contentHeight={animatedContentHeight}
    >
      <BottomSheetView
        style={contentContainerStyle}
        onLayout={handleContentLayout(0)} // might be easier if we give the index of the section
      >
        //... section 1
      </BottomSheetView>

      <BottomSheetView
        style={contentContainerStyle}
        onLayout={handleContentLayout(1)}
      >
        //... section 2
      </BottomSheetView>
    </BottomSheet>
  );
};

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions