Hyperview

Hyperview

  • Guides
  • Examples
  • Reference
  • Blog

›Style Elements

Reference

  • Index

Behaviors

  • Behavior Attributes
  • <behavior>
  • Alert
  • Share

Display Elements

  • <doc>
  • <screen>
  • <header>
  • <body>
  • <view>
  • <text>
  • <image>
  • <list>
  • <section-list>
  • <section>
  • <section-title>
  • <items>
  • <item>
  • <spinner>
  • <web-view>

Input Elements

  • <form>
  • <text-field>
  • <select-single>
  • <select-multiple>
  • <option>
  • <picker-field>
  • <picker-item>
  • <switch>
  • <date-field>

Style Elements

  • <styles>
  • <style>
  • <modifier>

Hyperview Client

  • Hyperview component
  • Custom elements
  • Custom behaviors
  • Loading Screen

Hyperview Navigation

  • <navigator>
  • <nav-route>

<style>

The <style> element defines specific style rules that can be used by elements of a screen.

<doc xmlns="https://hyperview.org/hyperview">
  <screen id="main">
    <styles>
      <style id="Main" flex="1" backgroundColor="red" />
    </styles>
    <body>
      <view style="Main" />
    </body>
  </screen>
</doc>

The <styles> element above contains one <style> with id "Main". The view in the body of the screen uses that style.

Structure

A <style> element should only appear as a direct child of a <styles> element or <modifier> element.

Attributes

  • id

  • Layout rules

    • aspectRatio
    • alignContent
    • alignItems
    • alignSelf
    • borderBottomWidth
    • borderLeftWidth
    • borderRightWidth
    • borderTopWidth
    • borderWidth
    • bottom
    • display
    • flex
    • flexBasis
    • flexDirection
    • flexGrow
    • flexShrink
    • flexWrap
    • height
    • justifyContent
    • left
    • margin
    • marginBottom
    • marginHorizontal
    • marginLeft
    • marginRight
    • marginTop
    • marginVertical
    • maxHeight
    • maxWidth
    • minHeight
    • minWidth
    • overflow
    • padding
    • paddingBottom
    • paddingHorizontal
    • paddingLeft
    • paddingRight
    • paddingTop
    • paddingVertical
    • position
    • right
    • top
    • width
    • zIndex
  • View & image rules

    • borderRightColor
    • borderBottomColor
    • borderBottomLeftRadius
    • borderBottomRightRadius
    • borderColor
    • borderLeftColor
    • borderRadius
    • backgroundColor
    • borderStyle
    • borderTopColor
    • borderTopLeftRadius
    • borderTopRightRadius
    • elevation
    • opacity
    • shadowColor
    • shadowOffsetX
    • shadowOffsetY
    • shadowOpacity
    • shadowRadius
  • Text rules

    • color
    • fontSize
    • fontStyle
    • fontWeight
    • lineHeight
    • textAlign
    • textShadowColor
    • fontFamily
    • textShadowRadius

id

TypeRequired
stringNo

A global attribute uniquely identifying the element in the whole document. This id is used by elements in the <screen> to apply styles.

id is required when <style> is a direct child of a <styles> element. id will be ignored if the <style> is a direct child of a <modifier> element.

Layout rules

<style> attributes support the following layout props from React Native.

Layout rules can only be applied to most elements with a few exceptions (such as <spinner>).

aspectRatio

Aspect ratio controls the size of the undefined dimension of a node. See https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio for more details.

  • On a node with a set width/height, aspect ratio controls the size of the unset dimension
  • On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
  • On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
  • On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
  • Aspect ratio takes min/max dimensions into account
TypeRequired
number, stringNo

alignContent

alignContent controls how rows align in the cross direction, overriding the alignContent of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content for more details.

TypeRequired
'flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around'No

alignItems

alignItems aligns children in the cross direction. For example, if children are flowing vertically, alignItems controls how they align horizontally. It works like align-items in CSS (default: stretch). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items for more details.

TypeRequired
'flex-start', 'flex-end', 'center', 'stretch', 'baseline'No

alignSelf

alignSelf controls how a child aligns in the cross direction, overriding the alignItems of the parent. It works like align-self in CSS (default: auto). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self for more details.

TypeRequired
'auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline'No

borderBottomWidth

borderBottomWidth works like border-bottom-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details.

