SectionListBottomSheet

@shopify/shop-minis-platform-sdk / components/BottomSheet/SectionListBottomSheet

UseSectionListBottomSheetProps

Properties

headerText?

optional headerText: string

onDismiss()

onDismiss: () => void

Returns

void

snapPoints?

optional snapPoints: SnapPoints

variant?

optional variant: BottomSheetVariant

---

SectionListBottomSheet()

SectionListBottomSheet(__namedParameters): Element

A <SectionList /> component wrapped in a <BottomSheet /> and configured for scroll-based animations.

The <BottomSheet /> will open on mount and closing must be handled using onDismiss. There are a few props specific to <BottomSheet /> but the rest of the API is the same as <SectionList /> so you can pass any props you would normally pass to a <SectionList />

The <BottomSheet /> will initially open to snapPoints.positionTwo (the lower position on screen) and the user will be able to toggle between snapPoints.positionTwo and snapPoints.positionOne (the higher position on screen) by tapping the header or by scrolling the <SectionList />.

The <BottomSheet /> can be closed by swiping down with enough force to "snap" or by pressing the close button (when present).

Parameters

Parameter	Type
__namedParameters	UseBottomSheetProps\<typeof SectionList> & SectionListProps\<any, DefaultSectionT>

Returns

Element

Component

Example

const [isVisible, setIsVisible] = useState(false)

const sections = Array.from({length: 50}, (_, index) => ({
  title: `Section ${index + 1}`,
  data: ['1', '2', '3', '4', '5'],
}))

return (<>
  <Button
    text="Launch 🚀"
    disabled={isVisible}
    onPress={() => setIsVisible(true)}
  />
  {isVisible ? (
    <SectionListBottomSheet
      onDismiss={() => setSectionListBottomSheetIsVisible(false)}
      sections={sections}
      renderSectionHeader={({section: {title}}) => (<Text variant="heroBold">{title}</Text>)}
      renderItem={({item}) => <Text>{item}</Text>}
    />
  ) : null}
</>)

---

useSectionListBottomSheet()

useSectionListBottomSheet(__namedParameters): object

Parameters

Parameter	Type
__namedParameters	UseSectionListBottomSheetProps

Returns

object

dismissBottomSheet()

dismissBottomSheet: () => void

Returns

void

openBottomSheet()

openBottomSheet: () => void

Returns

void

SectionListBottomSheet()

SectionListBottomSheet: (sectionListProps) => Element = SectionListBottomSheetComponent

Parameters

Parameter	Type
sectionListProps	SectionListProps\<any, DefaultSectionT>

Returns

Element

snapPoints

snapPoints: SnapPoints

y

y: Readonly\<SharedValue\<number>>

Deprecated

use useSheet instead