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.

The presets includes: Colors, Typography, Shadows, Border Radius and more.

The UILib already comes with a set of predefined constants and presets.

You can easily use it anywhere in your code as you would have used any other constant value, or as a component modifier.

It's also very easy to define your own presets..

import {Typography, Colors} from 'react-native-ui-lib';

Colors.loadColors({
  pink: '#FF69B4',
  gold: '#FFD700',
});

Typography.loadTypographies({
  h1: {fontSize: 58, fontWeight: '300', lineHeight: 80},
  h2: {fontSize: 46, fontWeight: '300', lineHeight: 64},
});

and so for example, the following line

<Text h1 pink>Hello World</Text>

will generate this text

It will use the h1 preset for typography and the pink color value we set to style the Text element.