Style properties reference

Reference for view component style properties

This page describes the functionality and applicable values for the various style properties available for view components in Composer.

For each style property, we describe its functionality and how it can be configured via Composer' style properties menu.

We also cover the under-the-hood property names and their applicable values, which can be used to manipulate the styles programmatically via e.g. formula functions or the Set component styles flow function.

All the style properties configurable here map to React Native style props, and equivalent CSS props in the web runtime.

All style properties have default values that are used when the property is empty or undefined. In most cases, the default value is shown in light gray after erasing any user-inputted values – such as 0 for margin or rgba(255,255,255,0) for background color.

General

This section has general information about how the different style properties and their values work.

Available style properties

Each view component defines what style properties are available for them. Please refer to the view component reference documentation to see what properties are available for each component.

Pixels and pixel density in Composer

Many mobile devices and some desktop screens have a pixel density of 2 or higher. This means that two or more physical pixels on the screen are used to render a single "logical" pixel.

For example, an iPhone X has a viewport width of 375 pixels, but there's around three times that number of physical pixels used to render the content.

Composer works everywhere with logical pixels – meaning a view component whose width is set to 375 pixels will fit an iPhone X screen exactly.

Colors in Composer

In all places where color values are used, Composer supports the following formats.

Red-green-blue

For functional formats, color values are between 0…255. The alpha channel value is a decimal between 0…1.

For hexadecimal formats, color and alpha channel values are between 0…f (single) or 00…ff (double).

Format

Sample

Syntax

Hexadecimal (single)

#f0f

#rgb

Hexadecimal (double)

#ff00ff

#rrggbb

Functional

rgb(255, 0, 255)

rgb(red, green, blue)

Functional (with alpha channel)

rgb(255,0,255,1.0)

rgb(red, green, blue, alpha)

Hexadecimal (single, with alpha channel)

#f0ff

#rgba

Hexadecimal (double, with alpha channel)

#ff00ffff

#rrggbbaa

Hue-saturation-lightness

Hue value is an integer between 0…360. Saturation and lightness values are between 0%…100%. Alpha channel value is a decimal between 0…1.

Format

Sample

Syntax

Functional

hsl(300, 90%, 80%)

hsl(hue, saturation, lightness)

Funtional (with alpha channel)

hsla(300, 70%, 50%, 0.8)

hsla(hue, saturation, lightness, alpha)

Named colors

All the color names in the CSS3 specification are available, such as bisque or olivedrab.

Layout

The Layout section determines how UI components are laid out on the page. Most of the options here apply for containers only, but individual items can override some of their parent containers' layout options.

The options available map to flexbox properties, but understanding flexbox is not required. Layouting is covered in more detail in the Layouting tutorial.

n

Layout direction (flexDirection)

The topmost row configures layout direction. You can decide if you want UI components in the container to be laid out vertically (top to bottom) or horizontally (left to right).

You can also reverse the order of the children in the container, so that the layout flow becomes bottom to top or right to left.

Option

Value

Description

Vertical

column

Children are laid out from top to bottom.

Horizontal

row

Children are laid out from left to right.

Vertical, reversed

column-reverse

Children are laid out from bottom to top.

Horizontal, reversed

row-reverse

Children are laid out from right to left.

Justify content (justifyContent)

This setting determines how the UI components inside the container are justified, i.e. distributed along the layout direction axis.

Whether justification happens on the horizontal or vertical axis depends on the layout direction – you can see the icons change when the direction is changed.

The below table describes the justification options for a container with a vertical layout direction. The property values remain the same, e.g. flex-start with horizontal layout direction would cause the children components to be justified horizontally to the left side of the container.

Option

Value

Image

Description

Top

flex-start

Components are justified vertically to the top side of the container.

Center

center

Components are justified vertically to the center of the container.

Bottom

flex-end

Components are justified vertically to the bottom of the container.

Space between

space-between

Components are evenly distributed along the vertical axis; first component at the top of the container, last component at the bottom of the container.

Space around

space-around

