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
- Applyflex: 1
to expand a viewflex-[value]
- Set a specific flex valueflexS
- Enable flex shrinkflexG
- Enable flex grow
Alignment Properties
left
- Align content to the leftright
- Align content to the righttop
- Align content to the topbottom
- Align content to the bottomcenter
- Center content both horizontally and verticallycenterH
- Center content horizontallycenterV
- Center content vertically
Layout Direction
row
- Set flex direction to row (default is column)spread
- Distribute content evenly (equivalent tospace-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 sidespaddingL-[value]
- Left paddingpaddingT-[value]
- Top paddingpaddingR-[value]
- Right paddingpaddingB-[value]
- Bottom paddingpaddingH-[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 sidesmarginL-[value]
- Left marginmarginT-[value]
- Top marginmarginR-[value]
- Right marginmarginB-[value]
- Bottom marginmarginH-[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 edgeabsT
- Position absolutely and align to the top edgeabsR
- Position absolutely and align to the right edgeabsB
- Position absolutely and align to the bottom edge
Stretch Options
absH
- Position absolutely and stretch horizontallyabsV
- Position absolutely and stretch verticallyabsF
- Position absolutely and fill the entire parent container (equivalent toStyleSheet.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]
orbg-[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.