Skip to main content

Modifiers

Discover the power of our style presets transformed into modifiers.
Modifiers are a powerful tool designed to streamline UI development, making it both efficient and elegant.

Layout Modifiers​

Streamline your layout design with our intuitive alignment properties. These modifiers simplify view positioning without the complexity of manual flex calculations.

Basic Flex Properties​

  • flex - Apply flex: 1 to expand a view
  • flex-[value] - Set a specific flex value
  • flexS - Enable flex shrink
  • flexG - Enable flex grow

Alignment Properties​

  • left - Align content to the left
  • right - Align content to the right
  • top - Align content to the top
  • bottom - Align content to the bottom
  • center - Center content both horizontally and vertically
  • centerH - Center content horizontally
  • centerV - Center content vertically

Layout Direction​

  • row - Set flex direction to row (default is column)
  • spread - Distribute content evenly (equivalent to space-between)

Note: Layout modifiers affect the positioning of the View's children elements

<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​

Enhance your layout consistency with our intuitive spacing modifiers for margins and paddings:

Padding Modifiers​

Apply padding with simple, descriptive modifiers:

  • padding-[value] - Uniform padding on all sides
  • paddingL-[value] - Left padding
  • paddingT-[value] - Top padding
  • paddingR-[value] - Right padding
  • paddingB-[value] - Bottom padding
  • paddingH-[value] - Horizontal padding (left + right)
  • paddingV-[value] - Vertical padding (top + bottom)
<View paddingV-20 paddingH-30>
  {/* Content with vertical padding of 20 and horizontal padding of 30 */}
</View>

Margin Modifiers​

Control spacing between elements with margin modifiers:

  • margin-[value] - Uniform margin on all sides
  • marginL-[value] - Left margin
  • marginT-[value] - Top margin
  • marginR-[value] - Right margin
  • marginB-[value] - Bottom margin
  • marginH-[value] - Horizontal margin (left + right)
  • marginV-[value] - Vertical margin (top + bottom)
<View marginT-5 marginB-10>
  {/* Content with top margin of 5 and bottom margin of 10 */}
</View>

Gap Modifiers​

Control the spacing between child elements in a container:

  • gap-[value] - Uniform gap between all children
<View row gap-10>
  <Button label="First" />
  <Button label="Second" />
  <Button label="Third" />
</View>

These modifiers are particularly useful for creating evenly spaced layouts without manually adding margins to individual elements.

Note: Spacing modifiers can use your app's predefined spacing presets for consistent design. These presets are defined in our spacings.ts file and allow for uniform spacing patterns throughout your application.

<View margin-s5 padding-s2>
  {/* Using preset spacing values */}
</View>

Position Modifiers​

Easily control component positioning with our absolute position modifiers:

Basic Positioning​

  • abs - Apply absolute positioning to a component

Edge Alignment​

  • absL - Position absolutely and align to the left edge
  • absT - Position absolutely and align to the top edge
  • absR - Position absolutely and align to the right edge
  • absB - Position absolutely and align to the bottom edge

Stretch Options​

  • absH - Position absolutely and stretch horizontally
  • absV - Position absolutely and stretch vertically
  • absF - Position absolutely and fill the entire parent container (equivalent to StyleSheet.absoluteFillObject)
<View absL>
  <Text>Left-aligned absolute content</Text>
</View>

<View absF>
  <Text>Full-screen absolute content</Text>
</View>

Style Modifiers​

Enhance your components' visual appearance with our style modifiers:

Color Modifiers​

Apply colors to text and backgrounds:

  • [colorKey] - Set text color (for Text components)
  • background-[colorKey] or bg-[colorKey] - Set background color
<Text blue30>Blue text</Text>
<View bg-grey70>Grey background</View>
<TouchableOpacity bg-red30>Red button</TouchableOpacity>

Typography Modifiers​

Control text styling with typography presets:

  • [typographyKey] - Apply typography presets to text elements
<Text text70>Styled text</Text>
<TextInput text80 />

Border Radius Modifiers​

Add rounded corners with predefined sizes:

  • br[size] - Apply border radius (sizes: 10, 20, ..., 60)
<View br40>
  <Text>Rounded container</Text>
</View>

Note: All style modifiers are based on the Colors & Typography presets. You can customize these presets by loading your own design tokens.

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