Components are evenly distributed along the vertical axis with an even amount of space around them. This means that the space between the top border and the first component, and the last component and the bottom border, is half of that between components themselves

Evenly spaced

space-evenly

Components are distributed along the vertical axis so that there's an even amount of space between any two components, or a component and the top/bottom border of the container

To best see how this property works, the container needs to be higher/wider than the space taken up by its children components, so that the justification takes effect.

Align items (alignItems)

This property determines how the children components are aligned relative to the layout direction axis, so if the layout direction is vertical, this property will determine the horizontal alignment, and vice versa.

To see this property take effect, the children components need to have a width less than the width of the container.

The following table describes the properties for a container with vertical layout direction. The property values remain the same, e.g. flex-start with horizontal layout means Top alignment.

Option

Value

Description

Left

flex-start

Components are aligned to the left side of the container.

Center

center

Components are aligned to the center of the container.

Right

flex-end

Components are aligned to the right side of the container.

Stretch

stretch

Components are horizontally stretched to fill the container. Note that this property won't have an effect if the child component has an explicit width set.

Baseline

baseline

Components are aligned according to their content's baseline. This means that e.g. containers that have text inside are aligned so that the text baselines align.

Baseline alignment – see how the child containers' text content determines the alignment.

Wrap children (flexWrap)

If this property is selected, child components are wrapped onto a new row/column (depending on the layout direction) after they no longer fit the width/height of the container.

To see this property take effect, your container must have more children than would fit along its layout direction axis.

Option name

Value

Unchecked

false

Children are not wrapped onto a new row/column when exceeding container size.

Checked

true

Children are wrapped onto a new row/column when exceeding container size.

Wrap children alignment (alignContent)

The following table assumes a vertical layout direction. The property values remain the same, e.g. flex-start with horizontal layout means Top alignment.

Option

Value

Description

Left

flex-start

Align columns of child components to the left side of the container.

Center

center

Align columns of child components to the center of the container.

Right

flex-end

Align columns of child components to the right side of the container.

Space between

space-between

Align columns of child components so that there's an even amount of space between each column, with the first column aligned to the left side of the container and the last column aligned to the right side of the container.

Space around

space-around

Align columns of child components so that there's an even amount of space around each column. This means that the space between the left border and the first column, and the last column and the right border is half of that between columns themselves.

Evenly spaced

space-evenly

Align columns of child components so that there's an even amount of space around between any two columns, or a column and the left/right border of the container.

Dimension and position

Width and height

Width and height options

These properties determine the dimensions of the UI component in pixels.

If the percentage (%) unit is used, the width is calculated as a percentage of the parent container's width.

Note that even though the dropdown switches between px and % for the unit, the programmatic pixel values are given as an integer, without the px suffix.

Name

Property

Sample values

Description

Width

width

100

90%

The exact width of the component.

Height

height

250

100%

The exact height of the component.

Minimum width

minWidth

160

75%

The minimum width of the component. Regardless of content, this is the minimum width the component will have.

Minimum height

minHeight

40

25%

The minimum height of the component. Regardless of content, this is the minimum height the component will have.

Maximum width

maxWidth

40

25%

The maximum width of the component. Regardless of content, this is the maximum height the component will have.

Maximum height

maxHeight

40

25%

The maximum height of the component. Regardless of content, this is the minimum height the component will have.

Margins

Margins determines the space between your component and other components. Use margins to add e.g. space around a button element.

Negative margins can be used to e.g. move components on top of each other or outside their parent container, but this should be used with caution, as it might not be immediately clear how components with negative margins work e.g. across different screen sizes.

Margin is given in pixels. The four input fields map to the marginTop, marginBottom, marginLeft and marginRight style properties. Valid values are positive and negative integers.

Padding

Padding determines the space between your component's border and its contents. Use this to add e.g. space inside a container.

Padding is given in pixels. The four input fields map to the paddingTop, paddingBottom, paddingLeft and paddingRight style properties. Valid values are positive integers. Negative integers are accepted, but will be treated as 0.

Position

Position allows you to offset the top/bottom/left/right position of the element. You can only apply the offset in one direction along the horizontal/vertical axis, chosen via the dropdown next to the field.

