Bottom Sheet

A Bottom sheet component lets you display content that can be scrolled up from the bottom of the screen. You can add any child component(s) on the bottom sheet as per the use case(Like Buttons, Image, View etc).

Adding a Bottom Sheet

  • Select the Bottom Sheet component from the Components drawer. You can open the list of components by clicking the + button next to Components.
  • Select the added component in the Components tree.
  • Add child component(s) to it such as View, Button, Image or Image Background etc.

Configuration Properties

PropertyDescription
Component name An optional descriptive name for the component. If the name is not "Bottom Sheet", it will appear as a comment above this component in the generated code.
Initial snap index Index of the snap point to be used as the initial point
Show handle Whether to show the top sheet handle or not
Handle color Color of the top handle
Top border radius Border radius of top corners
Border width Width of bottom sheet borders
Border color Color of bottom sheet borders
Show Vertical Scroll Indicator When true, shows a vertical scroll indicator. The default value is true.
Bounce When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.

Data Configuration

PropertyDescription
Snap points This is an array of numerical values, either numbers or percentages.

Each number represents a snap point where the Bottom sheet snaps. They represent the distance from the top.

The default snap points are :
["10%", "50%", "80%"]