display

[Default: 'flex']

Similar to display in CSS, but only supports ‘none’ and ‘flex’. The display mode of the UI element.

none: The UI element is not rendered.

flex: The UI element is displayed as a block. This is the default value.

height

Similar to height in CSS, but only supports points and percentages. Ems and other units are not supported.

width

Similar to width in CSS, but only supports points and percentages. Ems and other units are not supported.

bottom

Similar to bottom in CSS, but only supports points and percentages. Ems and other units are not supported.

end

Equivalent to right when direction is 'ltr'. Equivalent to left when direction is 'rtl'.

left

Similar to left in CSS, but only supports points and percentages. Ems and other units are not supported.

right

Similar to right in CSS, but only supports points and percentages. Ems and other units are not supported.

start

Equivalent to left when direction is 'ltr'. Equivalent to right when direction is 'rtl'.

top

Similar to top in CSS, but only supports points and percentages. Ems and other units are not supported.

minWidth

Similar to min-width in CSS, but only supports points and percentages. Ems and other units are not supported.

maxWidth

Similar to max-width in CSS, but only supports points and percentages. Ems and other units are not supported.

minHeight

Similar to min-height in CSS, but only supports points and percentages. Ems and other units are not supported.

maxHeight

Similar to max-height in CSS, but only supports points and percentages. Ems and other units are not supported.

margin

Setting margin has the same effect as setting each of marginTop, marginLeft, marginBottom, and marginRight.

marginBottom

Works like margin-bottom in CSS.

marginEnd

Equivalent to marginRight when direction is 'ltr'. Equivalent to marginLeft when direction is 'rtl'.

marginHorizontal

Setting marginHorizontal has the same effect as setting both marginLeft and marginRight.

marginLeft

Works like margin-left in CSS.

marginRight

Works like margin-right in CSS.

marginStart

Equivalent to marginLeft when direction is 'ltr'. Equivalent to marginRight when direction is 'rtl'.

marginTop

Works like margin-top in CSS.

marginVertical

Setting marginVertical has the same effect as setting both marginTop and marginBottom.

padding

Setting padding has the same effect as setting each of paddingTop, paddingBottom, paddingLeft, and paddingRight.

paddingBottom

Works like padding-bottom in CSS.

paddingEnd

Equivalent to paddingRight when direction is 'ltr'. Equivalent to paddingLeft when direction is 'rtl'.

paddingHorizontal

Setting paddingHorizontal has the same effect as setting both paddingLeft and paddingRight.

paddingLeft

Works like padding-left in CSS.

paddingRight

Works like padding-right in CSS.

paddingStart

Equivalent to paddingLeft when direction is 'ltr'. Equivalent to paddingRight when direction is 'rtl'.

paddingTop

Works like padding-top in CSS.

paddingVertical

Setting paddingVertical has the same effect as setting both paddingTop and paddingBottom.

position

[Default: 'relative']

Similar to position in CSS, but everything is set to 'relative' by default, so ‘absolute’ positioning is always relative to the parent.

flexDirection

[Default: 'column'] Works like flex-direction in CSS, except the default is ‘column’. Controls the direction of the main axis, in which the children are stacked.

flexWrap

[Default: 'nowrap'] Works like flex-wrap in CSS. Controls whether children can wrap around after they hit the end of a flex container.

justifyContent

[Default: ‘flex-start’] Works like justify-content in CSS. Aligns children in the main direction (along the main axis). For example, if children are flowing vertically, justifyContent controls how they align vertically.

alignContent

[Default: 'flex-start'] Works like align-content in CSS. Aligns rows or columns in the cross direction (perpendicular to the main axis). Only works if flexWrap is enabled and there are multiple rows or columns.

alignItems

[Default: 'stretch'] Works like align-items in CSS. Aligns children within a row or column in the cross direction (perpendicular to the main axis). For example, if children are flowing vertically, alignItems controls how they align horizontally.

alignSelf

[Default: 'auto'] Works like align-self in CSS. Controls how a child aligns in the cross direction (perpendicular to the main axis), overriding the alignItems of the parent.

overflow

[Default: 'visible'] Works like overflow in CSS. Controls how children are measured and displayed. 'hidden' causes views to be clipped.

