BottomSheet

Deprecated

The BottomSheet component and its variants are marked as deprecated. It is no longer being maintained or updated.

Use useSheet instead

We strongly urge all users and developers to migrate to use useSheet as it includes more up-to-date information and enhancements catering to current needs.

For more support, please send us an email or send us a message in the #shop-minis channel in the Shopify Partners Slack.

FlatListBottomSheet Props details

@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

GridBottomSheet Props details

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

UseGridBottomSheetProps

Properties

headerText?

optional headerText: string

onDismiss()

onDismiss: () => void

Returns

void

snapPoints?

optional snapPoints: SnapPoints

variant?

optional variant: BottomSheetVariant

GridBottomSheet()

GridBottomSheet(__namedParameters): Element

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

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`\<\<`ItemT`>(`props`) => `ReactElement`\<`any`, `string` \| `JSXElementConstructor`\<`any`>>> & `Omit`\<`FlatListProps`\<`ItemPair`\<`GridData`>>, `"data"` \| `"renderItem"`> & `object` & `object`

Returns

Element

Component

Example

const [isVisible, setIsVisible] = useState(false)
const data = [{ text: 'Item 1' }, { text: 'Item 2' }, { text: 'Item 3' }]

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

useGridBottomSheet()

useGridBottomSheet(__namedParameters): object

Parameters

Parameter	Type
`__namedParameters`	`UseGridBottomSheetProps`

Returns

object

dismissBottomSheet()

dismissBottomSheet: () => void

Returns

void

GridBottomSheet()

GridBottomSheet: (gridProps) => Element = GridBottomSheetComponent

Parameters

Parameter	Type
`gridProps`	`Omit`\<`FlatListProps`\<`ItemPair`\<`GridData`>>, `"data"` \| `"renderItem"`> & `object` & `object`

Returns

Element

openBottomSheet()

openBottomSheet: () => void

Returns

void

snapPoints

snapPoints: SnapPoints

y

y: Readonly\<SharedValue\<number>>

Deprecated

use useSheet instead

ProductCardGridBottomSheet Props details

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

UseProductCardGridBottomSheetProps

Properties

headerText?

optional headerText: string

onDismiss()

onDismiss: () => void

Returns

void

snapPoints?

optional snapPoints: SnapPoints

variant?

optional variant: BottomSheetVariant

ProductCardGridBottomSheet()

ProductCardGridBottomSheet(__namedParameters): Element

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

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`\<`ForwardRefExoticComponent`\<`Omit`\<`FlatListProps`\<`any`>, `"data"` \| `"renderItem"`> & `object` & `RefAttributes`\<`ProductCardGridRef`>>> & `Omit`\<`FlatListProps`\<`any`>, `"data"` \| `"renderItem"`> & `object` & `RefAttributes`\<`ProductCardGridRef`>

Returns

Element

Component

Example

const [isVisible, setIsVisible] = useState(false)

const SHOP_GID = 'gid://something'
const products = getProductsFromSomewhere(SHOP_GID)

return (<>
  <Button
    text="Launch 🚀"
    disabled={isVisible}
    onPress={() => setIsVisible(true)}
  />
  {isVisible ? (
    <ProductCardGridBottomSheet
      onDismiss={() => setIsVisible(false)}
      products={products}
      renderItem={({product}) => (
        <TouchableProduct product={product} key={product.id}>
          <ProductCard shopId={SHOP_GID} product={product} />
        </TouchableProduct>
      )}
    />
  ) : null}
</>)

useProductCardGridBottomSheet()

useProductCardGridBottomSheet(__namedParameters): object

Parameters

Parameter	Type
`__namedParameters`	`UseProductCardGridBottomSheetProps`

Returns

object

dismissBottomSheet()

dismissBottomSheet: () => void

Returns

void

openBottomSheet()

openBottomSheet: () => void

Returns

void

ProductCardGridBottomSheet()

ProductCardGridBottomSheet: (productCardGridProps) => Element = ProductCardGridBottomSheetComponent

Parameters

Parameter	Type
`productCardGridProps`	`Omit`\<`FlatListProps`\<`any`>, `"data"` \| `"renderItem"`> & `object` & `RefAttributes`\<`ProductCardGridRef`>

Returns

Element

snapPoints

snapPoints: SnapPoints

y

y: Readonly\<SharedValue\<number>>

Deprecated

use useSheet instead

ScrollViewBottomSheet Props details

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

UseScrollViewBottomSheetProps

Properties

headerText?

optional headerText: string

onDismiss()

onDismiss: () => void

Returns

void

snapPoints?

optional snapPoints: SnapPoints

