The width- and height-related properties can be set as percentage values, when you want the component to be responsive, and fixed numbers when you want the component to be a specific size.

• Width determines the horizontal size of a component on the screen.
• Height determines the vertical size of a component on the screen.
• Min Width determines the minimum width of a component.
• Min Height determines the minimum height of a component.
• Max Width determines the maximum width of a component.
• Max Height determines the maximum height of a component.

Aspect Ratio

“Aspect Ratio” allows you to control the proportions of a component based on the ratio of width and height. For example, if you want a component to have an aspect ratio of 16:9, set the width (or height) value to your desire and then enter a value of 1.78 (16/9) in the Aspect Ratio field.

• If “Width” is set, the aspect ratio determines the height value
• If Height is set, aspect ratio determines the width value
• If Flex Basis (see “Sizing” in the layout editor) is set, the aspect ratio controls the cross-axis value (if unset)\
• If Flex Grow or “Shrink” (see “sizing” in the layout editor) is set, the aspect ratio controls the size of the element on the cross-axis (if unset)
• Min and Max values are taken into account

Overflow (Web Only)

To enable scrolling that works on both Web and Native, use the ScrollView component.

Overflow allows you to control how content inside a container is displayed when the content exceeds the size of the container.

• Visible (1st Icon): Elements that exceed the parent container are visible
• Hidden (2nd Icon): Elements that exceed the parent container are masked such that only the part within the parent container is visible
• Scroll (3rd Icon): The container will enable scrolling if the components inside of it exceed its dimensions.