FlatListBottomSheet

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

UseFlatListBottomSheetProps

Properties

headerText?

optional headerText: string

onDismiss()

onDismiss: () => void

Returns

void

snapPoints?

optional snapPoints: SnapPoints

variant?

optional variant: BottomSheetVariant

---

FlatListBottomSheet()

FlatListBottomSheet(__namedParameters): Element

A <FlatList /> 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 <FlatList /> so you can pass any props you would normally pass to a <FlatList />

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 <FlatList />.

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 FlatList> & FlatListProps\<any>

Returns

Element

Component

Example

const [isVisible, setIsVisible] = useState(false)

const data = [{ key: 'a', title: 'item A' }, { key: 'b', title: 'item B' }]

return (<>
  <Button
    text="Launch 🚀"
    disabled={isVisible}
    onPress={() => setIsVisible(true)}
  />
  {isVisible ? (
    <FlatListBottomSheet
      onDismiss={() => setIsVisible(false)}
      data={data}
      renderItem={({item}) => (<Text key={item.key}>{item.title}</Text>)}
    />
  ) : null}
</>)

---

useFlatListBottomSheet()

useFlatListBottomSheet(__namedParameters): object

Parameters

Parameter	Type
__namedParameters	UseFlatListBottomSheetProps

Returns

object

dismissBottomSheet()

dismissBottomSheet: () => void

Returns

void

FlatListBottomSheet()

FlatListBottomSheet: (flatListProps) => Element = FlatListBottomSheetComponent

Parameters

Parameter	Type
flatListProps	FlatListProps\<any>

Returns

Element

openBottomSheet()

openBottomSheet: () => void

Returns

void

snapPoints

snapPoints: SnapPoints

y

y: Readonly\<SharedValue\<number>>

Deprecated

use useSheet instead