ScrollViewBottomSheet

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