flex

flex does not work the same way as in CSS. flex is a number rather than a string. When flex is a positive number, the component is flexible and will be sized proportional to its flex value. So a component with flex set to ‘2’ will take twice the space as a component with flex set to ‘1’. flex: X (where X is a positive number) equates to flexGrow: X, flexShrink: 1, flexBasis: 0. When flex is ‘0’ , the component is inflexible and is sized according to width and height. When flex is ‘-1’, the component is normally sized according to width and height. However, if there’s not enough space, the component will shrink to its minWidth and minHeight.

flexGrow

[Default: ‘0’] Works like flex-grow in CSS. Accepts a float number >= 0. Describes how the remaining space in the container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space among its children weighted by the children’s flexGrow values.

flexShrink

[Default: ‘0’] Works like flex-shrink in CSS. Accepts a float number >= 0. Describes how to shrink children along the main axis when the total size of the children overflows the size of the container. A container will shrink its children weighted by the children’s flexShrink values. flexShrink is very similar to flexGrow and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together.

flexBasis

Works like flex-basis in CSS. Specifies the default size of an item along the main axis of the container, that is, the size of the item before any flexGrow and flexShrink calculations are performed.

aspectRatio

Controls the size of the undefined dimension of a component. It takes min/max dimensions into account. If one of width/height is set, aspect ratio controls the size of the unset dimension. If flex basis/grow/shrink is set, aspect ratio controls the size of the node in the cross axis if unset.

zIndex

Works like z-index in CSS. Controls which components display on top of others – components with a larger zIndex will render on top. If zIndex are not specified, components render according to their order in the document tree – later components draw over earlier ones. zIndex can be used if you don’t want this default behavior.

layoutOrigin

[Default: '[0, 0]'] The origin of the UI element when position is 'absolute', where [0, 0] is the top left of the element and [1, 1] is the bottom right of the element.

direction

[Default: 'inherit'] Specifies the directional flow of the user interface.

borderColor

Works like border-color in CSS. The color of the border.

borderRadius

Works like border-radius in CSS. The radius of the border.

borderBottomLeftRadius

Works like border-bottom-left-radius in CSS. The radius of the bottom left corner.

borderBottomRightRadius

Works like border-bottom-right-radius in CSS. The radius of the bottom right corner.

borderTopLeftRadius

Works like border-top-left-radius in CSS. The radius of the top left corner.

borderTopRightRadius

Works like border-top-right-radius in CSS. The radius of the top right corner.

borderWidth

Works like border-width in CSS, but only supports points. The width of the border.

borderBottomWidth

Works like border-bottom-width in CSS. The width of the bottom border.

borderEndWidth

Equivalent to borderRightWidth when direction is 'ltr'. Equivalent to borderLeftWidth when direction is 'rtl'.

borderLeftWidth

Works like border-left-width in CSS. The width of the left border.

borderRightWidth

Works like border-right-width in CSS. The width of the right border.

borderStartWidth

Equivalent to borderLeftWidth when direction is 'ltr'. Equivalent to borderRightWidth when direction is 'rtl'.

borderTopWidth

Works like border-top-width in CSS. The width of the top border.

shadowColor

The drop color of the shadow.

shadowFalloff

The falloff function, or fading, of the shadow.

shadowOffset

The offset of the shadow in [x, y] format.

shadowOpacity

The opacity of the shadow. The number is multiplied by the color’s alpha component, and should be in the range from ‘0.0’ to ‘1.0’.

shadowRadius

The blur radius of the shadow.

shadowSpreadRadius

The radius by which the shadow expands or shrinks under the component. May take a negative number.

transform

transform accepts an array of transformation objects. Each object specifies the property that will be transformed as the key, and the value to use in the transformation.

rotate: Rotate the element around the transformOrigin. Value requires a string expressed in degrees (e.g. ‘45deg’ ) or radians (e.g. ‘0.7854rad’).

scale: Scale the element uniformly by the given multiplier, with the transformOrigin being the fixed point. Equivalent to providing the same value to both scaleX and scaleY.

scaleX: Scale the element horizontally by the given multiplier.

scaleY: Scale the element vertically by the given multiplier.

