gorhom / react-native-bottom-sheet

A performant interactive bottom sheet with fully configurable options 🚀
https://gorhom.dev/react-native-bottom-sheet/
MIT License
6.97k stars 765 forks source link

Auto snap to dynamic content sections #1024

Open AnatoleLucet opened 2 years ago

AnatoleLucet commented 2 years ago

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 :slightly_smiling_face:)

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>
  );
};
github-actions[bot] commented 2 years ago

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.

AnatoleLucet commented 2 years ago

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] commented 2 years ago

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.

AnatoleLucet commented 2 years ago

@github-actions on the edge of making a bot to auto reply to you

github-actions[bot] commented 2 years ago

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.

AnatoleLucet commented 2 years ago

@github-actions

github-actions[bot] commented 1 year ago

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.

AnatoleLucet commented 1 year ago

@github-actions

github-actions[bot] commented 1 year ago

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.

AnatoleLucet commented 1 year ago

@github-actions

github-actions[bot] commented 1 year ago

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.

andrecrimb commented 1 year ago

👍🏽

github-actions[bot] commented 1 year ago

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.

AnatoleLucet commented 1 year ago

@github-actions :wave: long time no see

github-actions[bot] commented 1 year ago

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.

AnatoleLucet commented 1 year ago

@github-actions

github-actions[bot] commented 1 year ago

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.

andrecrimb commented 1 year ago

👍🏽

github-actions[bot] commented 1 year ago

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.

AnatoleLucet commented 1 year ago

up

ghitete commented 1 year ago

@github-actions will you marry me?

github-actions[bot] commented 1 year ago

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.

AnatoleLucet commented 1 year ago

up

github-actions[bot] commented 1 year ago

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.

andrecrimb commented 1 year ago

👍🏽

github-actions[bot] commented 1 year ago

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.

AnatoleLucet commented 1 year ago

👋 @github-actions

github-actions[bot] commented 1 year ago

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.

AnatoleLucet commented 1 year ago

github-actions[bot] commented 1 year ago

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.

AnatoleLucet commented 1 year ago

:wave:

github-actions[bot] commented 11 months ago

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.

AnatoleLucet commented 11 months ago

:smiling_face_with_tear:

github-actions[bot] commented 10 months ago

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] commented 9 months ago

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

gorhom commented 9 months ago

seems like a good feature to add 🧐 , let me look into it