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.

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

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.

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.

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.

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.

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.

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.

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.

Dimension and position

Width and height

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.

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.

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

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)

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.

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.

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.