variant?

optional variant: BottomSheetVariant

ScrollViewBottomSheetProps

ScrollViewBottomSheetProps: PropsWithChildren\<ComponentProps\<typeof Animated.ScrollView>>

ScrollViewBottomSheet()

ScrollViewBottomSheet(__namedParameters): Element

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

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`\<`ForwardRefExoticComponent`\<`AnimatedScrollViewProps` & `RefAttributes`\<`AnimatedScrollView`>>> & `AnimatedScrollViewProps` & `RefAttributes`\<`AnimatedScrollView`> & `object`

Returns

Element

Component

Example

const [isVisible, setIsVisible] = useState(false)

return (<>
  <Button
    text="Launch 🚀"
    disabled={isVisible}
    onPress={() => setIsVisible(true)}
  />
  {isVisible ? (
    <ScrollViewBottomSheet onDismiss={() => setIsVisible(false)}>
      <Text>Put anything you want in here!</Text>
    </ScrollViewBottomSheet>
  ) : null}
</>)

useScrollViewBottomSheet()

useScrollViewBottomSheet(__namedParameters): object

Parameters

Parameter	Type
`__namedParameters`	`UseScrollViewBottomSheetProps`

Returns

object

dismissBottomSheet()

dismissBottomSheet: () => void

Returns

void

openBottomSheet()

openBottomSheet: () => void

Returns

void

ScrollViewBottomSheet()

ScrollViewBottomSheet: (__namedParameters) => Element = ScrollViewBottomSheetComponent

Parameters

Parameter	Type
`__namedParameters`	`ScrollViewBottomSheetProps`

Returns

Element

snapPoints

snapPoints: SnapPoints

y

y: Readonly\<SharedValue\<number>>

Deprecated

use useSheet instead

SectionListBottomSheet Props details

@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 /> 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

BottomSheet

Deprecated

UseFlatListBottomSheetProps​

Properties​

headerText?​

onDismiss()​

Returns​

snapPoints?​

variant?​

FlatListBottomSheet()​

Parameters​

Returns​

Component​

Example​

useFlatListBottomSheet()​

Parameters​

Returns​

dismissBottomSheet()​

Returns​

FlatListBottomSheet()​

Parameters​

Returns​

openBottomSheet()​

Returns​

snapPoints​

y​

Deprecated​

UseGridBottomSheetProps​

Properties​

headerText?​

onDismiss()​

Returns​

snapPoints?​

variant?​

GridBottomSheet()​

Parameters​

Returns​

Component​

Example​

useGridBottomSheet()​

Parameters​

Returns​

dismissBottomSheet()​

Returns​

GridBottomSheet()​

Parameters​

Returns​

openBottomSheet()​

Returns​

snapPoints​

y​

Deprecated​

UseProductCardGridBottomSheetProps​

Properties​

headerText?​

onDismiss()​

Returns​

snapPoints?​

variant?​

ProductCardGridBottomSheet()​

Parameters​

Returns​

Component​

Example​

useProductCardGridBottomSheet()​

Parameters​

Returns​

dismissBottomSheet()​

Returns​

openBottomSheet()​

Returns​

ProductCardGridBottomSheet()​

Parameters​

Returns​

snapPoints​

y​

Deprecated​

UseScrollViewBottomSheetProps​

Properties​

headerText?​

UseFlatListBottomSheetProps

Properties

headerText?

onDismiss()

Returns

snapPoints?

variant?

FlatListBottomSheet()

Parameters

Returns

Component

Example

useFlatListBottomSheet()

Parameters

Returns

dismissBottomSheet()

Returns

FlatListBottomSheet()

Parameters

Returns

openBottomSheet()

Returns

snapPoints

y

Deprecated

UseGridBottomSheetProps

Properties

headerText?

onDismiss()

Returns

snapPoints?

variant?

GridBottomSheet()

Parameters

Returns

Component

Example

useGridBottomSheet()

Parameters

Returns

dismissBottomSheet()

Returns

GridBottomSheet()

Parameters

Returns

openBottomSheet()

Returns

snapPoints

y

Deprecated

UseProductCardGridBottomSheetProps

Properties

headerText?

onDismiss()

Returns

snapPoints?

variant?

ProductCardGridBottomSheet()

Parameters

Returns

Component

Example

useProductCardGridBottomSheet()

Parameters

Returns

dismissBottomSheet()

Returns

openBottomSheet()

Returns

ProductCardGridBottomSheet()

Parameters

Returns

snapPoints

y

Deprecated

UseScrollViewBottomSheetProps

Properties

headerText?

onDismiss()

Returns