Layout
Components used to build out the structure of your screen.
Keyboard Avoiding View
When configured, it will automatically adjust the position of the contents of the screen for a better fit when a user focuses on a field and the keyboard appears.
Configuration
Make sure to set the Flex Grow property of the Keyboard Avoiding View to 1
Property | Description |
|---|---|
Component name | To alter the name of the component. The name is reflected in the Layout tree. Defaults to Keyboard Avoiding View. |
Enable | Enable the keyboard avoiding view. |
Resizing Behavior | Select how the screen will resize once the keyboard drawer opens. |
Keyboard Vertical Offset | Set the distance between the top of the keyboard and the bottom of the screen's contents. |
Divider
A basic line used to separate sections of content from each other.
Configuration
Property | Description |
|---|---|
Component name | To alter the name of the component. The name is reflected in the Layout tree. Defaults to Divider. |
Color | Set the color of the divider. |
Height | Set the height/thickness of the divider. |
Blur View
A component that renders a native blur view on iOS and a semi-transparent view on Android.
Default, Light and Dark Blur Views
Configuration
To use the Blur View, place whatever you want to be blurred above the Blur View as seen above
Additionally, set the Position of the Blur View to
Absoluteand Top: 0, Bottom: 0, Right: 0, Left: 0.
Property | Description |
|---|---|
Component name | To alter the name of the component. The name is reflected in the Layout tree. Defaults to Blur View. |
Tint | Select the type of tint to be applied to the blur view. |
Intensity | A number between 1 and 100 that controls the how intense the blur is. |
Scroll View
A basic container equipped with scrolling capabilities. If you are creating a list of Row, Card, or Field components, consider using a List component instead to increase your application's performance.
Configuration
Property | Description |
|---|---|
Component name | To alter the name of the component. The name is reflected in the Layout tree. Defaults to Scroll View. |
Bounce | Enable so that the contents of the Scroll View bounce when the user reaches the end of the Scroll View. |
Horizontal | Enable to position the contents of the Scroll View into a row that will scroll horizontally. |
Show Vertical Scroll Indicator | Enable to show a bar that shows the progress of scrolling through the Scroll View vertically |
Show Horizontal Scroll Indicator | Enable to show a bar that shows the progress of scrolling through the Scroll View horizontally |
Row
A layout component that will arrange all of the components nested inside of it into a row.
Configuration
Align Vertically
Property | Description |
|---|---|
Start | Lines are grouped together and positioned at the beginning of the cross axis. |
End | Lines are grouped together and positioned at the end of the cross axis. |
Center | Lines are grouped together and positioned in the center of the container's cross axis. |
Align Horizontally
Property | Description |
|---|---|
Start | Child elements are positioned at the beginning of the container. |
Center | Child elements are positioned in the center of the container. |
End | Child elements are positioned at the end of the container. |
Between | The first child element is positioned at the beginning, the last child element is positioned at the end and all remaining child elements are spread out evenly in between. |
Around | Child elements are spread out across the line with equal amounts of space surrounding them. |
Spacer
Adds space to the inside of things. Not on the outside! This means you always have precisely the type of space you need
Configuration
Use the input to define how much space is to be added inside each side of the Spacer.
Stack
A layout component that will arrange all of the components nested inside of it into a stack/column.
Configuration
Property | Description |
|---|---|
Start | Elements are positioned at the beginning of the container. |
Center | Elements are positioned in the middle of the container. |
End | Elements are positioned at the end of the container. |
Center
Center will automatically center anything you place inside of it. You can control its width, height and background color.
Configuration
Property | Description |
|---|---|
Width | Define the width of the area to be centered. |
Height | Define the height of the area to be centered. |
Background Color | Set the background of the area to be centered. |
Circle
A Circle will always be round and center its content.
Configuration
Property | Description |
|---|---|
Size | Define the size of the circle. |
Background Color | Set the background of the circle. |
Square
A Square will always be a perfect square and centers its content.
Configuration
Property | Description |
|---|---|
Size | Define the size of the square. |
Background Color | Set the background of the square. |
Surface
A Surface component is used to provide elevation on its child component.
Configuration
Property | Description |
|---|---|
Component name | To alter the name of the component. The name is reflected in the Layout tree. Defaults to Surface. |
Elevation | Set an elevation on the element. |
Additional Resources
Updated 2 months ago