types

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

NativeProps

Properties

setNativeProps()

setNativeProps: (nativeProps) => void

This function sends props straight to native. They will not participate in future diff process - this means that if you do not include them in the next render, they will remain active (see Direct Manipulation).

Parameters

Parameter	Type
nativeProps	object

Returns

void

---

SnapPoints

Properties

positionOne

positionOne: number

positionTwo

positionTwo: number

---

UseBottomSheetProps\<ScrollableType>

Type Parameters

Type Parameter
ScrollableType extends React.ElementType

Properties

headerText?

optional headerText: string

Optional. When variant is set to 'header' this text will be rendered at the top of the <BottomSheet />.

If you do not want any text to be rendered in the header simply ignore this prop.

onDismiss()

onDismiss: () => void

A callback function that is called when the <BottomSheet /> has closed. You should stop rendering the <BottomSheet /> at this point to avoid rendering offscreen content.

Returns

void

Example

const [isVisible, setIsVisible] = useState(false)

return (<>
  <Button
    text="Launch 🚀"
    disabled={isVisible}
    onPress={() => setIsVisible(true)}
  />
  {isVisible ? (
    <OneOfTheBottomSheetComponents
      {...otherProps}
      onDismiss={() => setIsVisible(false)}
    />
  ) : null}
</>)

scrollToTop()?

optional scrollToTop: (ref?) => void

Optional. A callback function that is called when the <BottomSheet /> wants the child scrollable view to scroll to the top

Only really useful if using useBottomSheet() directly with your own scrollable child.

The values are absolute screen units measured from the top of the containing view. Percentages are not supported.

Parameters

Parameter	Type
ref?	ScrollableElement\<ScrollableType>

Returns

void

Example

const scrollToTop = useCallback((ref?: MyChildScrollableType) => {
  ref?.scrollTo({y: 0, animated: false})
}, [])

useBottomSheet({
  ...otherProps,
  scrollToTop
})

snapPoints?

optional snapPoints: SnapPoints

Optional. Configure the snap points. One or both properties can be set and any values not set will have their defaults taken from useSnapPoints

The values are absolute screen units measured from the top of the containing view. Percentages are not supported.

Examples

{ positionOne: 20 }

{ positionTwo: 300 }

{ positionOne: 20, positionTwo: 300 }

variant?

optional variant: BottomSheetVariant

Optional. Control which <BottomSheet /> variant is rendered

'handle' will render a standard iOS-style bottomsheet handle

'header' will render the Shop-style header which has a close button an optionally some header text (see headerText)

Default

'header'

---

UseBottomSheetReturnValues\<ScrollableType>

Type Parameters

Type Parameter
ScrollableType extends React.ElementType

Properties

BottomSheet

BottomSheet: FC\<BottomSheetProps>

dismissBottomSheet()

dismissBottomSheet: () => void

Returns

void

onScroll

onScroll: ScrollHandlerProcessed\<Record\<string, unknown>>

openBottomSheet()

openBottomSheet: () => void

Returns

void

scrollRef

scrollRef: RefObject\<ScrollableElement\<ScrollableType> & NativeProps>

snapPoints

snapPoints: SnapPoints

y

y: Readonly\<SharedValue\<number>>

---

BottomSheetProps

BottomSheetProps: PropsWithChildren\<object>

Type declaration

containerStyle?

optional containerStyle: StyleProp\<ViewStyle>

---

BottomSheetVariant

BottomSheetVariant: "handle" | "header" | "none"

---

ScrollableElement\<ScrollableType>

ScrollableElement\<ScrollableType>: ScrollableType extends React.ComponentClass ? ScrollableType : React.ComponentRef\<ScrollableType>

Type Parameters

Type Parameter
ScrollableType extends React.ElementType