Styling

Everything to know about styling components.

Edge cases

Some differences (or unobvious cases) from RN and/or CSS:

Default flexDirection is column (CSS default is row).
Default alignContent is flex-start (CSS default is stretch).
Default flexShrink is 0 (CSS default is 1).
flexBasis takes precedence over width and height if defined.
There’s no margin: auto.
Similarly to CSS and RN, if both top and bottom (or left and right) are defined and height (or width) is not defined, the element will span the distance between those two edges.
Properties with higher specificity override properties with lower specificity (in CSS it is the that order matters). In CSS style="flex-grow: 1; flex: 2" would use value 2 for flex-grow because it is defined later. Here corresponding code would use value 1 for flex-grow because it is more specific. Same goes for margin, padding, borderWidth, gap.
box-sizing is always border-box, which means that width and height include both padding and border (CSS default is content-box).

Colors

Colors are defined as strings, similar to CSS.

Supported formats are hex (long and short variants – #f00 and #ff0000), RGB, RGBA (rgba(255, 0, 0, 0.5)), HSL (hsl(60 100% 50%), hsl(60, 100%, 50%, 0.8)), HSLA, HSV.

RGB and HSV require adding A in the end to support alpha. In HSL it is optional. If color is not recognized, transparent is used and warning is logged to the console. For the most up-to-date info check parseColor() in the code.

API

type

LayoutProps

/layout/styling.ts ↗

All layout properties.

Name

Default value

Type and description

alignContent

Start

AlignContent

Controls positioning of rows (or columns) when wrapping.

alignItems

Start

AlignItems

Controls positioning of children on the cross axis.

alignSelf

Auto

AlignSelf

Controls positioning of the item itself on the cross axis.

aspectRatio

undefined

number

Enforces a specific aspect ratio on the size of the element. Uses the specified size (either width or height) for calculating the other dimension. Respects minWidth and minHeight.

borderBottomWidth

0

number

borderLeftWidth

0

number

borderRightWidth

0

number

borderTopWidth

0

number

borderWidth

0

number

bottom

undefined

number

columnGap

0

number

Overrides gap for columns.

display

Flex

Display

flex

0

number

flexBasis

undefined

number or "${n}%"

In row does the same as width and in column does the same as height.

flexDirection

Column

FlexDirection

flexGrow

0

number

flexShrink

0

number

flexWrap

NoWrap

FlexWrap

gap

0

number

height

undefined

number or "${n}%"

justifyContent

Start

JustifyContent

Controls positioning of children on the main axis.

left

undefined

number

margin

number

marginBottom

0

number

Overrides marginVertical on the bottom.

marginHorizontal

number

Overrides margin on horizontal directions.

marginLeft

0

number

Overrides marginHorizontal on the left.

marginRight

0

number

Overrides marginHorizontal on the right.

marginTop

0

number

Overrides marginVertical on the top.

marginVertical

number

Overrides margin on vertical directions.

maxHeight

undefined

number or "${n}%"

maxWidth

undefined

number or "${n}%"

minHeight

undefined

number or "${n}%"

minWidth

undefined

number or "${n}%"

overflow

Overflow

overflowX

Visible

Overflow

overflowY

Visible

Overflow

padding

number

paddingBottom

0

number

paddingHorizontal

number

paddingLeft

0

number

paddingRight

0

number

paddingTop

0

number

paddingVertical

number

position

Relative

Position

right

undefined

number

rowGap

0

number

Overrides gap for rows.

top

undefined

number

width

undefined

number or "${n}%"

zIndex

undefined

number

type

DecorativeProps

/layout/styling.ts ↗

Name

Default value

Type and description

backgroundColor

"transparent"

string

borderBottomLeftRadius

0

number

borderBottomRightRadius

0

number

borderColor

"transparent"

string

borderRadius

number

borderTopLeftRadius

0

number

borderTopRightRadius

0

number

boxShadowColor

"#000"

string

Not implemented yet.

boxShadowOffsetX

0

number

Not implemented yet.

boxShadowOffsetY

0

number

Not implemented yet.

boxShadowRadius

0

number

Not implemented yet.

opacity

1

number

Not implemented yet.

type

TextStyleProps

/layout/styling.ts ↗

Controls how text is rendered. Note that due to a custom text renderer, there might be some differences in how text is rendered compared to a browser.

In-depth explanation of text rendering is available on the [Text Rendering](/text-rendering) page.

IMPORTANT

The library uses cap size as opposed to line height for calculating bounding box of text elements (see CapSize for more explanation). This results in most noticeable differences in buttons which require more vertical space than in browsers.

Name

Default value

Type and description

color

"#000"

string

fontName

"Inter"

string

As defined in the lookups object.

fontSize

16

number

lineHeight

20

number

textAlign

Left

TextAlign

textTransform

None

TextTransform

whitespace

Normal

Whitespace

type

LayoutNodeState

/layout/styling.ts ↗

Internal state of the node. Might be useful for debugging or hacking around but it is subject to change at any point without notice.

Name

Default value

Type and description

children

[]

Node[][]

Temporary array used by layout.

clientHeight

0

number

Height of the element excluding scrollbar.

clientWidth

0

number

Width of the element excluding scrollbar.

clipSize

new Vec2(0, 0)

Vec2

Screen-space position.

clipStart

new Vec2(0, 0)

Vec2

Screen-space position.

hasHorizontalScrollbar

false

boolean

hasVerticalScrollbar

false

boolean

scrollHeight

0

number

Height of the element including (potential) scrollbar and scrollable content.

scrollWidth

0

number

Width of the element including (potential) scrollbar and scrollable content.

scrollX

0

number

Current scroll position relative to parent.

scrollY

0

number

Current scroll position relative to parent.

textWidthLimit

number

Read by paint(), written by layout().

totalScrollX

0

number

Sum of all scroll positions inside the parent chain.

totalScrollY

0

number

Sum of all scroll positions inside the parent chain.

0

number

Screen-space position of element after layout (pre-scroll).

0

number

Screen-space position of element after layout (pre-scroll).

Enums

List of enums used in the types above.

AlignItems

Corresponds to CSS align-items. Controls positioning of children on the cross axis.

Value

Description

Center

End

Start

Stretch

Stretches the element to fill the parent's cross axis.

JustifyContent

Corresponds to CSS justify-content. Controls positioning of children on the main axis.

Value

Description

Center

End

SpaceAround

Uses equal gaps between all elements and half of that gap before the first element and after the last element.

SpaceBetween

Does not leave any gap before the first element or after the last element.

SpaceEvenly

Uses equal gaps between all elements and before the first element and after the last element.

Start

AlignContent

Corresponds to CSS align-content, which controls positions and sizes of lines in the flex wrap. Does not have any effect if FlexWrap is NoWrap.

Value

Description

Center

End

SpaceAround

Uses equal gaps between all elements and half of that gap before the first element and after the last element.

SpaceBetween

Does not leave any gap before the first element or after the last element.

SpaceEvenly

Uses equal gaps between all elements and before the first element and after the last element.

Start

Stretch

AlignSelf

Corresponds to CSS align-self.

Value

Description

Auto

Does not override the value of parent's AlignItems.

Center

End

Start

Stretch

Stretches the element to fill the parent's cross axis.

FlexDirection

Corresponds to CSS flex-direction.

Value

Description

Column

Main axis is the vertical one.

ColumnReverse

Reverses the order of elements.

Row

Main axis is the horizontal one.

RowReverse

Reverses the order of elements.

FlexWrap

Corresponds to CSS flex-wrap.

Value

Description

NoWrap

Does not wrap lines, making them potentially overflow the parent.

Wrap

Wraps lines of elements if they exceed available space in the main axis.

WrapReverse

Reverses the order of lines.

Overflow

Determines how the element is clipped. Corresponds to CSS overflow.

Value

Description

Auto

Shows scrollbars if needed.

Hidden

Clips content but doesn't show scrollbars.

Scroll

Shows scrollbars always.

Visible

Lets content overflow the parent.

Display

Corresponds to CSS display.

Value

Description

Flex

Behaves similarly to flex in CSS.

None

Hides element from layout and prevents it from participating in layout calculations.

Position

Corresponds to CSS position.

Value

Description

Absolute

The element will not participate in layout of other elements within the same parent. Coordinates are relative to the parent (since every node is either absolute or relative).

Relative

The name originates from CSS where it means that the offset modifiers (top, left, etc.) will move the element around but it will not influence the layout of other elements.

TextTransform

Corresponds to CSS text-transform.

Value

Description

None

Capitalize

Lowercase

Uppercase

TextAlign

Corresponds to CSS text-align.

Value

Description

Center

Left

Right

Whitespace

Value

Description

Normal

Text will wrap to the next line if it exceeds the width of the parent (if defined).

NoWrap

Text will never wrap to the next line.