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).

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.

Component Specific Styles

Property	Description
Show handle	Whether to show the top sheet handle or not
Handle color	Color of the top handle
Initial snap position	Position of the snap point to be used as the initial point
Top snap position	Top position where bottom sheet can snap to. A numerical value that represents distance from the top
Top border radius	Border radius of top corners
Top Inset	Adjust the top inset
Middle snap position	Middle position where bottom sheet can snap to. A numerical value that represents distance from the top
Bottom snap position	Bottom position where bottom sheet can snap to. A numerical value that represents distance from the top
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.

Configuration Properties

Basic

Property	Description
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.
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.
Allow Touch Events	Allows touch events on visible components to be processed while the keyboard is open
Ignore Reduce Motion	When true, animations will play even if the user has enabled reduce motion settings on their device. Enabled by default

Advanced

Property	Description
Initial snap index	Index of the snap point to be used as the initial point. Overrides initial snap position
Enable over-scroll	Allow sheet to be dragged beyond lowest snap point
Friction	Factor of resistance when the gesture is released. A value of 0 offers maximum acceleration, whereas 1 acts as the opposite
Top inset	This value is useful if you want to take into consideration safe area insets when applying percentages for snapping points

Data Properties

Property	Description
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%"]`

Property

Description

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

Trigger	Description
On Settle	Runs the Actions when the bottom sheet settles on a snap point

Actions

Action	Description
Expand Bottom Sheet	Snap to the maximum provided snap point. Requires a Bottom Sheet component to be on the Screen.
Collapse Bottom Sheet	Snap to the minimum provided snap point. Requires a Bottom Sheet component to be on the Screen.
Close Bottom Sheet	Fully closes the Bottom Sheet. Requires a Bottom Sheet component to be on the Screen.
Snap To Bottom Sheet Index	Snap to one of the provided snap points. Requires a Bottom Sheet component to be on the Screen.