Skip to main content
Version: 7.0.0

Modifiers

As you have probably noticed already, we translate our style presets into modifiers.
Modifiers help you create a stunning UI easily and quickly.

[!IMPORTANT]
Make sure to use modifiers only on UILib components, as some modifiers can cause issues on Android when used on React Native components directly.

Layout Modifiers

Use our alignment properties to quickly position the content of your view without getting confused calculating all those flex rules.

  • flex - apply flex:1 on a view
  • flex-[value] - When you want to control the flex value
  • flexS - FlexShrink
  • flexG - FlexGrow
  • left
  • top
  • right
  • bottom
  • row - change direction to row (default is column)
  • center
  • centerH - center content horizontally
  • centerV - center content vertically
  • spread - spread content (similar to space-between)

! Notice that the layout modifiers affect the View's children

<View flex left>
<Button label="Button" />
</View>

<View flex right>
<Button label="Button" />
</View>

<View flex top>
<Button label="Button" />
</View>

<View flex bottom>
<Button label="Button" />
</View>

<View flex center>
<Button label="Button" />
</View>

Spacing Modifiers

It's always important to use your margins and paddings correctly, and that's also easier to do with modifiers:

  • padding-[value] - will add padding to all corners (e.g. padding-30 will add 30 pt of padding)
  • paddingL-[value] - Left padding
  • paddingT-[value] - Top padding
  • paddingR-[value] - Right padding
  • paddingB-[value] - Bottom padding
  • paddingH-[value] - Horizontal padding
  • paddingV-[value] - Vertical padding
<View paddingV-20 paddingH-30>...</View>
  • margin-[value]
  • marginL-[value] - Left margin
  • marginT-[value] - Top margin
  • marginR-[value] - Right margin
  • marginB-[value] - Bottom margin
  • marginH-[value] - Horizontal margin
  • marginV-[value] - Vertical margin
<View marginT-5 marginB-10>...</View>

! padding and margin modifiers can also take Spacing constants.

<View margin-s5 padding-s2>...</View>

Position Modifiers

Use the position modifiers to quickly set an absolute position for your views.

  • abs will set the absolute position on your View
  • absL, absT, absR, absB - set the absolute position and align to Left, Top, Right, Bottom accordingly
  • absH and absV - position absolute and stretch horizontally or vertically
  • absF will set the absolute position and fill the parent view (similar to StyleSheet.absoluteFillObject)

Styling Modifiers

The last type of modifiers is for styling your components

  • [colorKey] - Controls the color of text components
  • background-[colorKey] (or bg-[colorKey]) - Background color
<Text blue30>...</Text>
<View bg-grey70>...</View>
<TouchableOpacity bg-red30/>
  • [typographyKey] - Controls the typography of text components
<Text text70>...</Text>
<TextInput text80/>
  • br[borderRadiusKey] - Set the border radius for the view (e.g. br10, br20, .., br60)
<View br40>...</View>

! all styling modifiers are based on our Colors & Typography presets.
You can load your own presets and use them as modifiers.

Check out this example where we use most of these props.