Modifiers

Modifiers are essentially shortcuts used to layout and style RNUILIB's components.
They can be helpful when facing a new design or a complex layout by simplify the style prop composition.
For example, when you want to align sub-components horizontally, instead of writing:
<View style={{flexDirection: 'row'}}>
you will use this ALIGNMENT modifier:
<View row>
The ‘row’ modifier will simply change the view direction from its default direction (column) to a row, horizontal, direction.
Another example is using this TYPOGRAPHY modifier:
<Text text10>Some text</Text>
instead of writing this:
<Text style={{fontFamily: 'Helvetica', fontSize: '64'}}>Some text</Text>

For closer look at the presets run the demo project on a mobile device or simulator.
See this blog post for an elaborate discussion.

Style

The base foundation of each UI component is its style. We use basic style presets to define the rules and the style guide we follow. Our style presetes includes: Colors, Typography, Shadows, Border Radius and more.. You can easily use them anywhere in your code as you would have used any other constant value, or as a component modifier. You can also define your own presets and use them as you would the ui lib ones.
Colors.loadColors({
  pink: '#FF69B4',
  gold: '#FFD700',
});
Typography.loadTypographies({ h1: {fontSize: 26, fontWeight: '300', lineHeight: 80}, });
To generate this text:

Hello World

use this line:
<Text h1 pink>Hello World</Text>

It will use the h1 typography preset and the pink color preset to style the Text element.

Our style presets are translated into modifiers that will help you create a stunning UI easily and quickly.
ModifierDescriptionPresets
AlignmentAligns the component's contentrow, column, spread, centerH, centerV, left, right, top, bottom
FlexThe way the component is stretches inside its parentflex, flexGrow, flexShrink, flex-[value]
MarginComponent's marginsmargin-[value], marginL-[value], marginR-[value], marginT-[value], marginB-[value]
PaddingComponent's paddingpadding-[value], paddingL-[value], paddingR-[value], paddingT-[value], paddingB-[value]
ColorsCan be used to specify a color anywhere needed, like for the component's text color.
For example: green10 = #00A65F
dark[10-80], blue[10-80], cyan[10-80], green[10-80], yellow[10-80], orange[10-80], red[10-80], purple[10-80], violet[10-80]
BackgroundComponent's background color.
Use with a color value. For example: bg-red30
background-[color-value], bg-[color-value]
TypographyComponent's font size.
For example, text10 = 64 font size while text100 = 11 font size
text[10-100]
Border RadiusComponent's border radius.br[0-100]
SpacingComponent's spacing.s[1-10]
Shadows (for iOS)Component's shadow, for dark or light backgrounds.dark[10-40], white[10-40]