TypeRequired
numberNo

borderLeftWidth

borderLeftWidth works like border-left-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details.

TypeRequired
numberNo

borderRightWidth

borderRightWidth works like border-right-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details.

TypeRequired
numberNo

borderTopWidth

borderTopWidth works like border-top-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details.

TypeRequired
numberNo

borderWidth

borderWidth works like border-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details.

TypeRequired
numberNo

bottom

bottom is the number of logical pixels to offset the bottom edge of this component.

It works similarly to bottom in CSS, but in Hyperview you must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how bottom affects layout.

TypeRequired
number, stringNo

display

display sets the display type of this component.

It works similarly to display in CSS, but only support 'flex' and 'none'. 'flex' is the default.

TypeRequired
'none', 'flex'No

flex

When flex is a positive number, it makes the component flexible and it 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.

When flex is 0, the component is sized according to width and height and it is inflexible.

When flex is -1, the component is normally sized according width and height. However, if there's not enough space, the component will shrink to its minWidth and minHeight.

flexGrow, flexShrink, and flexBasis work the same as in CSS.

TypeRequired
numberNo

flexBasis

TypeRequired
number, stringNo

flexDirection

flexDirection controls which directions children of a container go. row goes left to right, column goes top to bottom, and you may be able to guess what the other two do. It works like flex-direction in CSS, except the default is column. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details.

TypeRequired
'row', 'row-reverse', 'column', 'column-reverse'No

flexGrow

TypeRequired
numberNo

flexShrink

TypeRequired
numberNo

flexWrap

flexWrap controls whether children can wrap around after they hit the end of a flex container. It works like flex-wrap in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. Note it does not work anymore with alignItems: stretch (the default), so you may want to use alignItems: flex-start for example.

TypeRequired
'wrap', 'nowrap'No

height

height sets the height of this component.

It works similarly to height in CSS, but in Hyperview you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details.

TypeRequired
number, stringNo

justifyContent

justifyContent aligns children in the main direction. For example, if children are flowing vertically, justifyContent controls how they align vertically. It works like justify-content in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details.

TypeRequired
'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'No

left

left is the number of logical pixels to offset the left edge of this component.

It works similarly to left in CSS, but in Hyperview you must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how left affects layout.

TypeRequired
number, stringNo

margin

Setting margin has the same effect as setting each of marginTop, marginLeft, marginBottom, and marginRight to the same value. You must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details.

TypeRequired
number, stringNo

marginBottom

marginBottom works like margin-bottom in CSS. You must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details.

TypeRequired
number, stringNo

marginHorizontal

Setting marginHorizontal has the same effect as setting both marginLeft and marginRight to the same value. You must use points or percentages. Ems and other units are not supported.

TypeRequired
number, stringNo

marginLeft

marginLeft works like margin-left in CSS. You must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details.

TypeRequired
number, stringNo

marginRight

marginRight works like margin-right in CSS. You must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details.

TypeRequired
number, stringNo

marginTop

marginTop works like margin-top in CSS. You must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details.

TypeRequired
number, stringNo

marginVertical

Setting marginVertical has the same effect as setting both marginTop and marginBottom to the same value. You must use points or percentages. Ems and other units are not supported.

TypeRequired
number, stringNo

maxHeight

maxHeight is the maximum height for this component, in logical pixels.

It works similarly to max-height in CSS, but in Hyperview you must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details.

TypeRequired
number, stringNo

maxWidth

maxWidth is the maximum width for this component, in logical pixels.

It works similarly to max-width in CSS, but in Hyperview you must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details.

TypeRequired
number, stringNo

minHeight

minHeight is the minimum height for this component, in logical pixels.

It works similarly to min-height in CSS, but in Hyperview you must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details.

TypeRequired
number, stringNo

minWidth

minWidth is the minimum width for this component, in logical pixels.

It works similarly to min-width in CSS, but in Hyperview you must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details.

TypeRequired
number, stringNo

overflow

overflow controls how children are measured and displayed. overflow: hidden causes views to be clipped while overflow: scroll causes views to be measured independently of their parents main axis. It works like overflow in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow for more details. overflow: visible only works on iOS. On Android, all views will clip their children.

TypeRequired
'visible', 'hidden', 'scroll'No

padding

