Bottom Sheet

A Bottom sheet component lets you display content that can be swiped up or down 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.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Configuration Properties

Basic

PropertyDescription
Component nameAn 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.
Show handleWhether to show the top sheet handle or not
Handle colorColor of the top handle
Initial snap positionPosition of the snap point to be used as the initial point
Top snap positionTop position where bottom sheet can snap to. A numerical value that represents distance from the top
Middle snap positionMiddle position where bottom sheet can snap to. A numerical value that represents distance from the top
Bottom snap positionBottom position where bottom sheet can snap to. A numerical value that represents distance from the top
Top border radiusBorder radius of top corners
Border widthWidth of bottom sheet borders
Border colorColor of bottom sheet borders
Show Vertical Scroll IndicatorWhen true, shows a vertical scroll indicator. The default value is true.
BounceWhen 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.

Advanced

PropertyDescription
Initial snap indexIndex of the snap point to be used as the initial point. Overrides initial snap position
Enable over-scrollAllow sheet to be dragged beyond lowest snap point
FrictionFactor of resistance when the gesture is released. A value of 0 offers maximum acceleration, whereas 1 acts as the opposite
Top insetThis value is useful if you want to take into consideration safe area insets when applying percentages for snapping points

Data Properties

PropertyDescription
Custom 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%"]

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.

Triggers

TriggerDescription
On SettleRuns the Actions when the bottom sheet settles on a snap point