translate: Move the element by the given x and y values in [x, y] format. Equivalent to providing the values to translateX and translateY independently.

translateX: Move the element horizontally by the given value in pixels.

translateY: Move the element vertically by the given value in pixels.

skewX: Skew the element horizontally by the given angle, represented in degrees or radians.

skewY: Skew the element vertically by the given angle, represented in degrees or radians.

transformOrigin

[Default: [‘50%’, ‘50%’]]

The origin point of the transform, specified as an [x, y] array, where [0, 0] denotes the top left corner of the UI element. Each component can be a number in pixels or a percentage string.

backgroundColor

Works like 'background-color' in CSS. The background color of the component.

backgroundClip

[Default: 'border-box']

Controls whether to render the background behind the border. Useful when the border color is transparent.

opacity

Set an opacity for the component. The number should be in the range from ‘0.0’ to ‘1.0’.

gradientColorA

The starting color of the gradient background.

gradientColorB

The ending color of the gradient background.

gradientXa

The x component of the starting position (corresponding to gradientColorA) of the gradient background. The value is a percentage as a number (from ‘0.0’ to ‘1.0’) or a string (from ‘0%’ to ‘100%’).

gradientYa

The y component of the starting position (corresponding to gradientColorA ) of the gradient background. The value is a percentage as a number (from ‘0.0’ to ‘1.0’) or a string (from ‘0%’ to ‘100%’).

gradientXb

The x component of the ending position (corresponding to gradientColorB) of the gradient background. The value is a percentage as a number (from ‘0.0’ to ‘1.0’) or a string (from ‘0%’ to ‘100%’).

gradientYb

The y component of the ending position (corresponding to gradientColorB) of the gradient background. The value is a percentage as a number (from ‘0.0’ to ‘1.0’) or a string (from ‘0%’ to ‘100%’).

gradientAngle

The gradient direction, pointing from the ending position to the starting position (gradientColorA is in the direction of gradientAngle). Default is ‘0deg’, which is equivalent to gradientYa: 0, gradientYb: 1. The value is represented in degrees.

color

[Default: 'white']
The color of the text.

fontFamily

[Default: 'Roboto']
The font family of the text.

fontSize

[Default: '20']
The font size of the text.

fontWeight

[Default: 'normal']
The font weight. Not all fonts have all the weight variations. If the specified variation does not exist, it will fallback to the closest one.

letterSpacing

The spacing between the characters of the text. By default there is no extra letter spacing.

lineHeight

The height of each line in the text.

textAlign

The alignment of the text.

textAlignVertical

The vertical alignment of the text.

textDecorationLine

Additional text decorations.

textShadowColor

The color of the text shadow. Text shadow is only drawn when a nonzero textShadowOffset is set.

textShadowOffset

The offset of the text shadow, in pixels, in [x, y] format.

textShadowRadius

The blur radius of the text shadow. Text shadow is only drawn when textShadowOffset is set.

whiteSpace

Additional space if needed for justification.

Anton

‘normal’/’400’

Bangers

‘normal’/’400’

Kallisto

‘bold’/’700’

Optimistic

‘normal’/’400’

 

‘500’

 

‘bold’/’700’

Oswald

‘normal’/’400’

Roboto

‘100’

 

‘300’

 

‘normal’/’400’

 

‘500’

 

‘bold’/’700’

 

‘900’

Roboto-Mono

‘normal’/’400’

 

‘500’

 

‘bold’/’700’

resizeMode

[Default: 'cover']

Determines how to resize the image when the frame doesn’t match the raw image dimensions.

cover: Scale the image uniformly (maintain the aspect ratio) so that at least one of width and height will be equal to the corresponding dimension of the view, and the other will be larger.

contain: Scale the image uniformly (maintain the aspect ratio) so that both width and height will be equal to or less than the corresponding dimension of the view.

stretch: Scale width and height independently, which may change the aspect ratio of the source.

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

repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio if it is smaller than the view, and will be scaled down uniformly so that it is contained in the view if it is larger than the view.

tintColor

Changes the color of all the non-transparent pixels to the tintColor.

tintOperation

Changes how the tint color is applied to the original image source.