Style properties reference

Changelog Bugs and feature requests AppGyver Academy
Search…
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 (backgroundColor)
Determines the background color of the component. If the color has a translucent alpha channel, components underneath will be visibile.

The value should be a color #rgb
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:
1
transform = [
2
  { rotate: "45deg" },
3
  { skewX: "1rad" }
4
]
Copied!
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.