Setting padding has the same effect as setting each of paddingTop, paddingBottom, paddingLeft, and paddingRight to the same value. You must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details.

TypeRequired
number, stringNo

paddingBottom

paddingBottom works like padding-bottom in CSS. You must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details.

TypeRequired
number, stringNo

paddingHorizontal

Setting paddingHorizontal is like setting both of paddingLeft and paddingRight to the same value. You must use points or percentages. Ems and other units are not supported.

TypeRequired
number, stringNo

paddingLeft

paddingLeft works like padding-left in CSS. You must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details.

TypeRequired
number, stringNo

paddingRight

paddingRight works like padding-right in CSS. You must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details.

TypeRequired
number, stringNo

paddingTop

paddingTop works like padding-top in CSS. You must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details.

TypeRequired
number, stringNo

paddingVertical

Setting paddingVertical is like setting both of paddingTop and paddingBottom to the same value. You must use points or percentages. Ems and other units are not supported.

TypeRequired
number, stringNo

position

position in Hyperview is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always just relative to the parent.

If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.

If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.

TypeRequired
'absolute', 'relative'No

right

right is the number of logical pixels to offset the right edge of this component.

It works similarly to right in CSS, but in Hyperview you must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how right affects layout.

TypeRequired
number, stringNo

top

top is the number of logical pixels to offset the top edge of this component.

It works similarly to top in CSS, but in Hyperview you must use points or percentages. Ems and other units are not supported.

See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how top affects layout.

TypeRequired
number, stringNo

width

width sets the width of this component.

It works similarly to width in CSS, but in Hyperview you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details.

TypeRequired
number, stringNo

zIndex

zIndex sets the stack order of a positioned element and its descendents or flex items.

It works similarly to zIndex in CSS, but in Hyperview you must use only integers. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details.

TypeRequired
numberNo

View & image rules

<style> elements support the following attributes for <view> and <image> as defined in React Native.

View rules will only be applied to <view> and <image> elements. Adding these rules to other elements will cause a warning in the client.

borderRightColor

TypeRequired
colorNo

borderBottomColor

TypeRequired
colorNo

borderBottomLeftRadius

TypeRequired
numberNo

borderBottomRightRadius

TypeRequired
numberNo

borderColor

TypeRequired
colorNo

borderLeftColor

TypeRequired
colorNo

borderRadius

TypeRequired
numberNo

backgroundColor

TypeRequired
colorNo

borderStyle

TypeRequired
'solid', 'dotted', 'dashed'No

borderTopColor

TypeRequired
colorNo

borderTopLeftRadius

TypeRequired
numberNo

borderTopRightRadius

TypeRequired
numberNo

elevation

NOTE: Elevation only works on Android. For iOS, use shadow style attributes.

TypeRequired
numberNo

opacity

TypeRequired
numberNo

shadowColor

NOTE: shadowColor only works on iOS. For Android, use elevation.

TypeRequired
colorNo

shadowOffsetX

NOTE: shadowColor only works on iOS. For Android, use elevation.

TypeRequired
numberNo

shadowOffsetY

NOTE: shadowColor only works on iOS. For Android, use elevation.

TypeRequired
numberNo

shadowOpacity

NOTE: shadowColor only works on iOS. For Android, use elevation.

TypeRequired
float (0-1)No

shadowRadius

NOTE: shadowColor only works on iOS. For Android, use elevation.

TypeRequired
numberNo

Text rules

<style> elements support the following attributes for <text> as defined in React Native.

Text rules will only be applied to <text> elements. Adding these rules to other elements will cause a warning in the client.

color

TypeRequired
colorNo

fontSize

TypeRequired
numberNo

fontStyle

TypeRequired
'normal', 'italic'No

fontWeight

fromSpecifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.

TypeRequired
'normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'No

lineHeight

TypeRequired
numberNo

textAlign

Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to left on Android.

TypeRequired
'auto', 'left', 'right', 'center', 'justify'No

textShadowColor

TypeRequired
colorNo

fontFamily

TypeRequired
stringNo

textShadowRadius

TypeRequired
numberNo
← <styles><modifier> →
  • Structure
  • Attributes
    • id
    • Layout rules
    • View & image rules
    • Text rules
Hyperview
Docs
ExamplesHyperview Reference
More
BlogGitHub
Copyright © 2025 Instawork