Position is given in pixels. The dropdown options map to the top, bottom, left and right style properties. Valid values are positive and negative integers.

Z-index (zIndex)

By default, the position of the component in the component tree determines the order in which components are rendered – parents are rendered "under" their children and so on.

Z-index allows you to override this: components with a higher Z-index will render on top of components with a lower one. Think of the z-direction like it's pointing from the phone into your eyeball.

Valid values are positive and negative integers.

Align self (alignSelf)

Align self overrides the Align items value of the component's parent container, and can be used for advanced layouting.

Growing and shrinking

This property determines how the UI component should grow/shrink along the parent container's layout direction axis. It can conflict with your width/height properties.

Under the hood, theses settings manipulate the flex grow and and flex shrink properties discussed in the next section.

Advanced options

The Show advanced options dropdown allows you to set the flexGrow/flexShrink/flexBasis properties directly. You can read more about them on e.g. https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Image

Resize mode (resizeMode)

Determines how the image should be resized in relation to the image frame (i.e. the containing UI component's dimensions).

For containers, this affects the container's background image.

Name

Value

Description

Cover

cover

Cover the frame, maintaining the image's aspect ratio, while ensuring that both width and height are equal to or larger than the container's dimensions.

Contain

contain

Contain the image in the frame, maintaining the image's aspect ratio, while ensuring that both width and height are smaller than or equal to the container's dimensions.

Stretch

stretch

Scale the image's width and height to fit the frame dimensions exactly. This can affect the image's aspect ratio.

Repeat

repeat

Repeat the image to cover the frame. The image will keep its size and aspect ratio, unless it is larger than the frame, in which case it will be scaled down uniformly so that it is contained in the view.

Center

center

Center the image in the frame along both dimensions. If the image is larger than the view, scale it down uniformly so that is contained in the frame.

Typography

Text align (textAlign)

Specifies text alignment. Valid values are left, center and right.

Font (font)

Specifies the font to use. The following fonts are available by default.

Font name

Archive Narrow

Lato

Merriweather

Montserrat

Open Sans

Playfair Display

Roboto Mono

Font style (fontStyle)

Specifies font style. Valid values are normal and italic.

Font weight (fontWeight)

Specifies font weight. Most fonts support normal and bold. If the selected numeric value is not available for the chosen font, the closest one is used.

Valid values are normal, bold, 100, 200, 300, 400, 500, 600, 700, 800 and 900.

Font size (fontSize)

Specifies font size, in pixels. Valid values are positive integers.

Line height (lineHeight)

Specifices text line height, in pixels. Valid values are positive integers. If line height is less than font size, clipping might occur.

Text decoration (textDecorationLine)

Specifies text decoration. Valid values are none, underline and line-through.

Text color (color)

Specifies text color.

Letter spacing (letterSpacing)

Specifies letter spacing, in pixels. Valid values are positive integers.

Decoration color (decorationColor)

Specifies color for the text decoration. iOS-only.

Decoration style (decorationStyle)

Specifies style for the text decoration. Valid values are solid, double, dotted and dashed.

Background

Determines the background color of the component. If the color has a translucent alpha channel, components underneath will be visibile.

Shadow

This section allows you to configure two types of shadows.

Box shadow is a drop shadow under your component, allowing you to e.g. create a 3D effect for a card component.

Text shadow is a drop shadow under the letters of a text component.

Enable box shadow

Determines if the box shadow is shown or not.

Valid values are true or false. Under the hood, works by setting the shadowOpacity style property to 1 or 0.

Box shadow offset X/Y (shadowOffset)

Determines the offset of the shadow in the horizontal (X) and vertical (Y) direction.

Shadow offset is given in pixels. Unlike many other style properties, shadowOffset is an object containing width and height keys. Valid values are positive and negative integers.

Thus, to set a drop shadow that's offset two pixels down and four to the left, you would set shadowOffset to an object {width: 2, height: -4} .

Box shadow blur radius (shadowRadius)

Sets the box shadow blur radius.

Blur radius is given in pixels. Valid values are positive integers.

Box shadow color (shadowColor)

Sets the box shadow color.

Border

Set a border for the component.

Border style (borderStyle)

Border style can be one of the following values.

Name

Value

Description

None

unset

No border is rendered.

Solid

solid

Solid border.

Dotted

dotted

Dotted border, with dots and spaces between them having equal width.

Dashed

dashed

Dashed border, with dashses having a longer width than the spaces between them.

Border radius (borderRadius)

Border radius, given in pixels. Valid values are positive integers.

By expanding the setting via the arrow icon, individual border radii for the top left, top right, bottom left and bottom right can be set. These values override border radius, and they map to the borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius and borderBottomRightRadius style properties.

Border width (borderWidth)

Border width, given in pixels. Valid values are positive intgers.

By expanding the setting via the arrow icon, individual border widths for the top, right, bottom and left can be set. These values override border radius, and they map to the borderTopWidth, borderRightWidth, borderBottomWidth and borderLeftWidth style properties.

Border color (borderColor)

Border color. Always applies to the whole border.

Transform (transform)

Transformations can be confusing

Applies a transformation effect onto the UI component.

Internally, the transform property contains an array of objects whose keys map to the table below. Each property should be set in its own object. For example, to rotate an UI component by 45 degrees and skewing it on the X axis by 1 radian, you would set transform like this:

transform = [
{ rotate: "45deg" },
{ skewX: "1rad" }
]

Angle values for skew and rotate transforms can be given in radians or degrees as a string that has a positive or negative number value followed by deg or rad.

For example, valid angle values include -45deg, 180deg, -1rad or 2.15rad.

Name

Property

Description

Perspective

perspective

Specifies the perspective distance between the user and the plane of the screen, given in pixels. The greater the value, the further away the perspective of the user is. Valid values are positive integers.

Rotate

rotate

Rotate the object by the specified angle.

Rotate X

rotateX

Rotate the object around its abscissa (horizontal axis) without deforming it. This creates a 3D effect.

Rotate Y

rotateY

Rotate the object around its ordinate (vertical axis) without deforming it. This creates a 3D effect.

Rotate Z

rotateZ

Rotates the object around its z-axis without deforming it. This creates a 3D effect.

Scale

scale

Scales an element up or down on the 2D plane. Affects both horizontal and vertical dimensions by the same amount. Valid values are any decimal values, with 1 being no transformation.

Scale X

scaleX

Scales an element up or down on the 2D plane. Affects the horizontal (X) axis. Valid values are any decimal values, with 1 being no transformation.

Scale Y

scaleY

Scales an element up or down on the 2D plane. Affects the vertical (Y) axis. Valid values are any decimal values, with 1 being no transformation.

Translate X

translateX

Moves the element on the horizontal (X) axis by the given amount of pixels. Valid values are positive and negative integers.

Translate Y

translateY

Moves the element on the vertical (Y) axis by the given amount of pixels. Valid values are positive and negative integers.

Advanced properties

Opacity (opacity)

Specifies the opacity of the UI component and, in the case of a container, all its children. Valid values are decimal values between 0…1, with 1 being fully opaque and 0 being fully transparent.

Overflow (overflow)

Specifies what happens if a container's child UI components overflow the dimensions of the parent container.

Name

Value

Description

Visible

visible

Overflowing UI components are visible, rendered outside the parent container's boundaries.

Hidden

hidden

Overflowing UI components are hidden when going beyond the parent container's boundaries.

Back face visibility (backfaceVisibility)

Specifies if the back face of an UI component rotated with transforms is visible.

A component's back face is a mirror image of its front face. Though invisible in 2D, the back face can become visible when a transformation causes the component to be rotated in 3D space.

Valid values are visible and hidden.

Elevation (elevation)

Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects the z-order for overlapping views. Android-only.

Disable scroll

Only available for a page. Specifies if scrolling the page's main container should be possible.

Using this property in combination with the Scroll View UI component will allow you to create UI where some parts are fixed in place and others are scrollable.